From: Stephen Cameron Date: Mon, 13 May 2019 17:37:07 +0000 (+0200) Subject: Responsive tweaks and bug fixes. WIP #2684 @3.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ff9930be47eae554a4be007b0c81545658a7cdd8;p=c6-wordpress.git Responsive tweaks and bug fixes. WIP #2684 @3.5 --- diff --git a/wp-content/themes/c6/resources/assets/styles/common/global.styl b/wp-content/themes/c6/resources/assets/styles/common/global.styl index b06ad73..c89836f 100644 --- a/wp-content/themes/c6/resources/assets/styles/common/global.styl +++ b/wp-content/themes/c6/resources/assets/styles/common/global.styl @@ -85,6 +85,11 @@ $max-bottom-padding = unit($section-vertical-padding / 100, '') * $content-max-w .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated padding: 0 +.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated + +below(450px) + padding-left: 0 + padding-right: 0 + .arrow-link display: inline-block diff --git a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl index 5968797..03c8527 100644 --- a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl +++ b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl @@ -14,10 +14,10 @@ constrain(property, value = $horizontal-gutter, max-width = $content-max-width) } // Prevent vw / % units from getting too small - +below(750px) { + +below(700px) { // Only do this if we are dealing with a percentage or vw unit if (unit(value) is '%' || unit(value) is 'vw') { - $min = 750px * unit(value / 100, '') // Convert percentage to a decimal + $min = 700px * unit(value / 100, '') // Convert percentage to a decimal {property}: $min } } diff --git a/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl b/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl index b95b9a8..6e2f4a5 100644 --- a/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl +++ b/wp-content/themes/c6/resources/assets/styles/common/overlaps.styl @@ -23,6 +23,9 @@ +above($content-max-width) width: s('calc(100% + %s)', $content-max-width * 0.05) // 5vw cap for large screens + +below($breakpoint-columns) + width: 100% + &-left .elementor-widget-container transform: translateX(-5vw) diff --git a/wp-content/themes/c6/resources/assets/styles/components/headings.styl b/wp-content/themes/c6/resources/assets/styles/components/headings.styl index 0137253..fed2412 100644 --- a/wp-content/themes/c6/resources/assets/styles/components/headings.styl +++ b/wp-content/themes/c6/resources/assets/styles/components/headings.styl @@ -27,10 +27,6 @@ h4 +below('large') font-size: $font-size.large - //&:after - // content: '' - // display: block - // margin: 0.9em auto 0 - // width: 1.88em - // height: 3px - // background-color: currentColor + +below(600px) + white-space: normal + font-size: 30px diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl index 39be9d3..bdcb1de 100644 --- a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl @@ -107,7 +107,8 @@ header.site display: none line-height: 1 padding-bottom: 0 - margin-left: 1.5em + margin-left: 1.7em + z-index: 2 &:hover .menu-icon diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl index 655bb39..7e590e1 100644 --- a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl +++ b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl @@ -20,6 +20,9 @@ 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 diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl index 6c19284..cbc7726 100644 --- a/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl +++ b/wp-content/themes/c6/resources/assets/styles/widgets/feature-block.styl @@ -44,6 +44,9 @@ $breakpoint-circles = 1200px // Below this, circles aren't shown because content text-align: center border-radius: 4px + +below($breakpoint-columns) + border-radius: 0 + // Make a circle within the square wrapper .feature-block-circle & +above($breakpoint-circles) diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl index 9b4203f..fc7e2dc 100644 --- a/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl +++ b/wp-content/themes/c6/resources/assets/styles/widgets/heading.styl @@ -18,35 +18,26 @@ +below(1200px) font-size: $font-size.extra-large + +below(600px) + font-size: 45px &-subtitle-wrapper position: absolute - top: 0.93em // This moves the text down the height of ~1 character from the title - left: 0 - - +below(1000px) - top: -0.2em - horizontal-spacing(7.5vw) + left: 3% + //top: 0.93em // This moves the text down the height of ~1 character from the title + top: 0.2em + transform: rotate(-90deg) scaleX(-1) + transform-origin: top left &-subtitle - writing-mode: vertical-lr - transform: rotate(180deg) - text-orientation: sideways margin: 0 - transform-origin: top right - border-left: 2px solid - padding-left: 0.25em + transform: scaleX(-1) // Reflection transform to offset the one on the parent + border-bottom: 2px solid + padding-bottom: 0.25em text-transform: uppercase font-size: $font-size.small fixed color: $colors.orange - +below(1000px) - writing-mode: unset - transform: none - text-orientation: unset - border-left: none - border-bottom: 2px solid - &-title // Use the font size from the parent, which is also used to help with positioning diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl index c99cbe5..cad9308 100644 --- a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl +++ b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl @@ -21,20 +21,20 @@ $breakpoint-hero = 1024px &-background width: 100% - height: 120% // Give us some extra height to pan up and down + height: 100% background-color: #333 // Dark default colour to show before image loads background-position: center background-size: cover - //animation-name: kenburns - //animation-direction: reverse - //animation-timing-function: ease-in-out - //animation-iteration-count: 1 - //animation-duration: 20s - // Animation adds unnecessary load to mobile devices for minimal visual result so we disable it - +below($breakpoint-hero) - animation: none - height: 100% + +below(680px) + &:before + content: '' + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 40%, transparent) &-content @@ -84,3 +84,5 @@ $breakpoint-hero = 1024px +below(1100px) white-space: normal + +below(450px) + font-size: 20px diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl index c51f333..892bd38 100644 --- a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl @@ -6,9 +6,8 @@ width: 100% box-sizing: content-box // So padding doesn't influence max-width - // When in a "default" section layout, add some padding - //.layout-default & - // constrain(padding-left, 7.5vw) + +below(450px) + horizontal-spacing(2.5vw) .text-block diff --git a/wp-content/themes/c6/resources/views/404.blade.php b/wp-content/themes/c6/resources/views/404.blade.php index e3973a4..d01d65e 100644 --- a/wp-content/themes/c6/resources/views/404.blade.php +++ b/wp-content/themes/c6/resources/views/404.blade.php @@ -3,9 +3,9 @@ @section('content') @php - // Fetch content from page named 'erreur-404' + // Fetch content from page named 'error-404' // ToDo: make this more robust - $post = get_page_by_path('erreur-404'); + $post = get_page_by_path('error-404'); if ($post) { echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($post->ID);