From 0b125cf323d7c6efc5235bab484c05f59e51168d Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 18 Nov 2020 15:13:45 +0100
Subject: [PATCH] Introduce media queries and small screen adjustments

---
 app/assets/stylesheets/_mediaqueries.scss | 33 +++++++++++++++++++++++
 app/assets/stylesheets/layout.scss        | 27 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 app/assets/stylesheets/_mediaqueries.scss

diff --git a/app/assets/stylesheets/_mediaqueries.scss b/app/assets/stylesheets/_mediaqueries.scss
new file mode 100644
index 0000000..44095a9
--- /dev/null
+++ b/app/assets/stylesheets/_mediaqueries.scss
@@ -0,0 +1,33 @@
+$breakpoints-max: (
+  small: 600px,
+  medium: 960px,
+  large: 1280px
+);
+
+$breakpoints-min: (
+  small: 601px,
+  medium: 961px,
+  large: 1281px
+);
+
+@mixin media-max($screen-size) {
+  @if map-has-key($breakpoints-max, $screen-size) {
+    @media (max-width: map-get($breakpoints-max, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}
+
+@mixin media-min($screen-size) {
+  @if map-has-key($breakpoints-min, $screen-size) {
+    @media (min-width: map-get($breakpoints-min, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 0d03029..f57e8e5 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,3 +1,5 @@
+@import "mediaqueries";
+
 $content-width: 800px;
 $content-max-width: 100%;
 
@@ -15,6 +17,10 @@ body {
     background: #0d4f99;
     background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
 
+    @include media-max(small) {
+      padding: 3rem 0;
+    }
+
     h1 {
       font-size: 1.8rem;
       color: #fff;
@@ -42,6 +48,10 @@ body {
       margin-top: 2rem;
       color: rgba(255,255,255,0.6);
 
+      @include media-max(small) {
+        font-size: 0.85rem;
+      }
+
       strong {
         font-weight: 400;
         color: #fff;
@@ -81,6 +91,14 @@ main {
   margin: 4rem auto;
   text-align: left;
 
+  @include media-max(medium) {
+    max-width: 90%;
+  }
+
+  @include media-max(small) {
+    margin: 3rem auto;
+  }
+
   h2, h3 {
     margin-bottom: 1.5em;
   }
@@ -119,6 +137,11 @@ main {
     border-bottom: 1px dotted #ccc;
     padding-bottom: 4rem;
     margin-bottom: 4rem;
+
+    @include media-max(small) {
+      padding-bottom: 3rem;
+      margin-bottom: 3rem;
+    }
   }
 }
 
@@ -130,6 +153,10 @@ main {
     grid-row-gap: 1rem;
     grid-column-gap: 2rem;
 
+    @include media-max(small) {
+      grid-template-columns: 1fr;
+    }
+
     margin-top: 3rem;
 
     h3 {