collapse sidebar on small screens

the site is fully accessible through the header navbar so we can hide
the sidebar when it takes up more screen than its worth now!

2 files changed, 14 insertions, 1 deletions

diff --git a/site.css b/site.css
index addc8598..5beed493 100644
--- a/site.css
+++ b/site.css
@@ -77,6 +77,12 @@ a:hover {
     white-space: nowrap;
 }
 
+@media (max-width: 780px) {
+    #sidebar {
+        display: none;
+    }
+}
+
 #sidebar, #content, #header {
     background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6);
     border: 1px dotted var(--fg-color);
diff --git a/upd8.js b/upd8.js
index 87f89b72..a5904231 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1383,7 +1383,8 @@ function writeListingPages() {
                     </div>
                     <div id="content">
                         <h1>Listings</h1>
-                        <p>Feel free to explore any of the listings linked in the sidebar!</p>
+                        <p>Feel free to explore any of the listings linked below and in the sidebar!</p>
+                        ${generateLinkIndexForListings(listingDescriptors)}
                     </div>
                 </div>
             </body>
@@ -1525,6 +1526,12 @@ function generateHeaderForListings(listingDescriptors, currentDirectoryParts) {
 function generateSidebarForListings(listingDescriptors, currentDirectoryParts) {
     return fixWS`
         <h1><a href="${C.LISTING_DIRECTORY}/index.html">Listings</a></h1>
+        ${generateLinkIndexForListings(listingDescriptors, currentDirectoryParts)}
+    `;
+}
+
+function generateLinkIndexForListings(listingDescriptors, currentDirectoryParts) {
+    return fixWS`
         <ul>
             ${listingDescriptors.map(([ ldDirectoryParts, ldTitle ]) => fixWS`
                 <li class="${currentDirectoryParts === ldDirectoryParts && 'current'}">