// 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}"]);
<#
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]);
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
.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)
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
// 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
content: ''
display: block
position: absolute
- top: 0.6em
+ top: 0.55em
constrain(left, -5vw)
constrain(width, 2.5vw)
height: 5px
--- /dev/null
+.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
// 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
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
a
color: theme('colors.pink')
+ b, strong
+ font-weight: 400
+
&-cta
@apply antialiased
margin-top: r(30px)
@include('partials.head')
<body @php(body_class('font-body font-light text-dark flex flex-col min-h-screen'))>
- @php(wp_body_open())
- @php(do_action('get_header'))
- @include('partials.header')
- <main class="flex-grow min-h-full">
- @yield('content')
- </main>
+ <div class="wrapper">
+ @php(wp_body_open())
+ @php(do_action('get_header'))
+ @include('partials.header')
- {{--
- @hasSection('sidebar')
- <aside>
- @yield('sidebar')
- </aside>
- @endif
- --}}
+ <main class="flex-grow min-h-full bg-white">
+ @yield('content')
+ </main>
- @php(do_action('get_footer'))
- @include('partials.footer')
+ {{--
+ @hasSection('sidebar')
+ <aside>
+ @yield('sidebar')
+ </aside>
+ @endif
+ --}}
- @php(wp_footer())
+ @php(do_action('get_footer'))
+ @include('partials.footer')
+
+ @php(wp_footer())
+ </div>
</body>
</html>
<footer class="bg-purple-dark text-white antialiased pt-2v pb-1v">
- <div class="container pl-0 pr-0">
+ <div class="container">
<div class="flex pb-2v">
<div class="w-1/2 px-4v">
@php(dynamic_sidebar('sidebar-footer-1'))
<header class="font-display font-medium uppercase text-sm">
- <div class="container pt-8 pb-12 flex items-center justify-between">
+ <div class="container px-2v pt-8 pb-12 flex items-center justify-between">
<a class="flex-shrink-0 mr-4" href="{{ home_url('/') }}" aria-label="<?= _("Go to the home page") ?>">
<img class="header-logo" src="@asset('images/logo.svg')" alt="{{ get_bloginfo('name', 'display') }}">
</a>