summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--alabaster-lite/css/fkfd.css52
-rw-r--r--docs/img/icons/about.pngbin0 -> 7898 bytes
-rw-r--r--docs/img/icons/icons.krabin334509 -> 458222 bytes
-rw-r--r--docs/img/icons/links.pngbin0 -> 10202 bytes
-rw-r--r--docs/img/icons/x.pngbin0 -> 7438 bytes
-rw-r--r--docs/index.md24
6 files changed, 67 insertions, 9 deletions
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
--- /dev/null
+++ b/docs/img/icons/about.png
Binary files differ
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
index 7b679f4..d086c14 100644
--- a/docs/img/icons/icons.kra
+++ b/docs/img/icons/icons.kra
Binary files differ
diff --git a/docs/img/icons/links.png b/docs/img/icons/links.png
new file mode 100644
index 0000000..5d78c41
--- /dev/null
+++ b/docs/img/icons/links.png
Binary files differ
diff --git a/docs/img/icons/x.png b/docs/img/icons/x.png
new file mode 100644
index 0000000..0018a03
--- /dev/null
+++ b/docs/img/icons/x.png
Binary files 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