Skip to content

Commit be2fbca

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Changed container for post__label to col-6 to unify look across the site.
Rearranged upcoming event look and added necessary styles (index.html and style.scss).
1 parent bb01dec commit be2fbca

File tree

4 files changed

+92
-69
lines changed

4 files changed

+92
-69
lines changed

‎_layouts/post.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,13 @@
2424
<div class="row">
2525
<div class="no-gutters__col col-md-12 container-fluid">
2626
<div class="row">
27-
2827
<div class="post__img-container col-md-7 col-sm-12">
2928
<h1 class="post__title">{{ page.project }}</h1>
3029
<h2 class="post__subtitle"><em>{{ page.project_description }}</em></h2>
3130
</div>
3231
<div class="post__event-col col-md-5 col-12">
3332
<div class="row">
34-
<div class="no-gutters__col col-3">
33+
<div class="no-gutters__col col-6">
3534
<h2 class="post__label">Event</h2>
3635
</div>
3736
</div>
@@ -42,7 +41,7 @@ <h2 class="post__label">Event</h2>
4241
</div>
4342

4443
<div class="row">
45-
<div class="no-gutters__col col-3">
44+
<div class="no-gutters__col col-6">
4645
<h2 class="post__label">Venue</h2>
4746
</div>
4847
</div>
@@ -53,7 +52,7 @@ <h2 class="post__label">Venue</h2>
5352
</div>
5453

5554
<div class="row">
56-
<div class="no-gutters__col col-3">
55+
<div class="no-gutters__col col-6">
5756
<h2 class="post__label">Date</h2>
5857
</div>
5958
</div>
@@ -82,7 +81,6 @@ <h1 class="post__content-title">{{ page.title }}</h1>
8281
<h1 class="post__content-title">Event's sponsors</h1>
8382
</div>
8483
</div>
85-
8684
{% for sponsor in page.sponsors %}
8785
{% assign sponsor_obj = site.sponsors | where:"sponsor_id", sponsor | first %}
8886
<div class="row flex-nowrap">

‎_sass/post.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@
3434
font-family: 'Encode Sans Expanded', sans-serif;
3535
background: linear-gradient(45deg, #818181, #818181 80%, transparent 80%, transparent 100%);
3636
font-size: 1.25em;
37+
text-align: left;
3738
color: #072948;
3839
border-top-left-radius: 5px;
39-
padding-left: 0.25em;
40-
padding-right: 0.25em;
40+
padding: 0.15em 0.25em;
4141
margin-top: 0.5em;
4242
margin-bottom: 0;
4343
min-width: 5em;
4444
}
4545

4646
.post__event-title {
4747
background: rgba(7, 41, 72, 0.52);
48-
border: #072948 2px ridge;
48+
border: #072948 2px groove;
4949
font-size: 1.25em;
5050
font-family: 'Encode Sans Expanded', sans-serif;
5151
color: antiquewhite;

‎_sass/style.scss

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ a {
3535
padding-right: 0;
3636
}
3737

38+
.no-padding-x {
39+
padding-left: 0;
40+
padding-right: 0;
41+
}
42+
43+
.with-padding-x {
44+
padding-left: 15px;
45+
padding-right: 15px;
46+
}
47+
3848
/* Classes to change order of collapsed columns on mobiles*/
3949
@media (max-width: 767px) {
4050
.first-on-mobile {
@@ -299,28 +309,37 @@ a {
299309
.upcoming__col {
300310
background: rgba(0, 0, 0, 0.7);
301311
border-radius: 5px;
302-
border: #000000 2px ridge;
312+
border: #000000 2px groove;
303313
box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
314+
min-height: 100%;
304315
}
305316

306317
@media (min-width: 768px) {
307318
.upcoming__col {
308-
margin-left: 5.5%;
319+
margin-left: auto;
320+
margin-right: auto;
309321
}
310322
}
311323

312324
.upcoming__title {
325+
width: 100%;
326+
background: rgba(0, 0, 0, 0.9);
313327
font-size: 2.5em;
314328
color: antiquewhite;
315329
text-align: center;
316330
font-family: 'Encode Sans Expanded', sans-serif;
317-
margin-top: 2.5%;
331+
margin-top: 0;
318332
margin-bottom: 2.5%;
333+
padding-top: 0.5em;
334+
padding-bottom: 0.5em;
335+
border-top-left-radius: 20px;
336+
border-top-right-radius: 20px;
337+
border-bottom: rgba(250, 235, 215, 0.85) 1px solid;
319338
}
320339

321340
.upcoming__event-title {
322341
background: rgba(7, 41, 72, 0.7);
323-
border: #072948 2px ridge;
342+
border: #072948 2px groove;
324343
font-size: 1.25em;
325344
font-family: 'Encode Sans Expanded', sans-serif;
326345
color: antiquewhite;
@@ -347,6 +366,8 @@ a {
347366
padding-right: 0;
348367
padding-left: 0;
349368
margin-top: 1em;
369+
border: #072948 2px groove;
370+
border-radius: 5px;
350371
box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
351372
}
352373

@@ -357,7 +378,6 @@ a {
357378
}
358379
}
359380

360-
361381
.upcoming__project-logo {
362382
margin: 0.5em;
363383
border: #A55605 3px double;
@@ -367,15 +387,12 @@ a {
367387

368388
.upcoming__sponsor-list {
369389
background: rgba(7, 41, 72, 0.7);
370-
border: #072948 2px ridge;
371-
border-radius: 5px;
372390
}
373391

374392
.upcoming__sponsor-title {
375393
color: antiquewhite;
376394
font-family: 'Encode Sans Expanded', sans-serif;
377-
font-size: 2.5em;
378-
padding-top: 2.5%;
395+
font-size: 1.25em;
379396
margin-bottom: 2.5%;
380397
}
381398

‎index.html

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,16 @@ <h3 class="mission__statement">Provide mentorship and challenge for people of al
5151
<section class="upcoming">
5252
<div class="row container-fluid">
5353
<hr class="upcoming-divider">
54-
<div class="upcoming__img-container col-md-12">
55-
<div class="upcoming__content row">
56-
<div class="upcoming__col col-md-5 col-12 mr-auto">
54+
<div class="upcoming__img-container col-md-12 no-padding-x">
55+
<div class="row">
56+
<div class="col-12 no-padding-x">
5757
<h2 class="upcoming__title">Upcoming Event</h2>
58+
</div>
59+
</div>
60+
<div class="upcoming__content row with-padding-x">
61+
<div class="upcoming__col col-md-5 col-12 mr-auto">
5862
<div class="row">
59-
<div class="no-gutters__col col-3">
63+
<div class="no-gutters__col col-6">
6064
<h2 class="post__label">Event</h2>
6165
</div>
6266
</div>
@@ -65,9 +69,8 @@ <h2 class="post__label">Event</h2>
6569
{{ post.title }}
6670
</div>
6771
</div>
68-
6972
<div class="row">
70-
<div class="no-gutters__col col-3">
73+
<div class="no-gutters__col col-6">
7174
<h2 class="post__label">Venue</h2>
7275
</div>
7376
</div>
@@ -77,7 +80,7 @@ <h2 class="post__label">Venue</h2>
7780
</div>
7881
</div>
7982
<div class="row">
80-
<div class="no-gutters__col col-3">
83+
<div class="no-gutters__col col-6">
8184
<h2 class="post__label">Date</h2>
8285
</div>
8386
</div>
@@ -88,7 +91,7 @@ <h2 class="post__label">Date</h2>
8891
</div>
8992
{% if post.project_logo %}
9093
<div class="row">
91-
<div class="no-gutters__col col-3">
94+
<div class="no-gutters__col col-6">
9295
<h2 class="post__label">Project</h2>
9396
</div>
9497
</div>
@@ -101,56 +104,61 @@ <h2 class="post__label">Project</h2>
101104
</div>
102105
{% endif %}
103106
</div>
104-
<div class="upcoming__logo-col col-md-5 text-center">
105-
<div class="upcoming__sponsor-list h-100">
106-
<h2 class="upcoming__sponsor-title">Supported By</h2>
107-
<!--HERE feed event sponsors only - we need sponsor objects not just the name.-->
108-
<!--Build an array of site sponsors (all).-->
109-
{% assign site_sponsors_all = "" | split: ',' %}
110-
{% for sponsor in site.sponsors %}
111-
{% assign site_sponsors_all = site_sponsors_all | push: sponsor %}
112-
{% endfor %}
107+
<div class="upcoming__col col-md-5 text-center">
113108

114-
<!--Build an array of sponsors for the event.-->
115-
{% assign event_sponsors = "" | split: ',' %}
116-
{% for sponsor in post.sponsors %}
117-
{% for site_sponsor in site_sponsors_all %}
118-
{% if site_sponsor.sponsor_id == sponsor %}
119-
{% assign event_sponsors = event_sponsors | push: site_sponsor %}
120-
{% endif %}
109+
<div class="row">
110+
<div class="no-gutters__col col-6">
111+
<h2 class="post__label">Supported by</h2>
112+
</div>
113+
</div>
114+
<div class="row">
115+
<div class="upcoming__event-title col-12">
116+
{% assign site_sponsors_all = "" | split: ',' %}
117+
{% for sponsor in site.sponsors %}
118+
{% assign site_sponsors_all = site_sponsors_all | push: sponsor %}
121119
{% endfor %}
122-
{% endfor %}
123120

124-
{% assign num_of_sponsors = event_sponsors | size %}
125-
{% assign sponsors_remainder = num_of_sponsors | modulo: 2 %}
126-
127-
{% if sponsors_remainder == 0 %}
128-
{% assign num_of_sponsors_even = true %}
129-
{% assign row_num_modifier = 1 %}
130-
{% else %}
131-
{% assign num_of_sponsors_even = false %}
132-
{% assign row_num_modifier = 0 %}
133-
{% endif %}
121+
<!--Build an array of sponsors for the event.-->
122+
{% assign event_sponsors = "" | split: ',' %}
123+
{% for sponsor in post.sponsors %}
124+
{% for site_sponsor in site_sponsors_all %}
125+
{% if site_sponsor.sponsor_id == sponsor %}
126+
{% assign event_sponsors = event_sponsors | push: site_sponsor %}
127+
{% endif %}
128+
{% endfor %}
129+
{% endfor %}
134130

135-
{% assign num_of_rows = num_of_sponsors | divided_by: 2 | floor | minus: row_num_modifier %}
136-
{% assign items_per_row = 1 %}
131+
{% assign num_of_sponsors = event_sponsors | size %}
132+
{% assign sponsors_remainder = num_of_sponsors | modulo: 2 %}
137133

138-
{% for row in (0..num_of_rows) %}
139-
{% if forloop.last and num_of_sponsors_even == false %}
140-
{% assign items_per_row = 0 %}
134+
{% if sponsors_remainder == 0 %}
135+
{% assign num_of_sponsors_even = true %}
136+
{% assign row_num_modifier = 1 %}
137+
{% else %}
138+
{% assign num_of_sponsors_even = false %}
139+
{% assign row_num_modifier = 0 %}
141140
{% endif %}
142-
<div class="row">
143-
{% for col in (0..items_per_row) %}
144-
{% assign sponsor_index = row | times: 2 | plus: col %}
145-
{% assign sponsor = event_sponsors[sponsor_index] %}
146-
<div class="footer__sponsor-col col-md-12 col-lg-6">
147-
<a class="footer__sponsor-link" href="{{ sponsor.sponsor_link }}">
148-
<img class="footer__img" src="{{ site.baseurl }}/{{ sponsor.sponsor_logo }}">
149-
</a>
150-
</div>
151-
{% endfor %}
152-
</div>
153-
{% endfor %}
141+
142+
{% assign num_of_rows = num_of_sponsors | divided_by: 2 | floor | minus: row_num_modifier %}
143+
{% assign items_per_row = 1 %}
144+
145+
{% for row in (0..num_of_rows) %}
146+
{% if forloop.last and num_of_sponsors_even == false %}
147+
{% assign items_per_row = 0 %}
148+
{% endif %}
149+
<div class="row">
150+
{% for col in (0..items_per_row) %}
151+
{% assign sponsor_index = row | times: 2 | plus: col %}
152+
{% assign sponsor = event_sponsors[sponsor_index] %}
153+
<div class="footer__sponsor-col col-md-12 col-lg-6">
154+
<a class="footer__sponsor-link" href="{{ sponsor.sponsor_link }}">
155+
<img class="footer__img" src="{{ site.baseurl }}/{{ sponsor.sponsor_logo }}">
156+
</a>
157+
</div>
158+
{% endfor %}
159+
</div>
160+
{% endfor %}
161+
</div>
154162
</div>
155163
</div>
156164
</div>

0 commit comments

Comments
 (0)