$this->add_inline_editing_attributes('cta_text', 'none');
// CSS Classes for elements
- $this->add_render_attribute('title', 'class', ["text-block-title $title_size"]);
+ $this->add_render_attribute('title', 'class', ["text-block-title font-semibold $title_size"]);
$this->add_render_attribute('body', 'class', ['text-block-body']);
- $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn inline-block bg-red text-white py-2 px-4 rounded-full hover:bg-blue hover:text-white']);
+ $this->add_render_attribute('cta_text', 'class', ['text-block-cta btn']);
// Rendered content
echo '<div class="text-block">';
var title_size = (settings.title_size == '') ? 'text-xl' : settings.title_size;
- view.addRenderAttribute( 'title', 'class', ['text-block-title '+ title_size]);
+ view.addRenderAttribute( 'title', 'class', ['text-block-title font-semibold '+ title_size]);
view.addRenderAttribute( 'body', 'class', ['text-block-body']);
view.addRenderAttribute( 'cta_text', 'class', ['text-block-cta btn']);
// Grid overlay helper, activated when DEBUG_GRID is defined as true
if (env('DEBUG_GRID') || isset($_GET['debug-grid'])) {
add_action('wp_footer', function () {
- $css = 'background-size: 2.5vw 2.5vw;';
- $css .= 'background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);';
- $css .= 'opacity: 0.3;';
- $css .= 'pointer-events: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9990;';
- echo "<div id='debugGrid' style='$css'></div>";
+ echo "<div id='debugGrid'></div>";
+ echo '<style>
+ #debugGrid {
+ background-size: 2.5vw 2.5vw;
+ background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
+ opacity: 0.3;
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 9990;
+ }
+
+ @media (min-width: 1920px) {
+ #debugGrid {
+ background-size: 48px 48px;
+ max-width: 1921px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ </style>';
});
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
</head>
- <body <?php body_class('font-body text-dark'); ?>>
+ <body <?php body_class('font-body text-dark overflow-x-hidden'); ?>>
<?php wp_body_open(); ?>
<?php do_action('get_header'); ?>
a
@apply transition-colors unquote('hover:text-red')
+img
+ .rounded-full & // So this can be applied to parent element and also to override Elementor default CSS
+ border-radius: 999px
p:not(:last-child)
margin-bottom: 1.5em
height: 100%
align-content: center
-.container,
+.container
+ center($base-width)
+
+.container-content,
.elementor-section-boxed > .elementor-container
center($content-max-width)
--- /dev/null
+// Buttons
+
+.btn,
+.elementor-widget-button a.elementor-button
+ @apply relative inline-block overflow-hidden
+ @apply bg-red text-white rounded-full
+ @apply px-4 py-2
+ font-smoothing()
+ transition: background-color 0.25s
+
+ &:hover
+ @apply bg-blue text-white
+
+ // Button sizes
+ &.elementor-size-sm
+ @apply text-sm
+ &.elementor-size-md
+ @apply text-base
+ &.elementor-size-lg
+ @apply text-lg
+ &.elementor-size-xl
+ @apply text-xl
+
+// Button styles
+.elementor-element.elementor-button-info .elementor-button
+ @apply bg-teal
+
+// Icons inside buttons
+.elementor-button-content-wrapper
+ @apply flex items-center
+
+.elementor-button-icon
+ svg
+ width: auto
+ height: 1em
+
//--- Reversed layout
// Handle column swapping when layout reversed toggle is set
.layout-reversed
- .elementor-row
+ .elementor-container
flex-direction: row-reverse
+
+
+//--- Layered Backgrounds
+// When the columns fold, layered backgrounds fill full section (applicable to coloured backgrounds)
++below($breakpoint-columns)
+ .layered-backgrounds > *
+ width: 100% !important
+ top: 0 !important
+ left: 0 !important
+ right: 0 !important
+ bottom: 0 !important
+ margin: 0 !important
+ transform: none !important
--- /dev/null
+@extends('layouts.app')
+
+@section('content')
+
+
+ <div class="container-content py-2v px-1v">
+
+ {{-- TODO !
+
+ @if (! have_posts())
+ @alert(['type' => 'warning'])
+ {{ __('Sorry, no results were found.', 'sage') }}
+ @endalert
+
+ {!! get_search_form(false) !!}
+ @endif
+
+ @while (have_posts()) @php(the_post())
+ @includeFirst(['partials.content-'.get_post_type(), 'partials.content'])
+ @endwhile
+
+ {!! get_the_posts_navigation() !!}
+
+ --}}
+
+ </div>
+@endsection
+
+@section('sidebar')
+ @include('partials.sidebar')
+@endsection
@extends('layouts.app')
@section('content')
- @include('partials.page-header')
- @if (! have_posts())
- <x-alert type="warning">
- {!! __('Sorry, no results were found.', 'sage') !!}
- </x-alert>
+ <div class="container-content py-2v px-1v">
- {!! get_search_form(false) !!}
- @endif
+ {{-- TODO !
- @while(have_posts()) @php(the_post())
- @includeFirst(['partials.content-' . get_post_type(), 'partials.content'])
- @endwhile
+ @if (! have_posts())
+ <x-alert type="warning">
+ {!! __('Sorry, no results were found.', 'sage') !!}
+ </x-alert>
+
+ {!! get_search_form(false) !!}
+ @endif
+
+ @while(have_posts()) @php(the_post())
+ @includeFirst(['partials.content-' . get_post_type(), 'partials.content'])
+ @endwhile
+
+ {!! get_the_posts_navigation() !!}
+
+ --}}
+
+ </div>
- {!! get_the_posts_navigation() !!}
@endsection
@section('sidebar')
-<header class="relative flex items-end justify-center mx-1v pt-6">
+<header class="container w-full relative flex items-end justify-center px-1v pt-6">
{{-- Primary nav (left) --}}
<div class="flex-1 flex justify-end mb-4">
</div>
</div>
- <a href="{{ $contact_phone_link }}" class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center pb-12 sm:hidden">
+ <a href="{{ $contact_phone_link }}" class="absolute right-0 mr-1v top-1/2 transform -translate-y-1/2 flex items-center pb-12 sm:hidden">
<span class="font-semibold text-right text-sm">
{{ get_option('contact_header_text') }}<br/>
<span class="text-lg">{{ $contact_phone }}</span>
<span class="absolute block bg-beige" style="top: -0.1em; bottom: -0.15em; left: -0.325em; width: 36%; z-index: -1"></span>
</h1>
<div class="leading-loose">{{ $body }}</div>
- <a href="{{ $cta_link }}" class="btn inline-block bg-red text-white py-2 px-4 mt-6 rounded-full hover:bg-blue hover:text-white">{{ $cta_text }}</a>
+ <a href="{{ $cta_link }}" class="btn">{{ $cta_text }}</a>
</div>
</div>
<div class="intro-carousel-slides" style="flex-basis: 60%">
<div class="intro-carousel-slides-sizer relative ml-1v" style="padding-bottom: 71.287%">
@foreach ($slides as $slide)
- <div class="intro-carousel-slide absolute top-0 left-0 w-full h-full @if($loop->first)hidden @endif">
+ <div class="intro-carousel-slide absolute top-0 left-0 w-full h-full @if(!$loop->first)hidden @endif">
<img src="{{ $slide['background_image']['url'] }}" class="absolute top-0 right-0">
<img src="{{ $slide['image']['url'] }}" class="absolute" style="border-radius: 999px; max-width: 69.475%; top: 2.35%; right: 4.575%">
<div class="intro-carousel-slide-caption">{{ $caption }}</div>
// Javascript
mix
.js('resources/assets/scripts/app.js', 'scripts')
+ .js('resources/assets/scripts/intro-carousel.js', 'scripts')
.js('resources/assets/scripts/customizer.js', 'scripts')
.blocks('resources/assets/scripts/editor.js', 'scripts')
.extract();
projects / usines-reunies.git / commitdiff