improve mobile layout

assets/scss/_events.scss

@@ -2,7 +2,7 @@ div.events {
     margin: 0 auto;
     padding: 20px 30px;
     background: transparent;
-    p{
+    p {
       color: $font_default;
       font-size: $font_size_default;
     }
@@ -44,3 +44,22 @@ div.events {
         box-shadow: 5px 5px 4px 3px grey;
     }
 }
+
+@media (max-width: $mobile_view) {
+    div.events {
+        p {
+            font-size: $font_size_default_mobile;
+        }
+        img {
+            max-width: 98%;
+            margin: 1%;
+            box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6);
+        }
+        code {
+          font-size: $font_size_code_mobile;
+        }
+        .headline a {
+            font-size: $font_size_h2_mobile;
+        }
+    }
+}

assets/scss/_footer.scss

@@ -5,10 +5,24 @@ footer {
     font-size: $font_size_default;
     color: $font_default;
     text-align: center;
-    a {
+    a, a:link, a:visited {
         color: $font_accent_4;
     }
     a:hover {
         color: $font_accent_3;
     }
 }
+
+@media (max-width: $mobile_view) {
+    footer {
+        font-size: $font_size_default_mobile;
+        color: silver;
+        a, a:link, a:visited {
+            color: grey;
+        }
+        a:hover {
+            color: white;
+        }
+    }
+
+}

assets/scss/_header.scss

@@ -29,10 +29,14 @@ header {
         }
     }
 }
-@media (max-width: $media_horizontal_breakpoint) {
+
+@media (max-width: $mobile_view) {
     header {
         h1 a, h1 a:hover, h1 a:link {
             font-size: $font_size_h1_mobile;
         }
+        nav ul {
+            font-size: $font_size_default_mobile;
+        }
     }
 }

assets/scss/_start.scss

@@ -24,6 +24,7 @@ div.start {
       color: $font_accent_4;
       font-size: $font_size_code;
     }
+
     h2 {
         color: $font_accent_3;
         font-size: $font_size_h2;
@@ -37,12 +38,23 @@ div.start {
     box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
 }
 
-@media (max-width: $media_horizontal_breakpoint) {
+@media (max-width: $mobile_view) {
     div.start {
         display: initial;
+        p, a{
+          font-size: $font_size_default_mobile;
+        }
+        code {
+            font-size: $font_size_code_mobile;
+        }
         .left, .right {
             text-align: center;
             margin-top: 40px;
         }
+        img {
+            max-height: 5dh;
+            max-width: 90%;
+
+        }
     }
 }

assets/scss/_variables.scss

@@ -8,12 +8,15 @@ $font_accent_4: rgb(247, 196, 24 );
 $font_default: white;
 
 $font_size_default: 1.5em;
+$font_size_default_mobile: 1.1em;
 $font_size_code: 1.7em;
+$font_size_code_mobile: 1.3em;
 $font_size_h1: 3em;
 $font_size_h1_mobile: 1.5em;
 $font_size_h2: 2.3em;
+$font_size_h2_mobile: 1.3em;
 
 $headline_font: 'Mochiy Pop One';
 $main_font: 'Lato';
 
-$media_horizontal_breakpoint: 900px;
+$mobile_view: 900px;