refactor(spacing): adjusted spacing on copy, page intro, blockquote & hr

affects: @buildit/gravity-ui-web

Author: dw-buildit

packages/gravity-ui-web/src/sass/00-settings/_spacing.scss

@@ -49,9 +49,13 @@ $grav-sp-inset-squished-l: $grav-sp-l $grav-sp-xl;
 $grav-sp-page-content-inset: $grav-sp-m;
 
 // Multiplier for ostentatious copy on medium and above viewports
-$grav-sp-ostentatious-padding-multiplier: 8;
+$grav-sp-ostentatious-padding-left-multiplier: 8;
 
 // Standard vertical gap between successive block elements
 // Note that is expressed as an `em` value, so it will scale according to the
 // `font-size` of the block elements it affects.
-$grav-sp-vertical-gap: 1em;
+$grav-sp-vertical-gap: 1.5em;
+// Larger vertical gap for use on specific block elements
+// Note that is expressed as an `em` value, so it will scale according to the
+// `font-size` of the block elements it affects.
+$grav-sp-vertical-gap-l: 2.5em;

packages/gravity-ui-web/src/sass/03-elements/_block-text.scss

@@ -5,18 +5,11 @@ pre {
 
 blockquote {
   @include grav-font-size(3);
-  margin-bottom: 2 * $grav-sp-vertical-gap;
-
-  &:last-child {
-    margin-bottom: $grav-sp-vertical-gap;
-  }
-}
-
-* + blockquote {
-  margin-top: 2 * $grav-sp-vertical-gap;
+  margin-top: $grav-sp-vertical-gap-l;
+  margin-bottom: $grav-sp-vertical-gap-l;
 }
 
 hr {
   @include grav-font-size(3);
-  margin-top: 2 * $grav-sp-vertical-gap;
+  margin-top: $grav-sp-vertical-gap-l;
 }

packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_02-page-intro.scss

@@ -2,7 +2,7 @@
   $grav-c-page-intro-notch-size: var(--grav-fs-plus-4);
 
   @media all and (min-width: grav-breakpoint(medium)) {
-    margin-top: 2 * $grav-sp-vertical-gap;
+    margin-top: $grav-sp-vertical-gap-l;
   }
 
   > * {
@@ -39,7 +39,7 @@
     }
 
     @media all and (min-width: grav-breakpoint(medium)) {
-      @include grav-decoration-notch-out($grav-c-page-intro-notch-size, calc(#{$grav-sp-l} * #{$grav-sp-ostentatious-padding-multiplier}));
+      @include grav-decoration-notch-out($grav-c-page-intro-notch-size, $grav-sp-l * $grav-sp-ostentatious-padding-left-multiplier);
     }
   }
 }

packages/gravity-ui-web/src/sass/05-components/03-organisms/_copy-ostentatious.scss

@@ -4,6 +4,10 @@
 
   > * {
     display: block;
+
+    + * {
+      margin-top: $grav-sp-vertical-gap-l;
+    }
   }
 
   img {
@@ -29,6 +33,6 @@
   }
 
   @media all and (min-width: grav-breakpoint(large)) {
-    padding-left: calc(#{$grav-sp-l} * #{$grav-sp-ostentatious-padding-multiplier});
+    padding-left: $grav-sp-l * $grav-sp-ostentatious-padding-left-multiplier;
   }
 }