More responsive font sizing

Author: StavromulaBeta

assets/main.css

@@ -11,21 +11,21 @@ body {
 }
 
 main {
-	margin: 0 .5rem;
-	font-size: 1.2rem;
+	margin: 0 .5em;
+	font-size: 1.2em;
 }
 
 h1 {
 	font-style: italic;
 	text-align:center;
-	font-size: 3rem;
+	font-size: 3em;
 	margin-bottom: 0;
 }
 
 h2 {
 	font-style: italic;
 	text-align:center;
-	font-size: 1.5rem;
+	font-size: 1.5em;
 	margin-left: 5%;
 	margin-right: 5%;
 }
@@ -42,7 +42,6 @@ li {
 }
 
 .code {
-	margin-left: 1.5rem;
 	display: block;
 }
 
@@ -51,36 +50,47 @@ pre {
 }
 
 code {
-	font-family: monospace;
-	font-size: 1rem;
+	font-family: "Ubuntu Mono", monospace;
 	background-color: #eeeeee;
 }
 
 pre code {
-	font-size: 1.25rem;
 	color: #333333;
 	background-color: #ffffff;
 	margin-bottom: 0;
 }
 
 @media (min-width: 850px) {
-  main {
-		max-width: 70%;
-		margin: auto;
-	}
-	h1 {
-		font-size: 5rem;
-	}
-	h2 {
-		font-size: 2rem;
-	}
-	code {
-  	font-size: 1.2rem;
-	}
-	pre code {
-		font-size: 1.6rem;
-	}
-	.code {
-		margin-left: 5rem;
-	}
+main {
+	max-width: 850px;
+	margin: auto;
+}
+h1 {
+	font-size: 5em;
+}
+h2 {
+	font-size: 2em;
+}
+code {
+	font-size: 1.2em;
+}
+pre code {
+	font-size: 1.2em;
+}
+.code {
+	margin-left: 5em;
+}
+}
+
+@media (max-width: 850px) {
+h1 {
+	font-size: 3em;
+}
+h2 {
+	font-size: 1.2em;
+}
+.code {
+	font-size: 3.5vw;
+	margin-left: 1.5em;
+}
 }

public/index.html

@@ -23,7 +23,7 @@ <h2 id="readable-and-concise-concatenative-programming">Readable and concise con
 		<span style='color: #a71d5d'>If</span> <span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>15</span> <span style='color: #333333'>then</span> <span style='color: #183691'>&quot;fizzbuzz&quot;</span>
 		<span style='color: #a71d5d'>If</span> <span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>3</span>  <span style='color: #333333'>then</span> <span style='color: #183691'>&quot;fizz&quot;</span>
 		<span style='color: #a71d5d'>If</span> <span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>5</span>  <span style='color: #333333'>then</span> <span style='color: #183691'>&quot;buzz&quot;</span>
-		   <span style='color: #333333'>else</span> <span style='color: #795da3'>N</span>
+		                  <span style='color: #333333'>else</span> <span style='color: #795da3'>N</span>
 <span style='color: #4e4e4e'>)</span>;
 
 <span style='color: #a71d5d'>For</span> <span style='color: #333333'>each</span> <span style='color: #333333'>in</span> <span style='color: #183691'>Range</span> <span style='color: #0086b3'>1</span> <span style='color: #333333'>to</span> <span style='color: #0086b3'>100</span> <span style='color: #4e4e4e'>(</span><span style='color: #183691'>Print</span> <span style='color: #795da3'>Fizzbuzz</span><span style='color: #4e4e4e'>)</span>