summaryrefslogtreecommitdiff
path: root/alabaster-lite
diff options
context:
space:
mode:
authorFrederick Yin <fkfd@fkfd.me>2023-01-15 13:44:37 +0800
committerFrederick Yin <fkfd@fkfd.me>2023-01-15 13:44:37 +0800
commit5e2291d2daba9c76c086e70c9cddd9ecd3e45bf4 (patch)
treef9ab8106fb49d4ca4fd4525b05d4e844320bbd8f /alabaster-lite
parente4581f12339d9fc141100da815408676d22162be (diff)
Revise homepage (again)
Transparent instead of solid colors. Fits better with the overall theme.
Diffstat (limited to 'alabaster-lite')
-rw-r--r--alabaster-lite/css/alabaster.css121
1 files changed, 71 insertions, 50 deletions
diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css
index 804746d..e733917 100644
--- a/alabaster-lite/css/alabaster.css
+++ b/alabaster-lite/css/alabaster.css
@@ -424,7 +424,7 @@ a:hover tt, a:hover code {
@media screen and (max-width: 870px) {
div.sphinxsidebar {
- display: none;
+ display: none;
}
div.document {
@@ -432,25 +432,25 @@ a:hover tt, a:hover code {
}
div.documentwrapper {
- margin-left: 0;
- margin-top: 0;
- margin-right: 0;
- margin-bottom: 0;
+ margin-left: 0;
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 0;
}
div.bodywrapper {
- margin-top: 0;
- margin-right: 0;
- margin-bottom: 0;
- margin-left: 0;
+ margin-top: 0;
+ margin-right: 0;
+ margin-bottom: 0;
+ margin-left: 0;
}
ul {
- margin-left: 0;
+ margin-left: 0;
}
.document {
- width: auto;
+ width: auto;
}
.footer {
@@ -458,11 +458,11 @@ a:hover tt, a:hover code {
}
.bodywrapper {
- margin: 0;
+ margin: 0;
}
.footer {
- width: auto;
+ width: auto;
}
.github {
@@ -577,60 +577,81 @@ nav li.active:not(.inactive) > a {
* Created on 2022-12-28
*/
-div .home-block-container {
- display: grid;
- gap: 20px;
- grid-template-columns: 320px 320px;
+div .category-block-container {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: 320px 320px;
}
@media screen and (max-width: 870px) {
- div .home-block-container {
- display: grid;
- gap: 20px;
- /* one column only on narrow screens */
- grid-template-columns: 320px;
- }
+ div .category-block-container {
+ display: grid;
+ gap: 20px;
+ /* one column only on narrow screens */
+ grid-template-columns: 320px;
+ }
}
-div .home-block {
- display: block;
- width: 320px;
- height: 120px;
- background-size: contain;
- background-repeat: no-repeat;
+.category-block {
+ display: grid;
+ text-align: center;
}
-div .home-block > span {
- position: absolute;
- margin-left: 150px;
- margin-top: 40px;
- color: white;
- font-size: 1.5em;
- font-variant-caps: small-caps;
+.category-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 {
+ background-color: white;
+ }
+}
+
+.category-text {
+ position: absolute;
+ margin-left: 130px;
+ margin-top: 40px;
+ font-size: 1.5em;
+ font-variant-caps: small-caps;
}
-#category-projects {
- background-image: url("../img/icons/projects.png");
+#icon-projects {
+ mask-image: url("../img/icons/projects.png");
+ -webkit-mask-image: url("../img/icons/projects.png");
}
-#category-random {
- background-image: url("../img/icons/random.png");
+#icon-random {
+ mask-image: url("../img/icons/random.png");
+ -webkit-mask-image: url("../img/icons/random.png");
}
-#category-shitpost {
- background-image: url("../img/icons/shitpost.png");
+#icon-shitpost {
+ mask-image: url("../img/icons/shitpost.png");
+ -webkit-mask-image: url("../img/icons/shitpost.png");
}
-#category-ta {
- background-image: url("../img/icons/ta.png");
+#icon-ta {
+ mask-image: url("../img/icons/ta.png");
+ -webkit-mask-image: url("../img/icons/ta.png");
}
-#category-ham {
- background-image: url("../img/icons/ham.png");
+#icon-ham {
+ mask-image: url("../img/icons/ham.png");
+ -webkit-mask-image: url("../img/icons/ham.png");
}
-#category-comics {
- background-image: url("../img/icons/comics.png");
+#icon-comics {
+ mask-image: url("../img/icons/comics.png");
+ -webkit-mask-image: url("../img/icons/comics.png");
}
@@ -1218,11 +1239,11 @@ span.eqno {
}
a {
- color: #7b91be;
+ color: #a5c5ff;
}
a:hover {
- color: #9bb1de;
+ color: #cddfff;
}
tt, code {