Skip to content

Commit c0bf34c

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Fixed setting background image for events in event_layout.html - they were being set on the same class overriding the multiple instances due to for loop.
Now the background image is set on a div with an id made up of unique post id (generated automatically by jekyll). Reworked how buttons are displayed in event view to two columns on large screen and one column on mobiles. Introduced similar setup in post layout, in case no dedicated website for an event is present - only one button will be shown. Styled post layout and events page.
1 parent 7eb9a45 commit c0bf34c

File tree

4 files changed

+99
-30
lines changed

4 files changed

+99
-30
lines changed

‎_includes/event_layout.html‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
1+
{% comment %}
2+
Please note that css will not accept an id starting with a number which is
3+
what post.id starts with (date) or containing "."
4+
I also remove "/" to make the id more readable.
5+
{% endcomment %}
6+
7+
{% assign post_id = include.post.id | remove: "/" | remove: "." | prepend: "_" %}
8+
{% assign post_id_selector = post_id | prepend: "#" %}
19
{% if include.post.image %}
210
{% assign image = include.post.image %}
311
{% else %}
4-
{% assign image = "{{ site.baseurl }}/static/images/events/default_image_800x800px.jpeg" %}
12+
{% assign image = "static/images/events/default_image_800x800px.jpeg" %}
513
{% endif %}
614
<style>
7-
.events-page__img-container {
15+
{{ post_id_selector }} {
816
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("{{ site.baseurl }}/{{ image }}");
917
}
10-
1118
@media (min-width: 769px) {
12-
.events-page__img-container {
19+
{{ post_id_selector }} {
1320
background-image: linear-gradient(75deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.6) 80%, black 87%, black 100%), url("{{ site.baseurl }}/{{ image }}");
1421
}
1522
}
1623
</style>
1724
<div class="row">
1825
<div class="no-gutters__col col-md-12 container-fluid">
1926
<div class="events-page__event-container row">
20-
<div class="events-page__img-container col-md-7 col-sm-12">
27+
<div id="{{ post_id }}" class="events-page__img-container col-md-7 col-sm-12">
2128
<h1 class="post__title">{{ include.post.project }}</h1>
2229
<h2 class="post__subtitle"><em>{{ include.post.project_description }}</em></h2>
2330
</div>
@@ -55,13 +62,19 @@ <h2 class="post__label">Date</h2>
5562
</div>
5663
</div>
5764
<div class="row">
58-
<div class="post__button-col col-12">
59-
<a class="post__button btn btn-primary btn-lg text-center" href="{{ include.post.meetup_link }}">
60-
<i class="post__icon fab fa-meetup"></i>
61-
</a>
62-
<a class="post__button btn btn-primary btn-lg text-center" href="{{ include.post.url }}">
63-
<i class="post__icon fas fa-info-circle"></i>
64-
</a>
65+
<div class="events-page__button-col col-12 no-padding-x">
66+
<div class="row">
67+
<div class="col-lg-6 text-center">
68+
<a class="post__button btn btn-primary btn-lg text-center" href="{{ include.post.meetup_link }}">
69+
<i class="post__icon fab fa-meetup"></i>
70+
</a>
71+
</div>
72+
<div class="col-lg-6 text-center">
73+
<a class="post__button btn btn-primary btn-lg text-center" href="{{ include.post.url }}">
74+
<i class="post__icon fas fa-info-circle"></i>
75+
</a>
76+
</div>
77+
</div>
6578
</div>
6679
</div>
6780
</div>

‎_layouts/post.html‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,54 @@ <h2 class="post__label">Date</h2>
6161
{{ page.date | date: "%e %B %Y" }}
6262
</div>
6363
</div>
64+
6465
<div class="row">
65-
<div class="post__button-col col-12">
66-
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.meetup_link }}">
67-
<i class="post__icon fab fa-meetup"></i>
68-
</a>
69-
{% if page.event_link %}
70-
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.event_link }}">
71-
<i class="post__icon fas fa-external-link-square-alt"></i>
72-
</a>
73-
{% endif %}
66+
<div class="post__button-col col-12 no-padding-x">
67+
<div class="row">
68+
{% if page.event_link %}
69+
{% assign meetup_col_class = "col-lg-6" %}
70+
{% assign meetup_button_class = "post__button" %}
71+
{% else %}
72+
{% assign meetup_col_class = "col-12" %}
73+
{% assign meetup_button_class = "post__button-solo" %}
74+
{% endif %}
75+
<div class="{{ meetup_col_class }} text-center">
76+
<a class="{{ meetup_button_class }} btn btn-primary btn-lg text-center" href="{{ page.meetup_link }}">
77+
<i class="post__icon fab fa-meetup"></i>
78+
</a>
79+
</div>
80+
{% if page.event_link %}
81+
<div class="col-lg-6 text-center">
82+
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.event_link }}">
83+
<i class="post__icon fas fa-external-link-square-alt"></i>
84+
</a>
85+
</div>
86+
{% endif %}
87+
</div>
7488
</div>
7589
</div>
90+
91+
92+
93+
<!--<div class="row">-->
94+
<!--<div class="post__button-col col-12">-->
95+
<!--<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.meetup_link }}">-->
96+
<!--<i class="post__icon fab fa-meetup"></i>-->
97+
<!--</a>-->
98+
<!--{% if page.event_link %}-->
99+
<!--<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.event_link }}">-->
100+
<!--<i class="post__icon fas fa-external-link-square-alt"></i>-->
101+
<!--</a>-->
102+
<!--{% endif %}-->
103+
<!--</div>-->
104+
<!--</div>-->
105+
106+
107+
108+
109+
110+
111+
76112
</div>
77113
</div>
78114
</div>

‎_sass/events.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,6 @@
5656
}
5757
}
5858

59+
.events-page__button-col {
60+
@extend .post__button-col;
61+
}

‎_sass/post.scss‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.post__title {
1212
@extend .title-light;
1313
word-break: break-all;
14-
padding-top: 20vh;
14+
padding-top: 15vh;
1515
text-align: center;
1616
font-size: 3em;
1717
}
@@ -38,18 +38,25 @@
3838
}
3939

4040
.post__button-col {
41-
margin-top: 4%;
42-
margin-bottom: 2%;
41+
margin-bottom: 1em;
4342
text-align: center;
4443
}
4544

4645
.post__button {
4746
@extend .button-standard;
48-
min-width: 40%;
49-
font-size: 1.25em;
50-
//margin-top: 0.5em;
51-
//margin-bottom: 1em;
52-
margin: 0.5em 0.5em 1em 0.5em;
47+
min-width: 75%;
48+
font-size: 1.5em;
49+
margin: 1em auto 0 auto;
50+
&:hover > .post__icon {
51+
color: $button-text-hover;
52+
}
53+
}
54+
55+
.post__button-solo {
56+
@extend .button-standard;
57+
min-width: 50%;
58+
font-size: 1.5em;
59+
margin: 1em auto 0 auto;
5360
&:hover > .post__icon {
5461
color: $button-text-hover;
5562
}
@@ -58,12 +65,22 @@
5865
.post__icon {
5966
text-align: center;
6067
color: $button-text;
61-
font-size: 1.25em;
68+
font-size: 1.5em;
6269
transition: all 0.5s ease-in;
6370
min-width: 100%;
6471
min-height: 100%;
6572
}
6673

74+
@media (min-width: 768px) {
75+
.post__button {
76+
font-size: 1.25em;
77+
min-width: 100%;
78+
}
79+
.post__icon {
80+
font-size: 1.25em;
81+
}
82+
}
83+
6784
.post__content {
6885
padding-left: 10%;
6986
padding-right: 10%;

0 commit comments

Comments
 (0)