<?php
-$fonts = array('google' => 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...
$res .= '</article>';
}
- $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 .= '</section>';
return $res;
}
-}
\ No newline at end of file
+}
$res .= '<div class="bureau" itemscope itemtype="http://schema.org/LocalBusiness">';
- $res .= '<p class="titre" itemprop="name">' .
$bureau['coordonnees']['nom'] . '<p>';
+ $res .= '<p class="titre" itemprop="name">' .
sprintf(__('Bureaux de %s'), $bureau['coordonnees']['nom']) . '<p>';
$res .= '<div class="numeros">';
$event = array('category' => 'phone', 'action' => 'call', 'label' => $bureau['coordonnees']['tel']);
$res .= '<div class="geoloc">';
$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 .= '</div>';
$res .= '</div>';
--- /dev/null
+<?php
+
+class Cubedesigners_View_Helper_InlineSVG extends CubeIT_View_Helper_Abstract {
+
+ public function inlineSVG($src, $wrap = false, $class = 'svg') {
+
+ if (file_exists($src)) {
+ $path = $src;
+ } else {
+ $path = PUBLIC_PATH . $src;
+ }
+
+ if (!file_exists($path)) {
+ return false;
+ }
+
+ $svg = file_get_contents($path);
+
+ if ($wrap) {
+ $svg = $this->view->htmlElement($svg, 'div', ['class' => $class]);
+ }
+
+ return $svg;
+ }
+}
--- /dev/null
+<?php
+
+class Cubedesigners_View_Helper_LinkArrow extends CubeIT_View_Helper_Abstract {
+
+ public function linkArrow() {
+
+ return '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 25 10.6" style="enable-background:new 0 0 25 10.6;" xml:space="preserve">
+ <path d="M25,5.5C25,5.4,25,5.2,25,5.1c0-0.1-0.1-0.1-0.1-0.2l-4.8-4.8c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l3.9,3.9H0.5
+ C0.2,4.8,0,5,0,5.3s0.2,0.5,0.5,0.5h22.8l-3.9,3.9c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l4.8-4.8
+ C24.9,5.6,24.9,5.6,25,5.5z"/>
+ </svg>';
+ }
+}
<div class="bloc">
<?php echo $this->footerActualites(); ?>
- <?php echo $this->footerSocials($this->option('followus')); ?>
- </div>
+
<!--<div class="social">
+ <?php //echo $this->footerSocials($this->option('followus')); ?>
+ </div>-->
</div>
</div>
</div>
</div>
</div>
</div>
-</footer>
\ No newline at end of file
+</footer>
<?php
/* LOGO */
- $logos = $this->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 '<div class="sublogo"><h1>' . $this->cmsValue('logoTitle') . '</h1><h2>' . $this->cmsValue('baseline') . '</h2></div>';
} else {
echo '</nav>';
?>
</div>
-</header>
\ No newline at end of file
+</header>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 25 10.6" style="enable-background:new 0 0 25 10.6;" xml:space="preserve">
+<path d="M25,5.5C25,5.4,25,5.2,25,5.1c0-0.1-0.1-0.1-0.1-0.2l-4.8-4.8c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l3.9,3.9H0.5
+ C0.2,4.8,0,5,0,5.3s0.2,0.5,0.5,0.5h22.8l-3.9,3.9c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l4.8-4.8
+ C24.9,5.6,24.9,5.6,25,5.5z"/>
+</svg>
-<?xml version="1.0" encoding="utf-8"?>\r
-<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
-<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+<svg version="1.0" id="cubeSymbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
viewBox="0 0 57.8 60.6" style="enable-background:new 0 0 57.8 60.6;" xml:space="preserve">\r
-<style type="text/css">\r
- .st0{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;}\r
-</style>\r
<g>\r
<path class="st0" d="M24.3,0.6c-1.2,0.6-19.6,11-22.5,12.7c-1.4,0.7-1.6,1.8-1.6,3.3c0,1,0,24.8,0,27.9c0,1.8,0.9,2.2,1.6,2.7\r
c4.6,2.9,18.5,11.4,20.7,12.6c2.6,1.6,5.5-0.5,4-3.1C25.1,54,16.5,37.6,16.5,37.6c4.1-2.4,8-4.7,9.1-5.5c2.3-1.4,2.5-1.5,2.5-4.6\r
-<?xml version="1.0" encoding="utf-8"?>\r
-<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
-<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+<svg version="1.0" id="cubeText" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
viewBox="0 0 206.7 61" style="enable-background:new 0 0 206.7 61;" xml:space="preserve">\r
-<style type="text/css">\r
- .st0{fill:#FFFFFF;}\r
-</style>\r
<g>\r
<g>\r
<g>\r
\r
function load_header() {\r
\r
- // If we are on home, background is transparent\r
- var hbg = 1;\r
- if ($("#home-slideshow").length == 1) {\r
- hbg = 0;\r
- }\r
+ // 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...\r
+ var headerColor = ($("#home-slideshow").length == 1) ? '#fff' : '#000'; // ## TEMPORARY\r
+\r
+\r
var h = $('header');\r
- // Background-color & height\r
- htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'rgba(34,36,40,' + hbg + ')', height: 130},\r
- {backgroundColor: 'rgba(34,36,40,1)', height: 68}), 0);\r
+ // Background-color & height - starts transparent and then fades in\r
+ htl.add(TweenMax.fromTo(h, 1, {color: headerColor, backgroundColor: 'rgba(255,255,255,0)', height: 130},\r
+ {color: '#000', backgroundColor: 'rgba(255,255,255,1)', height: 68}), 0);\r
// Navigation\r
var nav = $(h).find('.navigation');\r
htl.add(TweenMax.fromTo(nav, 1, {marginTop: 59}, {marginTop: 24}), 0);\r
var logo = $(h).find('.logo');\r
htl.add(TweenMax.fromTo(logo, 1, {top: 36, maxWidth: 263}, {top: 14, maxWidth: 57}), 0);\r
// Resize cube logo (two parts)\r
- var img = $(logo).find('img');\r
- htl.add(TweenMax.fromTo(img, 1, {height: 60}, {height: 40}), 0);\r
+ //var img = $(logo).find('img');\r
+ htl.add(TweenMax.fromTo(logo, 1, {height: 48}, {height: 40}), 0);\r
// Typo logo\r
- var typo = $(logo).find('img.typo');\r
+ var typo = $(logo).find('.logo-text');\r
htl.add(TweenMax.fromTo(typo, 1, {opacity: 1}, {opacity: 0}), 1);\r
// Hamburger\r
var hamburger = $(h).find('.nav-icon');\r
// Update\r
formerScroll = s;\r
scrollUp = goingUp;\r
-}
\ No newline at end of file
+}\r
+@content-max-width: 1920px;\r
@small : ~"screen and (max-width: 1024px)";\r
\r
-@roboto: 'Roboto Condensed', sans-serif;\r
-@Klavika: 'Klavika', sans-serif;\r
+// Todo: replace variables properly\r
+@roboto: 'Rubik', sans-serif;\r
+@Klavika: 'Rubik', sans-serif;\r
\r
@yellow: #f6ae01;\r
\r
-@import "01-mixins";
\ No newline at end of file
+@import "01-mixins";\r
}\r
\r
.content-center() {\r
- max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side\r
+ max-width: @content-max-width;\r
min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale\r
- padding-right: 34px;\r
- padding-left: 34px;\r
+ padding-right: 5vw;\r
+ padding-left: 5vw;\r
margin: 0 auto;\r
+\r
+ // Above max content width, fix padding so it doesn't scale too much\r
+ @media (min-width: @content-max-width) {\r
+ padding-right: 0.05 * @content-max-width;\r
+ padding-left: 0.05 * @content-max-width;\r
+ }\r
}\r
\r
.slideshowmixin() {\r
display: inline-block;\r
width: 100%;\r
}\r
-}
\ No newline at end of file
+}\r
}
body {
+ background-color: #e4e5ec;
font-family: @roboto;
font-size: 18px;
font-weight: 300;
}
#wrapper {
+ background-color: #fff;
overflow: hidden;
- max-width: 100%;
+ max-width: @content-max-width;
min-width: 640px;
+ margin: 0 auto;
}
.wf-active body {
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;
}
}
-}
\ No newline at end of file
+}
@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;
}
h2 {
- color: #fff;
+ color: #000;
padding-bottom: 36px;
font-size: 40px;
}
.actu {
- color: #fff;
+ color: #000;
padding-bottom: 20px;
&:last-child {
}
a {
- color: #fff;
+ color: #000;
}
h3 {
}
.date {
- font-size: 12px;
+ line-height: 1.7;
}
}
}
}
.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 {
}
}
.footer-bottom {
- background-color: #212327;
+ background-color: #F5F5F5;
height: 46px;
- color: #6c6c6c;
+ //color: #6c6c6c;
text-align: left;
font-size: 12px;
line-height: 46px;
.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;
}
}
}
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%;
+ }
}
}
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 {
margin: 59px 0 0;
float: right;
li {
- margin: 0 20px 0 0;
- &:last-child {
- margin-right: 0;
+ &:not(:last-child) {
+ margin-right: 40px;
}
}
}
projects / cubedesigners-v7.git / commitdiff
