From 223120da59c5f3c81ea7cb229490843e333cbb53 Mon Sep 17 00:00:00 2001
From: Oliver Atkinson <oliveratkinsoneng@gmail.com>
Date: Thu, 28 Sep 2023 11:45:27 -0600
Subject: [PATCH] reactive css

---
 static/content.css | 37 +++++++++++++++++++++++
 static/hugo.css    | 46 ++++++++++++++++++++++++++++
 static/style.css   | 75 +++++++---------------------------------------
 3 files changed, 94 insertions(+), 64 deletions(-)
 create mode 100644 static/content.css
 create mode 100644 static/hugo.css

diff --git a/static/content.css b/static/content.css
new file mode 100644
index 0000000..5c3c0ab
--- /dev/null
+++ b/static/content.css
@@ -0,0 +1,37 @@
+.content {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.content figure {
+    flex: 25%;
+    margin-left: auto;
+    margin-right: auto;
+	align-items: center;
+}
+
+.content img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+
+    max-width: 50%;
+    height: auto;
+	width: auto;
+
+	outline: cadetblue solid 3px;
+}
+
+.content p {
+    flex: 50%;
+}
+
+@media only screen and (max-width: 600px) {
+	.content p {
+        flex:100%;
+    }
+    .content figure {
+		flex:100%;
+	}
+}
diff --git a/static/hugo.css b/static/hugo.css
new file mode 100644
index 0000000..525cbc8
--- /dev/null
+++ b/static/hugo.css
@@ -0,0 +1,46 @@
+
+/* For NEXTPREV.HTML */
+#nextprev {
+	/* The container for both the previous and next articles. */
+	color: black;
+}
+
+#nextprev a:any-link {
+	color: black;
+}
+
+#nextart {
+	float: left ;
+	text-align: left ;
+}
+
+#prevart {
+	float: right ;
+	text-align: right ;
+}
+
+#nextart,#prevart {
+	max-width: 33% ;
+}
+
+/* For TAGLIST.HTML */
+.taglist {
+	text-align: center;
+	clear: both;
+	color: rgb(64, 64, 64);
+}
+
+/* For putting right / left boxes next to each other */
+.left {
+	width: 45%;
+	padding-right: 5%;
+	float: left;
+	clear: both;
+}
+
+.right {
+	width: 45%;
+	padding-left: 5%;
+	float: right;
+}
+
diff --git a/static/style.css b/static/style.css
index 5368a45..97478b9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -18,20 +18,9 @@ main {
 	margin: auto;
 }
 
-h1 {
-	text-align: center;
-}
-
-h2 {
-	text-align: center;
-}
-
-h3 {
-	text-align: center;
-}
-
-h4 {
+h1, h2, h3, h4 {
 	text-align: center;
+	flex: 100%;
 }
 
 header h1 {
@@ -108,12 +97,13 @@ code {
 
 img {
 	border-radius: 4px;
+	margin: 0;
 }
 
-article img {
-	max-width: 100%;
-	max-height: 100%;
-	outline: cadetblue solid 3px;
+figcaption {
+	color: rgb(69, 69, 69);
+	font-style: italic;
+	text-align: center;
 }
 
 figure {
@@ -130,52 +120,9 @@ footer a:any-link {
 	color: white;
 }
 
-/* For NEXTPREV.HTML */
-#nextprev {
-	/* The container for both the previous and next articles. */
-	color: black;
+@media only screen and (max-width: 600px) {
+	main {
+		max-width: 90%;
+	}
 }
 
-#nextprev a:any-link {
-	color: black;
-}
-
-#nextart {
-	float: left ;
-	text-align: left ;
-}
-
-#prevart {
-	float: right ;
-	text-align: right ;
-}
-
-#nextart,#prevart {
-	max-width: 33% ;
-}
-
-/* For TAGLIST.HTML */
-.taglist {
-	text-align: center;
-	clear: both;
-	color: rgb(64, 64, 64);
-}
-
-/* For putting right / left boxes next to each other */
-.left {
-	width: 45%;
-	padding-right: 5%;
-	float: left;
-	clear: both;
-}
-
-.right {
-	width: 45%;
-	padding-left: 5%;
-	float: right;
-}
-
-.subtext {
-	color: rgb(69, 69, 69);
-	font-style: italic;
-}
\ No newline at end of file