From c6ef4ff68cc1c9a835198171680f482446eb45ec Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Fri, 10 Jul 2026 13:35:10 -0300
Subject: [PATCH] Make home aside webrings list collapsable.

---
 site/_data/i18n.cjs       |  2 ++
 site/_includes/header.njk | 23 --------------------
 site/index.njk            | 44 +++++++++++++++++++++++++++++++++++++--
 static/main.css           | 11 ++++++++++
 static/scripts/home.js    | 10 ++++++++-
 5 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/site/_data/i18n.cjs b/site/_data/i18n.cjs
index f7c8f48..c304022 100644
--- a/site/_data/i18n.cjs
+++ b/site/_data/i18n.cjs
@@ -89,6 +89,7 @@ module.exports = {
     nextSite: "next site",
     random: "random",
     showMore: "Show more",
+    showLess: "Show less",
     previous: "previous",
     next: "next",
     about: "about",
@@ -179,6 +180,7 @@ module.exports = {
     nextSite: "próximo site",
     random: "aleatório",
     showMore: "Ver mais",
+    showLess: "Ver menos",
     previous: "anterior",
     next: "próximo",
     about: "sobre",
diff --git a/site/_includes/header.njk b/site/_includes/header.njk
index 69b4cf4..cfb261a 100644
--- a/site/_includes/header.njk
+++ b/site/_includes/header.njk
@@ -3,29 +3,6 @@
     <div id="headerTitle">
         <h1>{{ title or "Adrian Victor" }}</h1>
         <p id="headerSubtitle"><i>{{ subtitle or "Fanasy is not a crime, find your castle in the sky." }}</i></p>
-        <script>
-            const headeri18n =
-                {
-                    by: "{{ i18n[langKey].by | safe }}",
-                    options: "{{ i18n[langKey].options | safe }}",
-                    hideBackground: "{{ i18n[langKey].hideBackground | safe }}",
-                    back: "{{ i18n[langKey].back | safe }}",
-                    permissionIssue: "{{ i18n[langKey].permissionIssue | safe }}",
-                    permissionIssueNotificationContent: "{{ i18n[langKey].permissionIssueNotificationContent | safe }}",
-                    notificationDefaultHint: "{{ i18n[langKey].notificationDefaultHint | safe }}",
-                    disableSoundEffects: "{{ i18n[langKey].disableSoundEffects | safe }}",
-                    windsArtAlt: "{{ i18n[langKey].windsArtAlt | safe }}",
-                    velkommenArtAlt: "{{ i18n[langKey].velkommenArtAlt | safe }}",
-                    pgArtAlt: "{{ i18n[langKey].pgArtAlt | safe }}",
-                    gearsAlt: "{{ i18n[langKey].gearsAlt | safe }}",
-                    soundOffAlt: "{{ i18n[langKey].soundOffAlt | safe }}",
-                    soundOnAlt: "{{ i18n[langKey].soundOnAlt | safe }}",
-                    volumeSliderAlt: "{{ i18n[langKey].volumeSliderAlt | safe }}",
-                    backgroundCheckAlt: "{{ i18n[langKey].backgroundCheckAlt | safe }}",
-                    sfxCheckboxAlt: "{{ i18n[langKey].sfxCheckboxAlt | safe }}",
-                    songSelectAlt: "{{ i18n[langKey].songSelectAlt | safe }}",
-                }
-        </script>
     </div>
     <div id="linksHelper">
         <div id="music"></div>
diff --git a/site/index.njk b/site/index.njk
index 6be8f5a..b5f41d1 100644
--- a/site/index.njk
+++ b/site/index.njk
@@ -16,15 +16,53 @@ headerLink: home
 <div id="homeSquares"></div>
 <script src="{{ '/static/scripts/home.js' | url }}" defer></script>
 
+<script>
+    const headeri18n =
+        {
+            by: "{{ i18n[langKey].by | safe }}",
+            options: "{{ i18n[langKey].options | safe }}",
+            hideBackground: "{{ i18n[langKey].hideBackground | safe }}",
+            back: "{{ i18n[langKey].back | safe }}",
+            permissionIssue: "{{ i18n[langKey].permissionIssue | safe }}",
+            permissionIssueNotificationContent: "{{ i18n[langKey].permissionIssueNotificationContent | safe }}",
+            notificationDefaultHint: "{{ i18n[langKey].notificationDefaultHint | safe }}",
+            disableSoundEffects: "{{ i18n[langKey].disableSoundEffects | safe }}",
+            windsArtAlt: "{{ i18n[langKey].windsArtAlt | safe }}",
+            velkommenArtAlt: "{{ i18n[langKey].velkommenArtAlt | safe }}",
+            pgArtAlt: "{{ i18n[langKey].pgArtAlt | safe }}",
+            gearsAlt: "{{ i18n[langKey].gearsAlt | safe }}",
+            soundOffAlt: "{{ i18n[langKey].soundOffAlt | safe }}",
+            soundOnAlt: "{{ i18n[langKey].soundOnAlt | safe }}",
+            volumeSliderAlt: "{{ i18n[langKey].volumeSliderAlt | safe }}",
+            backgroundCheckAlt: "{{ i18n[langKey].backgroundCheckAlt | safe }}",
+            sfxCheckboxAlt: "{{ i18n[langKey].sfxCheckboxAlt | safe }}",
+            songSelectAlt: "{{ i18n[langKey].songSelectAlt | safe }}",
+            showMore: "{{ i18n[langKey].showMore | safe }}",
+            showLess: "{{ i18n[langKey].showLess | safe }}",
+        }
+</script>
+
 <main id="boxChain">
     <noscript>
         <style>
             .hs {
                 display: unset !important;
             }
+            
             #homeSquares {
                 display: none;
             }
+
+            #homeWebrings.less {
+                overflow: unset;
+                max-height: unset;
+                -webkit-mask: none; 
+                mask: none;
+            }
+
+            #homeWebringsShowMore {
+                display: none;
+            }
         </style>
     </noscript>
     
@@ -189,7 +227,7 @@ headerLink: home
         <p class="end-text"><a href="{{ ('/' ~ langKey ~ '/blog/') | url }}">{{ i18n[langKey].showMore }}</a></p>
     </div>
 
-    <div id="homeWebrings">
+    <div id="homeGuestbook">
         <div>
             <h1 class="nomargin negativeMargin">Guestbook</h1>
             <hr style="margin-bottom: .4em;">
@@ -213,7 +251,7 @@ headerLink: home
         <p style="text-align: center;"><a href="{{ ('/' ~ langKey ~ '/misc/hotlinking') | url }}">{{ i18n[langKey].addMe }}?</a></p>
     </div>
 
-    <div id="homeWebrings">
+    <div id="homeWebrings" class="less">
         <div>
             <h1 class="nomargin negativeMargin">Webrings</h1>
             <hr style="margin-bottom: .4em;">
@@ -265,6 +303,8 @@ headerLink: home
         {% include 'widgets/droidring.html' %}
     </div>
 
+    <a id="homeWebringsShowMore">{{ i18n[langKey].showMore }}...</a>
+
     {% include 'widgets/internetometer-aside.html' %}
 
     <footer class="end-text">
diff --git a/static/main.css b/static/main.css
index ce447c0..6943df9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -925,6 +925,17 @@ header div:first-child {
     height: fit-content;
 }
 
+#homeWebrings.less {
+    max-height: 30em;
+    overflow: hidden;
+    --mask: linear-gradient(to bottom, 
+        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 85%, 
+        rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
+    ) 100% 50% / 100% 100% repeat-x;
+    -webkit-mask: var(--mask); 
+    mask: var(--mask);
+}
+
 #homeBlog p {
     overflow: hidden;
     display: -webkit-box;
diff --git a/static/scripts/home.js b/static/scripts/home.js
index f570539..9afa929 100644
--- a/static/scripts/home.js
+++ b/static/scripts/home.js
@@ -48,4 +48,12 @@ function updateSquare() {
     div = getSquareDivByID(square.id);
     selectedSquareDiv = div.id;
     div.classList.toggle("selected");
-}
\ No newline at end of file
+}
+
+const homeWebrings = document.getElementById("homeWebrings");
+const homeWebringsShowMore = document.getElementById("homeWebringsShowMore");
+
+homeWebringsShowMore.addEventListener("click", () => {
+    homeWebrings.classList.toggle("less");
+    homeWebringsShowMore.textContent = homeWebrings.classList.contains("less") ? headeri18n.showMore : headeri18n.showLess;
+});
\ No newline at end of file