From 0a6bbc3630459b7eaabff241827a84b4167038e6 Mon Sep 17 00:00:00 2001 From: Huy Tran Date: Wed, 12 Sep 2018 12:32:10 +1000 Subject: [PATCH] revises post navigation --- .../partials/page-single/post-navigation.html | 6 +- static-src/scss/hyde-hyde.scss | 1 + static-src/scss/hyde-hyde/_navigation.scss | 66 +++++++++++++++++++ static-src/scss/hyde-hyde/_post.scss | 52 --------------- static-src/scss/hyde-hyde/_responsive.scss | 2 +- static-src/scss/hyde-hyde/_variables.scss | 20 +++--- 6 files changed, 82 insertions(+), 65 deletions(-) create mode 100644 static-src/scss/hyde-hyde/_navigation.scss diff --git a/layouts/partials/page-single/post-navigation.html b/layouts/partials/page-single/post-navigation.html index 5ae2a9b..a0afbfc 100644 --- a/layouts/partials/page-single/post-navigation.html +++ b/layouts/partials/page-single/post-navigation.html @@ -1,14 +1,14 @@ {{ $enabledPostNavigation := .Site.Params.postNavigation | default true }} {{ if $enabledPostNavigation }} -
+
{{ with .PrevInSection }} - + {{ .Title }} {{ end }} {{ with .NextInSection }} - + {{ .Title }} diff --git a/static-src/scss/hyde-hyde.scss b/static-src/scss/hyde-hyde.scss index 2ecbc78..2db5a25 100644 --- a/static-src/scss/hyde-hyde.scss +++ b/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'; diff --git a/static-src/scss/hyde-hyde/_navigation.scss b/static-src/scss/hyde-hyde/_navigation.scss new file mode 100644 index 0000000..d111ef9 --- /dev/null +++ b/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; +} diff --git a/static-src/scss/hyde-hyde/_post.scss b/static-src/scss/hyde-hyde/_post.scss index 1042d13..5e3eb59 100644 --- a/static-src/scss/hyde-hyde/_post.scss +++ b/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; diff --git a/static-src/scss/hyde-hyde/_responsive.scss b/static-src/scss/hyde-hyde/_responsive.scss index 9ed72ad..b9af2a6 100644 --- a/static-src/scss/hyde-hyde/_responsive.scss +++ b/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 { diff --git a/static-src/scss/hyde-hyde/_variables.scss b/static-src/scss/hyde-hyde/_variables.scss index 829127a..e8c4ebf 100644 --- a/static-src/scss/hyde-hyde/_variables.scss +++ b/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 -$post--navigation-color: #c2255c; +// navigation +$navigation-color: #c2255c; // portfolio $project__title-font-size: $h2-font-size;