From: stephen@cubedesigners.com Date: Mon, 7 Jan 2019 16:48:00 +0000 (+0000) Subject: WIP #2033 @7.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b3f9d288c5def7258de317e52198d9088c5a4a0a;p=cubedesigners-v7.git WIP #2033 @7.5 --- diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index 5297b16..7b972cf 100644 --- a/framework/application/layouts/scripts/layout.phtml +++ b/framework/application/layouts/scripts/layout.phtml @@ -1,7 +1,13 @@ array('families' => array('Roboto+Condensed:400,300,700:latin')), - 'custom' => array('families' => array('Klavika'), 'urls' => array('/css/fonts/Klavika/Klavika.css'))); +$fonts = [ + 'google' => [ + 'families' => [ + 'Rubik:300,300i,400' + ] + ], + //'custom' => array('families' => array('Klavika'), 'urls' => array('/css/fonts/Klavika/Klavika.css')) + ]; // Locally hosted version of the fonts - this was so fonts would work for Windows Phones and IE but there were too many issues // The robotocondensed.css refers to a custom webfont kit from Font Squirrel. It doesn't display as well as the Google Fonts version // To make this display properly, we need type hinting and lots of testing and tweaking. End result: not worth it currently... diff --git a/framework/application/views/helpers/FooterActualites.php b/framework/application/views/helpers/FooterActualites.php index 1ccfe46..1339080 100644 --- a/framework/application/views/helpers/FooterActualites.php +++ b/framework/application/views/helpers/FooterActualites.php @@ -25,10 +25,10 @@ class Cubedesigners_View_Helper_FooterActualites extends CubeIT_View_Helper_Abst $res .= ''; } - $res .= $this->linkInternal(__('Plus d\'actualités'), 'news', array('class' => 'but')); + $res .= $this->linkInternal(__('Voir plus d\'actualité') . $this->view->linkArrow(), 'news', array('class' => 'arrow-link')); $res .= ''; return $res; } -} \ No newline at end of file +} diff --git a/framework/application/views/helpers/FooterContact.php b/framework/application/views/helpers/FooterContact.php index e56fa69..be85f37 100644 --- a/framework/application/views/helpers/FooterContact.php +++ b/framework/application/views/helpers/FooterContact.php @@ -14,7 +14,7 @@ class Cubedesigners_View_Helper_FooterContact extends Zend_View_Helper_Abstract $res .= '
'; - $res .= '

' . $bureau['coordonnees']['nom'] . '

'; + $res .= '

' . sprintf(__('Bureaux de %s'), $bureau['coordonnees']['nom']) . '

'; $res .= '

'; $event = array('category' => 'phone', 'action' => 'call', 'label' => $bureau['coordonnees']['tel']); @@ -33,7 +33,7 @@ class Cubedesigners_View_Helper_FooterContact extends Zend_View_Helper_Abstract $res .= '
'; $event = array('category' => 'map', 'action' => 'click', 'label' => $bureau['coordonnees']['ville']); - $res .= $this->view->linkGeo(__("Plan d'accès"), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'but', 'data-event' => $event)); + $res .= $this->view->linkGeo(__("Voir le plan") . $this->view->linkArrow(), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'arrow-link', 'data-event' => $event)); $res .= '
'; $res .= '
'; diff --git a/framework/application/views/helpers/InlineSVG.php b/framework/application/views/helpers/InlineSVG.php new file mode 100644 index 0000000..c88af3b --- /dev/null +++ b/framework/application/views/helpers/InlineSVG.php @@ -0,0 +1,25 @@ +view->htmlElement($svg, 'div', ['class' => $class]); + } + + return $svg; + } +} diff --git a/framework/application/views/helpers/LinkArrow.php b/framework/application/views/helpers/LinkArrow.php new file mode 100644 index 0000000..42724ef --- /dev/null +++ b/framework/application/views/helpers/LinkArrow.php @@ -0,0 +1,14 @@ + + + '; + } +} diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml index 8b18b32..c12457d 100644 --- a/framework/application/views/scripts/common/footer.phtml +++ b/framework/application/views/scripts/common/footer.phtml @@ -19,9 +19,9 @@ echo $this->clear();
footerActualites(); ?> - +
@@ -57,4 +57,4 @@ echo $this->clear(); - \ No newline at end of file + diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index 24223b3..fd6614d 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -15,10 +15,10 @@ if (!is_null($homepage)) { image('/images/logo/Cube.svg', "Cubedesigners Logo", -1, -1, array('class' => 'cube')); - $logos .= $this->image('/images/logo/Typo.svg', 'Cubedesigners', -1, -1, array('class' => 'typo')); + $logo['symbol'] = $this->inlineSVG('images/logo/Cube.svg', true, 'logo-symbol'); + $logo['text'] = $this->inlineSVG('images/logo/Typo.svg', true, 'logo-text'); - echo $this->link($logos, $home, array('class' => 'logo')); + echo $this->link($logo['symbol'] . $logo['text'], $home, array('class' => 'logo')); if ($this->currentPage && $this->currentPage->getTemplate() == 'home') { echo ''; } else { @@ -33,4 +33,4 @@ if (!is_null($homepage)) { echo ''; ?> - \ No newline at end of file + diff --git a/images/link-arrow.svg b/images/link-arrow.svg new file mode 100644 index 0000000..4a874a1 --- /dev/null +++ b/images/link-arrow.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/images/logo/Cube.svg b/images/logo/Cube.svg index e2ef3bf..77c3fe5 100644 --- a/images/logo/Cube.svg +++ b/images/logo/Cube.svg @@ -1,10 +1,5 @@ - - - - - - - diff --git a/js/header.js b/js/header.js index b60ffd8..ae7e074 100644 --- a/js/header.js +++ b/js/header.js @@ -8,15 +8,14 @@ var headerPos = 0; function load_header() { - // If we are on home, background is transparent - var hbg = 1; - if ($("#home-slideshow").length == 1) { - hbg = 0; - } + // Todo: Implement way of setting if header is light or dark (maybe from body class or class on header element?) and use that to set header text color (white/black) in order to color logo and links for starting point. Home page will be light along with selected case study pages and possibly others... + var headerColor = ($("#home-slideshow").length == 1) ? '#fff' : '#000'; // ## TEMPORARY + + var h = $('header'); - // Background-color & height - htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'rgba(34,36,40,' + hbg + ')', height: 130}, - {backgroundColor: 'rgba(34,36,40,1)', height: 68}), 0); + // Background-color & height - starts transparent and then fades in + htl.add(TweenMax.fromTo(h, 1, {color: headerColor, backgroundColor: 'rgba(255,255,255,0)', height: 130}, + {color: '#000', backgroundColor: 'rgba(255,255,255,1)', height: 68}), 0); // Navigation var nav = $(h).find('.navigation'); htl.add(TweenMax.fromTo(nav, 1, {marginTop: 59}, {marginTop: 24}), 0); @@ -24,10 +23,10 @@ function load_header() { var logo = $(h).find('.logo'); htl.add(TweenMax.fromTo(logo, 1, {top: 36, maxWidth: 263}, {top: 14, maxWidth: 57}), 0); // Resize cube logo (two parts) - var img = $(logo).find('img'); - htl.add(TweenMax.fromTo(img, 1, {height: 60}, {height: 40}), 0); + //var img = $(logo).find('img'); + htl.add(TweenMax.fromTo(logo, 1, {height: 48}, {height: 40}), 0); // Typo logo - var typo = $(logo).find('img.typo'); + var typo = $(logo).find('.logo-text'); htl.add(TweenMax.fromTo(typo, 1, {opacity: 1}, {opacity: 0}), 1); // Hamburger var hamburger = $(h).find('.nav-icon'); @@ -84,4 +83,4 @@ function headerScroll() { // Update formerScroll = s; scrollUp = goingUp; -} \ No newline at end of file +} diff --git a/less/00-constants.less b/less/00-constants.less index a0b5811..1ff4f80 100644 --- a/less/00-constants.less +++ b/less/00-constants.less @@ -1,8 +1,10 @@ +@content-max-width: 1920px; @small : ~"screen and (max-width: 1024px)"; -@roboto: 'Roboto Condensed', sans-serif; -@Klavika: 'Klavika', sans-serif; +// Todo: replace variables properly +@roboto: 'Rubik', sans-serif; +@Klavika: 'Rubik', sans-serif; @yellow: #f6ae01; -@import "01-mixins"; \ No newline at end of file +@import "01-mixins"; diff --git a/less/01-mixins.less b/less/01-mixins.less index 474965b..2c87cb9 100644 --- a/less/01-mixins.less +++ b/less/01-mixins.less @@ -32,11 +32,17 @@ } .content-center() { - max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side + max-width: @content-max-width; min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale - padding-right: 34px; - padding-left: 34px; + padding-right: 5vw; + padding-left: 5vw; margin: 0 auto; + + // Above max content width, fix padding so it doesn't scale too much + @media (min-width: @content-max-width) { + padding-right: 0.05 * @content-max-width; + padding-left: 0.05 * @content-max-width; + } } .slideshowmixin() { @@ -126,4 +132,4 @@ display: inline-block; width: 100%; } -} \ No newline at end of file +} diff --git a/less/common.less b/less/common.less index af16f2f..a18f594 100644 --- a/less/common.less +++ b/less/common.less @@ -22,6 +22,7 @@ img.responsive { } body { + background-color: #e4e5ec; font-family: @roboto; font-size: 18px; font-weight: 300; @@ -31,9 +32,11 @@ body { } #wrapper { + background-color: #fff; overflow: hidden; - max-width: 100%; + max-width: @content-max-width; min-width: 640px; + margin: 0 auto; } .wf-active body { @@ -67,6 +70,36 @@ a { color: @yellow; } + &.inverted { + color: @yellow; + + &:hover, &:active { + color: #222428; + } + } + + &.arrow-link { + .link(#222428, @yellow); + display: inline-block; + vertical-align: middle; + + &:hover { + svg { + transform: translateX(0.25em); + } + } + + svg { + fill: currentColor; + display: inline-block; + vertical-align: middle; + height: 0.5em; + width: auto; + margin-left: 1em; + transition: transform 0.15s ease-out; + } + } + &.but { display: inline-block; clear: both; @@ -154,4 +187,4 @@ a { } } -} \ No newline at end of file +} diff --git a/less/footer.less b/less/footer.less index 60e0b74..14c1393 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,19 +1,29 @@ @import "00-constants"; #footer { + p { + line-height: 1.4; + } + a { - .link(#fff; @yellow); + //.link(@yellow, #000); text-decoration: none; &.but { - .button(#fff, #212327); + .button(#000, transparent); border: 0; padding: 15px; } } + .dotclear { + a { + .link(@yellow, #000); + } + } + .footer-top { padding: 50px 0 0 0; - background-color: #2d3035; + background-color: #F5F5F5; .footer-top-content { overflow: hidden; @@ -41,7 +51,7 @@ } h2 { - color: #fff; + color: #000; padding-bottom: 36px; font-size: 40px; @@ -64,7 +74,7 @@ } .actu { - color: #fff; + color: #000; padding-bottom: 20px; &:last-child { @@ -72,7 +82,7 @@ } a { - color: #fff; + color: #000; } h3 { @@ -82,7 +92,7 @@ } .date { - font-size: 12px; + line-height: 1.7; } } } @@ -91,18 +101,14 @@ } .contact-texte { - background-image: url('/images/picto_footer_mail.svg'); - background-repeat: no-repeat; - background-position: 0px 10px; - color: #fff; - padding-left: 70px; + color: #000; padding-bottom: 50px; } .bureau { float: left; width: 50%; vertical-align: top; - color: #fff; + color: #000; padding-right: 21px; &:last-child { @@ -166,9 +172,9 @@ } } .footer-bottom { - background-color: #212327; + background-color: #F5F5F5; height: 46px; - color: #6c6c6c; + //color: #6c6c6c; text-align: left; font-size: 12px; line-height: 46px; @@ -176,24 +182,23 @@ .copyright { display: inline-block; float: left; + + a { + .link(#222428, @yellow); + } } .locale { float: right; a { display: inline-block; - line-height: 30px; + line-height: 1; text-transform: uppercase; - height: 30px; - width: 30px; - border-radius: 30px; - background-color: #393c42; - text-align: center; margin: 0 0 0 10px; + .link(#000, @yellow); &.active, &:hover { - background-color: @yellow; - color: #fff; + color: @yellow; } } } diff --git a/less/header.less b/less/header.less index af3dfbd..38b573c 100644 --- a/less/header.less +++ b/less/header.less @@ -4,44 +4,62 @@ header { height: 130px; - background-color: #222428; + color: #222428; z-index: 100; // Some elements on case studies page have a higher z-index so make sure we are above that position: fixed; - top: 0px; + top: 0; + left: 50%; + transform: translateX(-50%); width: 100%; + max-width: @content-max-width; + + a { + color: currentColor; // Pass colour down so SVG can use currentColor + } + + svg { + fill: currentColor; + } ul { - text-transform: uppercase; font-family: @Klavika; - font-weight: 400; + font-weight: 300; font-size: 16px; list-style: none; li { float: left; - &:last-child { - a { - border: 1px solid #fff; - border-radius: 2px; - &:hover { - border-color: @yellow; - } - } - &.active { - a { - border-color: @yellow; - } - } - } + //&:last-child { + // a { + // border: 1px solid #fff; + // border-radius: 2px; + // &:hover { + // border-color: @yellow; + // } + // } + // &.active { + // a { + // border-color: @yellow; + // } + // } + //} a { - .link(#fff, @yellow); - padding: 5px 10px; + padding: 10px 0; + position: relative; } &.active a { - color: @yellow; + &:after { + content: ''; + width: 36px; + height: 1px; + background-color: currentColor; + position: absolute; + left: 0; + top: 100%; + } } } @@ -52,9 +70,23 @@ header { top: 36px; white-space: nowrap; max-width: 263px; + + &:hover { + color: currentColor; // Don't change colour like other links + } + + img { width: auto; } + + &-symbol, &-text { + display: inline-block; + svg { + height: 48px; + width: auto; + } + } } .sublogo { @@ -65,9 +97,8 @@ header { margin: 59px 0 0; float: right; li { - margin: 0 20px 0 0; - &:last-child { - margin-right: 0; + &:not(:last-child) { + margin-right: 40px; } } }