Merge pull request #12 from lasseborly/fix/1/optimize-mobile

font-size and breakpoints

2 files changed, 48 insertions, 7 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 9aa38a9..e646657 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,11 +4,11 @@
 
 {{ partial "header.html" . }}
 
-<section>
+<main>
   {{ range (.Paginator 5).Pages }} 
     {{ .Render "summary" }}
   {{ end }}
-</section>
+</main>
 
 {{ partial "paginator.html" . }}
 
diff --git a/static/css/styles.css b/static/css/styles.css
index b331b94..c145e67 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -6,13 +6,21 @@ body {
   font-size: 18px;
   font-weight: 400;
   font-family: 'Quicksand', sans-serif;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+}
+
+main {
+  flex: 1;
 }
 
-@media(max-width: 600px) {
+@media(max-device-width: 667px) {
   body {
     width: 100%;
     box-sizing: border-box;
-    padding: 0 20px;
+    padding: 0 80px;
   }
 }
 
@@ -22,7 +30,7 @@ a {
 }
 
 a:visited {
-  color: #000;
+  color: #333;
 }
 
 a:hover {
@@ -34,6 +42,13 @@ p {
   text-align: justify;
 }
 
+@media(max-device-width: 667px) {
+  p {
+    font-size: 3em;
+  }
+}
+
+
 img {
   max-width: 100%;
 }
@@ -46,23 +61,35 @@ section#header h1 {
   font-size: 2em;
   text-align: center;
   font-family: 'Lobster', cursive;
-  font-size: 2em;
   margin: 0 0 9px 0;
 }
 
+@media(max-device-width: 667px) {
+  section#header h1 {
+    font-size: 6em;
+    margin: 0 0 30px 0;
+  }
+}
+
 section#header h2 {
   font-family: 'Cutive Mono', monospace;
   font-size: 0.8em;
   text-align: center;
 }
 
+@media(max-device-width: 667px) {
+  section#header h2 {
+    font-size: 1.5em;
+  }
+}
+
 section.summary {
   padding: 0 0 0 10px;
   border-left: 1px solid black;
   margin: 0 0 60px 0;
 }
 
-@media(max-width: 600px) {
+@media(max-device-width: 667px) {
   section.summary {
     padding: 0 0 0 0;
     border-left: 0px solid black;
@@ -78,6 +105,13 @@ section h2 {
   font-family: 'Lobster', cursive;
 }
 
+@media(max-device-width: 667px) {
+  section h2 {
+    font-size: 4em;
+    padding-bottom: 5px;
+  }
+}
+
 section h2 a {
   color: #000;
 }
@@ -97,6 +131,13 @@ section#paginator {
   font-family: 'Lobster', cursive;
 }
 
+@media(max-device-width: 667px) {
+  section#paginator {
+    font-size: 5em;
+    padding-bottom: 60px;
+  }
+}
+
 section#paginator #next {
   float: right;
 }