$subtitle = $this->get_settings('subtitle');
$title = $this->get_settings('title');
-
- // Inline Editing settings
- $this->add_inline_editing_attributes('subtitle', 'none');
- $this->add_inline_editing_attributes('title', 'none');
-
// CSS Classes for elements
$this->add_render_attribute('subtitle', 'class', ['heading-subtitle']);
$this->add_render_attribute('title', 'class', ['heading-title']);
echo '</div>';
}
- /**
- * Render text editor widget output in the editor.
- *
- * Written as a Backbone JavaScript template and used to generate the live preview.
- *
- * @since 1.0.0
- * @access protected
- */
- protected function _content_template() {
- ?>
- <#
- view.addRenderAttribute( 'subtitle', 'class', ['heading-subtitle']);
- view.addRenderAttribute( 'title', 'class', ['heading-title']);
-
- view.addInlineEditingAttributes( 'subtitle', 'none' );
- view.addInlineEditingAttributes( 'title', 'none' );
-
- #>
- <div class="heading">
-
- <# if ('' !== settings.subtitle) { #>
- <h3 {{{ view.getRenderAttributeString( 'subtitle' ) }}}>{{{ settings.subtitle }}}</h3>
- <# } #>
-
- <# if ('' !== settings.title) { #>
- <h2 {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</h2>
- <# } #>
- </div>
- <?php
- }
-
}
?>
- <div class="hero-block" id="<?= $id ?>">
+ <div class="hero-block elementor" id="<?= $id ?>">
- <div class="hero-block-content">
+
+ <?php
+ /*
+ Here we're hijacking Elementor's built in entrance animations for the hero text.
+ The class "elementor-element" must be present for it to be attached to the waypoints.
+ The other classes are also necessary for making the animation work...
+ After recent updates, the parent must also have the class "elementor" for animations to work.
+ */
+ ?>
+ <div class="hero-block-content elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
<div class="hero-block-content-inner">
- <h1 class="hero-block-title"><?= \App\prevent_orphans($title) ?><div class="hero-block-body"><?= $body ?></div></h1>
+ <h1 class="hero-block-title"><?= $title ?><div class="hero-block-body"><?= \App\prevent_orphans($body) ?></div></h1>
</div>
</div>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="58.661" height="62.001" viewBox="0 0 58.661 62.001"><g id="contact-picto-email" transform="translate(-4379.971 -4472.122)"><g id="Groupe_367" data-name="Groupe 367" transform="translate(4381.37 4473.122)"><line id="Ligne_217" data-name="Ligne 217" y2="8.391" transform="translate(46.797 18.962)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><path id="Tracé_1181" data-name="Tracé 1181" d="M4404.516,4545.72H4381.37v-31.2" transform="translate(-4381.37 -4495.561)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path id="Tracé_1182" data-name="Tracé 1182" d="M4381.37,4492.063l23.4-18.941,23.4,18.941" transform="translate(-4381.37 -4473.122)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line id="Ligne_218" data-name="Ligne 218" x1="19.269" y1="14.3" transform="translate(0 18.962)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line id="Ligne_219" data-name="Ligne 219" x1="7.092" y2="6.626" transform="translate(39.705 18.962)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><path id="Tracé_1183" data-name="Tracé 1183" d="M4387.826,4562.2l18.691-16.458h5.747" transform="translate(-4387.249 -4512.483)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></g><g id="Groupe_368" data-name="Groupe 368" transform="translate(4403.873 4499.366)"><path id="Tracé_1184" data-name="Tracé 1184" d="M4470.788,4579.511a6.6,6.6,0,1,1-6.606-6.6A6.6,6.6,0,0,1,4470.788,4579.511Z" transform="translate(-4447.304 -4562.633)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path id="Tracé_1185" data-name="Tracé 1185" d="M4466.969,4586.7a16.89,16.89,0,1,1,7.339-13.942v1.466a5.137,5.137,0,1,1-10.273,0v-1.466" transform="translate(-4440.549 -4555.878)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></g></g></svg>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="61.998" height="62" viewBox="0 0 61.998 62"><g id="contact-picto-adresse" transform="translate(-4084.976 -4321.982)"><path id="Tracé_3376" data-name="Tracé 3376" d="M4120.078,4368.453l-15.5,10.334-18.6-12.4v-43.4l18.6,12.4,18.6-12.4,18.6,12.4v13.435" transform="translate(0)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line id="Ligne_254" data-name="Ligne 254" y1="44.057" transform="translate(4104.596 4334.73)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line id="Ligne_255" data-name="Ligne 255" y1="26.224" transform="translate(4123.217 4322.983)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><path id="Tracé_3377" data-name="Tracé 3377" d="M4168.216,4387.6a4.2,4.2,0,1,1-4.2-4.2A4.2,4.2,0,0,1,4168.216,4387.6Z" transform="translate(-28.534 -23.263)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path id="Tracé_3378" data-name="Tracé 3378" d="M4170.731,4383.824c0,5.793-10.489,18.882-10.489,18.882s-10.489-13.089-10.489-18.882a10.489,10.489,0,1,1,20.979,0Z" transform="translate(-24.757 -19.722)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></g></svg>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="37.162" height="62" viewBox="0 0 37.162 62"><g id="contact-picto-tel" transform="translate(-4227.884 -4487.002)"><rect id="Rectangle_112" data-name="Rectangle 112" width="35.162" height="60" rx="3" transform="translate(4228.884 4488.002)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"></rect><line id="Ligne_214" data-name="Ligne 214" x2="35.162" transform="translate(4228.884 4498.347)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"></line><line id="Ligne_215" data-name="Ligne 215" x2="35.162" transform="translate(4228.884 4537.658)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"></line><line id="Ligne_216" data-name="Ligne 216" x2="14.479" transform="translate(4239.227 4493.003)" fill="none" stroke="#ff431d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"></line><ellipse id="Ellipse_53" data-name="Ellipse 53" cx="2.068" cy="2.069" rx="2.068" ry="2.069" transform="translate(4244.398 4540.762)" fill="#ff431d"></ellipse></g></svg>
\ No newline at end of file
color: $colors.orange
&:hover
- opacity: 0.8
+ color: #14bfc2
svg
height: r(12px)
$sidebar-width = 260px
#offcanvas-menu
- background-color: #222
+ background-color: #000
color: #fff
display: block
position: fixed
display: block
margin-right: 0
+ .sub-menu
+ // Tighten spacing now that we don't have dividing lines
+ // Otherwise the gap above the submenu looks a bit too big
+ margin-top: -0.25em
+
ul a // Second level links
padding-left: 40px
color: #bbb
font-smoothing()
display: block
padding: 10px 20px
- border-bottom: 1px solid #333
text-transform: uppercase
font-weight: 700
color: #fff
.contact-form
- max-width: 1250px
- margin: 0 auto
+ horizontal-spacing(2.5vw) // So it aligns with text blocks above
+ center(1346px)
input, textarea
margin-bottom: 2em
display: flex;
flex-direction: column;
align-items: flex-end;
+
+
+// Icons
+.icon-contact
+ display: flex
+ align-items: center
+ color: currentColor !important
+ margin: 50px 0
+
+ &:before
+ content: ''
+ width: 62px
+ height: @width
+ background-size: contain
+ background-repeat: no-repeat
+ background-position: center
+ margin-right: 2.25em
+
+ &-map:before
+ background-image: url(../images/contact-map.svg)
+ &-email:before
+ background-image: url(../images/contact-email.svg)
+ &-phone:before
+ background-image: url(../images/contact-phone.svg)
//font-size: $font-size.huge // Size for title + used for positioning subtitle
constrain(font-size, 4.2vw)
+ .overlap-right-text &
+ // Only apply when we have 2 columns
+ +above($breakpoint-columns)
+ float: right
+ padding-right: 0
+ transform: translateX(7.5vw)
+ z-index: 2
+
+ +above($content-max-width)
+ transform: s('translateX(%s)', $content-max-width * 0.075) // 5vw cap for large screens
+
+
+below(1200px)
font-size: $font-size.extra-large
font-size: inherit
font-weight: 700
margin-bottom: 0
+
+ .nowrap &
+ white-space: nowrap
+
+ +below($breakpoint-columns)
+ white-space: normal
+
+ // Also disable any <br> tags we added for controlling line breaks
+ br
+ display: none
&-content
font-smoothing()
- max-width: r(800px)
+ max-width: r(880px)
constrain(top, 5vw)
constrain(padding-bottom, 10vw) // Ensure main section bottom angle doesn't overlap content box
position: relative
z-index: 2
margin: 0 auto
+ // We are manually using Elementor's entrance animations on this block so it is hidden by those classes
+ // For some reason the animation doesn't trigger in the editor so the content remains hidden. Until I
+ // figure out why that is, make it display in the editor...
+ .elementor-editor-active &
+ visibility: visible
+
&-inner
color: #fff
line-height: 1
text-align: center
- +below(720px)
+ +below(880px)
white-space: normal
font-size: 60px
+ +below(700px)
+ font-size: 45px
+ +below(450px)
+ font-size: 35px
&-body
font-size: 24px
margin-top: 1.5em
text-align: center
-
- // Down arrow
- &-arrow
- display: inline-block
- width: 33px
- height: @width
- border-right: 2px solid #000
- border-bottom: @border-right
- position: absolute
- bottom: 0
- left: 50%
- transform: translateX(-50%) rotate(45deg)
- z-index: 10
-
- +below($breakpoint-hero)
- width: 25px
- height: @width
-
- // Main angled divider between sections (uses Elementor SVG code)
- &-angle
- .elementor-shape &
- fill: #fff // Todo: maybe make this customisable via Elementor interface
- transform: rotateY(180deg)
+ +below(1100px)
+ white-space: normal
</div>
<ul class="footer-col footer-social-icons">
- <li><a href="https://twitter.com/" target="_blank" rel="noopener">@svg('twitter')</a></li>
+ <li><a href="https://twitter.com/C6live" target="_blank" rel="noopener">@svg('twitter')</a></li>
<li><a href="https://www.linkedin.com/company/c6/" target="_blank" rel="noopener">@svg('linkedin')</a></li>
</ul>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,800" rel="stylesheet">
+
+ {{-- Google Analytics --}}
+ <script>
+ window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+ ga('create', 'UA-139900626-1', 'auto');
+ ga('send', 'pageview');
+ </script>
+ <script async src='https://www.google-analytics.com/analytics.js'></script>
+
@php wp_head() @endphp
</head>
projects / c6-wordpress.git / commitdiff
