summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--alabaster-lite/css/fkfd.css74
-rw-r--r--alabaster-lite/sidebars/links.html32
-rw-r--r--docs/img/icons/feed.pngbin0 -> 13079 bytes
-rw-r--r--docs/img/icons/icons.krabin776132 -> 855528 bytes
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
Binary files differ
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
Binary files differ