introducing mobile layout

.gitattributes

@@ -4,3 +4,4 @@
 **.ttf filter=lfs diff=lfs merge=lfs -text
 **.woff filter=lfs diff=lfs merge=lfs -text
 **.ico filter=lfs diff=lfs merge=lfs -text
+**.woff2 filter=lfs diff=lfs merge=lfs -text

assets/scss/_fonts.scss

@@ -1,53 +1,46 @@
 
-// 'Mochiy Pop P One' font
+/* mochiy-pop-one-regular - latin */
 @font-face {
-  font-family: 'Mochiy Pop P One';
+  font-family: $headline_font;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/mochiypoppone.ttf) format('truetype');
+  src: local(''),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.woff2') format('woff2'),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.woff') format('woff'),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.ttf') format('truetype'),
 }
 
 // Lato font
 @font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/lato_italic_400.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(/fonts/lato_italic_700.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url(/fonts/lato_italic_900.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/lato_normal_400.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-regular.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-regular.woff') format('woff'),
+      url('/fonts/lato-v20-latin-regular.ttf') format('truetype');
 }
+
 @font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/lato_normal_700.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-700.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-700.woff') format('woff'),
+      url('/fonts/lato-v20-latin-700.ttf') format('truetype');
 }
+
 @font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url(/fonts/lato_normal_900.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-900.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-900.woff') format('woff'),
+      url('/fonts/lato-v20-latin-900.ttf') format('truetype');
 }

assets/scss/_general.scss

@@ -1,5 +1,5 @@
 body {
-    font-family: 'Lato', sans-serif;
+    font-family: $main_font, sans-serif;
     margin: 25px 25px 50px 25px;
     background: $background_accent_2;
     a {

assets/scss/_header.scss

@@ -4,7 +4,7 @@ header {
     padding: 20px 30px;
     box-shadow: 5px 5px 5px 10px $background_accent_1;
     h1 a, h1 a:hover, h1 a:link {
-        font-family: 'Mochiy Pop P One', sans-serif;
+        font-family: $headline_font, sans-serif;
         color: $font_accent_1;
         margin: 0;
         font-weight: bold;
@@ -23,3 +23,10 @@ header {
         }
     }
 }
+@media (max-width: $media_horizontal_breakpoint) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_mobile;
+        }
+    }
+}

assets/scss/_start.scss

@@ -30,3 +30,13 @@ div.start {
         text-shadow: 0px 0px 1px black;
     }
 }
+
+@media (max-width: $media_horizontal_breakpoint) {
+    div.start {
+        display: initial;
+        .left, .right {
+            text-align: center;
+            margin-top: 40px;
+        }
+    }
+}

assets/scss/_variables.scss

@@ -10,4 +10,10 @@ $font_default: white;
 $font_size_default: 1.5em;
 $font_size_code: 1.7em;
 $font_size_h1: 3em;
+$font_size_h1_mobile: 1.5em;
 $font_size_h2: 2.3em;
+
+$headline_font: 'Mochiy Pop One';
+$main_font: 'Lato';
+
+$media_horizontal_breakpoint: 900px;