WIP: dark theme
This commit is contained in:
Dmitry Kolosov
parent
193fbeca7c
commit
32818dacf1
@ -8,7 +8,7 @@
|
||||
<body>
|
||||
<a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a>
|
||||
<div class="container">
|
||||
<header>
|
||||
<header class="common-header">
|
||||
{{ block "header" . }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ end }}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{ range $pages }}
|
||||
<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>
|
||||
</header>
|
||||
{{ partial "postInfo.html" . }}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{{ end }}
|
||||
|
||||
<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>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
@ -16,6 +16,17 @@
|
||||
|
||||
<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 -}}
|
||||
<link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
|
||||
{{- end }}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h1 class="site-header">
|
||||
<h1 class="site-title">
|
||||
<a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a>
|
||||
</h1>
|
||||
<nav>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
</header>
|
||||
|
||||
|
||||
129
static/css/dark.css
Normal file
129
static/css/dark.css
Normal 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
128
static/css/light.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -11,8 +11,6 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -59,7 +57,6 @@ h3 {
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
color: #1d60a3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -68,13 +65,6 @@ a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #a31d1d;
|
||||
border-bottom: 1px solid rgba(163, 29, 29, .5);
|
||||
}
|
||||
|
||||
a:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@ -112,19 +102,14 @@ table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.5em 1em;
|
||||
border: 1px double lightgrey;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
pre {
|
||||
padding: 1em;
|
||||
background-color: #f1f1f1;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -140,7 +125,6 @@ kbd {
|
||||
/* Styles */
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #cccccc;
|
||||
padding: 0.1em 1em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
@ -153,7 +137,6 @@ p {
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
ul ol, ol ol, ul ul {
|
||||
@ -184,19 +167,18 @@ header nav {
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: #333;
|
||||
.site-title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
white-space: nowrap;
|
||||
.common-header {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
/* Pages */
|
||||
@ -218,7 +200,6 @@ main h1 {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
background: #fafafa;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
@ -227,18 +208,11 @@ main h1 {
|
||||
}
|
||||
|
||||
.post-navigation a {
|
||||
color: #696969;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.post-navigation a:hover,
|
||||
.post-navigation a:focus,
|
||||
.post-navigation a:active {
|
||||
color: #a31d1d;
|
||||
}
|
||||
|
||||
.post-title.favorite::after {
|
||||
content: "★";
|
||||
content: "☆";
|
||||
display: inline-block;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
@ -250,13 +224,12 @@ main h1 {
|
||||
}
|
||||
|
||||
.post-title.favorite.draft::after {
|
||||
content: "★ ✎";
|
||||
content: "☆ ✎";
|
||||
display: inline-block;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
article:not(:last-of-type) {
|
||||
border-bottom: thin solid #f1f1f1;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
@ -270,23 +243,13 @@ article header h1 {
|
||||
article header h1 a {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
font-size: 0.75em;
|
||||
color: grey;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.post-info a {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.post-info a:hover {
|
||||
color: #a31d1d;
|
||||
}
|
||||
|
||||
.post-short-list .post-info {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5em;
|
||||
@ -333,7 +296,6 @@ article img {
|
||||
article figcaption {
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
color: grey;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
@ -345,7 +307,6 @@ article figcaption {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: thin solid #f1f1f1;
|
||||
width: 25%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
@ -379,7 +340,6 @@ article figcaption {
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
background: #fafafa;
|
||||
padding: 0.75em 0.75em;
|
||||
}
|
||||
|
||||
@ -387,12 +347,7 @@ article figcaption {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.pagination-item a {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pagination-item a:hover, .pagination-item a:focus {
|
||||
color: #a31d1d;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@ -406,7 +361,6 @@ article figcaption {
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
border-top: thin solid #f1f1f1;
|
||||
margin-top: 3em;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -454,7 +408,6 @@ ul.language-select > li {
|
||||
margin-top: 1em;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
@ -468,7 +421,6 @@ ul.language-select > li {
|
||||
|
||||
.post-navigation {
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user