From 8832a71bfd27fb683c7f09f6e27e8fff61263ab8 Mon Sep 17 00:00:00 2001
From: Frederick Yin <fkfd@fkfd.me>
Date: Sun, 5 Nov 2023 23:11:00 -0500
Subject: Icons for header

---
 alabaster-lite/css/fkfd.css |  52 +++++++++++++++++++++++++++++++++++++-------
 docs/img/icons/about.png    | Bin 0 -> 7898 bytes
 docs/img/icons/icons.kra    | Bin 334509 -> 458222 bytes
 docs/img/icons/links.png    | Bin 0 -> 10202 bytes
 docs/img/icons/x.png        | Bin 0 -> 7438 bytes
 docs/index.md               |  24 +++++++++++++++++++-
 6 files changed, 67 insertions(+), 9 deletions(-)
 create mode 100644 docs/img/icons/about.png
 create mode 100644 docs/img/icons/links.png
 create mode 100644 docs/img/icons/x.png

diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css
index 749c4cb..294c4f6 100644
--- a/alabaster-lite/css/fkfd.css
+++ b/alabaster-lite/css/fkfd.css
@@ -118,35 +118,49 @@ div.footer a {
 /*
  * Custom home page for fkfd.me
  * Created on 2022-12-28
+ * Last revision 2023-11-05
  */
 
-div .category-block-container {
+.header-block-container {
+  display: grid;
+  gap: 60px;
+  grid-template-columns: 120px 120px 120px;
+}
+
+.category-block-container {
   display: grid;
   gap: 20px;
   grid-template-columns: 320px 320px;
 }
 
-div .webring-block-container {
+.webring-block-container {
   display: grid;
   gap: 0px;
   grid-template-columns: 120px 120px 120px;
 }
 
 @media screen and (max-width: 870px) {
-  div .category-block-container {
-    display: grid;
-    gap: 20px;
+  .header-block-container {
+    gap: 0px;
+  }
+
+  .category-block-container {
     /* one column only on narrow screens */
     grid-template-columns: 320px;
   }
 }
 
-.category-block, .webring-block {
+.header-block-container a,
+.webring-block-container a {
+  text-decoration: none;
+}
+
+.header-block, .category-block, .webring-block {
   display: grid;
   text-align: center;
 }
 
-.category-icon, .webring-icon {
+.header-icon, .category-icon, .webring-icon {
   display: block;
   width: 120px;
   height: 120px;
@@ -159,12 +173,19 @@ div .webring-block-container {
   -webkit-mask-repeat: no-repeat;
 }
 
+@media screen and (max-width: 870px) {
+}
+
 @media (prefers-color-scheme: dark) {
-  .category-icon, .webring-icon {
+  .header-icon, .category-icon, .webring-icon {
     background-color: white;
   }
 }
 
+.header-text {
+  text-align: center;
+}
+
 .category-text {
   position: absolute;
   margin-left: 130px;
@@ -176,6 +197,21 @@ div .webring-block-container {
   text-align: center;
 }
 
+#icon-about {
+  mask-image: url("../img/icons/about.png");
+  -webkit-mask-image: url("../img/icons/about.png");
+}
+
+#icon-x {
+  mask-image: url("../img/icons/x.png");
+  -webkit-mask-image: url("../img/icons/x.png");
+}
+
+#icon-links {
+  mask-image: url("../img/icons/links.png");
+  -webkit-mask-image: url("../img/icons/links.png");
+}
+
 #icon-projects {
   mask-image: url("../img/icons/projects.png");
   -webkit-mask-image: url("../img/icons/projects.png");
diff --git a/docs/img/icons/about.png b/docs/img/icons/about.png
new file mode 100644
index 0000000..4043190
Binary files /dev/null and b/docs/img/icons/about.png differ
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
index 7b679f4..d086c14 100644
Binary files a/docs/img/icons/icons.kra and b/docs/img/icons/icons.kra differ
diff --git a/docs/img/icons/links.png b/docs/img/icons/links.png
new file mode 100644
index 0000000..5d78c41
Binary files /dev/null and b/docs/img/icons/links.png differ
diff --git a/docs/img/icons/x.png b/docs/img/icons/x.png
new file mode 100644
index 0000000..0018a03
Binary files /dev/null and b/docs/img/icons/x.png differ
diff --git a/docs/index.md b/docs/index.md
index 01a22e7..38933a7 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,29 @@
 ---
 title: Home
 ---
-# [about](/about) | [x](/x) | [links](/links)
+
+# fkfd.me
+
+<header class="header-block-container">
+    <a href="/about">
+        <div class="header-block">
+            <span class="header-icon" id="icon-about"></span>
+            <span class="header-text">About</span>
+        </div>
+    </a>
+    <a href="/x">
+        <div class="header-block">
+            <span class="header-icon" id="icon-x"></span>
+            <span class="header-text">x</span>
+        </div>
+    </a>
+    <a href="/links">
+        <div class="header-block">
+            <span class="header-icon" id="icon-links"></span>
+            <span class="header-text">Links</span>
+        </div>
+    </a>
+</header>
 
 ## Categories
 
-- 
cgit v1.2.3