Header and menu improvements + blog tweaks. WIP #3641 @6

diff --git a/js/101-header.js b/js/101-header.js
index 4359601ad2bed4e7f3b6ffc0c365e4df6d3e9b2c..b2299ec6185bfe3fe989678c840db05dc5e99e5d 100644 (file)
--- 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);\r
     // Navigation\r
     var nav = $(h).find('#menu');\r
-    htl.add(TweenMax.fromTo(nav, 1.5, {top: 57}, {top: 24}), 0);\r
+    htl.add(TweenMax.fromTo(nav, 1.5, {top: 60}, {top: 26}), 0);\r
     //Typo logo\r
     htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {autoAlpha: 1}, {autoAlpha: 0}), 0);\r
     if (!isMobile()) {\r
@@ -77,7 +77,8 @@ function setHeaderAnimation() {
         htl.add(TweenMax.fromTo($(logo), 0, {width: 220}, {width: 220}), 1);\r
     }\r
     // Menu position\r
-    htl.add(TweenMax.fromTo(nav, 1, {left: '43.5%'}, {left: 312}), 2);\r
+    htl.add(TweenMax.fromTo(nav, 1, {left: '44%'}, {left: 0}), 2);\r
+    htl.add(TweenMax.fromTo(nav, 1, {x: '-50%'}, {x: '0%'}), 2); // Animate the transform: translateX value\r
     htl.stop();\r
     headerScroll(true);\r
 }\r
@@ -175,4 +176,4 @@ function changeHeaderStyle() {
 \r
     }\r
 \r
-}
\ No newline at end of file
+}\r

diff --git a/less/001-variables.less b/less/001-variables.less
index 6745bddac1ad30f06b3b39429aaf4466f57a0ba2..932aaada929257cea8013e5375cc066195363040 100644 (file)
--- 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 c7a36697a89ad7812716b290d239e034b5aa47a8..c308048a7561849801e32913f12a461393c7267f 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -289,7 +289,7 @@ a {
   box-sizing: content-box;\r
   padding-top: 152px; // Minimum clearance and top for fixed menu\r
 \r
-  @media @m1280 {\r
+  @media @m1320 {\r
     padding-top: 120px;\r
   }\r
 \r
@@ -339,4 +339,4 @@ address {
 \r
 #cookieBanner {\r
   background-color: #263340 !important;\r
-}
\ No newline at end of file
+}\r

diff --git a/less/003-mixins.less b/less/003-mixins.less
index f21c7a941d088750fc66af1f3458833ef2f3b2b9..3c1f44fbf0ef7e2d215d2cf3da272df41f617cdd 100644 (file)
--- 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 b2dc3d7f3afbd45a6b561da84679f212f911e47b..f0c551f9bfc16c793f918ab760b2bf1bae5914e1 100644 (file)
--- 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;\r
 \r
        position: fixed;\r
-       top: 0px;\r
+       top: 0;\r
        z-index: 10;\r
        transform-origin: 0 0 0;\r
 \r
@@ -20,7 +20,7 @@ header#h {
                height: 75px !important;\r
        }\r
 \r
-       @media @m900 {\r
+       @media @bp-menu {\r
                height: 96px !important;\r
        }\r
 \r
@@ -33,7 +33,7 @@ header#h {
                width: 100%;\r
                position: relative;\r
                transform-origin: 0 0 0;\r
-               @media @m1280 {\r
+               @media @m1320 {\r
                        height: 56px !important;\r
                }\r
        }\r
@@ -51,11 +51,11 @@ header#h {
                //      transform: translateX(440px);\r
                //}\r
 \r
-               @media @m1280 {\r
+               @media @m1320 {\r
                        top: 12px !important;\r
                }\r
 \r
-               @media @m900 {\r
+               @media @bp-menu {\r
                        left: 50%;\r
                        margin-left: -110px;\r
                        top: 15px !important;\r
@@ -73,10 +73,10 @@ header#h {
                }\r
 \r
                .text {\r
-                       @media @m1280 {\r
+                       @media @m1320 {\r
                                display: none;\r
                        }\r
-                       @media @m900 {\r
+                       @media @bp-menu {\r
                                display: block;\r
                                opacity: 1 !important;\r
                                visibility: visible !important;\r

diff --git a/less/104-nav.less b/less/104-nav.less
index 22b815e804aeb49ef2b9686eb7524538eb6fc4b3..a2ef367d1a0c688d04428b9d4937a7d3b779014e 100644 (file)
--- a/less/104-nav.less
+++ b/less/104-nav.less
@@ -22,24 +22,19 @@ nav {
 }\r
 \r
 nav#menu {\r
-       position: relative;\r
-       top: 57px;\r
-       left: 43.5%;\r
-       width: 800px;\r
-       margin-left: -400px;\r
-\r
-       display: inline-block;\r
-       text-align: center;\r
-       @media @m1280 {\r
-               left: 312px !important;\r
-               top: 24px !important;\r
-       }\r
-\r
-       @media @m1024 {\r
-               left: 270px !important;\r
+       position: absolute;\r
+       top: 60px;\r
+       left: 44%; // Must be kept in sync with TweenMax value in 101-header.js\r
+       transform: translateX(-50%);\r
+       margin-left: 36px; // Extra spacing for logo symbol\r
+\r
+       @media @m1320 { // Left align menu\r
+               transform: none !important;\r
+               left: 0 !important;\r
+               top: 26px !important;\r
        }\r
 \r
-       @media @m900 {\r
+       @media @bp-menu {\r
                display: none;\r
        }\r
 \r
@@ -56,7 +51,7 @@ nav#menu {
                        margin: 0 25px;\r
                        position: relative;\r
 \r
-                       @media @m1024 {\r
+                       @media @m1280 {\r
                                margin: 0 15px;\r
                        }\r
 \r
@@ -137,7 +132,7 @@ nav#contactnav {
        right: 0;\r
        bottom: 1px;\r
 \r
-       @media @m900 {\r
+       @media @bp-menu {\r
                bottom: -10px;\r
        }\r
 \r
@@ -166,7 +161,7 @@ nav#contactnav {
                &.agencies {\r
                        .border-button-fill(@color-header-grey, #c2c4c7, 5%);\r
                        line-height: 1;\r
-                       @media @m900 {\r
+                       @media @bp-menu {\r
                                display: none;\r
                        }\r
                }\r
@@ -177,7 +172,7 @@ nav#contactnav {
                        padding-right: 15px;\r
                }\r
 \r
-               @media @m900 {\r
+               @media @bp-menu {\r
                        padding-left: 29px;\r
                        padding-right: 29px;\r
                }\r
@@ -239,7 +234,7 @@ nav#contactnav {
        display: none;\r
        z-index: 12;\r
 \r
-       @media @m900 {\r
+       @media @bp-menu {\r
                display: block;\r
        }\r
 \r
@@ -282,7 +277,7 @@ nav#contactnav {
                }\r
 \r
                &:nth-child(3) {\r
-                       top: 24px;\r
+                       top: 26px;\r
                        @media @m768 {\r
                                top: 16px;\r
                        }\r
@@ -333,4 +328,4 @@ header#h.light {
        }\r
 }\r
 \r
-@import "105-mmenu";
\ No newline at end of file
+@import "105-mmenu";\r

diff --git a/less/610-blog.less b/less/610-blog.less
index fc9f4308e2ff9f636c52080df25555620391484b..8232738622a823f001b7af67f5da88eb718294dd 100644 (file)
--- 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;
     }