summaryrefslogtreecommitdiff
path: root/alabaster-lite/css/fkfd.css
diff options
context:
space:
mode:
Diffstat (limited to 'alabaster-lite/css/fkfd.css')
-rw-r--r--alabaster-lite/css/fkfd.css210
1 files changed, 210 insertions, 0 deletions
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");
+}