vbatts/hugo-theme-hyde-hyde
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

revises post navigation

Browse source
This commit is contained in:
Huy Tran 2018-09-12 12:32:10 +10:00
parent 1b279c5b8e
commit 0a6bbc3630
6 changed files with 82 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
layouts/partials/page-single/post-navigation.html
View file

@ -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>

1
static-src/scss/hyde-hyde.scss
View file

@ -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';

66
static-src/scss/hyde-hyde/_navigation.scss Normal file
View file

@ -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;
}

52
static-src/scss/hyde-hyde/_post.scss
View file

@ -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;

2
static-src/scss/hyde-hyde/_responsive.scss
View file

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

20
static-src/scss/hyde-hyde/_variables.scss
View file

@ -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;