From 49c721d0b986e8c0974c10c320478857525ff933 Mon Sep 17 00:00:00 2001
From: Shadowfacts <me@shadowfacts.net>
Date: Wed, 7 Jul 2021 23:03:50 -0400
Subject: [PATCH] Fix asides not collapsing to inline for small viewports

---
 site/css/main.scss | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/site/css/main.scss b/site/css/main.scss
index 5ea70b7..70530e7 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -229,16 +229,8 @@ article {
 			border: 1px solid var(--aside-border);
 			padding: 15px;
 			font-size: 1rem;
-			left: 100%;
 			box-sizing: border-box;
 
-			&:not(.inline) {
-				width: 50%;
-				position: absolute;
-				margin-left: 15px;
-				transform: translateY(-50%);
-			}
-
 			p:first-child { margin-top: 0; }
 			p:last-child { margin-bottom: 0; }
 		}
@@ -734,11 +726,16 @@ table {
 	}
 }
 
-@media (max-width: 1455px) {
-	article .article-content aside {
-		position: initial;
-		width: 100%;
-		margin: 0;
-		transform: unset;
+// 720 + 30 + 720 + 15
+// main content, l/r container padding, aside width (50% on each side), outer edge margin
+// inner edge margin overlaps with container padding
+@media (min-width: 1485px) {
+	article .article-content aside:not(.inline) {
+		width: 50%;
+		position: absolute;
+		left: 100%;
+		margin-left: 15px;
+		margin-right: 15px;
+		transform: translateY(-50%);
 	}
 }