Skip to content

Commit 8f64bda

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Further work on post layout.
Changed all css files to scss.
1 parent c0fe377 commit 8f64bda

File tree

7 files changed

+177
-557
lines changed

7 files changed

+177
-557
lines changed

‎_includes/event.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2 class="section-title">Recent Events</h2>
4343
<i class="events__icon fas fa-external-link-square-alt"></i>
4444
</a>
4545
<div class="events__title-container">
46-
<h2 class="events__img-title">Project: {{ post.title }}</h2>
46+
<h2 class="events__img-title">Event: {{ post.title }}</h2>
4747
<p class="events__img-subtitle">{{ post.venue }}, {{ post.date | date: "%e %B %Y" }}</p>
4848
</div>
4949
</div>

‎_includes/head.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
77
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
88
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9-
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/static/css/typography.css">
10-
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/static/css/style.css">
11-
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/static/css/post.css">
9+
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/static/css/main.css">
1210
<title>
1311
{% if page.title %}
1412
Python Sprints - {{ page.title }}

‎_layouts/post.html‎

Lines changed: 72 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,89 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
{% include head.html %}
4+
<style>
5+
.post__img-container {
6+
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("{{ site.baseurl }}/{{ page.image }}");
7+
}
8+
9+
@media (min-width: 769px) {
10+
.post__img-container {
11+
background-image: linear-gradient(75deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.5) 80%, black 87%, black 100%), url("{{ site.baseurl }}/{{ page.image }}");
12+
}
13+
}
14+
</style>
415
<body class="body">
516
{% include navigation.html %}
617
<main>
718
<article class="post">
819
{% if page.image %}
920
<div class="row">
10-
<div class="no-gutters__col col-md-12">
11-
<div class="post_img-container container-fluid" style='background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("{{ site.baseurl }}/{{ page.image }}");'>
12-
<h1 class="post__title">{{ page.title }}</h1>
13-
<h2 class="post__subtitle"><em>{{ page.project_description }}</em></h2>
21+
<div class="no-gutters__col col-md-12 container-fluid">
22+
<div class="row">
23+
24+
<div class="post__img-container col-md-7 col-sm-12">
25+
<h1 class="post__title">{{ page.project }}</h1>
26+
<h2 class="post__subtitle"><em>{{ page.project_description }}</em></h2>
27+
</div>
28+
29+
30+
<div class="post__event-col col-md-5 col-12">
31+
<div class="row">
32+
<div class="no-gutters__col col-12">
33+
<h2 class="post__label">Event</h2>
34+
</div>
35+
</div>
36+
<div class="row">
37+
<div class="post__event-title col-12">
38+
{{ page.title }}
39+
</div>
40+
</div>
41+
42+
<div class="row">
43+
<div class="no-gutters__col col-12">
44+
<h2 class="post__label">Venue</h2>
45+
</div>
46+
</div>
47+
<div class="row">
48+
<div class="post__event-title col-12">
49+
{{ page.venue }}
50+
</div>
51+
</div>
52+
53+
<div class="row">
54+
<div class="no-gutters__col col-12">
55+
<h2 class="post__label">Date</h2>
56+
</div>
57+
</div>
58+
<div class="row">
59+
<div class="post__event-title col-12">
60+
{{ page.date | date: "%e %B %Y" }}
61+
</div>
62+
</div>
63+
64+
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.link }}">
65+
<i class="post__icon fab fa-meetup"></i>
66+
</a>
67+
</div>
1468
</div>
1569
</div>
1670
</div>
1771
{% endif %}
1872
<div class="row post__content container-fluid">
19-
<div class="col-md-12">
20-
<h2>Project: {{ page.project }}</h2>
21-
<h3>Venue: {{ page.venue }}, {{ page.date | date: "%e %B %Y" }}</h3>
22-
<h3><a href="{{ page.link }}">Meetup event</a> </h3>
23-
{{ page.content }}
73+
<div class="no-gutters__col col-md-12">
74+
<div class="row">
75+
<div class="post__event-col col-md-3 col-12">
76+
<h2 class="post__event-title">{{ page.title }}</h2>
77+
<h3 class="post__venue">{{ page.venue }}</h3>
78+
<h3 class="post__date">{{ page.date | date: "%e %B %Y" }}</h3>
79+
<a class="post__button btn btn-primary btn-lg text-center" href="{{ page.link }}">
80+
<i class="post__icon fab fa-meetup"></i>
81+
</a>
82+
</div>
83+
<div class="col-md-9">
84+
{{ page.content }}
85+
</div>
86+
</div>
2487
</div>
2588
</div>
2689
</article>

‎_pages/03_projects.html‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎_sass/post.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.post {
2+
margin-top: -66px;
3+
}
4+
5+
.post__img-container {
6+
background-size: cover;
7+
background-position: center center;
8+
height: 65vh;
9+
}
10+
11+
.post__title {
12+
padding-top: 10%;
13+
text-align: center;
14+
font-size: 3em;
15+
font-family: 'Encode Sans Expanded', sans-serif;
16+
color: antiquewhite;
17+
}
18+
.post__subtitle {
19+
padding-top: 1%;
20+
text-align: center;
21+
font-size: 1.5em;
22+
font-family: 'Encode Sans Expanded', sans-serif;
23+
color: #818181;
24+
}
25+
26+
.post__content {
27+
padding-top: 5%;
28+
padding-left: 5%;
29+
padding-right: 5%;
30+
}
31+
32+
.post__event-col {
33+
padding-top: 4%;
34+
background: rgb(0, 0, 0);
35+
}
36+
37+
.post__event-col .row:first-child .post__label {
38+
border-top-left-radius: 5px;
39+
border-top-right-radius: 5px;
40+
}
41+
42+
.post__event-col .row:last-child .post__event-title {
43+
border-bottom-left-radius: 5px;
44+
border-bottom-right-radius: 5px;
45+
}
46+
47+
.post__label {
48+
font-family: 'Encode Sans Expanded', sans-serif;
49+
background: #818181;
50+
font-size: 1.25em;
51+
color: #072948;
52+
//border-top-left-radius: 5px;
53+
//border-top-right-radius: 5px;
54+
padding-left: 0.25em;
55+
margin-bottom: 0;
56+
}
57+
58+
.post__event-title {
59+
background: rgba(7, 41, 72, 0.52);
60+
//border-radius: 0 0 5px 5px;
61+
border: #072948 2px ridge;
62+
font-size: 1.25em;
63+
font-family: 'Encode Sans Expanded', sans-serif;
64+
color: antiquewhite;
65+
padding-left: 0.25em;
66+
}
67+
68+
69+
70+
//.post__meta {
71+
// @extend .post__event-title;
72+
//}
73+
//
74+
//.post__venue {
75+
// @extend .post__event-title;
76+
// margin-top: 2%;
77+
// }
78+
//
79+
//.post__date {
80+
// @extend .post__venue;
81+
// }
82+
83+
.post__button {
84+
padding: 1% 5%;
85+
margin: 0 2% 2% 2%;
86+
font-size: 1.25em;
87+
font-family: 'Playfair Display', serif;
88+
text-align: center;
89+
color: #072948;
90+
background: #7FA0C2;
91+
transition: all 0.5s ease-in;
92+
&:hover {
93+
text-align: center;
94+
background: #035E9A;
95+
color: antiquewhite;
96+
}
97+
}
98+
99+
.post__icon {
100+
text-align: center;
101+
color: #072948;
102+
font-size: 2em;
103+
}

‎static/css/post.scss‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)