feat(text): add text-wrapping to reset and max-width to abstract and …

…body
rei · Jan 24, 2024 · 980bc50 · 980bc50
1 parent 24922ee
commit 980bc50
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/public/cdr-reset.css b/public/cdr-reset.css
@@ -38,6 +38,14 @@ body {
   background-color: #ffffff;
 }
 
+h1,h2,h3,h4,h5,h6 {
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty
+}
+
 a,
 area,
 button,

diff --git a/src/components/abstract/styles/CdrAbstract.module.scss b/src/components/abstract/styles/CdrAbstract.module.scss
@@ -7,6 +7,7 @@
   margin: 0;
   font-size: var(--cdr-type-scale-1);
   line-height: calc(var(--cdr-type-scale-1) * var(--cdr-subheading-sans-line-height-ratio));
+  max-width: 75ch;
 
   @container (max-width: 720px) {
     @include cdr-text-body-500;

diff --git a/src/components/text/presets/styles/CdrBody.module.scss b/src/components/text/presets/styles/CdrBody.module.scss
@@ -6,4 +6,5 @@
   font-size: var(--cdr-body-font-size);
   line-height: var(--cdr-body-line-height);
   font-weight: var(--cdr-body-font-weight);
+  max-width: var(--cdr-body-max-width, 75ch);
 }
diff --git a/src/components/text/styles/CdrText.module.scss b/src/components/text/styles/CdrText.module.scss
@@ -2,6 +2,5 @@
 @import './vars/CdrText.vars.scss';
 
 .cdr-text {
-  @include cdr-text-default;
   @include cdr-text-base-mixin;
 }