Skip to content

Commit c3dc256

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Styled new post layout.
Auto generation is now ready. Style to be further enhanced.
1 parent f7a1715 commit c3dc256

File tree

2 files changed

+149
-112
lines changed

2 files changed

+149
-112
lines changed

‎_layouts/post.html‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,34 @@
3535
<main>
3636
<article class="post">
3737
<div class="container-fluid">
38+
<div class="row">
39+
<div class="post__content col-12">
40+
{% if project.logo %}
41+
<img class="post__project-logo" src="{{ project.logo }}">
42+
{% endif %}
43+
</div>
44+
</div>
3845
<div class="row">
3946
<div class="post__content col-md-8">
40-
<img src="{{ project.logo }}">
4147
<h1 class="post__content-title">{{ page.title }}</h1>
42-
<p>Level: {{ page.level }}</p>
48+
<h2 class="post__title">Level: {{ page.level }}</h2>
4349
<p class="post__paragraph">{{ project.content }}</p>
4450
<p class="post_paragraph">More information about {{ project.name }}: <a href="{{ project.website }}">{{ project.website }}</a></p>
4551
<p class="post__paragraph">{{ page.content }}</p>
46-
<h3>Set up instructions</h3>
52+
<h2 class="post__address-title">Set up instructions</h2>
4753
{{ project.setup_html }}
4854
</div>
49-
<div class="post__content col-md-4">
55+
<div class="post__info col-md-4">
5056
<h1 class="post__content-title">Info</h1>
57+
<p class="post__address-title">{{ host_sponsor.name }}</p>
5158
<p class="post__address-title">{{ page.date | date: "%e %B %Y" }}, {{ page.time }}</p>
52-
<img class="post__sponsor-img" src="{{ sponsor.logo }}">
53-
<p class="post__address-title">{{ sponsor.name }}</p>
54-
<p class="post__address">{{ sponsor.address }}</p>
59+
<a class="post__sponsor-container post__sponsor-link" href="{{ host_sponsor.link }}">
60+
<img class="post__sponsor-img"
61+
src="{{ site.baseurl }}/{{ host_sponsor.logo }}"
62+
alt="Sponsor logo">
63+
</a>
64+
<!--<img class="post__sponsor-img" src="{{ site.baseurl}}/{{ host_sponsor.logo }}">-->
65+
<p class="post__address">{{ host_sponsor.address }}</p>
5566
<div id="chapters__map"></div>
5667
{% comment %}
5768
Create a javascript variable for use in the function adding map markers.
@@ -65,26 +76,26 @@ <h1 class="post__content-title">Info</h1>
6576
</script>
6677
</div>
6778
</div>
68-
{% for sponsor in page.sponsors %}
69-
{% assign sponsor_obj = site.sponsors | where:"obj_id", sponsor | first %}
70-
<div class="row flex-nowrap">
71-
<div class="post__sponsor-col col-md-12">
72-
<div class="row">
73-
<div class="post__logo-col col-sm-3 col-12">
74-
<h3 class="post__sponsor-name">{{ sponsor_obj.name }}</h3>
75-
<a class="post__sponsor-container post__sponsor-link" href="{{ sponsor_obj.link }}">
76-
<img class="post__sponsor-img"
77-
src="{{ site.baseurl }}/{{ sponsor_obj.logo }}"
78-
alt="Sponsor logo">
79-
</a>
80-
</div >
81-
<div class="post__sponsor-info-col col-12 col-sm-auto col-xl-7 ">
82-
<p class="post__sponsor-content">{{ sponsor_obj.content}}</p>
83-
</div>
84-
</div>
85-
</div>
86-
</div>
87-
{% endfor %}
79+
<!--{% for sponsor in page.sponsors %}-->
80+
<!--{% assign sponsor_obj = site.sponsors | where:"obj_id", sponsor | first %}-->
81+
<!--<div class="row flex-nowrap">-->
82+
<!--<div class="post__sponsor-col col-md-12">-->
83+
<!--<div class="row">-->
84+
<!--<div class="post__logo-col col-sm-3 col-12">-->
85+
<!--<h3 class="post__sponsor-name">{{ sponsor_obj.name }}</h3>-->
86+
<!--<a class="post__sponsor-container post__sponsor-link" href="{{ sponsor_obj.link }}">-->
87+
<!--<img class="post__sponsor-img"-->
88+
<!--src="{{ site.baseurl }}/{{ sponsor_obj.logo }}"-->
89+
<!--alt="Sponsor logo">-->
90+
<!--</a>-->
91+
<!--</div >-->
92+
<!--<div class="post__sponsor-info-col col-12 col-sm-auto col-xl-7 ">-->
93+
<!--<p class="post__sponsor-content">{{ sponsor_obj.content}}</p>-->
94+
<!--</div>-->
95+
<!--</div>-->
96+
<!--</div>-->
97+
<!--</div>-->
98+
<!--{% endfor %}-->
8899
</div>
89100
</article>
90101
{% include footer.html %}

‎_sass/post.scss‎

Lines changed: 111 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
min-height: 100%;
88
}
99

10-
.post__title {
11-
@extend .title-light;
12-
padding-top: 15vh;
13-
text-align: center;
14-
font-size: 2em;
15-
}
16-
.post__subtitle {
17-
@extend .subtitle;
18-
padding-top: 1%;
19-
text-align: center;
20-
font-size: 1.25em;
21-
}
10+
//.post__title {
11+
// @extend .title-light;
12+
// padding-top: 15vh;
13+
// text-align: center;
14+
// font-size: 2em;
15+
// }
16+
//.post__subtitle {
17+
// @extend .subtitle;
18+
// padding-top: 1%;
19+
// text-align: center;
20+
// font-size: 1.25em;
21+
// }
2222

2323
.post__event-col {
2424
padding-top: 2%;
@@ -27,116 +27,140 @@
2727
background: rgb(0, 0, 0);
2828
}
2929

30-
.post__label {
31-
@extend .event-label;
32-
}
30+
//.post__label {
31+
// @extend .event-label;
32+
//}
3333

34-
.post__event-title {
35-
@extend .event-title;
36-
}
34+
//.post__event-title {
35+
// @extend .event-title;
36+
// }
3737

3838
.post__button-col {
3939
margin-bottom: 1em;
4040
text-align: center;
4141
}
42+
//
43+
//.post__button {
44+
// @extend .button-standard;
45+
// min-width: 75%;
46+
// font-size: 1.5em;
47+
// margin: 1em auto 0 auto;
48+
// &:hover > .post__icon {
49+
// color: $button-text-hover;
50+
// }
51+
//}
52+
53+
//.post__button-solo {
54+
// @extend .button-standard;
55+
// min-width: 50%;
56+
// font-size: 1.5em;
57+
// margin: 1em auto 0 auto;
58+
// &:hover > .post__icon {
59+
// color: $button-text-hover;
60+
// }
61+
//}
62+
63+
//.post__icon {
64+
// text-align: center;
65+
// color: $button-text;
66+
// font-size: 1.5em;
67+
// transition: all 0.5s ease-in;
68+
// min-width: 100%;
69+
// min-height: 100%;
70+
//}
71+
//
72+
//@media (min-width: 768px) {
73+
// .post__button {
74+
// font-size: 1.25em;
75+
// min-width: 100%;
76+
// }
77+
// .post__icon {
78+
// font-size: 1.25em;
79+
// }
80+
//}
4281

43-
.post__button {
44-
@extend .button-standard;
45-
min-width: 75%;
46-
font-size: 1.5em;
47-
margin: 1em auto 0 auto;
48-
&:hover > .post__icon {
49-
color: $button-text-hover;
50-
}
82+
.post__content {
83+
padding-left: 5%;
84+
padding-right: 15px;
5185
}
5286

53-
.post__button-solo {
54-
@extend .button-standard;
55-
min-width: 50%;
56-
font-size: 1.5em;
57-
margin: 1em auto 0 auto;
58-
&:hover > .post__icon {
59-
color: $button-text-hover;
60-
}
87+
.post__project-logo {
88+
margin-top: 2em;
6189
}
6290

63-
.post__icon {
64-
text-align: center;
65-
color: $button-text;
66-
font-size: 1.5em;
67-
transition: all 0.5s ease-in;
68-
min-width: 100%;
69-
min-height: 100%;
91+
.post__info {
92+
padding-left: 5%;
93+
padding-right: 5%;
94+
text-align: left;
95+
7096
}
7197

7298
@media (min-width: 768px) {
73-
.post__button {
74-
font-size: 1.25em;
75-
min-width: 100%;
76-
}
77-
.post__icon {
78-
font-size: 1.25em;
99+
.post__info {
100+
padding-left: 15px;
101+
text-align: right;
79102
}
80103
}
81104

82-
.post__content {
83-
padding-left: 10%;
84-
padding-right: 10%;
85-
}
86-
87105
#chapters__map_test {
88106
@extend #chapters__map;
89107
}
90108

91109
.post__content-title {
92110
@extend .title-dark;
93-
margin-top: 5%;
94-
margin-bottom: 2.5%;
95-
font-size: 2em;
111+
margin-top: 0.5em;
112+
margin-bottom: 0.25em;
113+
font-size: 2.5em;
96114
}
97115

98116
.post__address {
99117
@extend .paragraph;
100118
color: $paragraph-dark;
101-
font-size: 1em;
119+
font-size: 1.25em;
102120
}
103121

104122
.post__address-title {
105123
@extend .post__address;
106-
font-weight: bold;
124+
//font-weight: bold;
125+
font-size: 1.5em;
107126
margin-bottom: 0.25em;
108127
}
109128

110-
.post__sponsor-col {
111-
padding-left: 10%;
112-
padding-right: 10%;
113-
}
114-
115-
@media (min-width: 576px) {
116-
.post__logo-col {
117-
min-width: 160px;
118-
max-width: 160px;
119-
}
120-
}
121-
122-
@media (min-width: 992px) {
123-
.post__logo-col {
124-
min-width: 308px;
125-
max-width: 308px;
126-
}
127-
}
128-
129-
@media (min-width: 576px) {
130-
.post__sponsor-info-col {
131-
width: calc(100% - 160px);
132-
}
129+
.post__title {
130+
@extend .post__address-title;
131+
margin-top: 0.5em;
133132
}
134133

135-
@media (min-width: 992px) {
136-
.post__sponsor-info-col {
137-
width: calc(100% - 308px);
138-
}
139-
}
134+
//.post__sponsor-col {
135+
// padding-left: 10%;
136+
// padding-right: 10%;
137+
//}
138+
//
139+
//@media (min-width: 576px) {
140+
// .post__logo-col {
141+
// min-width: 160px;
142+
// max-width: 160px;
143+
// }
144+
//}
145+
//
146+
//@media (min-width: 992px) {
147+
// .post__logo-col {
148+
// min-width: 308px;
149+
// max-width: 308px;
150+
// }
151+
//}
152+
//
153+
//@media (min-width: 576px) {
154+
// .post__sponsor-info-col {
155+
// width: calc(100% - 160px);
156+
// }
157+
//}
158+
//
159+
//@media (min-width: 992px) {
160+
// .post__sponsor-info-col {
161+
// width: calc(100% - 308px);
162+
// }
163+
//}
140164

141165
.post__paragraph {
142166
}
@@ -158,6 +182,8 @@
158182
.post__sponsor-link {
159183
display: inline-block;
160184
width: 100%;
185+
max-width: 220px;
186+
max-height: 102px;
161187
background: $very-dark-blue;
162188
border-radius: 5px;
163189
border: $light-blue 1px solid;

0 commit comments

Comments
 (0)