From b99cf69567b8f32dc8431deed0bf75b240c3e3c4 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Thu, 21 Jan 2021 17:21:19 +0000
Subject: [PATCH] Fixed Dark Theme
---
assets/scss/_pagination_dark.scss | 4 ++
assets/scss/_menu_dark.scss | 4 ++
assets/scss/_sidebar_dark.scss | 4 ++
assets/scss/_content_dark.scss | 13 +++++-
assets/scss/contact_dark.scss | 4 ++
assets/scss/_variables.scss | 2
layouts/partials/head.html | 28 ++++++++++---
assets/scss/_buttons_dark.scss | 4 ++
assets/scss/_content.scss | 2
assets/scss/_post_dark.scss | 11 +++++
assets/scss/_base_dark.scss | 30 ++++++++-------
11 files changed, 79 insertions(+), 27 deletions(-)
diff --git a/assets/scss/_base_dark.scss b/assets/scss/_base_dark.scss
index 68964f4..59f0b44 100644
--- a/assets/scss/_base_dark.scss
+++ b/assets/scss/_base_dark.scss
@@ -1,40 +1,42 @@
@mixin base_dark {
-
html {
background-color: $bg-color-dark;
}
-
+
body {
color: $body-color-dark;
background-color: $bg-color-dark;
}
-
+
+
blockquote {
border-left: .25em solid $blockquote-border-color-dark;
color: $blockquote-text-color-dark;
}
-
+
.category {
- color: $tag-color-dark !important;
+ color: var(--tag-color-dark)!important;
background-color: $secondary-bg-color-dark;
border: 1px solid $border-color-dark;
}
-
+
+
pre {
background-color: $pre-bg-color-dark;
- }
+ }
+}
- a:link,
- a:visited {
- color: $tag-color-dark;
- }
-
+@media screen and (max-width: 960px),
+print {
.page-top .nav {
- background-color: $secondary-bg-color;
+ background-color: $secondary-bg-color-dark;
}
.navbar-burger span {
- background-color: $heading-color;
+ background-color: $heading-color-dark;
}
+}
+html[data-theme='dark'] {
+ @include base_dark()
}
\ No newline at end of file
diff --git a/assets/scss/_buttons_dark.scss b/assets/scss/_buttons_dark.scss
index d11d70d..d062a88 100644
--- a/assets/scss/_buttons_dark.scss
+++ b/assets/scss/_buttons_dark.scss
@@ -2,4 +2,8 @@
.btn {
border: 1px solid $border-color-dark;
}
+}
+
+html[data-theme='dark'] {
+ @include buttons_dark()
}
\ No newline at end of file
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index fd2b1f1..8399f88 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -21,7 +21,7 @@
float: left;
font-size: 12px;
display: block;
- width: calc(100% - 30px;
+ width: calc(100% - 30px);
}
.page-top .nav li {
diff --git a/assets/scss/_content_dark.scss b/assets/scss/_content_dark.scss
index bbfba39..8d2bff5 100644
--- a/assets/scss/_content_dark.scss
+++ b/assets/scss/_content_dark.scss
@@ -1,15 +1,22 @@
@mixin content_dark {
+ .content {
+ background-color: $bg-color-dark;
+ }
.page-top {
background-color: $bg-color-dark;
border-bottom: 1px solid $border-color-dark;
}
.page-top .nav a {
- color: $nav-text-dark;
+ color: $nav-text-color-dark;
}
.page-top .nav a.current {
- color: $nav-text-dark;
- border-bottom: 1px solid $nav-text-dark;
+ color: $nav-text-color-dark;
+ border-bottom: 1px solid $nav-text-color-dark;
}
+}
+
+html[data-theme='dark'] {
+ @include content_dark()
}
\ No newline at end of file
diff --git a/assets/scss/_menu_dark.scss b/assets/scss/_menu_dark.scss
index b7d36ce..fd7adde 100644
--- a/assets/scss/_menu_dark.scss
+++ b/assets/scss/_menu_dark.scss
@@ -4,4 +4,8 @@
border: 1px solid $border-color-dark;
}
+}
+
+html[data-theme='dark'] {
+ @include menu_dark()
}
\ No newline at end of file
diff --git a/assets/scss/_pagination_dark.scss b/assets/scss/_pagination_dark.scss
index d447d65..b81fde3 100644
--- a/assets/scss/_pagination_dark.scss
+++ b/assets/scss/_pagination_dark.scss
@@ -5,3 +5,7 @@
}
}
+
+html[data-theme='dark'] {
+ @include pagination_dark();
+}
\ No newline at end of file
diff --git a/assets/scss/_post_dark.scss b/assets/scss/_post_dark.scss
index fbaf2d1..3363f28 100644
--- a/assets/scss/_post_dark.scss
+++ b/assets/scss/_post_dark.scss
@@ -15,10 +15,15 @@
color: $heading-color-dark;
}
+
.post .post-footer {
border-bottom: 1px solid $border-color-dark;
}
+ .post .post-footer .meta .info {
+ color: $body-color-dark;
+ }
+
.post .post-footer .meta a {
color: $body-color-dark;
}
@@ -29,5 +34,9 @@
.post .post-thumbnail img {
border: 1px solid $border-color-dark;
- }
+ }
}
+
+html[data-theme='dark'] {
+ @include post_dark()
+}
\ No newline at end of file
diff --git a/assets/scss/_sidebar_dark.scss b/assets/scss/_sidebar_dark.scss
index a4c1602..2b98090 100644
--- a/assets/scss/_sidebar_dark.scss
+++ b/assets/scss/_sidebar_dark.scss
@@ -10,4 +10,8 @@
color:$heading-color-dark;
}
+}
+
+html[data-theme='dark'] {
+ @include sidebar_dark()
}
\ No newline at end of file
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 5983414..f98bf38 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -22,7 +22,7 @@
$heading-color-dark: rgb(169, 169, 179);
$body-color-dark: rgb(169, 169, 179);
$post-color-dark: rgba(0, 0, 0, 0.44);
-$border-colo-darkr: rgb(38, 38, 38);
+$border-color-dark: rgb(38, 38, 38);
$form-border-color-dark: rgb(169, 169, 179);
$form-button-hover-border-color-dark: #fff;
$pre-bg-color-dark: rgb(33, 33, 45);
diff --git a/assets/scss/contatc_dark.scss b/assets/scss/contact_dark.scss
similarity index 92%
rename from assets/scss/contatc_dark.scss
rename to assets/scss/contact_dark.scss
index 1269830..f2c0978 100644
--- a/assets/scss/contatc_dark.scss
+++ b/assets/scss/contact_dark.scss
@@ -19,4 +19,8 @@
background-color: $bg-color-dark;
border: 1px solid $form-button-hover-border-color-dark;
}
+}
+
+html[data-theme='dark'] {
+ @include contact_dark()
}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index d783bc3..a5d62cc 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,13 +10,27 @@
<meta name="google-site-verification" content="{{ .Site.Params.googleSiteVerify }}">
{{- end -}}
- <!-- CSS -->
- {{ $style := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "main.css" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
- <link rel="stylesheet"
- href="{{ $style.Permalink }}"
- integrity="{{ $style.Data.Integrity }}"
- crossorigin="anonymous"
- type="text/css">
+ {{ if .Site.IsServer }}
+ {{ $cssOpts := (dict "targetPath" "css/anatole.css" "enableSourceMap" true ) }}
+ {{ $styles := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "style.anatole.css" . | toCSS $cssOpts }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+ {{ else }}
+ {{ $cssOpts := (dict "targetPath" "css/anatole.css" ) }}
+ {{ $styles := resources.Get "scss/anatole.scss" | resources.ExecuteAsTemplate "style.anatole.css" . | toCSS $cssOpts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+ {{ end }}
+
+ <!-- TODO Load only if really required -->
+ {{ if .Site.IsServer }}
+ {{ $cssOpts := (dict "targetPath" "css/anatole_dark.css" "enableSourceMap" true ) }}
+ {{ $styles := resources.Get "scss/anatole_dark.scss" | resources.ExecuteAsTemplate "style.anatole-dark.css" . | toCSS $cssOpts }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+ {{ else }}
+ {{ $cssOpts := (dict "targetPath" "css/anatole_dark.css" ) }}
+ {{ $styles := resources.Get "scss/anatole_dark.scss" | resources.ExecuteAsTemplate "style.anatole-dark.css" . | toCSS $cssOpts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+ {{ end }}
+
{{ range .Site.Params.customCss }}
{{ $minstyles := resources.Get . }}
--
Gitblit v1.10.0