commit 1ddf09c307587792c65d5af4f569f3dda6a1c1eb parent 21494c27a2248af8fe0c1fe5e1dde8b537c8275d Author: Yohanes Bandung <hi@ybbond.dev> Date: Mon, 1 Jun 2020 14:56:03 +0700 refactor: step 1. more concise scss, readjust alignment Diffstat:
| M | assets/content.scss | | | 8 | +------- |
| M | assets/styles.scss | | | 112 | ++++++++++++++++++++++++++++--------------------------------------------------- |
| M | assets/variables.scss | | | 2 | +- |
| M | layouts/_default/list.html | | | 23 | ++++++++++++----------- |
| M | layouts/_default/single.html | | | 2 | +- |
| M | layouts/index.html | | | 6 | +++--- |
| M | layouts/partials/components/tagitem.html | | | 4 | ++-- |
| M | layouts/partials/header/header.html | | | 2 | +- |
| M | layouts/partials/post/pagination.html | | | 26 | +++++++++++++++++++------- |
| M | layouts/partials/post/summary.html | | | 6 | +++--- |
10 files changed, 83 insertions(+), 108 deletions(-)
diff --git a/assets/content.scss b/assets/content.scss @@ -5,7 +5,7 @@ @return map-get($theme-map, $key); } -.content, .notes, .summary__content { +.content, .notes { font-family: $font-text; width: 100%; @@ -152,12 +152,6 @@ margin: 0; } - @media (min-width: 600px) { - .listing > & { - padding: 0 0.7em; - } - } - @media (max-width: 599px) { &__title { margin: 10px 0 0; diff --git a/assets/styles.scss b/assets/styles.scss @@ -8,10 +8,18 @@ html { color: themed('color-text'); } font-family: $font-text; + letter-spacing: -0.02rem; line-height: 1.6; font-size: 16px; } +@media (max-width: 599px) { + body { + padding: 0 1.5em; + margin: 0; + } +} + body { @include themify($themes) { background-color: themed('color-background'); @@ -25,16 +33,9 @@ body { display: none; } -hr { - margin: 40px auto; - @include themify($themes) { - border: solid 1px themed('color-border'); - } -} - pre { overflow: auto; - padding: 0.5em; + padding: 0.5rem; } :not(pre) > code { @@ -44,9 +45,9 @@ pre { } code { - padding: 0.1em; + padding: 0.1rem; font-family: $font-mono; - font-size: 0.9em; + font-size: 0.9rem; &.language-bash { &:before { content: "$ "; @@ -54,16 +55,6 @@ code { } } -@media (max-width: 599px) { - html { - font-size: 15px; - } - body { - padding: 0 1.5em; - margin: 0; - } -} - h1, h2, h3, h4, h5 { @include themify($themes) { color: themed('color-green'); @@ -77,27 +68,10 @@ h1, h2, h3, h4, h5 { } } -h1 { - font-size: 2rem; -} - a { text-decoration: none; - &:not(.button, h1, h2) { - &:hover { - outline-style: solid; - outline-width: 0.3em; - @include themify($themes) { - outline-color: themed('color-background-hover'); - background-color: themed('color-background-hover'); - } - } - } @include themify($themes) { color: themed('color-blue'); - &:hover { - color: themed('color-red'); - } &.link-white, .link-white { color: themed('color-text'); } @@ -105,20 +79,21 @@ a { &:hover { @include themify($themes) { background-color: themed('color-background-hover'); + color: themed('color-red'); + } + &:not(.no-outline) { + outline-style: solid; + outline-width: 0.3rem; + @include themify($themes) { + outline-color: themed('color-background-hover'); + background-color: themed('color-background-hover'); + } } } &.button { display: inline-block; padding: 0.3em 0.7em; } - &.full-width { - margin: 0; - align-self: center; - width: 100%; - @media (min-width: 600px) { - width: calc(100% - 1.4em); - } - } } blockquote { @@ -146,14 +121,14 @@ time { .listing { &__post { + width: 100%; display: inline-block; - padding: 0.3em 0.7em 1.3em 0.7em; - @media (max-width: 600px) { + padding: 0.7rem 0; + @media (max-width: 599px) { padding: 0.3em 0 1.3em 0; } &__title { - margin-top: 0.7em; - margin-bottom: 0; + margin: 0.01rem; } &__description { margin: 0; @@ -169,6 +144,11 @@ time { margin-top: 1.4em; } } + @media (max-width: 599px) { + &__title { + font-size: 1.2rem; + } + } &__menu { margin: 0 0 10px; display: flex; @@ -225,7 +205,7 @@ time { } .summary { - margin: 0 0 5.5em 0; + margin: 1.5em 0; p { margin: 0em 0 0.4em; } @@ -235,39 +215,27 @@ time { } .pagination { - border-top: dashed 2px; - border-bottom: dashed 2px; - margin: 3em auto 2em auto; padding: 1em 0; display: flex; - justify-content: space-around; - &__item { - padding: 0 30px; - @media (max-width: 599px) { - padding: 0 10px; - } - &__left { - flex: 1; - text-align: left; - } - &__right { - flex: 1; - text-align: right; - } + &__left { + text-align: left; + } + &__center { + flex: 1; + } + &__right { + text-align: right; } } -.taglist { - margin: 0; - padding: 0; -} .tagitem { font-family: $font-mono; + margin: 0 0.4rem; } .footer { &__separator { - margin: 0 auto 1.4em; + margin: 0.5rem auto 1.4em; } &__nav { diff --git a/assets/variables.scss b/assets/variables.scss @@ -41,4 +41,4 @@ $themes: ( ); $font-mono: 'iA Writer Duospace', monospace; -$font-text: 'iA Writer Quattro S', Arial, Helvetica, sans-serif; +$font-text: 'iA Writer Quattro S', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica, helvetica neue, ubuntu, roboto, noto, segoe ui, arial, sans-serif; diff --git a/layouts/_default/list.html b/layouts/_default/list.html @@ -1,23 +1,23 @@ {{ define "main" }} <div class="h-feed"> <div id="h-card" class="hcard" hidden=""> - <img class="u-photo" src={{ "logo.png" | absURL }} alt="Weird photo of yohanes bandung" /> - <a class="p-author h-card" href={{ .Site.Params.MainSiteURL }} rel="author">{{ substr .Site.Params.Author 0 20 }}.</a> - <a class="u-email" href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a> - <a rel="syndication" class="u-syndication" href={{ .Permalink }}>{{ .Title }}</a> - <span class="p-locality">Jakarta</span>, <span class="p-country-name">Indonesia</span> - {{ with .Params.tags }} - {{ range . }} - <a class="p-category" href={{ (printf "tags/%s" .) | urlize | absURL }}>{{ . }}</a> + <img class="u-photo" src={{ "logo.png" | absURL }} alt="Weird photo of yohanes bandung" /> + <a class="p-author h-card" href={{ .Site.Params.MainSiteURL }} rel="author">{{ substr .Site.Params.Author 0 20 }}.</a> + <a class="u-email" href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a> + <a rel="syndication" class="u-syndication" href={{ .Permalink }}>{{ .Title }}</a> + <span class="p-locality">Jakarta</span>, <span class="p-country-name">Indonesia</span> + {{ with .Params.tags }} + {{ range . }} + <a class="p-category" href={{ (printf "tags/%s" .) | urlize | absURL }}>{{ . }}</a> + {{ end }} {{ end }} - {{ end }} - </div> + </div> {{ $selflink := .Permalink }} {{ if or .Title .Content }} <div class="list__header"> {{ $isTag := eq .Type "tags" }} {{ with .Title }} - <a href={{ $selflink }} class="u-url"> + <a href={{ $selflink }} class="u-url no-outline"> <h1 class="p-name"> {{ cond $isTag "Tag «" nil}}{{ . }}{{ cond $isTag "»" nil}} </h1> @@ -35,6 +35,7 @@ {{ else }} {{ range .Paginator.Pages }} {{ partial "post/summary.html" . }} + <hr> {{ end }} {{ partial "post/pagination.html" . }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -33,7 +33,7 @@ {{ .Date.Format "02 January 2006" }}</time>, for stories like this:</p> {{ with .Params.tags }} - <p class="taglist"> + <p> {{ range . }} {{- partial "components/tagitem.html" . -}} {{ end }} diff --git a/layouts/index.html b/layouts/index.html @@ -8,12 +8,12 @@ <hr> - <a data-goatcounter-click="cl-posts-title" href={{ $postURL }}><h2>Blog Posts:</h2></a> + <h2>Blog Posts:</h2> <div href={{ $postURL }} class="listing"> {{ range first 5 (where .Site.RegularPages "Section" "posts") }} <a href={{ .Permalink }} - class="area full-width listing__post" + class="listing__post" > <h3 class="listing__post__title"> {{ .Title }} @@ -32,7 +32,7 @@ <hr> - <a data-goatcounter-click="cl-notes-title" href={{ $notesURL }}><h2>Notes:</h2></a> + <h2>Notes:</h2> <div class="listing"> {{ range first 5 (where .Site.RegularPages "Type" "notes") }} {{ partial "post/notes-item.html" . }} diff --git a/layouts/partials/components/tagitem.html b/layouts/partials/components/tagitem.html @@ -1 +1 @@ -<a class="tagitem button" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>- \ No newline at end of file +<a class="tagitem" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>+ \ No newline at end of file diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html @@ -13,7 +13,7 @@ href={{ $url }} data-rel="prefetch" role="button" - class="header__menu__list__item button" + class="header__menu__list__item button no-outline" > {{ .Pre }}<span>{{ .Name }}</span> </a> diff --git a/layouts/partials/post/pagination.html b/layouts/partials/post/pagination.html @@ -1,19 +1,31 @@ <nav class="pagination"> {{ if gt .Paginator.TotalPages 1 }} {{ if .Paginator.HasNext }} - <a class="button pagination__item__left" role="button" href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" data-rel="prefetch" rel="next"> - < Older + <a + class="button pagination__left" + role="button" + href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" + data-rel="prefetch" + rel="next" + > + ← Older </a> {{ else }} - <span class="pagination__item__left"></span> + <span class="pagination__left"></span> {{ end }} - <span class="pagination__item">*</span> + <span class="pagination__center"></span> {{ if .Paginator.HasPrev }} - <a class="button pagination__item__right" role="button" href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" data-rel="prefetch" rel="prev"> - Newer > + <a + class="button pagination__right" + role="button" + href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" + data-rel="prefetch" + rel="prev" + > + Newer → </a> {{ else }} - <span class="pagination__item__right"></span> + <span class="pagination__right"></span> {{ end }} {{ else }} <span>No More Post</span> diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html @@ -6,7 +6,7 @@ {{ $filename := . | safeURL }} {{ $original := printf "%s%s" $permalink $filename }} {{ end }} - <a data-goatcounter-click="{{ $slug }}" href="{{ $permalink }}" class="u-url"> + <a data-goatcounter-click="{{ $slug }}" href="{{ $permalink }}" class="u-url no-outline"> <h2 class="summary__title p-name"> {{ $title }} </h2> @@ -31,11 +31,11 @@ {{ $hell := .Type }} {{ if .Params.Description }} <p> {{ .Params.Description | safeHTML }} </p> - <a data-goatcounter-click="rmore-{{ $slug }}" href="{{ $permalink }}"> + <a data-goatcounter-click="rmore-{{ $slug }}" href="{{ $permalink }}" class="no-outline"> <p>Read More »</p> </a> {{ else }} - <div class="summary__content"> + <div class="content"> {{ partial "components/summary-seo.html" .Content }} </div> {{ end }}