Reintroduce header icons (now called link icons) but in the sidebar

4 files changed, 82 insertions, 24 deletions

diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css
index b617fee..ff66fc9 100644
--- a/alabaster-lite/css/fkfd.css
+++ b/alabaster-lite/css/fkfd.css
@@ -162,6 +162,13 @@ div.footer a {
   display: grid;
   gap: 0px;
   grid-template-columns: 60px 60px 60px;
+  padding-top: 20px;
+}
+
+.link-block-container {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 180px;
 }
 
 @media screen and (max-width: 870px) {
@@ -175,12 +182,12 @@ div.footer a {
   text-decoration: none;
 }
 
-.category-block, .webring-block {
+.category-block, .webring-block, .link-block {
   display: grid;
   text-align: center;
 }
 
-.category-icon, .webring-icon {
+.category-icon, .webring-icon, .link-icon {
   display: block;
   background-color: #3E4349;
   background-size: contain;
@@ -201,8 +208,13 @@ div.footer a {
   height: 60px;
 }
 
+.link-icon {
+  width: 60px;
+  height: 60px;
+}
+
 @media (prefers-color-scheme: dark) {
-  .category-icon, .webring-icon {
+  .category-icon, .webring-icon, .link-icon {
     background-color: white;
   }
 }
@@ -218,6 +230,12 @@ div.footer a {
   text-align: center;
 }
 
+.link-text {
+  position: absolute;
+  margin-left: 80px;
+  margin-top: 20px;
+}
+
 #icon-projects {
   mask-image: url("../img/icons/projects.png");
   -webkit-mask-image: url("../img/icons/projects.png");
@@ -258,21 +276,6 @@ div.footer a {
   -webkit-mask-image: url("../img/icons/umich.png");
 }
 
-#icon-fediring-prev {
-  mask-image: url("../img/icons/fediring_prev.png");
-  -webkit-mask-image: url("../img/icons/fediring_prev.png");
-}
-
-#icon-fediring {
-  mask-image: url("../img/icons/fediring.png");
-  -webkit-mask-image: url("../img/icons/fediring.png");
-}
-
-#icon-fediring-next {
-  mask-image: url("../img/icons/fediring_next.png");
-  -webkit-mask-image: url("../img/icons/fediring_next.png");
-}
-
 #icon-projects:hover {
   mask-image: url("../img/icons/projects-hover.png");
   -webkit-mask-image: url("../img/icons/projects-hover.png");
@@ -312,3 +315,38 @@ div.footer a {
   mask-image: url("../img/icons/umich-hover.png");
   -webkit-mask-image: url("../img/icons/umich-hover.png");
 }
+
+#icon-fediring-prev {
+  mask-image: url("../img/icons/fediring_prev.png");
+  -webkit-mask-image: url("../img/icons/fediring_prev.png");
+}
+
+#icon-fediring {
+  mask-image: url("../img/icons/fediring.png");
+  -webkit-mask-image: url("../img/icons/fediring.png");
+}
+
+#icon-fediring-next {
+  mask-image: url("../img/icons/fediring_next.png");
+  -webkit-mask-image: url("../img/icons/fediring_next.png");
+}
+
+#icon-about {
+  mask-image: url("../img/icons/about.png");
+  -webkit-mask-image: url("../img/icons/about.png");
+}
+
+#icon-feed {
+  mask-image: url("../img/icons/feed.png");
+  -webkit-mask-image: url("../img/icons/feed.png");
+}
+
+#icon-links {
+  mask-image: url("../img/icons/links.png");
+  -webkit-mask-image: url("../img/icons/links.png");
+}
+
+#icon-x {
+  mask-image: url("../img/icons/x.png");
+  -webkit-mask-image: url("../img/icons/x.png");
+}
diff --git a/alabaster-lite/sidebars/links.html b/alabaster-lite/sidebars/links.html
index 0717b3d..4c96e35 100644
--- a/alabaster-lite/sidebars/links.html
+++ b/alabaster-lite/sidebars/links.html
@@ -1,9 +1,29 @@
-<ul>
-	<li><a href="/about">About Me</a></li>
-	<li><a href="/feed/atom.xml">Atom Feed</a></li>
-  <li><a href="/links">Links</a></li>
-  <li><a href="/x">~x</a></li>
-</ul>
+<div class="link-block-container">
+    <a href="/about">
+        <div class="link-block">
+            <span class="link-icon" id="icon-about"></span>
+            <span class="link-text">About Me</span>
+        </div>
+    </a>
+    <a href="/feed">
+        <div class="link-block">
+            <span class="link-icon" id="icon-feed"></span>
+            <span class="link-text">Atom Feed</span>
+        </div>
+    </a>
+    <a href="/links">
+        <div class="link-block">
+            <span class="link-icon" id="icon-links"></span>
+            <span class="link-text">Links</span>
+        </div>
+    </a>
+    <a href="/x">
+        <div class="link-block">
+            <span class="link-icon" id="icon-x"></span>
+            <span class="link-text">~x</span>
+        </div>
+    </a>
+</div>
 
 <div class="webring-block-container">
     <a href="https://fediring.net/previous?host=fkfd.me">
diff --git a/docs/img/icons/feed.png b/docs/img/icons/feed.png
new file mode 100644
index 0000000..b0994be
--- /dev/null
+++ b/docs/img/icons/feed.png
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
index cb61f23..4fff115 100644
--- a/docs/img/icons/icons.kra
+++ b/docs/img/icons/icons.kra