From e886da7af01747972cde23ff09827b56dbba973c Mon Sep 17 00:00:00 2001
From: Maarten Billemont <lhunath@lyndir.com>
Date: Wed, 25 Apr 2018 16:17:24 -0400
Subject: [PATCH] Improvements for small screens.

---
 _sass/_layout.scss | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 4080b323..d80a7837 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -12,13 +12,13 @@ body * {
     /*outline: 1px solid rgba(255, 0, 0, 0.5);/**/
 }
 img, video {
-    margin:                 1ex 1em;
+    margin:                 1ex 2%;
+    width:                  96%;
 
     border-radius:          4px;
     box-shadow:             0 1px 3px rgba(0, 0, 0, 0.6);
     object-fit: contain;
     box-sizing:             border-box;
-    max-width: 100%;
 }
 h1 {
     margin:                 0;
@@ -66,10 +66,13 @@ q {
 nav {
     display:                flex;
 
-    font-size:              1.8em;
     font-weight:            400;
     text-align:             center;
 
+    @media screen and (min-width: 1024px) {
+        font-size:          1.8em;
+    }
+
     &>* {
         flex:               1;
         border:             0 solid transparent;
@@ -130,7 +133,7 @@ header {
     }
     nav:first-child {
         position:           fixed;
-        padding:            0 2em;
+        padding:            0 20px;
         margin:             0;
         left:               0;
         right:              0;
@@ -138,6 +141,10 @@ header {
         background:         rgba(0, 0, 0, 0.8);
         color:              white;
 
+        @media screen and (min-width: 1024px) {
+            padding:        0 100px;
+        }
+
         &>*:first-child {
             text-align:     left;
             font-variant:   small-caps;
@@ -176,15 +183,23 @@ header.large, section {
 }
 section {
     box-sizing:             border-box;
-    padding:                2em 100px;
+    padding:                2em 20px;
 
     font-size:              1.2em;
+
+    @media screen and (min-width: 1024px) {
+        padding:            2em 100px;
+    }
 }
 footer {
-    padding:                2em 100px;
+    padding:                2em 20px;
 
     background:             rgba(240, 240, 240, 1);
 
+    @media screen and (min-width: 1024px) {
+        padding:            2em 100px;
+    }
+
     & > div {
         display:                flex;
 
@@ -315,6 +330,8 @@ input[type=checkbox] {
     }
 }
 .widget_test ul {
+    margin:         0 8px;
+
     list-style:             none;
 
     li {
@@ -329,11 +346,16 @@ input[type=checkbox] {
     input[type=checkbox] {
         & + label + div {
             display:none;
-            margin:             1ex 0;
-            padding:            1ex 2em;
+            margin:         1ex 0;
+            padding:        1ex;
+
             background:         rgba(240, 240, 240, 1);
 
             font-weight:        100;
+
+            @media screen and (min-width: 1024px) {
+                padding:        1ex 2em;
+            }
         }
         &:checked + label + div {
             display:block;