Responsive tweaks and bug fixes. WIP #2684 @3.5

diff --git a/wp-content/themes/c6/resources/assets/styles/common/global.styl b/wp-content/themes/c6/resources/assets/styles/common/global.styl
index b06ad73e231a915d50065be468349fdcb8d8207e..c89836f3e22e0286aa1b9eb3f1d53f3a35164199 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/global.styl
@@ -85,6 +85,11 @@ $max-bottom-padding = unit($section-vertical-padding / 100, '') * $content-max-w
 .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated
   padding: 0
 
+.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated
+  +below(450px)
+    padding-left: 0
+    padding-right: 0
+
 
 .arrow-link
   display: inline-block

diff --git a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
index 596879779cd005587bbce5807165cdde78543de1..03c8527b0263392928f10f4cac8b0a0ced5c97c7 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
@@ -14,10 +14,10 @@ constrain(property, value = $horizontal-gutter, max-width = $content-max-width)
   }
 
   // Prevent vw / % units from getting too small
-  +below(750px) {
+  +below(700px) {
     // Only do this if we are dealing with a percentage or vw unit
     if (unit(value) is '%' || unit(value) is 'vw') {
-      $min = 750px * unit(value / 100, '') // Convert percentage to a decimal
+      $min = 700px * unit(value / 100, '') // Convert percentage to a decimal
       {property}: $min
     }
   }

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 b95b9a8c7d62e8dba4a8b4b7099af228001a31b9..6e2f4a56ba3353eb2fb0be2f3835e21c525978da 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl
@@ -23,6 +23,9 @@
       +above($content-max-width)
         width: s('calc(100% + %s)', $content-max-width * 0.05) // 5vw cap for large screens
 
+      +below($breakpoint-columns)
+        width: 100%
+
   &-left
     .elementor-widget-container
       transform: translateX(-5vw)

diff --git a/wp-content/themes/c6/resources/assets/styles/components/headings.styl b/wp-content/themes/c6/resources/assets/styles/components/headings.styl
index 0137253a5a3c9b472a1cb22f5e2b2d97d5fb4e95..fed2412128f86164446906458e359c4e7e2b1c5e 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/components/headings.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/headings.styl
@@ -27,10 +27,6 @@ h4
     +below('large')
       font-size: $font-size.large
 
-    //&:after
-    //  content: ''
-    //  display: block
-    //  margin: 0.9em auto 0
-    //  width: 1.88em
-    //  height: 3px
-    //  background-color: currentColor
+    +below(600px)
+      white-space: normal
+      font-size: 30px

diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
index 39be9d36d6093db9867b5c78f5309bc8e98af299..bdcb1dea6d9ab629f9ea94c922d530065cfead39 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl
@@ -107,7 +107,8 @@ header.site
   display: none
   line-height: 1
   padding-bottom: 0
-  margin-left: 1.5em
+  margin-left: 1.7em
+  z-index: 2
 
   &:hover
     .menu-icon

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 655bb39940b022a42c05ee74722b0fd6f3b00575..7e590e1931725e4228891e0c89e0226fbd2e5122 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
@@ -20,6 +20,9 @@
       horizontal-spacing(5vw)
       box-sizing: content-box // So padding doesn't influence max-width
 
+      +below(450px)
+        horizontal-spacing(2.5vw)
+
 //--- Reversed layout
 // Handle column swapping when layout reversed toggle is set
 .layout-reversed

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl
index 6c1928466c85c51a4f6047b0de92bf3d5ba04890..cbc7726e279d8b6189cd7a0eda977d21fe1d6d87 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl
@@ -44,6 +44,9 @@ $breakpoint-circles = 1200px // Below this, circles aren't shown because content
     text-align: center
     border-radius: 4px
 
+    +below($breakpoint-columns)
+      border-radius: 0
+
     // Make a circle within the square wrapper
     .feature-block-circle &
       +above($breakpoint-circles)

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
index 9b4203f20a56f251d20a406daa3d30bc177b0a69..fc7e2dc4b1f4919c7a09b61e5abddb979e6a3d0d 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl
@@ -18,35 +18,26 @@
 
   +below(1200px)
     font-size: $font-size.extra-large
+  +below(600px)
+    font-size: 45px
 
   &-subtitle-wrapper
     position: absolute
-    top: 0.93em // This moves the text down the height of ~1 character from the title
-    left: 0
-
-    +below(1000px)
-      top: -0.2em
-      horizontal-spacing(7.5vw)
+    left: 3%
+    //top: 0.93em // This moves the text down the height of ~1 character from the title
+    top: 0.2em
+    transform: rotate(-90deg) scaleX(-1)
+    transform-origin: top left
 
   &-subtitle
-    writing-mode: vertical-lr
-    transform: rotate(180deg)
-    text-orientation: sideways
     margin: 0
-    transform-origin: top right
-    border-left: 2px solid
-    padding-left: 0.25em
+    transform: scaleX(-1) // Reflection transform to offset the one on the parent
+    border-bottom: 2px solid
+    padding-bottom: 0.25em
     text-transform: uppercase
     font-size: $font-size.small fixed
     color: $colors.orange
 
-    +below(1000px)
-      writing-mode: unset
-      transform: none
-      text-orientation: unset
-      border-left: none
-      border-bottom: 2px solid
-
 
   &-title
     // Use the font size from the parent, which is also used to help with positioning

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
index c99cbe5e3baa6ef0a138f296a343480abd08c48b..cad9308ad0a9872054a13ef8f9e3a059f7e56464 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
@@ -21,20 +21,20 @@ $breakpoint-hero = 1024px
 
   &-background
     width: 100%
-    height: 120% // Give us some extra height to pan up and down
+    height: 100%
     background-color: #333 // Dark default colour to show before image loads
     background-position: center
     background-size: cover
-    //animation-name: kenburns
-    //animation-direction: reverse
-    //animation-timing-function: ease-in-out
-    //animation-iteration-count: 1
-    //animation-duration: 20s
 
-    // Animation adds unnecessary load to mobile devices for minimal visual result so we disable it
-    +below($breakpoint-hero)
-      animation: none
-      height: 100%
+    +below(680px)
+      &:before
+        content: ''
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 40%, transparent)
 
 
   &-content
@@ -84,3 +84,5 @@ $breakpoint-hero = 1024px
 
     +below(1100px)
       white-space: normal
+    +below(450px)
+      font-size: 20px

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 c51f333d1b82a464aadc7a70e040fda407edf13b..892bd386adc4eed86ad7f7aa64fa9455381a64db 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
@@ -6,9 +6,8 @@
   width: 100%
   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)
+  +below(450px)
+    horizontal-spacing(2.5vw)
 
 .text-block
 

diff --git a/wp-content/themes/c6/resources/views/404.blade.php b/wp-content/themes/c6/resources/views/404.blade.php
index e3973a4c84ca8e8168aa809559c7f8b212374e39..d01d65ea08f77adafb101be36dd3e6cfb24eb642 100644 (file)
--- a/wp-content/themes/c6/resources/views/404.blade.php
+++ b/wp-content/themes/c6/resources/views/404.blade.php
@@ -3,9 +3,9 @@
 @section('content')
 
   @php
-    // Fetch content from page named 'erreur-404'
+    // Fetch content from page named 'error-404'
     // ToDo: make this more robust
-    $post = get_page_by_path('erreur-404');
+    $post = get_page_by_path('error-404');
 
     if ($post) {
       echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($post->ID);