Add global sections settings (#891)

* Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing
Shopify · Jan 5, 2022 · 2055496 · 2055496
1 parent ee84459
commit 2055496
Show file tree

Hide file tree

Showing 15 changed files with 692 additions and 615 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -213,28 +213,28 @@ html.no-js .no-js-hidden {
 }
 
 .element-margin {
-  margin-top: 5rem;
+  margin-top: var(--sections-spacing);
 }
 
 .spaced-section {
-  margin-top: 5rem;
+  margin-top: var(--sections-spacing);
 }
 
 .spaced-section:last-child {
-  margin-bottom: 5rem;
+  margin-bottom: var(--sections-safe-spacing);
 }
 
 @media screen and (min-width: 750px) {
   .element-margin {
-    margin-top: calc(5rem + var(--page-width-margin));
+    margin-top: var(--sections-spacing);
   }
 
   .spaced-section {
-    margin-top: calc(5rem + var(--page-width-margin));
+    margin-top: var(--sections-spacing);
   }
 
   .spaced-section:last-child {
-    margin-bottom: calc(5rem + var(--page-width-margin));
+    margin-bottom: var(--sections-spacing);
   }
 }
 
@@ -272,6 +272,24 @@ body,
   }
 }
 
+.section-wrapper {
+  border-radius: var(--sections-radius);
+  border: var(--sections-border-width) solid rgba(var(--color-foreground), var(--sections-border-opacity));
+  overflow: hidden;
+}
+
+.section-wrapper.section-wrapper--fullwidth {
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.section-wrapper--padded {
+  padding: 2rem;
+}
+
 .grid-auto-flow {
   display: grid;
   grid-auto-flow: column;
@@ -859,7 +877,7 @@ summary::-webkit-details-marker {
   justify-content: space-between;
   align-items: flex-end;
   gap: 1rem;
-  margin: 4rem 0 3rem;
+  margin: var(--sections-safe-spacing) 0 3rem;
   flex-wrap: wrap;
 }
 
@@ -883,7 +901,7 @@ summary::-webkit-details-marker {
 @media screen and (min-width: 990px) {
   .title,
   .title-wrapper-with-link {
-    margin: 5rem 0 3rem;
+    margin: var(--sections-safe-spacing) 0 3rem;
   }
 
   .title--primary {

diff --git a/assets/collage.css b/assets/collage.css
@@ -14,7 +14,7 @@
   }
 
   .collage-section + .collage-section .no-heading {
-    margin-top: calc(-4rem - var(--page-width-margin));
+    margin-top: var(--sections-spacing);
   }
 }
 

diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
@@ -1,14 +1,14 @@
 .image-with-text {
-  margin-top: 5rem;
+  margin-top: var(--sections-spacing);
 }
 
 .image-with-text:not(.color-scheme-background-1) {
-  margin-bottom: 5rem;
+  margin-bottom: var(--sections-spacing);
 }
 
 @media screen and (min-width: 750px) {
   .image-with-text {
-    margin-bottom: calc(5rem + var(--page-width-margin));
+    margin-bottom: var(--sections-spacing);
   }
 }
 

diff --git a/assets/newsletter-section.css b/assets/newsletter-section.css
@@ -1,19 +1,20 @@
 .newsletter--narrow .newsletter__wrapper,
 .newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
+  margin-top: var(--sections-spacing);
+  margin-bottom: var(--sections-spacing);
 }
 
-.newsletter__wrapper:not(.color-background-1) {
+.newsletter__wrapper:not(.color-background-1),
+.newsletter__wrapper.color-background-1 {
   padding-top: 5rem;
   padding-bottom: 5rem;
 }
 
 @media screen and (min-width: 750px) {
   .newsletter--narrow .newsletter__wrapper,
   .newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 {
-    margin-top: calc(5rem + var(--page-width-margin));
-    margin-bottom: calc(5rem + var(--page-width-margin));
+    margin-top: var(--sections-spacing);
+    margin-bottom: var(--sections-spacing);
   }
 
   .newsletter__wrapper:not(.color-background-1) {

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
@@ -8,13 +8,13 @@
 
 @media screen and (max-width: 749px) {
   .multicolumn.no-heading.background-secondary {
-    padding-top: 5rem;
+    padding-top: var(--sections-safe-spacing);
   }
 }
 
 @media screen and (min-width: 750px) {
   .multicolumn.no-heading:not(.background-secondary) {
-    margin-top: calc(6rem + var(--page-width-margin));
+    margin-top: var(--sections-safe-spacing);
   }
 }
 
@@ -77,8 +77,7 @@
 
 @media screen and (min-width: 750px) {
   .multicolumn.background-secondary {
-    padding: calc(4rem + var(--page-width-margin)) 0
-      calc(5rem + var(--page-width-margin));
+    padding: var(--sections-safe-spacing) 0;
   }
 }
 
@@ -94,7 +93,7 @@
 
 @media screen and (min-width: 750px) {
   .multicolumn:not(.background-secondary) {
-    margin: calc(5rem + var(--page-width-margin)) 0;
+    margin: var(--sections-safe-spacing) 0;
   }
 }
 

diff --git a/assets/section-rich-text.css b/assets/section-rich-text.css
@@ -25,8 +25,8 @@
 
 .rich-text:not(.rich-text--full-width),
 .rich-text--full-width.color-background-1 {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
+  margin-top: var(--sections-spacing);
+  margin-bottom: var(--sections-spacing);
 }
 
 .rich-text:not(.color-background-1) {
@@ -37,8 +37,8 @@
 @media screen and (min-width: 750px) {
   .rich-text:not(.rich-text--full-width),
   .rich-text--full-width.color-background-1 {
-    margin-top: calc(5rem + var(--page-width-margin));
-    margin-bottom: calc(5rem + var(--page-width-margin));
+    margin-top: var(--sections-spacing);
+    margin-bottom: var(--sections-spacing);
   }
 
   .rich-text:not(.color-background-1) {

diff --git a/assets/video-section.css b/assets/video-section.css
@@ -5,8 +5,8 @@
 
 @media screen and (min-width: 750px) {
   .video-section.page-width {
-    margin-top: calc(5rem + var(--page-width-margin));
-    margin-bottom: calc(5rem + var(--page-width-margin));
+    margin-top: var(--sections-spacing);
+    margin-bottom: var(--sections-spacing);
   }
 }
 

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -456,6 +456,51 @@
       } 
     ]
   },
+  {
+    "name": "Sections",
+    "settings": [
+      {
+        "type": "range",
+        "id": "sections_spacing",
+        "min": 0,
+        "max": 80,
+        "step": 4,
+        "unit": "px",
+        "label": "Vertical spacing between sections",
+        "default": 40
+      },
+      {
+        "type": "range",
+        "id": "sections_border_opacity",
+        "min": 0,
+        "max": 100,
+        "step": 5,
+        "unit": "%",
+        "label": "Border opacity",
+        "default": 50
+      },
+      {
+        "type": "range",
+        "id": "sections_border_width",
+        "min": 0,
+        "max": 10,
+        "step": 1,
+        "unit": "px",
+        "label": "Border thickness",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "sections_radius",
+        "min": 0,
+        "max": 30,
+        "step": 3,
+        "unit": "px",
+        "label": "Corner radius",
+        "default": 0
+      }
+    ]
+  },
   {
     "name": "Media",
     "settings": [

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -83,6 +83,14 @@
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
         --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
 
+        --sections-spacing: {{ settings.sections_spacing }}px;
+        --sections-safe-spacing: {% if settings.sections_spacing < 15 %}15{% else %}{{settings.sections_spacing}}{% endif %}px;
+        --sections-padding: 20px;
+        --sections-radius: {{ settings.sections_radius }}px;
+        --sections-border-width: {{ settings.sections_border_width }}px;
+        --sections-border-opacity: {{ settings.sections_border_opacity | divided_by: 100.0 }};
+        --sections-border-color: {{ settings.sections_border_color.red }}, {{ settings.sections_border_color.green }}, {{ settings.sections_border_color.blue }};
+
         --popup-drawer-border-width: {{ settings.popup_drawer_border_width }}px;
         --popup-drawer-border-opacity: {{ settings.popup_drawer_border_opacity | divided_by: 100.0 }};
         --popup-drawer-corner-radius: {{ settings.popup_drawer_corner_radius }}px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ @@
       }
       .collage-section + .collage-section .no-heading {
-        margin-top: calc(-4rem - var(--page-width-margin));
+        margin-top: var(--sections-spacing);
       }
     }
@@ Expand Down @@