Revert "Merge pull request #21 from WPMedia/PEN-1196-rework-blocks-sp…

…acing"

This reverts commit 46b73ab, reversing
changes made to 380b2d6.

css/index.css

@@ -371,25 +371,56 @@ h6, .h6-primary {
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
   width: 100%; }
   @supports (display: grid) {
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+      grid-row-gap: 1rem;
       grid-column-gap: 0;
       grid-auto-flow: dense; } }
+  body ~ .row:last-of-type {
+    margin-bottom: 1rem; }
+  body ~ .row:first-of-type {
+    margin-top: 1rem; }
   @media (min-width: 48rem) {
-    @supports (display: grid) {
-      .row {
-        grid-column-gap: 1rem; } } }
+    .row {
+      margin-bottom: 0.75rem;
+      margin-top: 0.75rem; }
+      @supports (display: grid) {
+        .row {
+          grid-row-gap: 1.5rem;
+          grid-column-gap: 1rem; } }
+      body ~ .row:last-of-type {
+        margin-bottom: 1.5rem; }
+      body ~ .row:first-of-type {
+        margin-top: 1.5rem; } }
   @media (min-width: 64rem) {
-    @supports (display: grid) {
-      .row {
-        grid-column-gap: 2rem; } } }
+    .row {
+      margin-bottom: 1rem;
+      margin-top: 1rem; }
+      @supports (display: grid) {
+        .row {
+          grid-row-gap: 2rem;
+          grid-column-gap: 2rem; } }
+      body ~ .row:last-of-type {
+        margin-bottom: 2rem; }
+      body ~ .row:first-of-type {
+        margin-top: 2rem; } }
   @media (min-width: 90rem) {
-    @supports (display: grid) {
-      .row {
-        grid-column-gap: 2rem; } } }
+    .row {
+      margin-bottom: 1.5rem;
+      margin-top: 1.5rem; }
+      @supports (display: grid) {
+        .row {
+          grid-row-gap: 3rem;
+          grid-column-gap: 2rem; } }
+      body ~ .row:last-of-type {
+        margin-bottom: 3rem; }
+      body ~ .row:first-of-type {
+        margin-top: 3rem; } }
 
 .reduce-internal-row-col-gap .row {
   grid-column-gap: 3%; }
@@ -1562,35 +1593,3 @@ figcaption, figcaption p {
     figcaption, figcaption p {
       font-size: 0.875rem;
       line-height: 1.25rem; } }
-
-.chain-container .chain-col > * {
-  margin-bottom: 2rem; }
-
-@media screen and (min-width: 48rem) {
-  .chain-container .chain-col > * {
-    margin-bottom: 1.5rem; } }
-
-.chain-container .chain-col > hr {
-  background-color: #DADADA;
-  border: 0;
-  height: 1px;
-  margin-top: 0; }
-
-.layout-section > * {
-  margin-bottom: 2rem; }
-
-@media screen and (min-width: 48rem) {
-  .layout-section > * {
-    margin-bottom: 1.5rem; } }
-
-.layout-section > hr {
-  background-color: #DADADA;
-  border: 0;
-  height: 1px;
-  margin-top: 0; }
-
-.wrap-bottom {
-  margin-bottom: -2rem !important; }
-  @media screen and (min-width: 48rem) {
-    .wrap-bottom {
-      margin-bottom: -1.5rem !important; } }

scss/_colors.scss

@@ -36,7 +36,7 @@ $image-caption-rule-color: #9A9A9A !default;
 $ui-primary-font-color: #191919 !default;
 $ui-primary-header-color: $ui-dark-gray !default;
 $link-color: $primary-color !default;
-$ui-dark-secondary-color: $ui-dark-gray;
+
 
 $ui-btn-white-color: #FFFFFF;
 $button-state-colors: (

scss/_mixins.scss

@@ -46,32 +46,3 @@
     fill: lighten($color-prop, 20%);
   }
 }
-
-// @mixin container-vertial-spacing
-// 
-// Mixin to add vertical spaing to the elements in a container block
-//
-@mixin container-vertial-spacing {
-  > * {
-    margin-bottom: map-get($spacers, 'lg');
-  }
-
-  @media screen and (min-width: map-get($grid-breakpoints, 'md')) {
-    > * {
-      margin-bottom: map-get($spacers, 'md');
-    }
-  }
-}
-
-// @mixin container-hr-separator
-//
-// Mixin to add style to the HR element used as separator
-//
-@mixin container-hr-separator {
-  > hr {
-    background-color: $border-rule-color; // $ui-light-gray;
-    border: 0;
-    height: 1px;
-    margin-top: 0;
-  }
-}

scss/grid/_grid_row.scss

@@ -23,29 +23,66 @@
   @supports (display: grid){
     display: grid;
     grid-template-columns: repeat(12, 1fr);
+    grid-row-gap: map-get($spacers, "sm");
     grid-column-gap: 0;
     grid-auto-flow: dense;
   }
 
+  margin-bottom: get-half-in-rems(map-get($spacers, "sm"));
+  margin-top: get-half-in-rems(map-get($spacers, "sm"));
   width: 100%;
+  body ~ &:last-of-type {
+    margin-bottom: map-get($spacers, "sm");
+  }
+  body ~ &:first-of-type {
+    margin-top: map-get($spacers, "sm");
+  }
 
   @each $name, $size in $grid-breakpoints {
     @media (min-width: $size) {
       @if $name == "md" {
+        margin-bottom: get-half-in-rems(map-get($spacers, "md"));
+        margin-top: get-half-in-rems(map-get($spacers, "md"));
         @supports (display: grid){
+          grid-row-gap: map-get($spacers, "md");
           grid-column-gap: map-get($spacers, "sm");
         }
+        body ~ &:last-of-type {
+          margin-bottom: map-get($spacers, "md");
+        }
+        body ~ &:first-of-type {
+          margin-top: map-get($spacers, "md");
+        }
       } @else if $name == "lg" {
+        margin-bottom: #{get-half-in-rems(map-get($spacers, "lg"))};
+        margin-top: #{get-half-in-rems(map-get($spacers, "lg"))};
 
         @supports (display: grid){
+          grid-row-gap: map-get($spacers, "lg");
           grid-column-gap: map-get($spacers, "lg");
         }
 
+        body ~ &:last-of-type {
+          margin-bottom: map-get($spacers, "lg");
+        }
+        body ~ &:first-of-type {
+          margin-top: map-get($spacers, "lg");
+        }
       } @else if $name == "xl" {
+        margin-bottom: get-half-in-rems(map-get($spacers, "xl"));
+        margin-top: get-half-in-rems(map-get($spacers, "xl"));
 
         @supports (display: grid){
+          grid-row-gap: map-get($spacers, "xl");
           grid-column-gap: map-get($spacers, "lg");
         }
+
+        body ~ &:last-of-type {
+          margin-bottom: map-get($spacers, "xl");
+        }
+        body ~ &:first-of-type {
+          margin-top: map-get($spacers, "xl");
+        }
       }
     }
   }

scss/index.scss

@@ -40,4 +40,3 @@ img {
 @import "./buttons";
 @import "./links";
 @import "components/figure_caption";
-@import "components/chain_spacing";