commit b0b6e02a9d837a5d2c8b6dc0d5f97b71536fc6e7 parent 80613f52680b20b819624753dfdb67925ba2683f Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Sun, 3 May 2020 23:35:11 +0700 feature: add web-ring to footer Diffstat:
| M | assets/styles.scss | | | 83 | +++++++++++++++++++++++++++++++++++++++++++++++-------------------------------- |
| M | layouts/partials/footer/footer.html | | | 34 | ++++++++++++++++++++++------------ |
2 files changed, 72 insertions(+), 45 deletions(-)
diff --git a/assets/styles.scss b/assets/styles.scss @@ -230,12 +230,22 @@ time { &__separator { margin: 40px auto 20px; } + &__nav { display: flex; flex-direction: row; justify-content: space-between; + margin-bottom: 2em; + & > p { + margin: 0; + } &__left { text-align: left; + @media (min-width: 600px) { + &__back { + margin-left: -0.7em; + } + } } &__right { text-align: right; @@ -257,48 +267,55 @@ time { } } } + + .web-ring { + margin: 0.7em 0; + a { + cursor: pointer; + } + } + + .h-card { + max-width: 25em; + display: flex; + font-size: 0.8em; + margin: 2em auto 2.2em; + padding: 1.5em; + position: relative; + @include themify($themes) { + border: solid 2px themed('color-border'); + } + &__description { + top: -0.9em; + left: 1em; + padding: 0 0.5em; + position: absolute; + @include themify($themes) { + background-color: themed('color-background'); + } + & > p { + margin: 0; + } + } + &__info { + margin-left: 2em; + } + img { + width: 5em; + height: 5em; + } + } + &__copyright { - margin: 10px 0 2em; + margin: 0.7em 0 3em; font-size: 0.8em; text-align: center; @media (max-width: 599px) { display: flex; flex-direction: column; - margin-top: 0; &__separator { display: none; } } } -} - -.h-card { - max-width: 25em; - display: flex; - font-size: 0.8em; - margin: 0 auto 2em; - padding: 1.5em; - position: relative; - @include themify($themes) { - border: solid 2px themed('color-border'); - } - &__description { - top: -0.9em; - left: 1em; - padding: 0 0.5em; - position: absolute; - @include themify($themes) { - background-color: themed('color-background'); - } - & > p { - margin: 0; - } - } - &__info { - margin-left: 2em; - } - img { - width: 5em; - height: 5em; - } } \ No newline at end of file diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html @@ -2,7 +2,7 @@ <div class="footer__nav"> <p class="footer__nav__left"> {{ if not .IsHome }} - <a class="button" href={{ .Site.BaseURL }}> + <a class="button footer__nav__left__back" href={{ .Site.BaseURL }}> « Back to Home </a> {{ end }} @@ -15,6 +15,25 @@ <a class="button" href={{ "index.xml" | absURL }}>RSS</a> </p> </div> + +<center class="web-ring"> +<a href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/previous">←</a> + An IndieWeb Webring 🕸💍 + <a href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/next">→</a> +</center> + +<div id="h-card" class="h-card"> + <div class="h-card__description"><p>My <a>h-card</a></p></div> + <img class="u-photo" src={{ "logo.png" | absURL }} alt="Weird photo of yohanes bandung" /> + <div class="h-card__info"> + <a class="p-name u-url" href={{ .Site.BaseURL }}>{{ substr .Site.Params.Author 0 20 }}</a> + <br> + <a class="u-email" href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a> + <br> + <span class="p-locality">Jakarta</span>, <span class="p-country-name">Indonesia</span> + </div> +</div> + <p class="footer__copyright"> <span class="footer__copyright__year">©{{ now.Year }} {{ .Site.Params.Author }}</span> {{ with .Site.BaseURL }} @@ -26,14 +45,5 @@ </span> {{ end }} </p> -<div class="h-card"> - <div class="h-card__description"><p>My <a>h-card</a></p></div> - <img class="u-photo" src={{ "logo.png" | absURL }} alt="Weird photo of yohanes bandung" /> - <div class="h-card__info"> - <a class="p-name u-url" href={{ .Site.BaseURL }}>{{ substr .Site.Params.Author 0 20 }}</a> - <br> - <a class="u-email" href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a> - <br> - <span class="p-locality">Jakarta</span>, <span class="p-country-name">Indonesia</span> - </div> -</div> + +