From 11d6e14bfd3bad191bcc4fb2ff9057a931f956db Mon Sep 17 00:00:00 2001
From: Emiel Hollander <EmielH@users.noreply.github.com>
Date: Tue, 20 Nov 2018 20:55:43 +0100
Subject: Improve responsive layout

---
 assets/scss/hallo/_base.scss      |  6 +-----
 assets/scss/hallo/_layout.scss    | 17 +++++++++++++++++
 assets/scss/hallo/_variables.scss |  7 +++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'assets')

diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss
index 6dea8c5..2b775fa 100644
--- a/assets/scss/hallo/_base.scss
+++ b/assets/scss/hallo/_base.scss
@@ -9,10 +9,6 @@ html {
     font-family: $sans-serif;
     font-size: 16px;
     overflow-y: auto;
-
-    @media (min-width: 600px) {
-        font-size: 18px;
-    }
 }
 
 body {
@@ -43,4 +39,4 @@ img.portrait {
     margin: 2em 3em;
     width: 300px;
     height: 300px;
-}
\ No newline at end of file
+}
diff --git a/assets/scss/hallo/_layout.scss b/assets/scss/hallo/_layout.scss
index cb28c1c..8164857 100644
--- a/assets/scss/hallo/_layout.scss
+++ b/assets/scss/hallo/_layout.scss
@@ -31,10 +31,27 @@ main {
             }
         }
     }
+
+    @media screen and (max-width: $break-large) {
+        display: block;
+        margin-top: 0;
+
+        .column.left {
+            text-align: center;
+        }
+
+        .column.right h1 {
+            margin-top: 0;
+        }
+    }
 }
 
 footer {
     display: flex;
     margin-top: 3rem;
     font-size: 0.75rem;
+
+    @media screen and (max-width: $break-large) {
+        display: block;
+    }
 }
diff --git a/assets/scss/hallo/_variables.scss b/assets/scss/hallo/_variables.scss
index e7d88c9..e540bd3 100644
--- a/assets/scss/hallo/_variables.scss
+++ b/assets/scss/hallo/_variables.scss
@@ -1,5 +1,5 @@
 // Colours
-$background-1: #6fcdbd; // #48e5c2;
+$background-1: #6fcdbd;
 $background-2: #81c6ff;
 $default-light: #fff;
 $default-dark: #333;
@@ -7,8 +7,11 @@ $default-dark: #333;
 // Fonts
 $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 
+// Responsive breaks
+$break-large: 980px;
+
 @mixin transition($args...) {
     -webkit-transition: $args;
        -moz-transition: $args;
             transition: $args;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3