diff options
Diffstat (limited to 'theme/custom/custom.css')
-rwxr-xr-x | theme/custom/custom.css | 126 |
1 files changed, 88 insertions, 38 deletions
diff --git a/theme/custom/custom.css b/theme/custom/custom.css index f27695a..db4e5f5 100755 --- a/theme/custom/custom.css +++ b/theme/custom/custom.css @@ -1,14 +1,42 @@ -body { - color:#2e3440; +html[data-theme="dark"] { + --main-text-color: #d8dee9; + --main-background-color: #2e3440; + --side-background-color: #222; + --border-color: #4c566a; + --link-color: #88c0d0; } -main nav { - border-bottom: 1px solid #d8dee9; +html[data-theme="dark"] main article h1, main article h2 { + color: #5e81ac; } -hr { - background-color: #d8dee9; + +html[data-theme="dark"] main article a:hover { + background-color:#5e81ac; + color:#fff; } +html[data-theme="light"] { + --main-text-color: #2e3440; + --main-background-color: #fff; + --side-background-color: #2e3440; + --border-color: #eee; + --link-color: #5e81ac; +} + +body { + color: var(--main-text-color); + background-color: var(--main-background-color); +} +a { + color: var(--link-color); +} +aside { + background-color: var(--side-background-color); +} +aside, +aside a { + color:#eceff4 +} a.btn, .tag-cloud a, section#isso-thread section.auth-section p.post-action input { @@ -20,49 +48,34 @@ a.btn:hover, background-color:#5e81ac; color:#fff; } - -a { - color: #5e81ac; -} a:hover { color: #5e81ac; text-decoration:underline } - -aside { - background-color:#2e3440; -} - -aside, -aside a { - color:#eceff4 -} aside a:hover { color:#d8dee9; text-decoration:none; } -main article :not(pre)>code { - font-size:.8em; - white-space:nowrap; - color:#c25; - padding:1px 3px; - background-color:#f7f7f9; - border:1px solid #e1e1e8; - border-radius:3px + +aside a:hover { + color:#d8dee9; + text-decoration:none; } -main footer p { - margin:2px; - text-align:center; - padding:0 40px; - color:#999; - font-size:11px +hr { + background-color: var(--border-color); } + div.related-posts { margin:15px 0; padding-bottom:20px; - border-top:1px solid #eee; - border-bottom:1px solid #eee + border-top:1px solid var(--border-color); + border-bottom:1px solid var(--border-color); +} + + +main nav { + border-bottom: 1px solid #d8dee9; } ul.social a.sc-facebook { background-color:#3e5b98 @@ -138,6 +151,37 @@ ul.social a.sc-flickr { ul.social a.sc-lastfm { background-color:#d92323 } +main article table { + width: 100%; +} +.theme-switch { + color: unset; + background-color: unset; + border: 0px; +} +@media screen and (max-width: 768px) { + .theme-switch { + position: absolute; + top: 25px; + right: 25px; + } +} +@media screen and (min-width: 768px) { + .theme-switch { + position: fixed; + bottom: 10px; + } +} +main footer { + border-top: var(--border-color); +} +main footer p { + margin:2px; + text-align:center; + padding:0 40px; + color:#999; + font-size:11px +} div.admonition div, div.admonition p, div.admonition pre { @@ -183,9 +227,6 @@ div.figure { font-size:90%; color:#6c757d } -main article table { - width: 100%; -} main article table th.field-name { width: 10em; text-align: right; @@ -195,3 +236,12 @@ main article table th.field-name { main article table td.field-body { border-top: 0px; } +main article :not(pre)>code { + font-size:.8em; + white-space:nowrap; + color:#c25; + padding:1px 3px; + background-color:#f7f7f9; + border:1px solid #e1e1e8; + border-radius:3px +} |