From d15234b2ef082749b73ae953a60ba3996d1607d8 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 23 Apr 2019 21:25:47 +0200
Subject: [PATCH] WIP #2684 @5

---
 .../assets/styles/common/overlaps.styl        | 20 ++++++
 .../assets/styles/layouts/sections.styl       | 72 ++-----------------
 .../assets/styles/widgets/text-block.styl     | 15 ++--
 3 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl b/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl
index 8959534..b95b9a8 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl
@@ -1,5 +1,7 @@
 // Overlapping Elements
 
+// ToDo: handle smaller screens - remove overlaps?
+
 // Normally this class should be applied to the column to pull up or push down...
 .overlap
   &-above
@@ -9,3 +11,21 @@
   &-below
     constrain(margin-bottom, -5vw)
     z-index: 2
+
+  // Right and left overlaps
+  // Element needs to be 5vw wider than 100% so it sits over the neighbour
+  &-right, &-left
+    z-index: 2
+
+    .elementor-widget-container
+      width: calc(100% + 5vw)
+
+      +above($content-max-width)
+        width: s('calc(100% + %s)', $content-max-width * 0.05) // 5vw cap for large screens
+
+  &-left
+    .elementor-widget-container
+      transform: translateX(-5vw)
+
+      +above($content-max-width)
+        transform: s('translateX(-%s)', $content-max-width * 0.05) // 5vw cap for large screens
diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
index 72b6a8f..5598599 100644
--- a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
@@ -7,6 +7,12 @@
       &:not(:last-of-type)
         margin-bottom: 7.5vw
 
+  //--- Default section layout
+  &.layout-default
+    > .elementor-container
+      center($content-max-width * 0.8) // 1920px * 0.8 = 1536px
+      horizontal-spacing(5vw)
+      box-sizing: content-box // So padding doesn't influence max-width
 
 //--- Reversed layout
 // Handle column swapping when layout reversed toggle is set
@@ -14,69 +20,3 @@
   .elementor-row
     flex-direction: row-reverse
 
-//--- Full bleed layout
-// Image touches edge of screen when at or below max-content-width
-.layout-full-bleed
-  .elementor-container
-    padding-left: 0
-    padding-right: 0
-
-  // Columns (text 52.5% / image 47.5%)
-  .elementor-column
-    // Text is assumed to be first always (it can be reversed via flexbox for display reasons)
-    &:first-of-type
-      constrain(padding-left, 12.5vw)
-      constrain(padding-right, 10vw)
-      width: 52.5%
-    &:last-of-type
-      width: 47.5%
-
-  // Reversed layout adjustments
-  &.layout-reversed
-    .elementor-column
-      &:first-of-type
-        constrain(padding-left, 10vw)
-        constrain(padding-right, 12.5vw)
-
-
-//--- Offset Images layout
-// Tighter gap between text and image in the centre
-.layout-offset
-  .elementor-container
-    horizontal-spacing(5vw) // There's always 5vw either side so set it here to save some effort when reversing the layout
-
-  .elementor-column
-    &:first-of-type
-      constrain(padding-left, 7.5vw) // Actually 12.5vw but outer container already has 5vw on left
-      constrain(padding-right, 5vw)
-      width: 47.5%
-    &:last-of-type
-      width: 52.5%
-
-  // Reversed layout adjustments
-  &.layout-reversed
-    .elementor-column
-      &:first-of-type
-        constrain(padding-left, 5vw)
-        constrain(padding-right, 7.5vw)
-
-
-.layout-slideshow
-  .elementor-container
-    constrain(padding-left, 7.5vw)
-    padding-right: 0
-
-  // Make next image partially visible
-  // Ref: https://stackoverflow.com/a/43090848
-  .slick-list
-    padding-right: 7.5%
-    constrain(margin-left, -2.5vw) // Offset padding between slides so that first slide sits flush with edge
-    *
-      outline: none
-
-  .slick-slide-inner
-    constrain(padding-left, 2.5vw)
-
-  .text-block
-    horizontal-spacing(5vw)
-
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
index 0daeb94..64d255b 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
@@ -1,18 +1,15 @@
 // Text block widget (Elementor defaults)
 // Padding is applied here so it can be overridden by Elementor
 .elementor-widget-cube-text .elementor-widget-container
-  //horizontal-spacing(5vw)
-  //vertical-spacing()
+  center(480px)
+  constrain(padding-left, 5vw)
+  constrain(padding-right, 5vw)
+  box-sizing: content-box // So padding doesn't influence max-width
 
   // When in a "default" section layout, add some padding
-  .layout-default &
-    constrain(padding-left, 7.5vw)
+  //.layout-default &
+  //  constrain(padding-left, 7.5vw)
 
-  // Text-only layout - constrain width of text blocks and centre block
-  .layout-text-only &
-    max-width: 800px
-    margin-left: auto
-    margin-right: auto
 
 .text-block
 
-- 
2.39.5