Skip to content

Commit f79cd8e

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Merge branch 'add_content_to_events_page'
2 parents db54d2c + c0bf34c commit f79cd8e

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)