Add a layout-container mixin, and replace any existing max-widths.

danskernesdigitalebibliotek · Dec 15, 2023 · 07bcb85 · 07bcb85
1 parent dd485fb
commit 07bcb85
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 21 deletions.
diff --git 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
@@ -1,4 +1,5 @@
 .event-header {
+  // @todo use @include layout-container instead here.
   max-width: $layout__max-width;
   margin: 0 auto;
 

diff --git a/src/stories/Library/link-with-icon/link-with-icon.scss b/src/stories/Library/link-with-icon/link-with-icon.scss
@@ -1,19 +1,18 @@
 .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;
   gap: $s-md;
   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
@@ -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
@@ -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
@@ -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;
+}