syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark theme

Browse Source
This commit is contained in:
Dmitry Kolosov 2020-06-21 23:23:07 +03:00
parent 193fbeca7c
commit 32818dacf1
9 changed files with 279 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/baseof.html
View File

@ -8,7 +8,7 @@
<body> <body>
<a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a> <a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a>
<div class="container"> <div class="container">
<header> <header class="common-header">
{{ block "header" . }} {{ block "header" . }}
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ end }} {{ end }}

2
layouts/_default/list.html
View File

@ -7,7 +7,7 @@
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
{{ range $pages }} {{ range $pages }}
<div class="post-short-list"> <div class="post-short-list">
<header> <header class="post-header">
<h2 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h2> <h2 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h2>
</header> </header>
{{ partial "postInfo.html" . }} {{ partial "postInfo.html" . }}

2
layouts/_default/single.html
View File

@ -8,7 +8,7 @@
{{ end }} {{ end }}
<article class="post"> <article class="post">
<header> <header class="post-header">
<h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}">{{ trim .Title " " }}</h1> <h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}">{{ trim .Title " " }}</h1>
</header> </header>
<div class="content"> <div class="content">

11
layouts/partials/head.html
View File

@ -16,6 +16,17 @@
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" /> <link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
{{- $style := "light" -}}
{{- if and (isset site.Params "style") (ne site.Params.style "") -}}
{{- $style = site.Params.style | lower -}}
{{- end -}}
{{- if eq $style "dark" -}}
<link rel="stylesheet" href="{{ "css/dark.css" | absURL }}?rnd={{ now.Unix }}" />
{{- else -}}
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{- end -}}
{{ range .Site.Params.customCSS -}} {{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}"> <link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
{{- end }} {{- end }}

2
layouts/partials/header.html
View File

@ -1,4 +1,4 @@
<h1 class="site-header"> <h1 class="site-title">
<a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a> <a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a>
</h1> </h1>
<nav> <nav>

2
layouts/partials/postSummary.html
View File

@ -1,5 +1,5 @@
<article class="post-list"> <article class="post-list">
<header> <header class="post-header">
<h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h1> <h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h1>
</header> </header>

129
static/css/dark.css Normal file
View File

@ -0,0 +1,129 @@
body {
background: #212121;
color: #eee;
}
/* Links */
a {
color: #599ada;
}
a:hover,
a:focus,
a:active {
color: #ff5858;
border-bottom: 1px solid rgba(238, 54, 54, 0.5);
}
/* Table */
thead {
background: #343a40;
}
th, td {
border: 1px double lightgrey;
}
/* Code */
pre {
background-color: #f1f1f1;
color: #333;
}
/* Styles */
blockquote {
border-left: 2px solid #ccc;
}
hr {
border-top: 1px solid #ccc;
}
/* Header */
header a {
color: #eee;
}
.common-header {
border-bottom: thin solid #333;
}
/* Articles */
.post-navigation {
background: #373737;
}
.post-navigation a {
color: #b6b6b6;
}
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: #ff5858;
}
article:not(:last-of-type) {
border-bottom: thin solid #333;
}
article header h1 a {
color: #eee;
}
.post-info {
color: grey;
}
.post-info a {
color: grey;
}
.post-info a:hover {
color: #ff5858;
}
article figcaption {
color: lightgrey;
}
.divider {
border-top: thin solid #ccc;
}
/* Pagination */
.pagination-item {
background: #373737;
}
.pagination-item a {
color: #eee;
}
.pagination-item a:hover, .pagination-item a:focus {
color: #ff5858;
}
/* Footer */
footer {
border-top: thin solid #333;
}
/* Media Queries */
@media (max-width: 840px) {
header nav {
background: #373737;
}
.post-navigation {
background: #373737;
}
}

128
static/css/light.css Normal file
View File

@ -0,0 +1,128 @@
body {
background: #fff;
color: #333;
}
/* Links */
a {
color: #1d60a3;
}
a:hover,
a:focus,
a:active {
color: #a31d1d;
border-bottom: 1px solid rgba(163, 29, 29, .5);
}
/* Table */
thead {
background: lightgrey;
}
th, td {
border: 1px double lightgrey;
}
/* Code */
pre {
background-color: #f1f1f1;
}
/* Styles */
blockquote {
border-left: 2px solid #ccc;
}
hr {
border-top: 1px solid #ccc;
}
/* Header */
header a {
color: #333;
}
.common-header {
border-bottom: thin solid #f1f1f1;
}
/* Articles */
.post-navigation {
background: #fafafa;
}
.post-navigation a {
color: #696969;
}
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: #a31d1d;
}
article:not(:last-of-type) {
border-bottom: thin solid #f1f1f1;
}
article header h1 a {
color: #333;
}
.post-info {
color: grey;
}
.post-info a {
color: grey;
}
.post-info a:hover {
color: #a31d1d;
}
article figcaption {
color: grey;
}
.divider {
border-top: thin solid #f1f1f1;
}
/* Pagination */
.pagination-item {
background: #fafafa;
}
.pagination-item a {
color: #333;
}
.pagination-item a:hover, .pagination-item a:focus {
color: #a31d1d;
}
/* Footer */
footer {
border-top: thin solid #f1f1f1;
}
/* Media Queries */
@media (max-width: 840px) {
header nav {
background: #fafafa;
}
.post-navigation {
background: #fafafa;
}
}

60
static/css/style.css
View File

@ -11,8 +11,6 @@ html {
body { body {
margin: 0; margin: 0;
background: #ffffff;
color: #333;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -59,7 +57,6 @@ h3 {
/* Links */ /* Links */
a { a {
color: #1d60a3;
text-decoration: none; text-decoration: none;
} }
@ -68,13 +65,6 @@ a:hover {
outline: 0; outline: 0;
} }
a:hover,
a:focus,
a:active {
color: #a31d1d;
border-bottom: 1px solid rgba(163, 29, 29, .5);
}
a:active { a:active {
opacity: 0.9; opacity: 0.9;
} }
@ -112,19 +102,14 @@ table {
border-spacing: 0; border-spacing: 0;
} }
thead {
background: lightgrey;
}
th, td { th, td {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px double lightgrey;
} }
/* Code */ /* Code */
pre { pre {
padding: 1em; padding: 1em;
background-color: #f1f1f1;
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
} }
@ -140,7 +125,6 @@ kbd {
/* Styles */ /* Styles */
blockquote { blockquote {
border-left: 2px solid #cccccc;
padding: 0.1em 1em; padding: 0.1em 1em;
margin-left: 0.75em; margin-left: 0.75em;
} }
@ -153,7 +137,6 @@ p {
hr { hr {
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid #cccccc;
} }
ul ol, ol ol, ul ul { ul ol, ol ol, ul ul {
@ -184,19 +167,18 @@ header nav {
margin-top: 1em; margin-top: 1em;
max-width: 100%; max-width: 100%;
text-align: right; text-align: right;
margin-bottom: 1em;
} }
header nav a { header nav a {
margin-left: 2em; margin-left: 2em;
} }
header a { .site-title {
color: #333; white-space: nowrap;
} }
.site-header { .common-header {
white-space: nowrap; padding-bottom: 2em;
} }
/* Pages */ /* Pages */
@ -218,7 +200,6 @@ main h1 {
text-align: center; text-align: center;
margin-top: 1em; margin-top: 1em;
max-width: 100%; max-width: 100%;
background: #fafafa;
padding: 0.5em 0; padding: 0.5em 0;
} }
@ -227,18 +208,11 @@ main h1 {
} }
.post-navigation a { .post-navigation a {
color: #696969;
margin-left: 2em; margin-left: 2em;
} }
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: #a31d1d;
}
.post-title.favorite::after { .post-title.favorite::after {
content: "★"; content: "☆";
display: inline-block; display: inline-block;
margin-left: 0.2em; margin-left: 0.2em;
} }
@ -250,13 +224,12 @@ main h1 {
} }
.post-title.favorite.draft::after { .post-title.favorite.draft::after {
content: "★ ✎"; content: "☆ ✎";
display: inline-block; display: inline-block;
margin-left: 0.2em; margin-left: 0.2em;
} }
article:not(:last-of-type) { article:not(:last-of-type) {
border-bottom: thin solid #f1f1f1;
padding-bottom: 2em; padding-bottom: 2em;
} }
@ -270,23 +243,13 @@ article header h1 {
article header h1 a { article header h1 a {
border: none; border: none;
text-decoration: none; text-decoration: none;
color: #333;
} }
.post-info { .post-info {
font-size: 0.75em; font-size: 0.75em;
color: grey;
margin-top: 1em; margin-top: 1em;
} }
.post-info a {
color: grey;
}
.post-info a:hover {
color: #a31d1d;
}
.post-short-list .post-info { .post-short-list .post-info {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -333,7 +296,6 @@ article img {
article figcaption { article figcaption {
text-align: center; text-align: center;
font-size: 0.85em; font-size: 0.85em;
color: grey;
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -345,7 +307,6 @@ article figcaption {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: thin solid #f1f1f1;
width: 25%; width: 25%;
margin: 1em auto; margin: 1em auto;
} }
@ -379,7 +340,6 @@ article figcaption {
} }
.pagination-item { .pagination-item {
background: #fafafa;
padding: 0.75em 0.75em; padding: 0.75em 0.75em;
} }
@ -387,12 +347,7 @@ article figcaption {
visibility: hidden; visibility: hidden;
} }
.pagination-item a {
color: #333333;
}
.pagination-item a:hover, .pagination-item a:focus { .pagination-item a:hover, .pagination-item a:focus {
color: #a31d1d;
border-bottom: 0; border-bottom: 0;
} }
@ -406,7 +361,6 @@ article figcaption {
/* Footer */ /* Footer */
footer { footer {
border-top: thin solid #f1f1f1;
margin-top: 3em; margin-top: 3em;
font-size: 16px; font-size: 16px;
} }
@ -454,7 +408,6 @@ ul.language-select > li {
margin-top: 1em; margin-top: 1em;
max-width: 100%; max-width: 100%;
text-align: center; text-align: center;
background: #fafafa;
padding: 0.5em 0; padding: 0.5em 0;
} }
@ -468,7 +421,6 @@ ul.language-select > li {
.post-navigation { .post-navigation {
text-align: center; text-align: center;
background: #fafafa;
padding: 0.5em 0; padding: 0.5em 0;
} }