Skip to content

Commit 77380f9

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Added content to event layout - based almost 100% on the post header.
Changed icon for recent posts to info. Added button to dedicated event's website (if present) in post.html. Styled events page further. Changed project name and title from www.python.org to python.org (fits better on small screens and we all know its a website). Small changes to style in post layout.
1 parent d1fc333 commit 77380f9

File tree

7 files changed

+105
-29
lines changed

7 files changed

+105
-29
lines changed

‎_includes/event_layout.html

+67-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,70 @@
1-
<div class="events-page__event-container">
2-
<div class="row">
3-
<div class="col-12">
4-
<img class="events-page__event-img" src="{{ site.basurl }}/{{ include.post.image }}">
5-
<h2 class="events-page__event-title">{{ include.post.title }}</h2>
1+
{% if include.post.image %}
2+
{% assign image = include.post.image %}
3+
{% else %}
4+
{% assign image = "{{ site.baseurl }}/static/images/events/default_image_800x800px.jpeg" %}
5+
{% endif %}
6+
<style>
7+
.events-page__img-container {
8+
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("{{ site.baseurl }}/{{ image }}");
9+
}
10+
11+
@media (min-width: 769px) {
12+
.events-page__img-container {
13+
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 }}");
14+
}
15+
}
16+
</style>
17+
<div class="row">
18+
<div class="no-gutters__col col-md-12 container-fluid">
19+
<div class="events-page__event-container row">
20+
<div class="events-page__img-container col-md-7 col-sm-12">
21+
<h1 class="post__title">{{ include.post.project }}</h1>
22+
<h2 class="post__subtitle"><em>{{ include.post.project_description }}</em></h2>
23+
</div>
24+
<div class="events-page__event-col col-md-5 col-12">
25+
<div class="row">
26+
<div class="no-gutters__col col-6">
27+
<h2 class="post__label">Event</h2>
28+
</div>
29+
</div>
30+
<div class="row">
31+
<div class="post__event-title col-12">
32+
{{ include.post.title }}
33+
</div>
34+
</div>
35+
36+
<div class="row">
37+
<div class="no-gutters__col col-6">
38+
<h2 class="post__label">Venue</h2>
39+
</div>
40+
</div>
41+
<div class="row">
42+
<div class="post__event-title col-12">
43+
{{ include.post.venue }}
44+
</div>
45+
</div>
46+
47+
<div class="row">
48+
<div class="no-gutters__col col-6">
49+
<h2 class="post__label">Date</h2>
50+
</div>
51+
</div>
52+
<div class="row">
53+
<div class="post__event-title col-12">
54+
{{ include.post.date | date: "%e %B %Y" }}
55+
</div>
56+
</div>
57+
<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>
66+
</div>
67+
</div>
668
</div>
769
</div>
870
</div>

‎_includes/recent_event_inner_layout.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="events__img-container">
44
<div class="events__img-overlay">
55
<a class="events__link" href="{{ include.item.url }}">
6-
<i class="events__icon fas fa-external-link-square-alt"></i>
6+
<i class="events__icon fas fa-info-circle"></i>
77
</a>
88
<div class="events__title-container">
99
<h2 class="events__img-title">Event: {{ include.item.title }}</h2>

‎_layouts/post.html

+5
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ <h2 class="post__label">Date</h2>
6666
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.meetup_link }}">
6767
<i class="post__icon fab fa-meetup"></i>
6868
</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 %}
6974
</div>
7075
</div>
7176
</div>

‎_pages/03_events.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h2 class="events-page__page-subtitle">See what's coming up and what we did rece
3030

3131
<div class="events-page__outer-container container-fluid">
3232
<div class="row">
33-
<div class="col-12">
33+
<div class="col-12 no-padding-x">
3434
<h2 class="events-page__upcoming-section-title">Upcoming Events</h2>
3535
{% include events_array_generator.html future_events = true %}
3636
{% for post in posts %}

‎_posts/2017-11-01-www.python.org-Part1.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: www.python.org (Part 1)
4-
project: www.python.org
3+
title: python.org (Part 1)
4+
project: python.org
55
project_description: Official Python Software Foundation website
66
date: 2017-11-01
77
venue: Bloomberg

‎_sass/events.scss

+21-14
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,35 @@
2222
@extend .section-title;
2323
}
2424

25-
.events-page__outer-container {
26-
max-width: 80vw;
25+
@media (min-width: 768px) {
26+
.events-page__outer-container {
27+
max-width: 80vw;
28+
}
2729
}
2830

2931
.events-page__event-container {
30-
background: $event-background;
31-
min-height: 30vh;
3232
margin-top: 2.5%;
3333
margin-bottom: 2.5%;
34-
border-radius: 5px;
3534
}
3635

37-
.events-page__event-img {
38-
float: left;
39-
max-width: 30%;
40-
padding: 1%;
41-
36+
.events-page__img-container {
37+
@extend .post__img-container;
38+
border-top-left-radius: 5px;
39+
border-top-right-radius: 5px;
4240
}
4341

44-
.events-page__event-title {
45-
@extend .title-light;
46-
font-size: 1.5em;
47-
padding: 1%;
42+
.events-page__event-col {
43+
@extend .post__event-col;
44+
border-bottom-left-radius: 5px;
45+
border-bottom-right-radius: 5px;
46+
}
4847

48+
@media (min-width: 768px) {
49+
.events-page__img-container {
50+
border-radius: 5px 0 0 5px;
51+
}
52+
.events-page__event-col {
53+
border-radius: 0 5px 5px 0;
54+
}
4955
}
56+

‎_sass/post.scss

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
.post__img-container {
66
background-size: cover;
77
background-position: center center;
8-
height: 65vh;
8+
min-height: 100%;
99
}
1010

1111
.post__title {
1212
@extend .title-light;
13-
padding-top: 25vh;
13+
word-break: break-all;
14+
padding-top: 20vh;
1415
text-align: center;
1516
font-size: 3em;
1617
}
@@ -44,10 +45,11 @@
4445

4546
.post__button {
4647
@extend .button-standard;
47-
min-width: 50%;
48+
min-width: 40%;
4849
font-size: 1.25em;
49-
margin-top: 0.5em;
50-
margin-bottom: 1em;
50+
//margin-top: 0.5em;
51+
//margin-bottom: 1em;
52+
margin: 0.5em 0.5em 1em 0.5em;
5153
&:hover > .post__icon {
5254
color: $button-text-hover;
5355
}
@@ -56,7 +58,7 @@
5658
.post__icon {
5759
text-align: center;
5860
color: $button-text;
59-
font-size: 1.5em;
61+
font-size: 1.25em;
6062
transition: all 0.5s ease-in;
6163
min-width: 100%;
6264
min-height: 100%;

0 commit comments

Comments
 (0)