summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFrederick Yin <fkfd@fkfd.me>2022-12-28 18:31:39 +0800
committerFrederick Yin <fkfd@fkfd.me>2022-12-28 18:31:39 +0800
commite4581f12339d9fc141100da815408676d22162be (patch)
treec9635063d1463da3d5af45e2e02ed96914a24fd5
parentde43f5034b309e3216b62533540a7a622dd3598e (diff)
Style: category icons on homepage
-rw-r--r--alabaster-lite/css/alabaster.css70
-rw-r--r--alabaster-lite/main.html2
-rw-r--r--alabaster-lite/sidebars/about.html9
-rw-r--r--docs/img/icons/comics.pngbin0 -> 12887 bytes
-rw-r--r--docs/img/icons/ham.pngbin0 -> 12674 bytes
-rw-r--r--docs/img/icons/icons.krabin0 -> 409336 bytes
-rw-r--r--docs/img/icons/projects.pngbin0 -> 17891 bytes
-rw-r--r--docs/img/icons/random.pngbin0 -> 22337 bytes
-rw-r--r--docs/img/icons/shitpost.pngbin0 -> 13048 bytes
-rw-r--r--docs/img/icons/ta.pngbin0 -> 15985 bytes
-rw-r--r--docs/index.md51
11 files changed, 105 insertions, 27 deletions
diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css
index 89eae81..804746d 100644
--- a/alabaster-lite/css/alabaster.css
+++ b/alabaster-lite/css/alabaster.css
@@ -1,4 +1,7 @@
-/* This file used to import a css called basic.css, but the latter is fused into L584 now */
+/*
+ * This file used to import a css called basic.css,
+ * but the latter is fused in this file
+ */
/* -- page layout ----------------------------------------------------------- */
@@ -465,9 +468,6 @@ a:hover tt, a:hover code {
.github {
display: none;
}
-
-
-
}
@@ -573,6 +573,68 @@ nav li.active:not(.inactive) > a {
}
/*
+ * Custom home page for fkfd.me
+ * Created on 2022-12-28
+ */
+
+div .home-block-container {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: 320px 320px;
+}
+
+@media screen and (max-width: 870px) {
+ div .home-block-container {
+ display: grid;
+ gap: 20px;
+ /* one column only on narrow screens */
+ grid-template-columns: 320px;
+ }
+}
+
+div .home-block {
+ display: block;
+ width: 320px;
+ height: 120px;
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+div .home-block > span {
+ position: absolute;
+ margin-left: 150px;
+ margin-top: 40px;
+ color: white;
+ font-size: 1.5em;
+ font-variant-caps: small-caps;
+}
+
+#category-projects {
+ background-image: url("../img/icons/projects.png");
+}
+
+#category-random {
+ background-image: url("../img/icons/random.png");
+}
+
+#category-shitpost {
+ background-image: url("../img/icons/shitpost.png");
+}
+
+#category-ta {
+ background-image: url("../img/icons/ta.png");
+}
+
+#category-ham {
+ background-image: url("../img/icons/ham.png");
+}
+
+#category-comics {
+ background-image: url("../img/icons/comics.png");
+}
+
+
+/*
* basic.css
* ~~~~~~~~~
*
diff --git a/alabaster-lite/main.html b/alabaster-lite/main.html
index 9d288c8..c6ec757 100644
--- a/alabaster-lite/main.html
+++ b/alabaster-lite/main.html
@@ -13,7 +13,7 @@
<link href="{{ path }}" rel="stylesheet">
{% endfor %}
- <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9">
+ <meta name="viewport" content="width=device-width, initial-scale=0.9">
{% block extrahead %}{% endblock %}
diff --git a/alabaster-lite/sidebars/about.html b/alabaster-lite/sidebars/about.html
index 674dab4..89de15b 100644
--- a/alabaster-lite/sidebars/about.html
+++ b/alabaster-lite/sidebars/about.html
@@ -11,6 +11,9 @@
<h1 class="logo"><a href="{{nav.homepage.url|url}}">{{ config.site_name }}</a></h1>
{% endif %}
-{% if config.site_description %}
- <p class="blurb">{{ config.site_description }}</p>
-{% endif %}
+<p class="blurb">This is technically a blog.</p>
+
+<ul>
+ <li><a href="/about">About Me</a></li>
+ <li><a href="/feed/atom.xml">Atom Feed</a></li>
+</ul>
diff --git a/docs/img/icons/comics.png b/docs/img/icons/comics.png
new file mode 100644
index 0000000..0073e6a
--- /dev/null
+++ b/docs/img/icons/comics.png
Binary files differ
diff --git a/docs/img/icons/ham.png b/docs/img/icons/ham.png
new file mode 100644
index 0000000..e82e2b5
--- /dev/null
+++ b/docs/img/icons/ham.png
Binary files differ
diff --git a/docs/img/icons/icons.kra b/docs/img/icons/icons.kra
new file mode 100644
index 0000000..fbc9db6
--- /dev/null
+++ b/docs/img/icons/icons.kra
Binary files differ
diff --git a/docs/img/icons/projects.png b/docs/img/icons/projects.png
new file mode 100644
index 0000000..6c8c9bd
--- /dev/null
+++ b/docs/img/icons/projects.png
Binary files differ
diff --git a/docs/img/icons/random.png b/docs/img/icons/random.png
new file mode 100644
index 0000000..e2355fd
--- /dev/null
+++ b/docs/img/icons/random.png
Binary files differ
diff --git a/docs/img/icons/shitpost.png b/docs/img/icons/shitpost.png
new file mode 100644
index 0000000..f404a07
--- /dev/null
+++ b/docs/img/icons/shitpost.png
Binary files differ
diff --git a/docs/img/icons/ta.png b/docs/img/icons/ta.png
new file mode 100644
index 0000000..08fd8c3
--- /dev/null
+++ b/docs/img/icons/ta.png
Binary files differ
diff --git a/docs/index.md b/docs/index.md
index bff8d73..53dda73 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,26 +1,39 @@
# fkfd
-This is technically a blog.
-
-- [About Me](/about)
-
-- [Atom feed](/feed/atom.xml)
-
## Categories
-- [Projects](/projects)
-
-- [Random](/random)
-
-- [Shitpost](/shitpost)
-
-- [TA Adventures](/ta)
-
-- [Ham Radio](/ham)
-
-## Non-blog Content
-
-- [Comics](/comics)
+<div class="home-block-container">
+ <a href="/projects">
+ <div class="home-block" id="category-projects">
+ <span>Projects</span>
+ </div>
+ </a>
+ <a href="/random">
+ <div class="home-block" id="category-random">
+ <span>Random</span>
+ </div>
+ </a>
+ <a href="/ta">
+ <div class="home-block" id="category-ta">
+ <span>TA</span>
+ </div>
+ </a>
+ <a href="/ham">
+ <div class="home-block" id="category-ham">
+ <span>Ham Radio</span>
+ </div>
+ </a>
+ <a href="/shitpost">
+ <div class="home-block" id="category-shitpost">
+ <span>Shitpost</span>
+ </div>
+ </a>
+ <a href="/comics">
+ <div class="home-block" id="category-comics">
+ <span>Comics</span>
+ </div>
+ </a>
+</div>
## Fun