From 27cb8f946d2b33de6903041a27040c61c2c36f89 Mon Sep 17 00:00:00 2001 From: Frederick Yin Date: Tue, 17 Jan 2023 21:11:00 +0800 Subject: Style: separate custom styles into fkfd.css --- alabaster-lite/css/alabaster.css | 201 +------------------------------------ alabaster-lite/css/fkfd.css | 210 +++++++++++++++++++++++++++++++++++++++ alabaster-lite/main.html | 1 + 3 files changed, 215 insertions(+), 197 deletions(-) create mode 100644 alabaster-lite/css/fkfd.css diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css index 94ad49d..dbf7b62 100644 --- a/alabaster-lite/css/alabaster.css +++ b/alabaster-lite/css/alabaster.css @@ -1,15 +1,8 @@ -/* - * This file used to import a css called basic.css, - * but the latter is fused in this file - */ - /* -- page layout ----------------------------------------------------------- */ body { font-family: "Noto Sans", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 18px; - background-color: white; - color: #000; margin: 0; padding: 0; } @@ -37,8 +30,6 @@ hr { } div.body { - background-color: #ffffff; - color: #3E4349; padding: 0 30px 0 30px; } @@ -63,9 +54,7 @@ div.relations { display: none; } - div.sphinxsidebar a { - color: #444; text-decoration: none; border-bottom: 1px dotted #999; } @@ -108,7 +97,6 @@ div.sphinxsidebarwrapper p.blurb { div.sphinxsidebar h3, div.sphinxsidebar h4 { - color: #444; font-size: 24px; font-weight: normal; margin: 0 0 5px 0; @@ -119,10 +107,6 @@ div.sphinxsidebar h4 { font-size: 20px; } -div.sphinxsidebar h3 a { - color: #444; -} - div.sphinxsidebar p.logo a, div.sphinxsidebar h3 a, div.sphinxsidebar p.logo a:hover, @@ -131,14 +115,12 @@ div.sphinxsidebar h3 a:hover { } div.sphinxsidebar p { - color: #555; margin: 10px 0; } div.sphinxsidebar ul { margin: 10px 0; padding: 0; - color: #000; } div.sphinxsidebar ul li.toctree-l1 > a { @@ -168,16 +150,6 @@ div.sphinxsidebar hr { /* -- body styles ----------------------------------------------------------- */ -a { - color: #004B6B; - text-decoration: underline; -} - -a:hover { - color: #206B8B; - text-decoration: underline; -} - div.body h1, div.body h2, div.body h3, @@ -197,6 +169,10 @@ div.body h4 { font-size: 130%; } div.body h5 { font-size: 100%; } div.body h6 { font-size: 100%; } +a, a:hover { + text-decoration: underline; +} + a.headerlink { color: #DDD; padding: 0 4px; @@ -370,7 +346,6 @@ ul, ol { } pre { - background: #EEE; padding: 7px 30px; margin: 15px 0px; line-height: 1.3em; @@ -386,12 +361,6 @@ dl dl pre { padding-left: 90px; } -tt, code { - background-color: #EEE; - color: #222; - /* padding: 1px 2px; */ -} - tt.xref, code.xref, a tt { background-color: #FBFBFB; border-bottom: 1px solid white; @@ -417,12 +386,7 @@ a.footnote-reference:hover { border-bottom: 1px solid #6D4100; } -a:hover tt, a:hover code { - background: #EEE; -} - @media screen and (max-width: 870px) { - div.sphinxsidebar { display: none; } @@ -470,10 +434,7 @@ a:hover tt, a:hover code { } } - - @media screen and (max-width: 875px) { - body { margin: 0; padding: 20px 30px; @@ -542,7 +503,6 @@ a:hover tt, a:hover code { } } - /* misc. */ .revsys-inline { @@ -572,110 +532,6 @@ nav li.active:not(.inactive) > a { color: #000; } -/* - * Custom home page for fkfd.me - * Created on 2022-12-28 - */ - -div .category-block-container { - display: grid; - gap: 20px; - grid-template-columns: 320px 320px; -} - -div .webring-block-container { - display: grid; - gap: 0px; - grid-template-columns: 120px 120px 120px; -} - -@media screen and (max-width: 870px) { - div .category-block-container { - display: grid; - gap: 20px; - /* one column only on narrow screens */ - grid-template-columns: 320px; - } -} - -.category-block, .webring-block { - display: grid; - text-align: center; -} - -.category-icon, .webring-icon { - display: block; - width: 120px; - height: 120px; - background-color: #3E4349; - background-size: contain; - background-repeat: no-repeat; - mask-size: contain; - mask-repeat: no-repeat; - -webkit-mask-size: contain; - -webkit-mask-repeat: no-repeat; -} - -@media (prefers-color-scheme: dark) { - .category-icon, .webring-icon { - background-color: white; - } -} - -.category-text { - position: absolute; - margin-left: 130px; - margin-top: 40px; - font-size: 1.5em; -} - -.webring-text { - text-align: center; -} - -#icon-projects { - mask-image: url("../img/icons/projects.png"); - -webkit-mask-image: url("../img/icons/projects.png"); -} - -#icon-random { - mask-image: url("../img/icons/random.png"); - -webkit-mask-image: url("../img/icons/random.png"); -} - -#icon-shitpost { - mask-image: url("../img/icons/shitpost.png"); - -webkit-mask-image: url("../img/icons/shitpost.png"); -} - -#icon-ta { - mask-image: url("../img/icons/ta.png"); - -webkit-mask-image: url("../img/icons/ta.png"); -} - -#icon-ham { - mask-image: url("../img/icons/ham.png"); - -webkit-mask-image: url("../img/icons/ham.png"); -} - -#icon-comics { - mask-image: url("../img/icons/comics.png"); - -webkit-mask-image: url("../img/icons/comics.png"); -} - -#icon-fediring-prev { - mask-image: url("../img/icons/fediring_prev.png"); -} - -#icon-fediring { - mask-image: url("../img/icons/fediring.png"); -} - -#icon-fediring-next { - mask-image: url("../img/icons/fediring_next.png"); -} - - /* * basic.css * ~~~~~~~~~ @@ -1237,52 +1093,3 @@ span.eqno { display: none; } } - -@media (prefers-color-scheme: dark) { - body { - color: white; - background-color: #19202b; - } - - div.body { - color: white; - background-color: #19202b; - padding-bottom: 24px; - } - - div.sphinxsidebar h3, - div.sphinxsidebar h3 a, - div.sphinxsidebar h4, - div.sphinxsidebar p, - div.sphinxsidebar a, - div.sphinxsidebar ul { - color: #bbb; - } - - a { - color: #a5c5ff; - } - - a:hover { - color: #cddfff; - } - - tt, code { - background-color: #202836; - color: white; - } - - a:hover tt, a:hover code { - background: #666; - } - - pre { - background-color: #202836; - border: 1px solid white; - border-radius: 8px; - } -} - -video { - max-width: 100%; -} diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css new file mode 100644 index 0000000..04cabc9 --- /dev/null +++ b/alabaster-lite/css/fkfd.css @@ -0,0 +1,210 @@ +/* + * Light/dark color schemes for fkfd.me + */ + +body { + background-color: white; + color: #000; +} + +div.body { + background-color: #ffffff; + color: #3E4349; +} + +@media (prefers-color-scheme: dark) { + body { + color: white; + background-color: #19202b; + } + + div.body { + color: white; + background-color: #19202b; + padding-bottom: 24px; + } +} + +a { + color: #004B6B; +} + +a:hover { + color: #206B8B; +} + +@media (prefers-color-scheme: dark) { + a { + color: #a5c5ff; + } + + a:hover { + color: #cddfff; + } +} + +div.sphinxsidebar h3, +div.sphinxsidebar h3 a, +div.sphinxsidebar h4, +div.sphinxsidebar a { + color: #444; +} + +div.sphinxsidebar p { + color: #555; +} + +div.sphinxsidebar ul { + color: #000; +} + +@media (prefers-color-scheme: dark) { + div.sphinxsidebar h3, + div.sphinxsidebar h3 a, + div.sphinxsidebar h4, + div.sphinxsidebar p, + div.sphinxsidebar a, + div.sphinxsidebar ul { + color: #bbb; + } +} + +tt, code { + background-color: #EEE; + color: #222; +} + +a:hover tt, a:hover code { + background: #EEE; +} + +pre { + background: #EEE; +} + +@media (prefers-color-scheme: dark) { + tt, code { + background-color: #202836; + color: white; + } + + a:hover tt, a:hover code { + background: #666; + } + + pre { + background-color: #202836; + border: 1px solid white; + border-radius: 8px; + } +} + +video { + max-width: 100%; +} + +/* + * Custom home page for fkfd.me + * Created on 2022-12-28 + */ + +div .category-block-container { + display: grid; + gap: 20px; + grid-template-columns: 320px 320px; +} + +div .webring-block-container { + display: grid; + gap: 0px; + grid-template-columns: 120px 120px 120px; +} + +@media screen and (max-width: 870px) { + div .category-block-container { + display: grid; + gap: 20px; + /* one column only on narrow screens */ + grid-template-columns: 320px; + } +} + +.category-block, .webring-block { + display: grid; + text-align: center; +} + +.category-icon, .webring-icon { + display: block; + width: 120px; + height: 120px; + background-color: #3E4349; + background-size: contain; + background-repeat: no-repeat; + mask-size: contain; + mask-repeat: no-repeat; + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; +} + +@media (prefers-color-scheme: dark) { + .category-icon, .webring-icon { + background-color: white; + } +} + +.category-text { + position: absolute; + margin-left: 130px; + margin-top: 40px; + font-size: 1.5em; +} + +.webring-text { + text-align: center; +} + +#icon-projects { + mask-image: url("../img/icons/projects.png"); + -webkit-mask-image: url("../img/icons/projects.png"); +} + +#icon-random { + mask-image: url("../img/icons/random.png"); + -webkit-mask-image: url("../img/icons/random.png"); +} + +#icon-shitpost { + mask-image: url("../img/icons/shitpost.png"); + -webkit-mask-image: url("../img/icons/shitpost.png"); +} + +#icon-ta { + mask-image: url("../img/icons/ta.png"); + -webkit-mask-image: url("../img/icons/ta.png"); +} + +#icon-ham { + mask-image: url("../img/icons/ham.png"); + -webkit-mask-image: url("../img/icons/ham.png"); +} + +#icon-comics { + mask-image: url("../img/icons/comics.png"); + -webkit-mask-image: url("../img/icons/comics.png"); +} + +#icon-fediring-prev { + mask-image: url("../img/icons/fediring_prev.png"); + -webkit-mask-image: url("../img/icons/fediring_prev.png"); +} + +#icon-fediring { + mask-image: url("../img/icons/fediring.png"); + -webkit-mask-image: url("../img/icons/fediring.png"); +} + +#icon-fediring-next { + mask-image: url("../img/icons/fediring_next.png"); + -webkit-mask-image: url("../img/icons/fediring_next.png"); +} diff --git a/alabaster-lite/main.html b/alabaster-lite/main.html index 78e3dd2..cffe3c6 100644 --- a/alabaster-lite/main.html +++ b/alabaster-lite/main.html @@ -8,6 +8,7 @@ {% if page.title %}{{ page.title }} — {% endif %}{{ config.site_name }} + {% for path in extra_css %} -- cgit v1.2.3