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

1 files changed, 56 insertions, 18 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");
+}