From 27488a06d942a67f9f11724d739a0c7fae1741ae Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Mon, 7 Sep 2020 16:01:17 +0000 Subject: [PATCH] Header and menu improvements + blog tweaks. WIP #3641 @6 --- js/101-header.js | 7 ++++--- less/001-variables.less | 6 ++++-- less/002-common.less | 4 ++-- less/003-mixins.less | 4 ++-- less/101-header.less | 14 +++++++------- less/104-nav.less | 41 ++++++++++++++++++----------------------- less/610-blog.less | 16 +++++++++++++--- 7 files changed, 50 insertions(+), 42 deletions(-) diff --git a/js/101-header.js b/js/101-header.js index 4359601..b2299ec 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -68,7 +68,7 @@ function setHeaderAnimation() { htl.add(TweenMax.fromTo($(logo), 1, {top: 35}, {top: 12}), 0); // Navigation var nav = $(h).find('#menu'); - htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0); + htl.add(TweenMax.fromTo(nav, 1.5, {top: 60}, {top: 26}), 0); //Typo logo htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {autoAlpha: 1}, {autoAlpha: 0}), 0); if (!isMobile()) { @@ -77,7 +77,8 @@ function setHeaderAnimation() { htl.add(TweenMax.fromTo($(logo), 0, {width: 220}, {width: 220}), 1); } // Menu position - htl.add(TweenMax.fromTo(nav, 1, {left: '43.5%'}, {left: 312}), 2); + htl.add(TweenMax.fromTo(nav, 1, {left: '44%'}, {left: 0}), 2); + htl.add(TweenMax.fromTo(nav, 1, {x: '-50%'}, {x: '0%'}), 2); // Animate the transform: translateX value htl.stop(); headerScroll(true); } @@ -175,4 +176,4 @@ function changeHeaderStyle() { } -} \ No newline at end of file +} diff --git a/less/001-variables.less b/less/001-variables.less index 6745bdd..932aaad 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -22,7 +22,7 @@ @color-submenu-hover: #e86f68; //-- Content and breakpoints -@mobile-breakpoint: 1024px; +@menu-breakpoint: 980px; @desktop-min-width: 1200px; @content-max-width: 1680px; @content-min-width: 320px; @@ -32,10 +32,12 @@ @transition-time-popin: 600ms; //-- Break points +@bp-menu: ~"(max-width: @{menu-breakpoint})"; @s1280: ~"(min-width: 1280px)"; +@m1320: ~"(max-width: 1320px)"; @m1280: ~"(max-width: 1280px)"; @m1024: ~"(max-width: 1024px)"; @m900: ~"(max-width: 900px)"; @m768: ~"(max-width: 768px)"; @m640: ~"(max-width: 640px)"; -@m320: ~"(max-width: 320px)"; \ No newline at end of file +@m320: ~"(max-width: 320px)"; diff --git a/less/002-common.less b/less/002-common.less index c7a3669..c308048 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -289,7 +289,7 @@ a { box-sizing: content-box; padding-top: 152px; // Minimum clearance and top for fixed menu - @media @m1280 { + @media @m1320 { padding-top: 120px; } @@ -339,4 +339,4 @@ address { #cookieBanner { background-color: #263340 !important; -} \ No newline at end of file +} diff --git a/less/003-mixins.less b/less/003-mixins.less index f21c7a9..3c1f44f 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -174,7 +174,7 @@ .intro-padding() { padding-top: 200px; - @media @m1280 { + @media @m1320 { padding-top: 120px; } @media @m900 { @@ -196,4 +196,4 @@ @media @m768 { padding-top: 0; } -} \ No newline at end of file +} diff --git a/less/101-header.less b/less/101-header.less index b2dc3d7..f0c551f 100644 --- a/less/101-header.less +++ b/less/101-header.less @@ -4,7 +4,7 @@ header#h { transition: left 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; position: fixed; - top: 0px; + top: 0; z-index: 10; transform-origin: 0 0 0; @@ -20,7 +20,7 @@ header#h { height: 75px !important; } - @media @m900 { + @media @bp-menu { height: 96px !important; } @@ -33,7 +33,7 @@ header#h { width: 100%; position: relative; transform-origin: 0 0 0; - @media @m1280 { + @media @m1320 { height: 56px !important; } } @@ -51,11 +51,11 @@ header#h { // transform: translateX(440px); //} - @media @m1280 { + @media @m1320 { top: 12px !important; } - @media @m900 { + @media @bp-menu { left: 50%; margin-left: -110px; top: 15px !important; @@ -73,10 +73,10 @@ header#h { } .text { - @media @m1280 { + @media @m1320 { display: none; } - @media @m900 { + @media @bp-menu { display: block; opacity: 1 !important; visibility: visible !important; diff --git a/less/104-nav.less b/less/104-nav.less index 22b815e..a2ef367 100644 --- a/less/104-nav.less +++ b/less/104-nav.less @@ -22,24 +22,19 @@ nav { } nav#menu { - position: relative; - top: 57px; - left: 43.5%; - width: 800px; - margin-left: -400px; - - display: inline-block; - text-align: center; - @media @m1280 { - left: 312px !important; - top: 24px !important; - } - - @media @m1024 { - left: 270px !important; + position: absolute; + top: 60px; + left: 44%; // Must be kept in sync with TweenMax value in 101-header.js + transform: translateX(-50%); + margin-left: 36px; // Extra spacing for logo symbol + + @media @m1320 { // Left align menu + transform: none !important; + left: 0 !important; + top: 26px !important; } - @media @m900 { + @media @bp-menu { display: none; } @@ -56,7 +51,7 @@ nav#menu { margin: 0 25px; position: relative; - @media @m1024 { + @media @m1280 { margin: 0 15px; } @@ -137,7 +132,7 @@ nav#contactnav { right: 0; bottom: 1px; - @media @m900 { + @media @bp-menu { bottom: -10px; } @@ -166,7 +161,7 @@ nav#contactnav { &.agencies { .border-button-fill(@color-header-grey, #c2c4c7, 5%); line-height: 1; - @media @m900 { + @media @bp-menu { display: none; } } @@ -177,7 +172,7 @@ nav#contactnav { padding-right: 15px; } - @media @m900 { + @media @bp-menu { padding-left: 29px; padding-right: 29px; } @@ -239,7 +234,7 @@ nav#contactnav { display: none; z-index: 12; - @media @m900 { + @media @bp-menu { display: block; } @@ -282,7 +277,7 @@ nav#contactnav { } &:nth-child(3) { - top: 24px; + top: 26px; @media @m768 { top: 16px; } @@ -333,4 +328,4 @@ header#h.light { } } -@import "105-mmenu"; \ No newline at end of file +@import "105-mmenu"; diff --git a/less/610-blog.less b/less/610-blog.less index fc9f430..8232738 100644 --- a/less/610-blog.less +++ b/less/610-blog.less @@ -3,10 +3,10 @@ .blog-index { padding: 144px 0; - @media @m1280 { + @media @m1320 { padding: 86px 0; } - @media @m900 { + @media @bp-menu { padding: 96px 0; } @media @m768 { @@ -115,6 +115,16 @@ &:hover { color: #fff; } + + .blog-intro.dark & { + .border-button-fill(@color-text, @color-text, 5%); + .longarrow-button(12px, 40px, 18px); + + &:hover { + color: @color-text; + } + } + } .grid { @@ -172,7 +182,7 @@ } figcaption { - font-size: 15px; + font-size: 12px; text-align: center; margin-top: 1.5em; } -- 2.39.5