Revise homepage (again)

Transparent instead of solid colors. Fits better with the overall theme.

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 {