diff options
Diffstat (limited to 'alabaster-lite/css/fkfd.css')
-rw-r--r-- | alabaster-lite/css/fkfd.css | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css new file mode 100644 index 0000000..83e8715 --- /dev/null +++ b/alabaster-lite/css/fkfd.css @@ -0,0 +1,360 @@ +/* + * 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; +} + +summary { + color: #004b6b; +} + +@media (prefers-color-scheme: dark) { + a { + color: #a5c5ff; + } + + a:hover { + color: #cddfff; + } + + summary { + color: #a5c5ff; + } +} + +a.headerlink { + color: #004b6b; + margin-left: 0.5em; +} + +a.headerlink:hover { + color: #206b8b; + background: none; +} + +@media (prefers-color-scheme: dark) { + a.headerlink { + color: #a5c5ff; + } + + a.headerlink: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%; +} + +div.footer, +div.footer a { + color: #3E4349; +} + +@media (prefers-color-scheme: dark) { + div.footer, + div.footer a { + color: #eee; + } +} + +@media screen and (max-width: 870px) { + div.sphinxsidebar { + float: none; + width: 100%; + margin: 120px -20px 20px; + padding: 0 20px; + background-color: transparent; + color: #ccc; + } +} + +/* + * Custom home page for fkfd.me + * Created on 2022-12-28 + * Last revision 2023-11-05 + */ + +.category-block-container { + display: grid; + gap: 20px; + grid-template-columns: 320px 320px; +} + +.webring-block-container { + display: grid; + gap: 0px; + grid-template-columns: 60px 60px 60px; + padding-top: 20px; +} + +.link-block-container { + display: grid; + gap: 20px; + grid-template-columns: 180px; +} + +@media screen and (max-width: 870px) { + .category-block-container { + /* one column only on narrow screens */ + grid-template-columns: 320px; + } +} + +.webring-block-container a { + text-decoration: none; +} + +.category-block, .webring-block, .link-block { + display: grid; + text-align: center; +} + +.category-icon, .webring-icon, .link-icon { + display: block; + 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; +} + +.category-icon { + width: 120px; + height: 120px; +} + +.webring-icon { + width: 60px; + height: 60px; +} + +.link-icon { + width: 60px; + height: 60px; +} + +@media (prefers-color-scheme: dark) { + .category-icon, .webring-icon, .link-icon { + background-color: white; + } +} + +.category-text { + position: absolute; + margin-left: 130px; + margin-top: 40px; + font-size: 1.5em; +} + +.webring-text { + text-align: center; +} + +.link-text { + position: absolute; + margin-left: 80px; + margin-top: 20px; +} + +#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-music { + mask-image: url("../img/icons/music.png"); + -webkit-mask-image: url("../img/icons/music.png"); +} + +#icon-umich { + mask-image: url("../img/icons/umich.png"); + -webkit-mask-image: url("../img/icons/umich.png"); +} + +#icon-projects:hover { + mask-image: url("../img/icons/projects-hover.png"); + -webkit-mask-image: url("../img/icons/projects-hover.png"); +} + +#icon-random:hover { + mask-image: url("../img/icons/random-hover.png"); + -webkit-mask-image: url("../img/icons/random-hover.png"); +} + +#icon-shitpost:hover { + mask-image: url("../img/icons/shitpost-hover.png"); + -webkit-mask-image: url("../img/icons/shitpost-hover.png"); +} + +#icon-ta:hover { + mask-image: url("../img/icons/ta-hover.png"); + -webkit-mask-image: url("../img/icons/ta-hover.png"); +} + +#icon-ham:hover { + mask-image: url("../img/icons/ham-hover.png"); + -webkit-mask-image: url("../img/icons/ham-hover.png"); +} + +#icon-comics:hover { + mask-image: url("../img/icons/comics-hover.png"); + -webkit-mask-image: url("../img/icons/comics-hover.png"); +} + +#icon-music:hover { + mask-image: url("../img/icons/music-hover.png"); + -webkit-mask-image: url("../img/icons/music-hover.png"); +} + +#icon-umich:hover { + mask-image: url("../img/icons/umich-hover.png"); + -webkit-mask-image: url("../img/icons/umich-hover.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"); +} + +#icon-about { + mask-image: url("../img/icons/about.png"); + -webkit-mask-image: url("../img/icons/about.png"); +} + +#icon-feed { + mask-image: url("../img/icons/feed.png"); + -webkit-mask-image: url("../img/icons/feed.png"); +} + +#icon-links { + mask-image: url("../img/icons/links.png"); + -webkit-mask-image: url("../img/icons/links.png"); +} + +#icon-x { + mask-image: url("../img/icons/x.png"); + -webkit-mask-image: url("../img/icons/x.png"); +} |