From 5c0edca9a6d7b57e46b0c8398f85bcf2c4284007 Mon Sep 17 00:00:00 2001
From: Erin Nova <contact@the-system.eu.org>
Date: Tue, 10 May 2022 08:45:20 -0400
Subject: [PATCH] Make mobile friendly

---
 _scss/_base.scss       | 11 +++++++++++
 _scss/_footer.scss     | 24 ++++++++++++++++++++++++
 _scss/_formatting.scss | 13 ++++++++++---
 _scss/_navigation.scss | 24 ++++++++++++++++--------
 4 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/_scss/_base.scss b/_scss/_base.scss
index b50a796..e8d626c 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -9,6 +9,7 @@ html {
 	background-repeat: repeat;
 }
 
+@media only screen and (min-width: 600px) {
 .center {
 	background-color: $background-color;
 	width: 50%;
@@ -16,6 +17,16 @@ html {
 	margin: auto;
 	border: 5px solid #96CDFB;
 }
+}
+
+@media only screen and (max-width: 600px) {
+.center {
+	background-color: $background-color;
+	text-align: center;
+	margin: 10px;
+	border: 5px solid #96CDFB;
+}
+}
 
 .content {
 	margin: 5%;
diff --git a/_scss/_footer.scss b/_scss/_footer.scss
index 3075bef..f96e069 100644
--- a/_scss/_footer.scss
+++ b/_scss/_footer.scss
@@ -1,3 +1,4 @@
+@media only screen and (min-width: 600px) {
 footer {
 	margin: auto;
 	margin-top: 5%;
@@ -19,4 +20,27 @@ footer {
 		}
 	}
 }
+}
 
+@media only screen and (max-width: 600px) {
+footer {
+	margin: 10px;
+	margin-top: 5%;
+	margin-bottom: 5%;
+	border: 5px solid #ABE9B3;
+
+	ul {
+    	list-style: none;
+    	margin: auto;
+    	padding: 10px;
+	    display: grid;
+
+	    li {
+			h3 {
+				margin-top: auto;
+			}
+			text-align: center;
+		}
+	}
+}
+}
diff --git a/_scss/_formatting.scss b/_scss/_formatting.scss
index d253260..b79c19f 100644
--- a/_scss/_formatting.scss
+++ b/_scss/_formatting.scss
@@ -23,7 +23,10 @@ code, pre {
 	border-radius: 5px;
 	padding: 5px;
 	border-bottom: 2px solid #FAE3B0;
+}
 
+code {
+	display: inline;
 }
 
 .date {
@@ -32,13 +35,17 @@ code, pre {
 
 @media only screen and (min-width: 600px) {
 	code, pre {
-      	display: inline-block;
+      	display: inline;
       	max-width: 18cm;
 	}
 }
 
-code {
-	display: inline;
+@media only screen and (max-width: 600px) {
+	code, pre {
+      	display: inline-block;
+		max-width: 100%;
+		overflow: auto;
+	}
 }
 
 p code {
diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss
index 9cab9c3..02b63e7 100644
--- a/_scss/_navigation.scss
+++ b/_scss/_navigation.scss
@@ -28,8 +28,10 @@ nav {
 
 @media only screen and (max-width: 600px) {
 nav {
-	font-size: 20px;
+	margin: 10px;
 	list-style: none;
+	font-size: 1.3em;
+	border: 5px solid #DDB6F2;
 	
 	ul {
 		list-style: none;
@@ -38,15 +40,21 @@ nav {
 		margin: auto;
 		display: grid;
 		
-			grid-template-columns: repeat(3, 1fr);
-			gap: 10px;
-			grid-auto-rows: minmax(50px, auto);
-			align-content: center;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 10px;
+		grid-auto-rows: minmax(50px, auto);
+		align-content: center;
 
-			li {
-				padding: 0px;
-				margin: auto;
+		li {
+			padding: 0px;
+			margin: auto;
+			font-weight: bold;
+			text-align: center;
+
+			a {
+				text-decoration: none;
 			}
+		}
 	}
 }
 }