Style: category icons on homepage

1 files changed, 66 insertions, 4 deletions

diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css
index 89eae81..804746d 100644
--- a/alabaster-lite/css/alabaster.css
+++ b/alabaster-lite/css/alabaster.css
@@ -1,4 +1,7 @@
-/* This file used to import a css called basic.css, but the latter is fused into L584 now */
+/*
+ * This file used to import a css called basic.css,
+ * but the latter is fused in this file
+ */
 
 /* -- page layout ----------------------------------------------------------- */
 
@@ -465,9 +468,6 @@ a:hover tt, a:hover code {
     .github {
         display: none;
     }
-
-
-
 }
 
 
@@ -573,6 +573,68 @@ nav li.active:not(.inactive) > a {
 }
 
 /*
+ * Custom home page for fkfd.me
+ * Created on 2022-12-28
+ */
+
+div .home-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 .home-block {
+	display: block;
+	width: 320px;
+	height: 120px;
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+div .home-block > span {
+	position: absolute;
+	margin-left: 150px;
+	margin-top: 40px;
+	color: white;
+	font-size: 1.5em;
+	font-variant-caps: small-caps;
+}
+
+#category-projects {
+	background-image: url("../img/icons/projects.png");
+}
+
+#category-random {
+	background-image: url("../img/icons/random.png");
+}
+
+#category-shitpost {
+	background-image: url("../img/icons/shitpost.png");
+}
+
+#category-ta {
+	background-image: url("../img/icons/ta.png");
+}
+
+#category-ham {
+	background-image: url("../img/icons/ham.png");
+}
+
+#category-comics {
+	background-image: url("../img/icons/comics.png");
+}
+
+
+/*
  * basic.css
  * ~~~~~~~~~
  *