Skip to content

Commit c30203e

Browse files
author
Kaspar Naaber
authored
Merge pull request #80 from Voog/73_prev_next_article
"Blog article" layout prev / next article links.
2 parents 9026d37 + 3d62e78 commit c30203e

File tree

5 files changed

+204
-28
lines changed

5 files changed

+204
-28
lines changed

‎layouts/blog_article.tpl

+24
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,30 @@
5151
</section>
5252
</article>
5353

54+
{% if article.older or article.newer %}
55+
<div class="post-nav">
56+
<div class="post-nav-inner">
57+
{% if article.older %}
58+
<a class="post-nav-link post-nav-link-older noborder" href="{{ article.older.url }}">
59+
<div class="post-nav-link-inner">
60+
<div class="post-nav-direction">{{ "previous" | lc }}</div>
61+
<div class="post-nav-title">{{ article.older.title }}</div>
62+
</div>
63+
</a>
64+
{% endif %}
65+
66+
{% if article.newer %}
67+
<a class="post-nav-link post-nav-link-newer noborder" href="{{ article.newer.url }}">
68+
<div class="post-nav-link-inner">
69+
<div class="post-nav-direction">{{ "next" | lc }}</div>
70+
<div class="post-nav-title">{{ article.newer.title }}</div>
71+
</div>
72+
</a>
73+
{% endif %}
74+
</div>
75+
</div>
76+
{% endif %}
77+
5478
<section id="comments" class="comments content-formatted content-centered">
5579
{% include "comments" %}
5680
{% unless article.new_record? %}

‎sources/stylesheets/_blog-and-article.scss

+93-9
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
text-align: center;
4242
font-size: 12px;
4343
line-height: 1;
44-
&:hover {
44+
&:hover {
4545
text-decoration: none;
4646
}
4747
}
@@ -65,13 +65,13 @@
6565
}
6666

6767
.tags {
68-
@include query($tablet-2) {
69-
padding-bottom: 30px;
70-
margin-top: 35px;
71-
}
68+
// @include query($tablet-2) {
69+
// padding-bottom: 30px;
70+
// margin-top: 35px;
71+
// }
7272
position: relative;
73-
margin: 60px 0 -40px;
74-
padding: 25px 0 5px;
73+
padding-top: 25px;
74+
margin-top: 30px;
7575
font-weight: bold;
7676
font-size: 0.9em;
7777
line-height: 1.2;
@@ -123,7 +123,7 @@
123123
}
124124
.header-wrapper {
125125
position: relative;
126-
126+
127127
.post-header-wrapper {
128128
@include query($tablet-2) {
129129
margin-top: 0;
@@ -150,7 +150,7 @@
150150
-ms-transform: translateY(-50%);
151151
-webkit-transform: translateY(-50%);
152152
transform: translateY(-50%);
153-
153+
154154
@include query($tablet-2) {
155155
position: static;
156156
top: 0;
@@ -191,3 +191,87 @@
191191
left: 45px;
192192
}
193193
}
194+
195+
.post-nav {
196+
margin-top: 25px;
197+
padding: 0 12%;
198+
199+
@include query($tablet-2) {
200+
padding: 0;
201+
}
202+
}
203+
204+
.post-nav-inner {
205+
border-top: 1px solid rgba(0,0,0,.3);
206+
207+
@media screen and (min-width: $tablet-3 + 1) {
208+
display: flex;
209+
}
210+
}
211+
212+
.post-nav-link {
213+
position: relative;
214+
display: block;
215+
flex: 1;
216+
padding-top: 20px;
217+
padding-bottom: 20px;
218+
color: currentColor;
219+
220+
&:hover {
221+
.post-nav-direction {
222+
opacity: 1;
223+
}
224+
225+
.post-nav-title {
226+
opacity: 1;
227+
}
228+
}
229+
230+
&:nth-child(2) {
231+
&::before {
232+
@media screen and (max-width: $tablet-3) {
233+
position: absolute;
234+
top: 0;
235+
right: 0;
236+
bottom: 0;
237+
left: 0;
238+
display: block;
239+
border-top-color: currentColor;
240+
border-top-style: solid;
241+
border-top-width: 1px;
242+
content: '';
243+
opacity: .2;
244+
}
245+
}
246+
}
247+
248+
@media screen and (max-width: $tablet-3) {
249+
text-align: center;
250+
}
251+
}
252+
253+
.post-nav-link-older {
254+
@media screen and (min-width: $tablet-3 + 1) {
255+
padding-right: 20px;
256+
}
257+
}
258+
259+
.post-nav-link-newer {
260+
@media screen and (min-width: $tablet-3 + 1) {
261+
padding-left: 20px;
262+
text-align: right;
263+
}
264+
}
265+
266+
.post-nav-direction {
267+
font-size: 13px;
268+
letter-spacing: .2em;
269+
text-transform: uppercase;
270+
opacity: .3;
271+
}
272+
273+
.post-nav-title {
274+
margin-top: 6px;
275+
font-size: 18px;
276+
opacity: .7;
277+
}

‎sources/stylesheets/_comments.scss

-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
// Styling rules for the blog article single article comments area.
33
// Comment form is styled using the form fields styles located in the "_forms.scss" partial.
44
.comments {
5-
@include query($tablet-2) {
6-
margin-top: 35px;
7-
}
8-
margin-top: 60px;
95
font-size: 0.9em;
106
.comment-author {
117
border: none !important;

‎stylesheets/main.css

+86-14
Original file line numberDiff line numberDiff line change
@@ -804,18 +804,12 @@ nav a, .menu a, .header a, .edy-cbtn, .edy-btn-cm-round, .edys-gallery-item, .ed
804804
}
805805
.post .tags {
806806
position: relative;
807-
margin: 60px 0 -40px;
808-
padding: 25px 0 5px;
807+
padding-top: 25px;
808+
margin-top: 30px;
809809
font-weight: bold;
810810
font-size: 0.9em;
811811
line-height: 1.2;
812812
}
813-
@media screen and (max-width: 752px) {
814-
.post .tags {
815-
padding-bottom: 30px;
816-
margin-top: 35px;
817-
}
818-
}
819813
.post .tags .tag-link {
820814
margin-right: 20px;
821815
text-decoration: none;
@@ -927,16 +921,94 @@ nav a, .menu a, .header a, .edy-cbtn, .edy-btn-cm-round, .edys-gallery-item, .ed
927921
left: 45px;
928922
}
929923

930-
/* COMMENTS */
931-
.comments {
932-
margin-top: 60px;
933-
font-size: 0.9em;
924+
.post-nav {
925+
margin-top: 25px;
926+
padding: 0 12%;
934927
}
935928
@media screen and (max-width: 752px) {
936-
.comments {
937-
margin-top: 35px;
929+
.post-nav {
930+
padding: 0;
931+
}
932+
}
933+
934+
.post-nav-inner {
935+
border-top: 1px solid rgba(0, 0, 0, 0.3);
936+
}
937+
@media screen and (min-width: 507px) {
938+
.post-nav-inner {
939+
display: -webkit-flex;
940+
display: -ms-flexbox;
941+
display: flex;
942+
}
943+
}
944+
945+
.post-nav-link {
946+
position: relative;
947+
display: block;
948+
-webkit-flex: 1;
949+
-ms-flex: 1;
950+
flex: 1;
951+
padding-top: 20px;
952+
padding-bottom: 20px;
953+
color: currentColor;
954+
}
955+
.post-nav-link:hover .post-nav-direction {
956+
opacity: 1;
957+
}
958+
.post-nav-link:hover .post-nav-title {
959+
opacity: 1;
960+
}
961+
@media screen and (max-width: 506px) {
962+
.post-nav-link:nth-child(2)::before {
963+
position: absolute;
964+
top: 0;
965+
right: 0;
966+
bottom: 0;
967+
left: 0;
968+
display: block;
969+
border-top-color: currentColor;
970+
border-top-style: solid;
971+
border-top-width: 1px;
972+
content: '';
973+
opacity: .2;
938974
}
939975
}
976+
@media screen and (max-width: 506px) {
977+
.post-nav-link {
978+
text-align: center;
979+
}
980+
}
981+
982+
@media screen and (min-width: 507px) {
983+
.post-nav-link-older {
984+
padding-right: 20px;
985+
}
986+
}
987+
988+
@media screen and (min-width: 507px) {
989+
.post-nav-link-newer {
990+
padding-left: 20px;
991+
text-align: right;
992+
}
993+
}
994+
995+
.post-nav-direction {
996+
font-size: 13px;
997+
letter-spacing: .2em;
998+
text-transform: uppercase;
999+
opacity: .3;
1000+
}
1001+
1002+
.post-nav-title {
1003+
margin-top: 6px;
1004+
font-size: 18px;
1005+
opacity: .7;
1006+
}
1007+
1008+
/* COMMENTS */
1009+
.comments {
1010+
font-size: 0.9em;
1011+
}
9401012
.comments .comment-author {
9411013
border: none !important;
9421014
box-shadow: none !important;

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)