Style: category icons on homepage

11 files changed, 105 insertions, 27 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
  * ~~~~~~~~~
  *
diff --git a/alabaster-lite/main.html b/alabaster-lite/main.html
index 9d288c8..c6ec757 100644
--- a/alabaster-lite/main.html
+++ b/alabaster-lite/main.html
@@ -13,7 +13,7 @@
       <link href="{{ path }}" rel="stylesheet">
     {% endfor %}
 
-    <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9">
+    <meta name="viewport" content="width=device-width, initial-scale=0.9">
 
     {% block extrahead %}{% endblock %}
 
diff --git a/alabaster-lite/sidebars/about.html b/alabaster-lite/sidebars/about.html
index 674dab4..89de15b 100644
--- a/alabaster-lite/sidebars/about.html
+++ b/alabaster-lite/sidebars/about.html
@@ -11,6 +11,9 @@
   <h1 class="logo"><a href="{{nav.homepage.url|url}}">{{ config.site_name }}</a></h1>
 {% endif %}
 
-{% if config.site_description %}
-  <p class="blurb">{{ config.site_description }}</p>
-{% endif %}
+<p class="blurb">This is technically a blog.</p>
+
+<ul>
+	<li><a href="/about">About Me</a></li>
+	<li><a href="/feed/atom.xml">Atom Feed</a></li>
+</ul>
diff --git a/docs/img/icons/comics.png b/docs/img/icons/comics.png
new file mode 100644
index 0000000..0073e6a
--- /dev/null
+++ b/docs/img/icons/comics.png
diff --git a/docs/img/icons/ham.png b/docs/img/icons/ham.png
new file mode 100644
index 0000000..e82e2b5
--- /dev/null
+++ b/docs/img/icons/ham.png
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
new file mode 100644
index 0000000..fbc9db6
--- /dev/null
+++ b/docs/img/icons/icons.kra
diff --git a/docs/img/icons/projects.png b/docs/img/icons/projects.png
new file mode 100644
index 0000000..6c8c9bd
--- /dev/null
+++ b/docs/img/icons/projects.png
diff --git a/docs/img/icons/random.png b/docs/img/icons/random.png
new file mode 100644
index 0000000..e2355fd
--- /dev/null
+++ b/docs/img/icons/random.png
diff --git a/docs/img/icons/shitpost.png b/docs/img/icons/shitpost.png
new file mode 100644
index 0000000..f404a07
--- /dev/null
+++ b/docs/img/icons/shitpost.png
diff --git a/docs/img/icons/ta.png b/docs/img/icons/ta.png
new file mode 100644
index 0000000..08fd8c3
--- /dev/null
+++ b/docs/img/icons/ta.png
diff --git a/docs/index.md b/docs/index.md
index bff8d73..53dda73 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,26 +1,39 @@
 # fkfd
 
-This is technically a blog.
-
-- [About Me](/about)
-
-- [Atom feed](/feed/atom.xml)
-
 ## Categories
 
-- [Projects](/projects)
-
-- [Random](/random)
-
-- [Shitpost](/shitpost)
-
-- [TA Adventures](/ta)
-
-- [Ham Radio](/ham)
-
-## Non-blog Content
-
-- [Comics](/comics)
+<div class="home-block-container">
+    <a href="/projects">
+        <div class="home-block" id="category-projects">
+            <span>Projects</span>
+        </div>
+    </a>
+    <a href="/random">
+        <div class="home-block" id="category-random">
+            <span>Random</span>
+        </div>
+    </a>
+    <a href="/ta">
+        <div class="home-block" id="category-ta">
+            <span>TA</span>
+        </div>
+    </a>
+    <a href="/ham">
+        <div class="home-block" id="category-ham">
+            <span>Ham Radio</span>
+        </div>
+    </a>
+    <a href="/shitpost">
+        <div class="home-block" id="category-shitpost">
+            <span>Shitpost</span>
+        </div>
+    </a>
+    <a href="/comics">
+        <div class="home-block" id="category-comics">
+            <span>Comics</span>
+        </div>
+    </a>
+</div>
 
 ## Fun