revises post navigation

layouts/partials/page-single/post-navigation.html

@@ -1,14 +1,14 @@
 {{ $enabledPostNavigation := .Site.Params.postNavigation | default true }}
 {{ if $enabledPostNavigation }}
-<div class="post--navigation post--navigation-single">
+<div class="navigation navigation-single">
     {{ with .PrevInSection }}
-    <a href="{{ .RelPermalink }}" class="post--navigation-prev">
+    <a href="{{ .RelPermalink }}" class="navigation-prev">
       <i aria-hidden="true" class="fa fa-chevron-left"></i>
       <span class="navigation-tittle">{{ .Title }}</span>
     </a>
     {{ end }}
     {{ with .NextInSection }}
-    <a href="{{ .RelPermalink }}" class="post--navigation-next">
+    <a href="{{ .RelPermalink }}" class="navigation-next">
       <span class="navigation-tittle">{{ .Title }}</span>
       <i aria-hidden="true" class="fa fa-chevron-right"></i>
     </a>

static-src/scss/hyde-hyde.scss

@@ -11,6 +11,7 @@
 @import 'hyde-hyde/post';
 @import 'hyde-hyde/code';
 @import 'hyde-hyde/gist';
+@import 'hyde-hyde/navigation';
 @import 'hyde-hyde/taxonomies';
 @import 'hyde-hyde/project';
 @import 'hyde-hyde/responsive';

static-src/scss/hyde-hyde/_navigation.scss

@@ -0,0 +1,66 @@
+ul.pagination {
+  list-style: none;
+  li.page-item {
+    display: inline-block;
+    a {
+      padding: 0.05em 0.25em;
+    }
+    &.active {
+      a {
+        color: $navigation-color;
+        border-bottom: 3px solid $navigation-color;
+      }
+    }
+  }
+}
+
+.navigation {
+  max-width: calc(100% - 0px);
+  margin: 0 auto;
+  margin-top: 60px;
+  a {
+    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    color: $navigation-color;
+    border: 2px solid $navigation-color;
+    line-height: 1.25;
+    text-transform: uppercase;
+    &:hover {
+      padding: 14px;
+      border-width: 3px;
+    }
+    &:nth-child(2) {
+      margin-top: 10px;
+    }
+    &:first-child:last-child {
+      width: 100%;
+    }
+  }
+  .fa {
+    font-size: 0.8rem;
+  }
+  .navigation-prev {
+    text-align: left;
+    .fa {
+      padding-right: 10px;
+    }
+    .navigation-tittle {
+      padding-left: 4px;
+    }
+  }
+  .navigation-next {
+    text-align: right;
+    .fa {
+      padding-left: 10px;
+    }
+    .navigation-tittle {
+      padding-right: 4px;
+    }
+  }
+}
+.navigation-single a {
+  text-transform: none;
+}

static-src/scss/hyde-hyde/_post.scss

@@ -35,58 +35,6 @@
   padding: 0 0 1rem 0;
 }
 
-.post--navigation {
-  width: 800px;
-  max-width: calc(100% - 0px);
-  margin: 0 auto;
-  margin-top: 60px;
-  a {
-    font-size: 0.8rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px;
-    color: $post--navigation-color;
-    border: 2px solid $post--navigation-color;
-    line-height: 1.25;
-    text-transform: uppercase;
-    &:hover {
-      padding: 14px;
-      border-width: 3px;
-    }
-    &:nth-child(2) {
-      margin-top: 10px;
-    }
-    &:first-child:last-child {
-      width: 100%;
-    }
-  }
-  .fa {
-    font-size: 0.8rem;
-  }
-  .post--navigation-prev {
-    text-align: left;
-    .fa {
-      padding-right: 10px;
-    }
-    .navigation-tittle {
-      padding-left: 4px;
-    }
-  }
-  .post--navigation-next {
-    text-align: right;
-    .fa {
-      padding-left: 10px;
-    }
-    .navigation-tittle {
-      padding-right: 4px;
-    }
-  }
-}
-.post--navigation-single a {
-  text-transform: none;
-}
-
 #references {
   li {
     font-size: 0.9rem;

static-src/scss/hyde-hyde/_responsive.scss

@@ -54,7 +54,7 @@
   .project__title {
     margin-top: 0.2rem;
   }
-  .post--navigation {
+  .navigation {
     display: flex;
     justify-content: space-between;
     a {

static-src/scss/hyde-hyde/_variables.scss

@@ -19,12 +19,14 @@ $blue: #268bd2;
 $brown: #8f5536;
 
 //https://www.client9.com/css-system-font-stack-sans-serif-v3
-$root-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+$root-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
 
 // poole's variables
-$root-font-size: 18px;
+$root-font-size: 20px;
 $root-font-weight: 400;
-$root-line-height: 30px; // golden ratio https://grtcalculator.com
+// golden ratio https://grtcalculator.com
+// 18px @ 33 px, 20px @ 33 px ~ 1.667em
+$root-line-height: 1.667em;
 
 $body-color: $gray-8;
 $body-bg: #fff;
@@ -32,12 +34,12 @@ $body-bg: #fff;
 $border-color: #e5e5e5;
 
 $large-breakpoint: 38em;
-$large-font-size: 20px;
+$large-font-size: 18px;
-// 
+//
 
 // hyde-hyde
 $small-device-font-size: 16px;
-$large-device-font-size: 18px;
+$large-device-font-size: $root-font-size;
 
 // https://www.client9.com/css-system-font-stack-monospace-v2
 $code-font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
@@ -52,7 +54,7 @@ $link-color: $blue;
 $link-hover-color: $body-color;
 
 // section
-$section__title-font-size: 2.15rem; 
+$section__title-font-size: 2.15rem;
 
 // post
 $post__subtitle-font-size: 1.5rem;
@@ -89,8 +91,8 @@ $sidebar-color: #300030;
 $site__title-font-size: 3rem;
 $copyright-font-size: 0.7rem;
 
-// post navigation
+// navigation
-$post--navigation-color: #c2255c;
+$navigation-color: #c2255c;
 
 // portfolio
 $project__title-font-size: $h2-font-size;