From d6ca8c7127238b8f823194e68bfbb52790309df4 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 1 Oct 2019 18:55:45 +0200 Subject: [PATCH] WIP #3053 @8 --- .../cube/src/Elementor/Widgets/TextBlock.php | 4 +-- .../assets/styles/common/global.styl | 5 +++ .../assets/styles/common/layout.styl | 6 ++-- .../resources/assets/styles/common/setup.styl | 2 +- .../assets/styles/components/headings.styl | 2 +- .../assets/styles/components/sections.styl | 30 ++++++++++++++++ .../assets/styles/widgets/text-block.styl | 7 ++-- .../CCV/resources/views/layouts/app.blade.php | 35 ++++++++++--------- .../resources/views/partials/footer.blade.php | 2 +- .../resources/views/partials/header.blade.php | 2 +- 10 files changed, 68 insertions(+), 27 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/styles/components/sections.styl diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php index d551029..204adf4 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php @@ -259,7 +259,7 @@ class TextBlock extends Widget_Base { // CSS Classes for elements $this->add_render_attribute('title', 'class', ['text-block-title h2 decorated']); $this->add_render_attribute('body', 'class', ['text-block-body']); - $this->add_render_attribute('cta_text', 'class', ['text-block-cta arrow-link']); + $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn']); if (!empty($title_size)) { $this->add_render_attribute('title', 'class', ["text-block-title-size-{$title_size}"]); @@ -290,7 +290,7 @@ class TextBlock extends Widget_Base { <# view.addRenderAttribute( 'title', 'class', ['text-block-title h2 decorated']); view.addRenderAttribute( 'body', 'class', ['text-block-body']); - view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta arrow-link']); + view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta btn']); if ('' !== settings.title_size) { view.addRenderAttribute('title', 'class', ['text-block-title-size-' + settings.title_size]); diff --git a/wp-content/themes/CCV/resources/assets/styles/common/global.styl b/wp-content/themes/CCV/resources/assets/styles/common/global.styl index a75592b..5afabd1 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/global.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/global.styl @@ -3,10 +3,15 @@ html body min-width: 320px + background-color: #FBFBFB p:not(:last-child) margin-bottom: 1.5em +.wrapper + @apply mx-auto + max-width: $content-max-width + // VueJS styling to hide elements until they're ready [v-cloak] visibility: hidden diff --git a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl index 8579835..33dab51 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl @@ -8,7 +8,7 @@ .container, .elementor-section-boxed > .elementor-container - horizontal-spacing() + //horizontal-spacing() center($content-max-width) // Account for the extra padding Elementor adds with the "extended" column gap (15px) @@ -21,8 +21,8 @@ padding-left: 0 padding-right: 0 -.elementor-section-wrap > .elementor-section - vertical-spacing() +//.elementor-section-wrap > .elementor-section +// vertical-spacing() // Override default spacing between widgets diff --git a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl index 741acd7..ba297bd 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl @@ -14,7 +14,7 @@ $vertical-gutter = 7.5vw // Breakpoints in Rupture (https://github.com/jescalan/rupture) $breakpoint-columns = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js -$breakpoint-menu = 1024px // This needs to match the MMenu activation setting in menu.js +$breakpoint-menu = 1600px // This needs to match the MMenu activation setting in menu.js rupture.scale = 0 400px 768px 1024px rupture.scale-names = 'small' 'medium' 'large' rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px diff --git a/wp-content/themes/CCV/resources/assets/styles/components/headings.styl b/wp-content/themes/CCV/resources/assets/styles/components/headings.styl index 1e0272f..8a21a20 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/headings.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/headings.styl @@ -16,7 +16,7 @@ h1, .h1, h2, .h2, .decorated content: '' display: block position: absolute - top: 0.6em + top: 0.55em constrain(left, -5vw) constrain(width, 2.5vw) height: 5px diff --git a/wp-content/themes/CCV/resources/assets/styles/components/sections.styl b/wp-content/themes/CCV/resources/assets/styles/components/sections.styl new file mode 100644 index 0000000..6aaf431 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/components/sections.styl @@ -0,0 +1,30 @@ +.elementor-section + //--- Columns responsiveness - stack all standard columns below breakpoint + +below($breakpoint-columns) + .elementor-column + width: 100% !important + &:not(:last-of-type) + margin-bottom: 7.5vw + + // There's a toggle in the editor so we can disable + // this margin between columns when stacking vertically + &.no-column-stacking-gap + .elementor-column + +below($breakpoint-columns) + margin-bottom: 0 + + //--- Default section layout + &.layout-default.elementor-section-boxed + > .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 + + +below(450px) + horizontal-spacing(2.5vw) + +//--- Reversed layout +// Handle column swapping when layout reversed toggle is set +.layout-reversed + .elementor-row + flex-direction: row-reverse diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl index e0b987a..af10341 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl @@ -1,6 +1,6 @@ // Text block widget (Elementor defaults) .elementor-widget-cube-text //.elementor-widget-container - vertical-spacing(5vw) + vertical-spacing(7.5vw) constrain(padding-left, 10vw) constrain(padding-right, 7.5vw) max-width: 640px @@ -27,7 +27,7 @@ margin-bottom: 0 &-body - font-weight: 400 + font-weight: 300 margin-top: r(40px) // If the body is the first child, there's no title @@ -41,6 +41,9 @@ a color: theme('colors.pink') + b, strong + font-weight: 400 + &-cta @apply antialiased margin-top: r(30px) diff --git a/wp-content/themes/CCV/resources/views/layouts/app.blade.php b/wp-content/themes/CCV/resources/views/layouts/app.blade.php index e30ce92..e5e1307 100644 --- a/wp-content/themes/CCV/resources/views/layouts/app.blade.php +++ b/wp-content/themes/CCV/resources/views/layouts/app.blade.php @@ -3,25 +3,28 @@ @include('partials.head') - @php(wp_body_open()) - @php(do_action('get_header')) - @include('partials.header') -
- @yield('content') -
+
+ @php(wp_body_open()) + @php(do_action('get_header')) + @include('partials.header') - {{-- - @hasSection('sidebar') - - @endif - --}} +
+ @yield('content') +
- @php(do_action('get_footer')) - @include('partials.footer') + {{-- + @hasSection('sidebar') + + @endif + --}} - @php(wp_footer()) + @php(do_action('get_footer')) + @include('partials.footer') + + @php(wp_footer()) +
diff --git a/wp-content/themes/CCV/resources/views/partials/footer.blade.php b/wp-content/themes/CCV/resources/views/partials/footer.blade.php index 90a450a..9fdff8e 100644 --- a/wp-content/themes/CCV/resources/views/partials/footer.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/footer.blade.php @@ -1,5 +1,5 @@