From 3fa0b6cc1b4a1081ff972a0549fdd091d1d7eeea Mon Sep 17 00:00:00 2001
From: Benjamin Rasmussen <benjamin@reload.dk>
Date: Fri, 15 Dec 2023 15:13:51 +0100
Subject: [PATCH] Add a layout-container mixin, and replace any existing
 max-widths.

---
 .../Library/event-description/event-description.scss  |  9 +++++----
 src/stories/Library/event-header/event-header.scss    | 11 +----------
 .../Library/link-with-icon/link-with-icon.scss        |  7 +++----
 src/stories/Library/medias/medias.scss                | 11 ++---------
 src/stories/Library/rich-text/rich-text.scss          |  5 +----
 src/styles/scss/tools/mixins.misc.scss                | 11 +++++++++++
 6 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss
index 86a6b92be..2c26daf06 100644
--- a/src/stories/Library/event-description/event-description.scss
+++ b/src/stories/Library/event-description/event-description.scss
@@ -1,10 +1,11 @@
 .event-description {
-  padding: $s-md;
-  max-width: $layout__max-width;
-  margin: 0 auto;
+  @include layout-container;
+  padding-top: $s-md;
+  padding-bottom: $s-md;
 
   @include media-query__small {
-    padding: $s-xl $s-4xl;
+    padding-top: $s-xl;
+    padding-bottom: $s-xl;
     display: grid;
     column-gap: $s-xl;
     grid-template-columns: 2fr 1fr;
diff --git a/src/stories/Library/event-header/event-header.scss b/src/stories/Library/event-header/event-header.scss
index 9ea786a1b..e31099f54 100644
--- a/src/stories/Library/event-header/event-header.scss
+++ b/src/stories/Library/event-header/event-header.scss
@@ -1,6 +1,5 @@
 .event-header {
-  max-width: $layout__max-width;
-  margin: 0 auto;
+  @include layout-container($layout__max-width);
 
   border-bottom: 1px solid $color__global-tertiary-1;
   display: grid;
@@ -13,14 +12,6 @@
   }
 }
 
-.event-header__content,
-.event-header__visual {
-  padding: 0 $s-md;
-  @include media-query__small {
-    padding: $s-2xl;
-  }
-}
-
 .event-header__content {
   padding-top: $s-md;
   display: grid;
diff --git a/src/stories/Library/link-with-icon/link-with-icon.scss b/src/stories/Library/link-with-icon/link-with-icon.scss
index a6d1e05c3..5222d6b65 100644
--- a/src/stories/Library/link-with-icon/link-with-icon.scss
+++ b/src/stories/Library/link-with-icon/link-with-icon.scss
@@ -1,9 +1,11 @@
 .link-with-icon {
   @include typography($typo__body-placeholder);
   @include show-svg-on-hover();
+  @include layout-container;
 
   background-color: $color__global-primary;
-  padding: $s-md $s-lg;
+  padding-top: $s-md;
+  padding-bottom: $s-md;
   display: grid;
   grid-template-columns: 40px auto max-content;
   align-items: center;
@@ -11,9 +13,6 @@
   text-decoration: none;
   border: 1px solid $color__global-tertiary-1;
   width: 100%;
-  max-width: $layout__max-width;
-  margin-left: auto;
-  margin-right: auto;
 
   &:first-child {
     margin-top: 0;
diff --git a/src/stories/Library/medias/medias.scss b/src/stories/Library/medias/medias.scss
index b724b172c..1c9524883 100644
--- a/src/stories/Library/medias/medias.scss
+++ b/src/stories/Library/medias/medias.scss
@@ -13,12 +13,7 @@ $_medias-breakpoint: 550px;
 }
 
 .medias--single {
-  max-width: $layout__max-width--single-media;
-  margin: auto;
-
-  .medias__item {
-    padding: 0 $s-md;
-  }
+  @include layout-container($layout__max-width--single-media, 0);
 }
 
 @include media-query($_medias-breakpoint) {
@@ -55,9 +50,7 @@ $_medias-breakpoint: 550px;
 }
 
 .medias--multiple {
-  max-width: $layout__max-width--multiple-medias;
-  //max-width: 900px;
-  margin: auto;
+  @include layout-container($layout__max-width--multiple-medias, 0);
 
   .medias__item--last {
     img {
diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss
index 76c028b13..0a961032d 100644
--- a/src/stories/Library/rich-text/rich-text.scss
+++ b/src/stories/Library/rich-text/rich-text.scss
@@ -5,10 +5,7 @@
   @include typography($typo__rich-text-body);
 
   // Setting a max-width to increase readability for sentences.
-  max-width: $layout__max-width--text;
-  margin: auto;
-  padding-left: $layout__page-padding;
-  padding-right: $layout__page-padding;
+  @include layout-container($layout__max-width--text);
 
   a {
     @extend %text-inline-link;
diff --git a/src/styles/scss/tools/mixins.misc.scss b/src/styles/scss/tools/mixins.misc.scss
index 183e4d688..dafe603d4 100644
--- a/src/styles/scss/tools/mixins.misc.scss
+++ b/src/styles/scss/tools/mixins.misc.scss
@@ -46,3 +46,14 @@
     opacity: 1;
   }
 }
+
+@mixin layout-container(
+  $max-width: $layout__max-width,
+  $padding: $layout__page-padding
+) {
+  max-width: $max-width;
+  margin: auto;
+  padding-left: $padding;
+  padding-right: $padding;
+  box-sizing: border-box;
+}