Skip to content

Commit 192fa76

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Removed bug from event.html which was displaying counter on the actual rendered page (increment from liquid).
Replaced it with a normal variable. Started working on events.html. Reorganised css into base, typography, buttons, style (for index.html) and individual style sheets for each sub-page. Started using class inheritance of Sass to avoid copying same styles and give easy site-wide option to amend looks. Changed some classes names in index.html to match new css rules.
1 parent eacb497 commit 192fa76

File tree

12 files changed

+322
-211
lines changed

12 files changed

+322
-211
lines changed

‎_includes/event.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ <h2 class="section-title">Recent Events</h2>
1212
from displaying in the past ones.
1313
{% endcomment %}
1414

15+
{% assign post_count = 0 %}
1516
{% assign curDate = site.time | date: "%s" %}
1617
{% assign last_4_posts = "" | split: ',' %}
1718
{% for post in site.posts %}
1819
{% assign postStartDate = post.date | date: "%s" %}
1920
{% if postStartDate <= curDate %}
2021
{% assign last_4_posts = last_4_posts | push: post %}
21-
{% increment post_count %}
22+
{% assign post_count = post_count | plus: 1 %}
2223
{% endif %}
2324
{% if post_count == 4 %}
2425
{% break %}

‎_pages/03_events.html

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,62 @@
44
permalink: /events/
55
---
66

7-
<h1>This is the content of the Events page</h1>
8-
<h2>Fill it in !!!!</h2>
7+
<style>
8+
.events-page__background-img {
9+
background-size: contain;
10+
background: linear-gradient(90deg,
11+
rgba(0, 0, 0, 0.75),
12+
rgba(0, 0, 0, 0.75)),
13+
url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
14+
}
15+
</style>
16+
17+
18+
<section class="events-page">
19+
<div class="events-page__background-img">
20+
<div class="row container-fluid">
21+
<div class="col-sm-12">
22+
<h2 class="section-title page__title">Events</h2>
23+
<h3 class="page__subtitle">See what's coming up. Check what we did recently</h3>
24+
</div>
25+
</div>
26+
</div>
27+
<!--Contact form-->
28+
<form class="contact__form container" method="POST" action="//formspree.io/[email protected]" role="form">
29+
<div class="row">
30+
<div class="col-md-6">
31+
<div class="form-group">
32+
<label class="contact__label" for="contact__form-name">Full Name *</label>
33+
<input id="contact__form-name" type="text" name="name" class="form-control" placeholder="Please enter your full name *" required="required" data-error="Full name is required.">
34+
<div class="help-block with-errors"></div>
35+
</div>
36+
</div>
37+
<div class="col-md-6">
38+
<div class="form-group">
39+
<label class="contact__label" for="contact__form-email">Email *</label>
40+
<input id="contact__form-email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div class="row">
46+
<div class="col-md-12">
47+
<div class="form-group">
48+
<label class="contact__label" for="contact__form-message">Message *</label>
49+
<textarea id="contact__form-message" name="message" class="form-control" placeholder="Message *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
50+
<div class="help-block with-errors"></div>
51+
</div>
52+
</div>
53+
<div class="col-md-12 text-center">
54+
<input type="text" name="_gotcha" style="display: none">
55+
<input type="hidden" name="_subject" value="Message from Python Sprints">
56+
<button type="submit" class="contact__submit-button btn btn-success btn-send btn-lg">Send Message<span class="contact__icon"><i class="fas fa-envelope"></i></span></button>
57+
</div>
58+
</div>
59+
<div class="row">
60+
<div class="col-md-12">
61+
<p class="text-muted"><strong>*</strong> Required fields</p>
62+
</div>
63+
</div>
64+
</form>
65+
</section>

‎_pages/04_contact.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
<div class="contact__background-img">
2020
<div class="row container-fluid">
2121
<div class="col-sm-12">
22-
<h2 class="section-title contact__title">Contact Us</h2>
23-
<h3 class="contact__subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
22+
<h2 class="contact__section-title">Contact Us</h2>
23+
<h3 class="contact__section-subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
2424
</div>
2525
</div>
2626
</div>

‎_sass/base.scss

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*Colors In Use*/
2+
/*aliceblue - site's background color, footer section titles*/
3+
/*antiquewhite - title of images in events*/
4+
/*#818181 - grey, full screen navigation links, not hovered*/
5+
/*#F1F1F1 - pale white, full screen navigation links hovered*/
6+
/*#072948 - dark blue, main titles*/
7+
/*#7FA0C2 - light blue, some accents, footer links*/
8+
/*#035E9A - strong blue, borders*/
9+
/*#A55605 - orange-brown, hover in the footer*/
10+
11+
$light-white: #F0F8FF;
12+
$old-white: #FAEBD7;
13+
$bright-white: #F1F1F1;
14+
$grey: #818181;
15+
$light-blue: #7FA0C2;
16+
$blue: #035E9A;
17+
$dark-blue: #072948;
18+
$very-dark-blue: #041729;
19+
$orange: #A55605;
20+
$black: #000000;
21+
22+
$main-background: #F0F8FF;
23+
$background-dark: #072948;
24+
25+
$page-title: #FAEBD7;
26+
$page-subtitle: #A55605;
27+
$section-title-light: #F0F8FF;
28+
$section-title-dark: #072948;
29+
$title-light: #FAEBD7;
30+
$title-dark: #072948;
31+
$subtitle: #A55605;
32+
$subtitle-event: #035E9A;
33+
$paragraph-dark: #000000;
34+
35+
$link: #035E9A;
36+
$link-hover: #A55605;
37+
38+
$brand-name: #FAEBD7;
39+
$nav-link: #818181;
40+
$nav-link-hover: #F1F1F1;
41+
$nav-active: #035E9A;
42+
$nav-button-close: #818181;
43+
$nav-button-close-hover: #F1F1F1;
44+
45+
$button-background: rgba(7, 41, 72, 0.6);
46+
$button-text: #7FA0C2;
47+
$button-border: #035E9A 1px solid;
48+
$button-background-hover: rgba(0, 0, 0, 0.4);
49+
$button-text-hover: #FAEBD7;
50+
$button-border-hover: #A55605 1px solid;
51+
52+
$footer-link: #7FA0C2;
53+
$footer-text: #7FA0C2;
54+
$footer-title: #F0F8FF;
55+
$footer-background: #072948;
56+
57+
$form-label-text: #FAEBD7;

‎_sass/buttons.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.button-standard {
2+
font-size: 1.5em;
3+
font-family: 'Playfair Display', serif;
4+
background: $button-background;
5+
color: $button-text;
6+
border: $button-border;
7+
min-width: 30%;
8+
transition: all 0.5s ease-in-out;
9+
&:hover {
10+
color: $button-text-hover;
11+
background: $button-background-hover;
12+
border: $button-border-hover;
13+
}
14+
}

‎_sass/contact.scss

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
}
1515
}
1616

17-
.contact .contact__title {
17+
.contact__section-title {
18+
@extend .section-title-light;
1819
margin-top: 20vh;
19-
color: antiquewhite;
20+
color: $page-title;
2021
}
2122

22-
.contact__subtitle {
23+
.contact__section-subtitle {
24+
@extend .subtitle;
2325
font-size: 1.75em;
2426
text-align: center;
25-
font-family: 'Playfair Display', serif;
26-
color: #A55605;
2727
margin-bottom: 10vh;
2828
}
2929

@@ -33,12 +33,12 @@
3333
background: linear-gradient(180deg,
3434
rgba(0, 0, 0, 0.75),
3535
rgba(7, 41, 72, 0.85) 50%,
36-
#072948 100%);
36+
$dark-blue 100%);
3737
height: 100%;
3838
}
3939

4040
.contact__label {
41-
color: antiquewhite;
41+
color: $form-label-text;
4242
}
4343

4444
.form-group {
@@ -55,29 +55,16 @@
5555
}
5656

5757
.contact__submit-button {
58+
@extend .button-standard;
5859
margin-top: 2em;
59-
min-width: 10em;
6060
font-size: 1.25em;
61-
font-family: 'Playfair Display', serif;
62-
text-align: center;
63-
background: #072948;
64-
border: #035E9A 2px ridge;
65-
transition: all 0.5s ease-in;
66-
color: #7FA0C2;
67-
&:hover {
68-
text-align: center;
69-
background: rgba(7, 41, 72, 0.53);
70-
border: #A55605 2px ridge;
71-
color: antiquewhite;
72-
73-
}
7461
&:hover > .contact__icon {
75-
color: antiquewhite;
62+
color: $old-white;
7663
}
7764
}
7865

7966
.contact__icon {
8067
transition: all 0.5s ease-in;
8168
margin-left: 5%;
82-
color: #7FA0C2;
69+
color: $light-blue;
8370
}

‎_sass/events.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.events-page {
2+
margin-top: -66px;
3+
}
4+
5+
.events-page__background-img {
6+
@extend .contact__background-img
7+
}

‎_sass/post.scss

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,16 @@
99
}
1010

1111
.post__title {
12+
@extend .title-light;
1213
padding-top: 25vh;
1314
text-align: center;
1415
font-size: 3em;
15-
font-family: 'Encode Sans Expanded', sans-serif;
16-
color: antiquewhite;
1716
}
1817
.post__subtitle {
18+
@extend .subtitle;
1919
padding-top: 1%;
2020
text-align: center;
2121
font-size: 1.25em;
22-
font-family: 'Encode Sans Expanded', sans-serif;
23-
color: #818181;
2422
}
2523

2624
.post__event-col {
@@ -31,27 +29,11 @@
3129
}
3230

3331
.post__label {
34-
font-family: 'Encode Sans Expanded', sans-serif;
35-
background: linear-gradient(45deg, #818181, #818181 80%, transparent 80%, transparent 100%);
36-
font-size: 1.25em;
37-
text-align: left;
38-
color: #072948;
39-
border-top-left-radius: 5px;
40-
padding: 0.15em 0.25em;
41-
margin-top: 0.5em;
42-
margin-bottom: 0;
43-
min-width: 5em;
32+
@extend .event-label;
4433
}
4534

4635
.post__event-title {
47-
background: rgba(7, 41, 72, 0.52);
48-
border: #072948 2px groove;
49-
font-size: 1.25em;
50-
font-family: 'Encode Sans Expanded', sans-serif;
51-
color: antiquewhite;
52-
padding-left: 0.25em;
53-
margin-right: 0.25em;
54-
border-radius: 0 5px 5px 5px;
36+
@extend .event-title;
5537
}
5638

5739
.post__button-col {
@@ -61,26 +43,17 @@
6143
}
6244

6345
.post__button {
64-
min-width: 10em;
46+
@extend .button-standard;
47+
min-width: 50%;
6548
font-size: 1.25em;
66-
font-family: 'Playfair Display', serif;
67-
text-align: center;
68-
background: #072948;
69-
border: #035E9A 2px ridge;
70-
transition: all 0.5s ease-in;
71-
&:hover {
72-
text-align: center;
73-
background: rgba(7, 41, 72, 0.53);
74-
border: #A55605 2px ridge;
75-
}
7649
&:hover > .post__icon {
77-
color: antiquewhite;
50+
color: $button-text-hover;
7851
}
7952
}
8053

8154
.post__icon {
8255
text-align: center;
83-
color: #7FA0C2;
56+
color: $button-text;
8457
font-size: 1.5em;
8558
transition: all 0.5s ease-in;
8659
min-width: 100%;
@@ -93,11 +66,10 @@
9366
}
9467

9568
.post__content-title {
69+
@extend .title-dark;
9670
margin-top: 5%;
9771
margin-bottom: 2.5%;
9872
font-size: 2em;
99-
font-family: 'Encode Sans Expanded', sans-serif;
100-
color: #072948;
10173
}
10274

10375
.post__sponsor-col {
@@ -136,25 +108,24 @@
136108

137109
.post__divider {
138110
margin-top: 5%;
139-
border-top: #072948 2px ridge;
111+
border-top: $dark-blue 2px ridge;
140112
width: 10%;
141113
}
142114

143115
.post__sponsor-name {
116+
@extend .title-dark;
144117
margin-top: 0.5em;
145118
line-height: 1em;
146119
text-align: center;
147-
font-family: 'Encode Sans Expanded', sans-serif;
148120
font-size: 1.25em;
149-
color: #072948;
150121
}
151122

152123
.post__sponsor-link {
153124
display: inline-block;
154125
width: 100%;
155-
background: #041729;
126+
background: $very-dark-blue;
156127
border-radius: 5px;
157-
border: #7fa0c2 1px solid;
128+
border: $light-blue 1px solid;
158129
text-align: center;
159130
line-height: 102px;
160131
}

0 commit comments

Comments
 (0)