Revise homepage (again)

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

9 files changed, 90 insertions, 63 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 {
diff --git a/docs/img/icons/comics.png b/docs/img/icons/comics.png
index 0073e6a..578779f 100644
--- a/docs/img/icons/comics.png
+++ b/docs/img/icons/comics.png
diff --git a/docs/img/icons/ham.png b/docs/img/icons/ham.png
index e82e2b5..4765727 100644
--- a/docs/img/icons/ham.png
+++ b/docs/img/icons/ham.png
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
index fbc9db6..60cb94c 100644
--- a/docs/img/icons/icons.kra
+++ b/docs/img/icons/icons.kra
diff --git a/docs/img/icons/projects.png b/docs/img/icons/projects.png
index 6c8c9bd..1833b84 100644
--- a/docs/img/icons/projects.png
+++ b/docs/img/icons/projects.png
diff --git a/docs/img/icons/random.png b/docs/img/icons/random.png
index e2355fd..aa689c1 100644
--- a/docs/img/icons/random.png
+++ b/docs/img/icons/random.png
diff --git a/docs/img/icons/shitpost.png b/docs/img/icons/shitpost.png
index f404a07..4373a98 100644
--- a/docs/img/icons/shitpost.png
+++ b/docs/img/icons/shitpost.png
diff --git a/docs/img/icons/ta.png b/docs/img/icons/ta.png
index 08fd8c3..f1dfe7e 100644
--- a/docs/img/icons/ta.png
+++ b/docs/img/icons/ta.png
diff --git a/docs/index.md b/docs/index.md
index 53dda73..fc7ad0d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,35 +2,41 @@
 
 ## Categories
 
-<div class="home-block-container">
+<div class="category-block-container">
     <a href="/projects">
-        <div class="home-block" id="category-projects">
-            <span>Projects</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-projects"></span>
+            <span class="category-text">Projects</span>
         </div>
     </a>
     <a href="/random">
-        <div class="home-block" id="category-random">
-            <span>Random</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-random"></span>
+            <span class="category-text">Random</span>
         </div>
     </a>
     <a href="/ta">
-        <div class="home-block" id="category-ta">
-            <span>TA</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-ta"></span>
+            <span class="category-text">TA</span>
         </div>
     </a>
     <a href="/ham">
-        <div class="home-block" id="category-ham">
-            <span>Ham Radio</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-ham"></span>
+            <span class="category-text">Ham Radio</span>
         </div>
     </a>
     <a href="/shitpost">
-        <div class="home-block" id="category-shitpost">
-            <span>Shitpost</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-shitpost"></span>
+            <span class="category-text">Shitpost</span>
         </div>
     </a>
     <a href="/comics">
-        <div class="home-block" id="category-comics">
-            <span>Comics</span>
+        <div class="category-block">
+            <span class="category-icon" id="icon-comics"></span>
+            <span class="category-text">Comics</span>
         </div>
     </a>
 </div>