Make home aside webrings list collapsable.

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",

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>

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">

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;

static/scripts/home.js

@@ -48,4 +48,12 @@ function updateSquare() {
     div = getSquareDivByID(square.id);
     selectedSquareDiv = div.id;
     div.classList.toggle("selected");
-}
+}
+
+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;
+});