From 79167aed03e5ea675755a45aeff5824a3039934f Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 1 Jun 2022 13:51:18 +0200
Subject: [PATCH] Implement variable zen-gutters with calc() based on vm.

---
 assets/sass/_variables.scss                          |  6 +++---
 assets/sass/_zen.scss                                |  8 ++------
 assets/sass/components/header/_header.scss           |  1 -
 .../language-selector/_language-selector.scss        |  5 +++--
 assets/sass/layouts/_layouts.scss                    |  6 +-----
 assets/sass/mobile.scss                              | 12 ++++++------
 6 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
index 2df42b8..c74701e 100644
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@@ -19,7 +19,7 @@ $base-line-height:  $base-font-size * 1.5;
 
 // The font sizes in our type hierarchy as tee shirt sizes.
 $font-size: (
-  xxl:              34px,
+  xxl:              36px,
   xl:               28px,
   l:                22px,
   m:                $base-font-size,
@@ -121,13 +121,13 @@ $breakpoints: (
 // Layout
 
 // The max content width.
-$max-content-width: 960px;
+$max-content-width: 1000px;
 
 // The max line width for redability.
 $max-line-width: 70ch;
 
 // The default left/right gutter/padding.
-$zen-gutters: 20px;
+$zen-gutters: calc(5px + 1.5625vw);
 
 // Border radius.
 $s-radius: 3px;
diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 039f425..4168321 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -11,11 +11,7 @@ body {
 }
 
 .header {
-  padding-top: $zen-gutters / 2;
-
-  @include respond-to(s) {
-    padding-top: $zen-gutters;
-  }
+  padding-top: $zen-gutters;
 }
 
 .footer {
@@ -142,7 +138,7 @@ article {
 }
 
 .title-submitted {
-  margin-bottom: 0;
+  margin-bottom: .2rem;
 }
 
 figure {
diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss
index 0838007..1f2e1e8 100644
--- a/assets/sass/components/header/_header.scss
+++ b/assets/sass/components/header/_header.scss
@@ -25,7 +25,6 @@
   // The name of the website.
   &__site-name {
     margin: 0;
-    line-height: 1.5;
   }
 
   // The link around the name of the website.
diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss
index 5e47530..c6ff063 100644
--- a/assets/sass/components/language-selector/_language-selector.scss
+++ b/assets/sass/components/language-selector/_language-selector.scss
@@ -5,9 +5,10 @@
 }
 
 .language-icon {
-  margin: 0 ($zen-gutters / 2) 0 0;
+  @include margin-right(.5);
 
   @include rtl() {
-    margin: 0 0 0 ($zen-gutters / 2);
+    @include margin-left(.5);
+    margin-right: 0;
   }
 }
diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss
index 01c5969..24dd4c2 100644
--- a/assets/sass/layouts/_layouts.scss
+++ b/assets/sass/layouts/_layouts.scss
@@ -19,12 +19,8 @@
   &__page-top,
   &__page-bottom,
   &__cookieconsent {
-    padding: 0 $zen-gutters / 2;
+    padding: 0 $zen-gutters;
     min-width: 0;  // With display grid defaults to auto, making <pre> overflow.
-
-    @include respond-to(s) {
-      padding: 0 $zen-gutters;
-    }
   }
 }
 
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index 7b25c16..d8226b9 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -47,9 +47,9 @@
   &__toggle {
     display: block;
     position: absolute;
-    top: $zen-gutters / 2;
-    right: $zen-gutters / 2;
-    padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px;
+    top: $zen-gutters;
+    right: $zen-gutters;
+    padding: 6px 30px 6px 6px;
     z-index: 22;
     text-decoration: none;
     font-weight: bold;
@@ -70,9 +70,9 @@
     &::after {
       position: absolute;
       content: '';
-      margin-left: $zen-gutters / 4;
-      width: $zen-gutters;
-      height: $zen-gutters;
+      margin-left: 4px;
+      width: 20px;
+      height: 20px;
       border-top: 12px double var(--color-text);
       border-bottom: 4px solid var(--color-text);
     }