add rules for mobile screen in stylesheet

this is a subject to change, but for now it's fine.

1 files changed, 19 insertions, 1 deletions

diff --git a/_sass/main.scss b/_sass/main.scss
index f73cc5b..a12cc99 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -10,10 +10,11 @@ html {
 
 body {
 	max-width: fit-content;
+	min-width: 364px;
 	margin: 20px auto 0 auto;
+	padding: 8px;
 	font: 100% $body-font;
 }
-
 a {
 	color: #707070;
 	text-decoration: none;
@@ -54,3 +55,20 @@ footer {
 		margin: 0;
 	}
 }
+
+@media only screen and (max-width: 700px) {
+	nav {
+		margin-bottom: 5vh;
+		ul {
+			width: 100%;
+			padding: 0;
+			padding-top: 30px;
+			position: relative;
+			top: 5vh;	
+		}
+		img {
+			position: absolute;
+			top: 0;
+		}
+	}
+}