summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFrederick Yin <fkfd@fkfd.me>2023-01-17 21:11:00 +0800
committerFrederick Yin <fkfd@fkfd.me>2023-01-17 21:12:38 +0800
commit27cb8f946d2b33de6903041a27040c61c2c36f89 (patch)
treeb69f9c1524ac3a141620ecea2039761d9f0dd43f
parentbc52703ec0562b14fef68b3c874f67e2872e193c (diff)
Style: separate custom styles into fkfd.css
-rw-r--r--alabaster-lite/css/alabaster.css201
-rw-r--r--alabaster-lite/css/fkfd.css210
-rw-r--r--alabaster-lite/main.html1
3 files changed, 215 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");
+}
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 @@
<title>{% if page.title %}{{ page.title }} &mdash; {% endif %}{{ config.site_name }}</title>
<link rel="stylesheet" href="{{ base_url }}/css/alabaster.css" type="text/css">
+ <link rel="stylesheet" href="{{ base_url }}/css/fkfd.css" type="text/css">
{% for path in extra_css %}
<link href="{{ path }}" rel="stylesheet">