From 27cb8f946d2b33de6903041a27040c61c2c36f89 Mon Sep 17 00:00:00 2001
From: Frederick Yin <fkfd@fkfd.me>
Date: Tue, 17 Jan 2023 21:11:00 +0800
Subject: Style: separate custom styles into fkfd.css

---
 alabaster-lite/css/fkfd.css | 210 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 alabaster-lite/css/fkfd.css

(limited to 'alabaster-lite/css/fkfd.css')

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");
+}
-- 
cgit v1.2.3