From 290a58fdb03220e96d3e332060450e52fbaa3438 Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Wed, 25 Sep 2024 14:22:23 -0400
Subject: [PATCH] update website min width, fix pre elements expanding too far

---
 src/scss/blog.scss | 11 +++++++++--
 src/scss/main.scss | 34 +++++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/scss/blog.scss b/src/scss/blog.scss
index c4d3df2..3a59a04 100644
--- a/src/scss/blog.scss
+++ b/src/scss/blog.scss
@@ -10,8 +10,15 @@
 }
 
 #post {
-	code span {
-		margin-left: 0 !important;
+	max-width: 100%;
+
+	pre {
+		code span {
+			margin-left: 0 !important;
+		}
+
+		overflow-x: scroll;
+		max-width: $page-width - $outer-gap * 2 - $inner-gap;
 	}
 
 	img {
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 4face22..3dcbf5e 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -109,15 +109,6 @@ body {
 	text-align: left;
 }
 
-@media (max-width: ($page-width + $outer-gap * 2)) {
-	body, #header,
-	#main, #footer,
-	#container {
-		width: 100%;
-		min-width: 250px;
-	}
-}
-
 #header,
 #footer {
 	display: block;
@@ -179,6 +170,25 @@ body {
 	}
 }
 
+/* once the page has been shrank to max content width */
+@media (max-width: ($page-width + $outer-gap * 2)) {
+	body {
+		width: 1px;
+		min-width: 100%;
+
+		.center {
+			  display: block;
+		}
+	}
+
+	.center, #header,
+	#main, #footer,
+	#container {
+		width: 100%;
+		max-width: 100%;
+	}
+}
+
 @media (max-width: 800px) {
 	#header {
 		display: block;
@@ -210,6 +220,12 @@ body {
 	}
 }
 
+@media (max-width: 300px) {
+	body {
+	      width: 300px;
+	}
+}
+
 #footer {
 	padding: $inner-gap;