ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

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:
Massets/content.scss | 8+-------
Massets/styles.scss | 112++++++++++++++++++++++++++++---------------------------------------------------
Massets/variables.scss | 2+-
Mlayouts/_default/list.html | 23++++++++++++-----------
Mlayouts/_default/single.html | 2+-
Mlayouts/index.html | 6+++---
Mlayouts/partials/components/tagitem.html | 4++--
Mlayouts/partials/header/header.html | 2+-
Mlayouts/partials/post/pagination.html | 26+++++++++++++++++++-------
Mlayouts/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 }}