Optimize mobile layout

assets/scss/_events.scss

@@ -63,3 +63,22 @@ div.events {
         }
     }
 }
+
+@media (max-width: $tiny_view) {
+    div.events {
+        p {
+            font-size: $font_size_default_tiny;
+        }
+        .headline a {
+            font-size: $font_size_h2_tiny;
+        }
+    }
+}
+
+@media (max-width: $pico_view) {
+    div.events {
+        .headline a {
+            font-size: $font_size_h2_pico;
+        }
+    }
+}

assets/scss/_footer.scss

@@ -24,5 +24,10 @@ footer {
             color: white;
         }
     }
-
+}
+
+@media (max-width: $tiny_view) {
+    footer {
+        font-size: $font_size_default_pico;
+    }
 }

assets/scss/_header.scss

@@ -40,3 +40,22 @@ header {
         }
     }
 }
+
+@media (max-width: $tiny_view) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_tiny;
+        }
+        nav ul {
+            font-size: $font_size_default_tiny;
+        }
+    }
+}
+
+@media (max-width: $pico_view) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_pico;
+        }
+    }
+}

assets/scss/_start.scss

@@ -58,3 +58,11 @@ div.start {
         }
     }
 }
+
+@media (max-width: $tiny_view) {
+    div.start {
+        p, a{
+          font-size: $font_size_default_tiny;
+        }
+    }
+}

assets/scss/_variables.scss

@@ -9,14 +9,22 @@ $font_default: white;
 
 $font_size_default: 1.5em;
 $font_size_default_mobile: 1.1em;
+$font_size_default_tiny: 1em;
+$font_size_default_pico: 0.8em;
 $font_size_code: 1.7em;
 $font_size_code_mobile: 1.3em;
 $font_size_h1: 3em;
 $font_size_h1_mobile: 1.5em;
+$font_size_h1_tiny: 1em;
+$font_size_h1_pico: 0.7em;
 $font_size_h2: 2.3em;
 $font_size_h2_mobile: 1.3em;
+$font_size_h2_tiny: 1em;
+$font_size_h2_pico: 0.75em;
 
 $headline_font: 'Mochiy Pop One';
 $main_font: 'Lato';
 
 $mobile_view: 900px;
+$tiny_view: 450px;
+$pico_view: 320px;