commit 42d752574eddb4897e971b26ac3c3da875c00cbf parent 796a0ab998884ccd5f5c4df970ebdeccbdcfe2f5 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 28 Apr 2020 18:07:43 +0700 style: general responsiveness Diffstat:
| M | assets/styles.scss | | | 68 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ |
| M | layouts/_default/list.html | | | 2 | +- |
| M | layouts/index.html | | | 28 | +++++++++++++++------------- |
| M | layouts/partials/footer/footer.html | | | 8 | ++++---- |
| M | layouts/partials/header/header.html | | | 21 | +++++++++++++++++++-- |
| D | layouts/partials/header/menu.html | | | 15 | --------------- |
6 files changed, 101 insertions(+), 41 deletions(-)
diff --git a/assets/styles.scss b/assets/styles.scss @@ -7,6 +7,7 @@ html { color: $color-text; font-family: $font-text; line-height: 1.6; + font-size: 16px; } body { @@ -14,11 +15,32 @@ body { margin: 0 auto; } +@media (max-width: 599px) { + html { + font-size: 15px; + } + body { + padding: 0 10px; + margin: 0; + } + hr { + width: 90%; + } +} + h1, h2, h3, h4, h5, h6 { color: $color-green; font-family: $font-mono; } +h1 { + font-size: 2rem; +} + +h1, h2, h3 { + line-height: 1.3; +} + a { text-decoration: none; color: $color-blue; @@ -28,9 +50,6 @@ a { .link-white { color: $color-text; } - &.full-width { - width: 100%; - } &.button { display: inline-block; position: relative; @@ -43,6 +62,11 @@ a { margin-left: -0.5em; } } + &.full-width { + width: calc(100% - 1.4em); + margin: 0; + align-self: center; + } } blockquote { @@ -60,8 +84,17 @@ time { font-family: $font-mono; } +.listing { + margin-left: 0.5em; +} + .header { margin-top: 1em; + @media (min-width: 599px) { + &__title:not(h1) { + margin-top: 1.4em; + } + } &__menu { margin: 0 0 10px; display: flex; @@ -108,7 +141,7 @@ time { justify-content: space-around; &__item { padding: 0 30px; - @media (max-width: 600px) { + @media (max-width: 599px) { padding: 0 10px; } &__left { @@ -131,7 +164,7 @@ time { } .footer { - margin-top: 100px; + margin-top: 40px; &__nav { display: flex; flex-direction: row; @@ -142,10 +175,33 @@ time { &__right { text-align: right; } + @media (max-width: 599px) { + display: flex; + flex-direction: column; + &__left { + text-align: center; + margin: 0; + } + &__right { + text-align: center; + margin-top: 0; + } + } } &__copyright { - margin-top: 40px; + margin: 10px 0 40px; font-size: 0.8em; text-align: center; + @media (max-width: 599px) { + display: flex; + flex-direction: column; + margin-top: 0; + &__separator { + display: none; + } + } + } + @media (max-width: 599px) { + margin-top: 20px } } diff --git a/layouts/_default/list.html b/layouts/_default/list.html @@ -1,7 +1,7 @@ {{ define "main" }} {{ if or .Title .Content }} <div> - {{ with .Title }}<h2>{{ . }}</h2>{{ end }} + {{ with .Title }}<h1>{{ . }}</h1>{{ end }} {{ with .Content }}<div>{{ . }}</div>{{ end }} </div> {{ end }} diff --git a/layouts/index.html b/layouts/index.html @@ -1,21 +1,24 @@ {{ define "main" }} -<article> - {{ .Content }} + <article> + {{ .Content }} + </article> <hr> <h2>Blog Posts:</h2> - {{ range first 5 (where .Site.RegularPages "Type" "posts") }} - <p> - <a href={{ .Permalink }} class="button full-width"> - <time>{{ .Date.Format "02 Jan 2006" }}</time> - <br> - <span class="link-white">{{ .Title }}</span> » - </a> - </p> - {{ end }} - {{ $postURL := "/posts" | absURL }} + <div class="listing"> + {{ range first 5 (where .Site.RegularPages "Type" "posts") }} + <p> + <a href={{ .Permalink }} class="button full-width"> + <time>{{ .Date.Format "02 Jan 2006" }}</time> + <br> + <span class="link-white">{{ .Title }}</span> » + </a> + </p> + {{ end }} + {{ $postURL := "/posts" | absURL }} + </div> <p class="main__more"><a href={{ $postURL }} class="button">More Blogs ⤳</a></p> <hr> @@ -29,6 +32,5 @@ {{ $notesURL := "/notes" | absURL }} <p class="main__more"><a href={{ $notesURL }} class="button">More Notes ⤳</a></p> -</article> {{ end }} diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html @@ -14,10 +14,10 @@ </p> </div> <p class="footer__copyright"> - ©{{ now.Year }} {{ .Site.Params.Author }} - {{ with .Site.BaseURL }} - - <a href="{{ . }}"> + <span class="footer__copyright__year">©{{ now.Year }} {{ .Site.Params.Author }}</span> + {{ with .Site.BaseURL }} <span class="footer__copyright__separator">-</span> + <span class="footer__copyright__site"><a href="{{ . }}"> {{ . | replaceRE "^https?://([^/]+).*" "$1" }} - </a> + </a></span> {{ end }} </p> \ No newline at end of file diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html @@ -1,4 +1,21 @@ -<h1 class="header__title">Yohanes Bandung Bondowoso <span class="dark-toggler"></span></h1> +{{ if .IsHome }} + <h1 class="header__title">Yohanes Bandung Bondowoso<span class="dark-toggler"></span></h1> +{{ else }} + <h2 class="header__title">Yohanes Bandung Bondowoso</h2> +{{ end }} <nav class="header__menu"> - {{ partial "header/menu.html" . }} + <div class="header__menu__list"> + {{ $baseURL := .Site.BaseURL }} + {{ range .Site.Menus.main }} + {{ $url := trim .URL "/" | absURL }} + <a + href={{ $url }} + data-rel="prefetch" + role="button" + class="header__menu__list__item button" + > + {{ .Pre }}<span>{{ .Name }}</span> + </a> + {{ end }} + </div> </nav> \ No newline at end of file diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html @@ -1,14 +0,0 @@ -<div class="header__menu__list"> - {{ $baseURL := .Site.BaseURL }} - {{ range .Site.Menus.main }} - {{ $url := trim .URL "/" | absURL }} - <a - href={{ $url }} - data-rel="prefetch" - role="button" - class="header__menu__list__item button" - > - {{ .Pre }}<span>{{ .Name }}</span> - </a> - {{ end }} -</div>- \ No newline at end of file