From 4601874c6431c1a8bdf518926ebd307011d73a60 Mon Sep 17 00:00:00 2001
From: Shadowfacts <me@shadowfacts.net>
Date: Sun, 12 Jan 2025 16:17:21 -0500
Subject: [PATCH] Fix non-inline asides on mobile

---
 site_test/css/main.scss | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/site_test/css/main.scss b/site_test/css/main.scss
index 638b69c..96a408b 100644
--- a/site_test/css/main.scss
+++ b/site_test/css/main.scss
@@ -129,6 +129,7 @@ header {
 .article-meta {
     margin-top: 0;
     color: var(--secondary-text-color);
+    text-wrap: pretty;
 }
 
 .article-content {
@@ -154,7 +155,7 @@ header {
     > a {
         text-decoration: none;
 
-        &[href^="#fnref-"] {
+        &[href^="#fn-"] {
             display: none;
         }
     }
@@ -179,7 +180,7 @@ aside:not(.inline) {
     line-height: 1.25;
     color: var(--secondary-text-color);
     transition: color 0.2s ease-in-out;
-    display: none;
+    display: block;
 
     .sidenote-p {
         margin: 20px 0;
@@ -198,10 +199,13 @@ aside:not(.inline) {
     p:first-child {
         margin-top: 0;
     }
+    p:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .footnote {
-    display: flex;
+    display: none;
     flex-direction: row;
     gap: 8px;
     font-size: 1rem;
@@ -226,7 +230,6 @@ aside:not(.inline) {
 
 aside.inline {
     font-size: 1rem;
-    /* background-color: #d8d7fe; */
     background-color: lighten($link-color, 43%);
     padding: 1rem;
 
@@ -240,21 +243,29 @@ aside.inline {
 
 // 1.5 to account for -50% margin-right on .sidenote
 // plus page-horizontal-margin to effectively use that as the margin
-@media (min-width: calc(1.5 * $container-max-width + 2 * $page-horizontal-margin)) {
+@media (max-width: calc(1.5 * $container-max-width + 2 * $page-horizontal-margin)) {
     .footnote-reference {
         > a[href^="#fn-"] {
-            display: none;
-        }
-        > a[href^="#fnref-"] {
             display: inline;
         }
+        > a[href^="#fnref-"] {
+            display: none;
+        }
     }
-    .sidenote,
-    aside:not(.inline) {
-        display: block;
+    .sidenote {
+        display: none;
     }
     .footnote {
-        display: none;
+        display: flex;
+    }
+    aside:not(.inline) {
+        float: none;
+        margin-right: 0;
+        width: auto;
+        line-height: initial;
+        transform: none;
+        background-color: lighten($link-color, 43%);
+        padding: 1rem;
     }
 }