From e4581f12339d9fc141100da815408676d22162be Mon Sep 17 00:00:00 2001
From: Frederick Yin <fkfd@fkfd.me>
Date: Wed, 28 Dec 2022 18:31:39 +0800
Subject: Style: category icons on homepage

---
 alabaster-lite/css/alabaster.css | 70 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 4 deletions(-)

(limited to 'alabaster-lite/css')

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;
     }
-
-
-
 }
 
 
@@ -572,6 +572,68 @@ nav li.active:not(.inactive) > a {
     color: #000;
 }
 
+/*
+ * 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
  * ~~~~~~~~~
-- 
cgit v1.2.3