Dark Mode Support
This commit is contained in:
parent
877a560391
commit
a8fce7c6f4
|
@ -16,14 +16,14 @@
|
|||
|
||||
{{ $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" . }}
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
@ -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>
|
||||
|
|
90
static/css/dark.css
Normal file
90
static/css/dark.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -6,6 +6,7 @@
|
|||
--bordercl:rebeccapurple;
|
||||
--callouctcolor:dodgerblue;
|
||||
--hovercolor:navy;
|
||||
--darkMaincolor: #50fa7b;
|
||||
}
|
||||
html {
|
||||
color: #232333;
|
||||
|
|
Loading…
Reference in a new issue