Style: separate custom styles into fkfd.css

2 files changed, 214 insertions, 197 deletions

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 {
@@ -573,110 +533,6 @@ nav li.active:not(.inactive) > a {
 }
 
 /*
- * 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");
+}