Add responsive CSS for mobile devices

Signed-off-by: Joseph Elliott Hand <jhand@hawaii.edu>

1 files changed, 37 insertions, 20 deletions

diff --git a/static/style.css b/static/style.css
index 944dc73..15e9ee7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,38 +1,41 @@
 
 body {
+	padding: 0;
+	margin: 0;
+
 	color: #E0E0E0;
 	background-color: #121212;
 
 	font-family: sans;
 	font-size: 1.25rem;
 	line-height: 1.5;
-
-	margin: 3rem;
-}
-
-main {
-	margin-left: 15rem;
-	margin-right: 15rem;
-	max-width: 65ch;
 }
 
-.marginnote {
-	position: relative;
-	float: right;
+main { margin: 3rem 3rem 0 }
+header { margin: 3rem }
 
-	font-size: 0.925rem;
-	margin-right: calc(-1 * (30ch + 3rem));
-	width: 30ch;
+@media (min-width: 62rem) {
+	main {
+		margin-right: 18rem;
+	}
 }
 
-.marginnote_indicator {
-	vertical-align: super;
-	font-size: 0.5rem;
+@media (min-width: 77rem) {
+	main {
+		margin-left: 18rem;
+		max-width: 65ch;
+	}
+
+	header {
+		position: absolute;
+		top: 3rem;
+		left: 3rem;
+		width: 12rem;
+		margin: 0;
+	}
 }
 
-header {
-	position: absolute;
-	width: 12rem;
+@media (max-width: 70ch) {
 }
 
 header a {
@@ -51,3 +54,17 @@ main a {
 span.email span:nth-child(1) {
 	display: none;
 }
+
+.marginnote {
+	position: relative;
+	float: right;
+
+	font-size: 0.925rem;
+	margin-right: -15rem;
+	width: 12rem;
+}
+
+.marginnote_indicator {
+	vertical-align: super;
+	font-size: 0.5rem;
+}