From ea24059bb0de208607f1d584cc09707650c5d90d Mon Sep 17 00:00:00 2001
From: Frederick Yin <fkfd@fkfd.me>
Date: Sat, 25 Nov 2023 16:38:20 -0500
Subject: sidebar shows up on mobile

---
 alabaster-lite/css/fkfd.css        | 24 ++++++++++++++++++++----
 alabaster-lite/sidebars/about.html |  2 --
 alabaster-lite/sidebars/links.html | 26 ++++++++++++++++++++++++++
 alabaster-lite/sidebars/title.html |  1 +
 docs/index.md                      | 23 -----------------------
 mkdocs.yml                         |  7 +++++++
 6 files changed, 54 insertions(+), 29 deletions(-)
 create mode 100644 alabaster-lite/sidebars/links.html

diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css
index aa27b35..901dcaa 100644
--- a/alabaster-lite/css/fkfd.css
+++ b/alabaster-lite/css/fkfd.css
@@ -135,6 +135,17 @@ div.footer a {
   }
 }
 
+@media screen and (max-width: 870px) {
+  div.sphinxsidebar {
+    float: none;
+    width: 100%;
+    margin: 0 -20px 0;
+    padding: 0 20px;
+    background-color: transparent;
+    color: #ccc;
+  }
+}
+
 /*
  * Custom home page for fkfd.me
  * Created on 2022-12-28
@@ -150,7 +161,7 @@ div.footer a {
 .webring-block-container {
   display: grid;
   gap: 0px;
-  grid-template-columns: 120px 120px 120px;
+  grid-template-columns: 60px 60px 60px;
 }
 
 @media screen and (max-width: 870px) {
@@ -171,8 +182,6 @@ div.footer a {
 
 .category-icon, .webring-icon {
   display: block;
-  width: 120px;
-  height: 120px;
   background-color: #3E4349;
   background-size: contain;
   background-repeat: no-repeat;
@@ -182,7 +191,14 @@ div.footer a {
   -webkit-mask-repeat: no-repeat;
 }
 
-@media screen and (max-width: 870px) {
+.category-icon {
+  width: 120px;
+  height: 120px;
+}
+
+.webring-icon {
+  width: 60px;
+  height: 60px;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/alabaster-lite/sidebars/about.html b/alabaster-lite/sidebars/about.html
index ed6cb0e..0e83dc2 100644
--- a/alabaster-lite/sidebars/about.html
+++ b/alabaster-lite/sidebars/about.html
@@ -1,5 +1,3 @@
-<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>
diff --git a/alabaster-lite/sidebars/links.html b/alabaster-lite/sidebars/links.html
new file mode 100644
index 0000000..44ce46e
--- /dev/null
+++ b/alabaster-lite/sidebars/links.html
@@ -0,0 +1,26 @@
+<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>
+</ul>
+
+<div class="webring-block-container">
+    <a href="https://fediring.net/previous?host=fkfd.me">
+        <div class="webring-block">
+            <span class="webring-icon" id="icon-fediring-prev"></span>
+            <span class="webring-text">Prev</span>
+        </div>
+    </a>
+    <a href="https://fediring.net/">
+        <div class="webring-block">
+            <span class="webring-icon" id="icon-fediring"></span>
+            <span class="webring-text">Fediring</span>
+        </div>
+    </a>
+    <a href="https://fediring.net/next?host=fkfd.me">
+        <div class="webring-block">
+            <span class="webring-icon" id="icon-fediring-next"></span>
+            <span class="webring-text">Next</span>
+        </div>
+    </a>
+</div>
diff --git a/alabaster-lite/sidebars/title.html b/alabaster-lite/sidebars/title.html
index becb5b3..2bfd103 100644
--- a/alabaster-lite/sidebars/title.html
+++ b/alabaster-lite/sidebars/title.html
@@ -10,3 +10,4 @@
 {% else %}
   <h1 class="logo"><a href="{{nav.homepage.url|url}}">{{ config.site_name }}</a></h1>
 {% endif %}
+<p class="blurb">This is technically a blog.</p>
diff --git a/docs/index.md b/docs/index.md
index 4b72cf5..a580311 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -85,26 +85,3 @@ title: Home
 
 - [one tøp song](/toys/one_top_song) — a game of words that only appear in
   one twenty øne piløts song
-
-## Fediring
-
-<div class="webring-block-container">
-    <a href="https://fediring.net/previous?host=fkfd.me">
-        <div class="webring-block">
-            <span class="webring-icon" id="icon-fediring-prev"></span>
-            <span class="webring-text">Prev</span>
-        </div>
-    </a>
-    <a href="https://fediring.net/">
-        <div class="webring-block">
-            <span class="webring-icon" id="icon-fediring"></span>
-            <span class="webring-text">Fediring</span>
-        </div>
-    </a>
-    <a href="https://fediring.net/next?host=fkfd.me">
-        <div class="webring-block">
-            <span class="webring-icon" id="icon-fediring-next"></span>
-            <span class="webring-text">Next</span>
-        </div>
-    </a>
-</div>
diff --git a/mkdocs.yml b/mkdocs.yml
index 34aabe7..8f386ef 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -3,6 +3,13 @@ site_url: https://fkfd.me/
 theme:
   name: null
   custom_dir: alabaster-lite/
+extra:
+  sidebars:
+    - title
+    - toc
+  homepage_sidebars:
+    - title
+    - links
 markdown_extensions:
   - md_in_html
   - toc:
-- 
cgit v1.2.3