Merge pull request #390 from danskernesdigitalebibliotek/fix-rich-text

Fix rich text + Re-factor layout max width as a mixin
danskernesdigitalebibliotek · Dec 15, 2023 · fba0de5 · fba0de5
2 parents 1baed64 + d721f58
commit fba0de5
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 15 deletions.
diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss
@@ -1,4 +1,5 @@
 .event-description {
+  // @todo use @include layout-container instead here.
   padding: $s-md;
   max-width: $layout__max-width;
   margin: 0 auto;

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,7 +5,7 @@
   @include typography($typo__rich-text-body);
 
   // Setting a max-width to increase readability for sentences.
-  max-width: $layout__max-width--text;
+  @include layout-container($layout__max-width--text);
 
   a {
     @extend %text-inline-link;

diff --git a/src/styles/scss/tools.scss b/src/styles/scss/tools.scss
@@ -1,7 +1,7 @@
 @import "tools/variables.fonts";
 @import "tools/variables.z-indexes";
-@import "tools/variables.layout";
 @import "tools/variables.spacings";
+@import "tools/variables.layout";
 @import "tools/variables.colors";
 @import "tools/variables.breakpoints";
 @import "tools/variables.typography";

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;
+}
diff --git a/src/styles/scss/tools/variables.layout.scss b/src/styles/scss/tools/variables.layout.scss
@@ -5,3 +5,7 @@ $layout__max-width--large: 1440px;
 $layout__max-width--text: 780px;
 $layout__max-width--single-media: 896px;
 $layout__max-width--multiple-medias: 1240px;
+
+// Some elements should not go out to the edge of the screen on small screens.
+// This is the padding that is always shown on the left and right.
+$layout__page-padding: $s-xl;