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

revises styles and layouts

Browse source
This commit is contained in:
Huy Tran 2018-07-22 21:34:01 +10:00
parent 1082ce5593
commit c360289608
6 changed files with 99 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/debug.html
View file

@ -1,3 +1,3 @@
<span style="color:red"> <span style="color:red">
{{ printf "%#v" . }} {{ printf "%#v" . }} <br/>
</span> </span>

6
layouts/partials/post-meta-after.html
View file

@ -2,7 +2,7 @@
<ul class="post__nav"> <ul class="post__nav">
<li class="post__nav--next"> <li class="post__nav--next">
{{ with .NextInSection -}} {{ with .NextInSection -}}
<a href="{{ .RelPermalink }}"> <a href="{{ .RelPermalink }}">
<span class="next__heading">NEXT</span> <span class="next__heading">NEXT</span>
<span>{{ .Title }}</span> <span>{{ .Title }}</span>
</a> </a>
@ -11,9 +11,9 @@
</li> </li>
<li class="post__nav--previous"> <li class="post__nav--previous">
{{ with .PrevInSection -}} {{ with .PrevInSection -}}
<span class="previous__heading">PREVIOUS</span>
<i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-left"></i>
<a href="{{ .RelPermalink }}"> <a href="{{ .RelPermalink }}">
<span class="previous__heading">PREVIOUS</span>
<span class="previous__title">{{ .Title }}</span> <span class="previous__title">{{ .Title }}</span>
</a> </a>
{{- end }} {{- end }}

97
static-src/scss/hyde-hyde/_customised.scss
View file

@ -43,6 +43,19 @@
} }
} }
%link-hover {
color: $link-hover-color;
border-bottom: 1px dotted $gray-4;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word;
}
%link-no-decoration {
border-style: none;
text-decoration: none;
}
.sidebar { .sidebar {
background-color: $sidebar-color; background-color: $sidebar-color;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -53,12 +66,10 @@
color: $gray-1; color: $gray-1;
border: none; border: none;
&:hover { &:hover {
text-decoration: none; @extend %link-no-decoration;
border: none;
} }
&:focus { &:focus {
text-decoration: none; @extend %link-no-decoration;
border: none;
} }
} }
} }
@ -85,39 +96,26 @@ a {
word-wrap: break-word; word-wrap: break-word;
&.sidebar-nav-item { &.sidebar-nav-item {
&:hover { &:hover {
text-decoration: none; @extend %link-no-decoration;
} }
&:focus { &:focus {
text-decoration: none; @extend %link-no-decoration;
} }
} }
&:focus { &:focus {
color: $link-hover-color; @extend %link-hover;
border-bottom: 1px dotted $gray-4;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word;
&.tag { &.tag {
border-bottom-style: none; @extend %link-no-decoration;
text-decoration: none;
} }
} }
&:hover { &:hover {
color: $link-hover-color; @extend %link-hover;
border-bottom: 1px dotted $gray-4;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word;
&.tag { &.tag {
border-bottom-style: none; @extend %link-no-decoration;
text-decoration: none;
} }
} }
&.tag { &.tag {
border-bottom-style: none; @extend %link-no-decoration;
text-decoration: none;
} }
} }
@ -170,28 +168,37 @@ h4 {
font-size: $h4-font-size; font-size: $h4-font-size;
} }
blockquote { %quotebox {
padding: .8889rem; padding: .8889rem;
color: #7a7a7a;
background-color: #fafafa;
border-left: 6px solid #e6e6e6;
border-right: 6px solid transparent;
border-radius: 6px;
margin-top: 1.4em; margin-top: 1.4em;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
border-radius: 6px;
border-left-width: 6px;
border-left-style: solid;
border-right: 6px solid transparent;
border-right-width: 6px;
border-right-style: solid;
border-right-color: rgba(0, 0, 0, 0) transparent;
color: #7a7a7a;
}
blockquote {
background-color: #fafafa;
border-left-color: #e6e6e6;
@extend %quotebox;
}
.important {
background-color: #fbf8e8;
border-left-color: #fee450;
@extend %quotebox;
} }
.warning { .warning {
padding: .8889rem;
color: #7a7a7a;
background-color: #f2dbdc; background-color: #f2dbdc;
border-left: 6px solid #e6e6e6; border-left-color: #ae272f;
border-right: 6px solid transparent; @extend %quotebox;
border-radius: 6px;
margin-top: 1.4em;
margin-left: 0px;
margin-right: 0px;
} }
.img--circle { .img--circle {
@ -243,15 +250,19 @@ pre {
} }
} }
code { %code-in-box {
font-family: $code-font-family;
border-radius: 3px; border-radius: 3px;
padding: 2px 4px; padding: 2px 4px;
color: $code-color;
background-color: $code-background-color;
}
code {
font-family: $code-font-family;
white-space: pre-wrap; white-space: pre-wrap;
font-size: $code-font-size; font-size: $code-font-size;
line-height: $code-line-height; line-height: $code-line-height;
color: $code-color; @extend %code-in-box;
background-color: $code-background-color;
} }
li code { li code {
@ -392,7 +403,6 @@ kbd {
border: 1px solid $gray-2; border: 1px solid $gray-2;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.4; line-height: 1.4;
font-family: $root-font-family;
background-color: #fafbfc; background-color: #fafbfc;
color: $gray-9; color: $gray-9;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
@ -406,7 +416,6 @@ kbd {
// highlight.js // highlight.js
.hljs { .hljs {
white-space: pre; white-space: pre;
font-size: $code-fence-font-size;
} }
#references~ol { #references~ol {

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

@ -30,9 +30,9 @@ $large-breakpoint: 38em;
$large-font-size: 20px; $large-font-size: 20px;
// https://www.client9.com/css-system-font-stack-monospace-v2 // https://www.client9.com/css-system-font-stack-monospace-v2
$code-font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace; $code-font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
$code-font-size: .84rem; $code-font-size: .9rem;
$code-fence-font-size: .8rem; $code-fence-font-size: .7rem;
$code-color: #bf616a; $code-color: #bf616a;
$code-background-color: #f9f2f4; $code-background-color: #f9f2f4;
$code-line-height: 1.4; $code-line-height: 1.4;

93
static/css/hyde-hyde.css
View file

@ -331,6 +331,18 @@ footer {
font-weight: 400; font-weight: 400;
line-height: 1.611em; } } line-height: 1.611em; } }
a:focus, a:hover {
color: #515151;
border-bottom: 1px dotted #ccc;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word; }
.sidebar a:hover, .sidebar a:focus, a.sidebar-nav-item:hover, a.sidebar-nav-item:focus, a.tag:focus, a.tag:hover, a.tag {
border-style: none;
text-decoration: none; }
.sidebar { .sidebar {
background-color: #300030; background-color: #300030;
color: white; color: white;
@ -340,12 +352,6 @@ footer {
.sidebar a { .sidebar a {
color: #f9f9f9; color: #f9f9f9;
border: none; } border: none; }
.sidebar a:hover {
text-decoration: none;
border: none; }
.sidebar a:focus {
text-decoration: none;
border: none; }
.sidebar-nav { .sidebar-nav {
list-style: none; list-style: none;
@ -363,33 +369,6 @@ a {
color: #268bd2; color: #268bd2;
text-decoration: none; text-decoration: none;
word-wrap: break-word; } word-wrap: break-word; }
a.sidebar-nav-item:hover {
text-decoration: none; }
a.sidebar-nav-item:focus {
text-decoration: none; }
a:focus {
color: #515151;
border-bottom: 1px dotted #ccc;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word; }
a:focus.tag {
border-bottom-style: none;
text-decoration: none; }
a:hover {
color: #515151;
border-bottom: 1px dotted #ccc;
text-decoration: none;
background: transparent;
background-color: transparent;
word-wrap: break-word; }
a:hover.tag {
border-bottom-style: none;
text-decoration: none; }
a.tag {
border-bottom-style: none;
text-decoration: none; }
.content { .content {
padding-bottom: 2rem; padding-bottom: 2rem;
@ -429,27 +408,31 @@ h3 {
h4 { h4 {
font-size: 1.3rem; } font-size: 1.3rem; }
blockquote { blockquote, .important, .warning {
padding: .8889rem; padding: .8889rem;
color: #7a7a7a;
background-color: #fafafa;
border-left: 6px solid #e6e6e6;
border-right: 6px solid transparent;
border-radius: 6px;
margin-top: 1.4em; margin-top: 1.4em;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; } margin-right: 0px;
border-radius: 6px;
border-left-width: 6px;
border-left-style: solid;
border-right: 6px solid transparent;
border-right-width: 6px;
border-right-style: solid;
border-right-color: rgba(0, 0, 0, 0) transparent;
color: #7a7a7a; }
blockquote {
background-color: #fafafa;
border-left-color: #e6e6e6; }
.important {
background-color: #fbf8e8;
border-left-color: #fee450; }
.warning { .warning {
padding: .8889rem;
color: #7a7a7a;
background-color: #f2dbdc; background-color: #f2dbdc;
border-left: 6px solid #e6e6e6; border-left-color: #ae272f; }
border-right: 6px solid transparent;
border-radius: 6px;
margin-top: 1.4em;
margin-left: 0px;
margin-right: 0px; }
.img--circle { .img--circle {
border-radius: 50%; } border-radius: 50%; }
@ -489,15 +472,17 @@ pre {
white-space: pre-wrap; } white-space: pre-wrap; }
code { code {
font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
border-radius: 3px; border-radius: 3px;
padding: 2px 4px; padding: 2px 4px;
white-space: pre-wrap;
font-size: 0.84rem;
line-height: 1.4;
color: #bf616a; color: #bf616a;
background-color: #f9f2f4; } background-color: #f9f2f4; }
code {
font-family: "SF-Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
white-space: pre-wrap;
font-size: 0.9rem;
line-height: 1.4; }
li code { li code {
border-radius: 4px; border-radius: 4px;
padding: 2px 4px; padding: 2px 4px;
@ -610,7 +595,6 @@ kbd {
border: 1px solid #eee; border: 1px solid #eee;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.4; line-height: 1.4;
font-family: system, 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";
background-color: #fafbfc; background-color: #fafbfc;
color: #313131; color: #313131;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
@ -621,8 +605,7 @@ kbd {
white-space: nowrap; } white-space: nowrap; }
.hljs { .hljs {
white-space: pre; white-space: pre; }
font-size: 0.8rem; }
#references ~ ol { #references ~ ol {
font-size: .9rem; } font-size: .9rem; }

2
static/css/hyde-hyde.css.map
View file

File diff suppressed because one or more lines are too long