Add layout for large screens

assets/scss/_events.scss

@@ -45,6 +45,24 @@ div.events {
     }
 }
 
+@media (min-width: $large_view) {
+    div.events {
+        max-width: $large_min_width;
+        p {
+            font-size: $font_size_default_large;
+        }
+        .headline a {
+            font-size: $font_size_h2_large;
+        }
+        code {
+            font-size: $font_size_code_large;
+        }
+        img:hover {
+            box-shadow: 8px 8px 6px 5px silver;
+        }
+    }
+}
+
 @media (max-width: $mobile_view) {
     div.events {
         p {
@@ -56,7 +74,7 @@ div.events {
             box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6);
         }
         code {
-          font-size: $font_size_code_mobile;
+            font-size: $font_size_code_mobile;
         }
         .headline a {
             font-size: $font_size_h2_mobile;

assets/scss/_footer.scss

@@ -13,6 +13,12 @@ footer {
     }
 }
 
+@media (min-width: $large_view) {
+    footer {
+        font-size: $font_size_default_large;
+    }
+}
+
 @media (max-width: $mobile_view) {
     footer {
         font-size: $font_size_default_mobile;

assets/scss/_header.scss

@@ -3,13 +3,13 @@ header {
     background: $background_accent_1;
     padding: 20px 30px;
     box-shadow: 5px 5px 5px 10px $background_accent_1;
-    h1 a, h1 a:hover, h1 a:link {
+    h1 a, h1 a:hover, h1 a:link, h1 a:visited {
         font-family: $headline_font, sans-serif;
         color: $font_accent_1;
         margin: 0;
         font-weight: bold;
-        text-decoration: none;
         font-size: $font_size_h1;
+        text-decoration: none;
     }
     nav ul {
         font-size: $font_size_default;
@@ -18,9 +18,14 @@ header {
         padding: 0;
         a, a:link, a:visited {
             color: $font_accent_2;
+            text-decoration: none;
+            background: $shadow_accent_1;
+            padding: 6px 18px;
+            border-radius: 5px;
         }
         a:hover, a:active {
             color: $font_accent_3;
+            box-shadow: 0px 0px 1px 1px $shadow_accent_1;
         }
         li {
             display: inline;
@@ -30,6 +35,20 @@ header {
     }
 }
 
+@media (min-width: $large_view) {
+    header {
+        max-width: $large_min_width;
+        margin: auto;
+        box-shadow: 0px -10000px 0px 10000px $background_accent_1;
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_large;
+        }
+        nav ul {
+            font-size: $font_size_default_large;
+        }
+    }
+}
+
 @media (max-width: $mobile_view) {
     header {
         h1 a, h1 a:hover, h1 a:link {

assets/scss/_page.scss

@@ -27,6 +27,24 @@ div.page {
     }
 }
 
+@media (min-width: $large_view) {
+    div.events {
+        max-width: $large_min_width;
+        p {
+            font-size: $font_size_default_large;
+        }
+        code {
+            font-size: $font_size_code_large;
+        }
+        h1 {
+            font-size: $font_size_h1_large;
+        }
+        h2 {
+            font-size: $font_size_h2_large;
+        }
+    }
+}
+
 @media (max-width: $mobile_view) {
     div.page {
         p, a{
@@ -39,6 +57,12 @@ div.page {
             max-height: 5dh;
             max-width: 90%;
         }
+        h1 {
+            font-size: $font_size_h1_mobile;
+        }
+        h2 {
+            font-size: $font_size_h2_mobile;
+        }
     }
 }
 

assets/scss/_start.scss

@@ -6,6 +6,9 @@ div.start {
     .left {
         flex: 45%;
         text-align: center;
+        background: rgba(128,128,128,0.15);
+        padding: 12px;
+        box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
     }
     .right {
         flex: 55%;
@@ -15,7 +18,7 @@ div.start {
         max-width: 100%;
     }
 
-    p, a{
+    p, a {
       color: $font_default;
       font-size: $font_size_default;
     }
@@ -32,16 +35,31 @@ div.start {
     }
 }
 
-.left {
+@media (min-width: $large_view) {
-    background: rgba(128,128,128,0.15);
+    div.start {
-    padding: 12px;
+        margin: auto;
-    box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
+        max-width: $large_min_width;
+        .right, .left {
+            flex: 50%;
+        }
+        p, a {
+            font-size: $font_size_default_large;
+        }
+        code {
+            font-size: $font_size_code_large;
+        }
+
+        h2 {
+            font-size: $font_size_h2_large;
+            text-shadow: 0px 0px 4px black;
+        }
+    }
 }
 
 @media (max-width: $mobile_view) {
     div.start {
         display: initial;
-        p, a{
+        p, a {
           font-size: $font_size_default_mobile;
         }
         code {
@@ -61,8 +79,8 @@ div.start {
 
 @media (max-width: $tiny_view) {
     div.start {
-        p, a{
+        p, a {
-          font-size: $font_size_default_tiny;
+            font-size: $font_size_default_tiny;
         }
     }
 }

assets/scss/_variables.scss

@@ -4,20 +4,25 @@ $background_accent_2: black;
 $font_accent_1: red;
 $font_accent_2: maroon;
 $font_accent_3: orangered;
-$font_accent_4: rgb(247, 196, 24 );
+$font_accent_4: rgb(247, 196, 24);
 $font_default: white;
 
+$shadow_accent_1: rgba(255, 190, 14, 0.5);
 $font_size_default: 1.5em;
+$font_size_default_large: 2.2em;
 $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_large: 2.6em;
 $font_size_code_mobile: 1.3em;
 $font_size_h1: 3em;
+$font_size_h1_large: 5em;
 $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_large: 3.2em;
 $font_size_h2_mobile: 1.3em;
 $font_size_h2_tiny: 1em;
 $font_size_h2_pico: 0.75em;
@@ -25,6 +30,9 @@ $font_size_h2_pico: 0.75em;
 $headline_font: 'Mochiy Pop One';
 $main_font: 'Lato';
 
+$large_min_width: 1800px;
+
+$large_view: 1700px;
 $mobile_view: 900px;
 $tiny_view: 450px;
 $pico_view: 320px;