From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 30 Sep 2020 11:01:54 +0000 (+0200)
Subject: Done #3890 @1.25
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=14daf5ac61278b2ed32d61e7de4c8270b9d35375;p=ccv-wordpress.git

Done #3890 @1.25
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
index 8ed4c38..8b9e750 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -170,8 +170,8 @@ class HeaderSlideshow extends _Base {
                     <h1 class="header-slideshow-content elementor-element elementor-invisible"
                         data-settings='{"animation":"fadeInRight","animation_delay":0}'
                         data-element_type="section">
-                        <span class="block text-xl mb-2"><?= $title ?></span>
-                        <span class="block text-2xl"><?= $body ?></span>
+                        <span class="header-slideshow-title"><?= $title ?></span>
+                        <span class="header-slideshow-body"><?= $body ?></span>
                     </h1>
 
                 <?php endif; ?>
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
index 6bab9d4..e084417 100644
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -79,28 +79,49 @@ $title_bg = rgba(#fff, 0.88)
 
   &-content
     .header-slideshow & // Need some extra specificity to override H1 CSS
-      @apply text-purple-dark px-5 py-3
+      @apply text-purple-dark
+      font-smoothing()
       background: $title_bg
-      width: 50% // Size ratio for intermediate screens
-      max-width: 870px
+      text-transform: none
+      padding: 0.75em 1em
+      margin-bottom: 0
       z-index: 10
       position: absolute
       constrain(bottom, 9.2vw)
       left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
-      margin-bottom: 0
-      text-transform: none
+      font-size: 2.1875vw // 42px in vw based on 1920px width
 
       +above($content-max-width)
+        font-size: 42px // Base font size
         left: 126px // From mockup
 
       +below($breakpoint-slideshow)
         bottom: 4em
 
       +below($breakpoint-slideshow-images)
-        width: 75%
+        font-size: 3.75vw
 
+
+      // Pink dash
       &:before
-        constrain(left, -1.7vw)
+        top: 1.2em
+        left: -0.6em
+        width: 1.2em
+        height: 5px
+
+        +below(1200px)
+          height: 4px
+        +below(900px)
+          height: 3px
 
       .elementor-editor-active &, .elementor-editor-preview &
         visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
+
+  &-title
+    display: block
+    font-size: 1em // Inherits from parent element so both bits of text can be scaled together
+    margin-bottom: 0.5em
+
+  &-body
+    font-size: 1.333em
+    white-space: pre-line