diff options
author | athul <athul8720@gmail.com> | 2020-04-16 10:20:38 +0300 |
---|---|---|
committer | athul <athul8720@gmail.com> | 2020-04-16 10:20:38 +0300 |
commit | a8fce7c6f47b105f9b729be4d4a4e8010aae34cd (patch) | |
tree | d4e584d445670e52501661baa7926d0819b1cfc7 | |
parent | 877a560391fe176a25c1f59fd5f9689bfe3f86d6 (diff) |
Dark Mode Support
-rw-r--r-- | layouts/_default/terms.html | 8 | ||||
-rw-r--r-- | layouts/partials/header.html | 3 | ||||
-rw-r--r-- | static/css/dark.css | 90 | ||||
-rw-r--r-- | static/css/main.css | 3 |
4 files changed, 99 insertions, 5 deletions
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 92330b1..cec21f6 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -16,15 +16,15 @@ {{ $data := .Data }} <div class="tag-cloud"> + <ul> {{ range $key, $value := .Data.Terms.ByCount }} {{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }} {{ $size := (cond (eq $biggest $smallest) $min $size) }} - <a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a> + <li><a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a></li> {{ end }} + </ul> </div> - -<hr> - {{ partial "footer.html" . }} + {{ partial "footer.html" . }} </div> </body> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 937cd57..4e491d6 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -28,6 +28,9 @@ <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" /> + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} + <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> + {{- end -}} {{- range .Site.Params.customJS }} {{- if or (hasPrefix . "http://") (hasPrefix . "https://") }} <script src="{{ . }}"></script> diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..4675652 --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,90 @@ +body { + color: white; + background-color: #202124; +} + +::-moz-selection { + background: blue; + color: #fff; + text-shadow: none +} + +::selection { + background: red; + color: #fff; + text-shadow: none +} + +hr { + border-top: 3px dotted blue; +} +code { + background-color: lightblue; + color:black; + text-decoration: bold; + padding: .1em .2em; + } +pre { + background-color: #272822; + line-height: 1.4; + overflow-x: auto; + padding: 1em; + } +blockquote { + border-color: blue; +} + +h1,h2,h3,h4,h5,h6 { + color: #ddd; +} +h1::before { color: var(--darkMaincolor); content: '# '; } +h2::before { color: var(--darkMaincolor); content: '## '; } +h3::before { color: var(--darkMaincolor); content: '### '; } +h4::before { color: var(--darkMaincolor); content: '#### '; } +h5::before { color: var(--darkMaincolor); content: '##### '; } +h6::before { color: var(--darkMaincolor); content: '###### '; } + +a{ + border-bottom: 3px solid var(--darkMaincolor); + color:inherit; +} +a:hover { + background-color: var(--darkMaincolor); + color:black; +} + +.site-description a{ + color: #ddd; +} +.site-description a:hover { + color: black; + +} + +.tags a{ + border-bottom: 3px solid var(--darkMaincolor); + } + .tags a:hover{ + color: black; + } + +.site-title a { + color: white; + text-decoration: none !important; +} + +.header nav, +.footer { + border-color: #333; +} + +.highlight { + background-color: #333; +} +.soc:hover{ + color: black; + } + .draft-label{ + color:var(--darkMaincolor); + background-color: blue; + }
\ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 83a830c..e9abc78 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -6,6 +6,7 @@ --bordercl:rebeccapurple; --callouctcolor:dodgerblue; --hovercolor:navy; +--darkMaincolor: #50fa7b; } html { color: #232333; @@ -51,7 +52,7 @@ a { } a:hover { background-color: var(--hovercolor); - color: #fff; + color: #fff; } ul { |