]> _ Git - ccv-wordpress.git/commitdiff
Done #3890 @1.25
authorStephen Cameron <stephen@cubedesigners.com>
Wed, 30 Sep 2020 11:01:54 +0000 (13:01 +0200)
committerStephen Cameron <stephen@cubedesigners.com>
Wed, 30 Sep 2020 11:01:54 +0000 (13:01 +0200)
wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl

index 8ed4c38a564c3c296bc6c36da82a311dbecc2392..8b9e7508691b0f775ec1e25238706d3ae3599a1b 100644 (file)
@@ -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; ?>
index 6bab9d43c67643d6bbab216f6c7f7252ad90e4e7..e084417574c5cc421432e5740fcd75287595f7be 100644 (file)
@@ -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