diff --git a/assets/css/style.scss b/assets/css/style.scss index dee8964..dd015d8 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -581,13 +581,18 @@ select { } } +@mixin subarticle-element { + padding-top: 10px; + padding-bottom: 10px; + margin-bottom: 10px; + @include color-border(border-top, 1px, dotted, border); + @include color-border(border-bottom, 1px, dotted, border); +} + /* Authorbox */ .authorbox { - padding: 25px 0; - margin-bottom: 25px; + @include subarticle-element; line-height: 1.5; - @include color-border(border-top, 1px, solid, border); - @include color-border(border-bottom, 1px, solid, border); display: block; @media screen and (max-width: $break1) { text-align: center; @@ -596,6 +601,7 @@ select { margin-bottom: 10px; } .author-name { + text-transform: uppercase; font-size: 1rem; font-weight: 700; } @@ -603,9 +609,12 @@ select { /* Webmentionform */ .wm-form { - margin-bottom: 25px; + @include subarticle-element; line-height: 1.5; display: block; + @media screen and (max-width: $break1) { + text-align: center; + } #wm-source { width: 100%; margin-bottom: 10px; @@ -667,12 +676,8 @@ select { /* Post Navigation */ .post-nav { + @include subarticle-element; justify-content: space-between; - padding-top: 25px; - padding-bottom: 25px; - margin-bottom: 25px; - @include color-border(border-top, 1px, solid, border); - @include color-border(border-bottom, 1px, solid, border); display: flex; @media screen and (max-width: $break1) { display: block; @@ -687,7 +692,7 @@ select { margin-right: auto; text-align: left; @media screen and (max-width: $break1) { - padding-bottom: 25px; + padding-bottom: 10px; min-width: 100%; text-align: center; } @@ -718,6 +723,35 @@ select { } } +// Related articles + +.related { + @include subarticle-element; + @media screen and (max-width: $break1) { + min-width: 100%; + text-align: center; + } + .caption { + display: block; + margin-bottom: 5px; + font-weight: 700; + line-height: 1; + text-transform: uppercase; + } + .related-list { + list-style: none; + .item { + .link { + .post-title { + margin-bottom: 0; + overflow: hidden; + font-size: .8125rem; + } + } + } + } +} + /* Images / Video */ img { max-width: 100%; diff --git a/i18n/de.yaml b/i18n/de.yaml index f824f31..cf7c219 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -42,4 +42,7 @@ translation: "Hast du eine Antwort hierzu veröffentlicht? Lass mich den Link wissen:" - id: wmform_btn - translation: "Senden" \ No newline at end of file + translation: "Senden" + +- id: related + translation: "Ähnlich" \ No newline at end of file diff --git a/i18n/en.yaml b/i18n/en.yaml index 3f54336..d723c41 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -42,4 +42,7 @@ translation: "Have you published a response to this? Let me know the link:" - id: wmform_btn - translation: "Send" \ No newline at end of file + translation: "Send" + +- id: related + translation: "Related" \ No newline at end of file diff --git a/layouts/partials/post_nav.html b/layouts/partials/post_nav.html index c174fd0..c9bc20f 100644 --- a/layouts/partials/post_nav.html +++ b/layouts/partials/post_nav.html @@ -13,4 +13,5 @@ {{- end }} {{- end }} +{{ partial "related.html" . }} {{- end }} \ No newline at end of file diff --git a/layouts/partials/related.html b/layouts/partials/related.html new file mode 100644 index 0000000..18d3be3 --- /dev/null +++ b/layouts/partials/related.html @@ -0,0 +1,11 @@ +{{ $related := .Site.RegularPages.Related . | first 5 }} +{{ with $related }} + +{{ end }} \ No newline at end of file