From 1fdd0957474ffac93eff8783c7a1817d46f58001 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 3 Dec 2024 14:14:27 +0100 Subject: [PATCH] wip #7217 @5 --- framework/application/configs/application.ini | 1 - .../application/layouts/scripts/layout.phtml | 11 +- .../views/scripts/common/footer.phtml | 17 - .../views/scripts/common/header.phtml | 2 +- images/logo/Cube.svg | 13 - images/logo/Symbol.svg | 20 ++ images/logo/Typo.svg | 75 ++--- less/00-constants.less | 7 +- less/admin.less | 2 +- less/agence.less | 2 +- less/common.less | 300 +++++++++--------- less/footer.less | 2 +- less/header.less | 5 +- less/home.less | 4 +- less/link-arrow.less | 6 +- less/list.less | 2 +- less/news.less | 2 +- 17 files changed, 222 insertions(+), 249 deletions(-) delete mode 100644 images/logo/Cube.svg create mode 100644 images/logo/Symbol.svg diff --git a/framework/application/configs/application.ini b/framework/application/configs/application.ini index 40cc565..ea7be1c 100644 --- a/framework/application/configs/application.ini +++ b/framework/application/configs/application.ini @@ -55,7 +55,6 @@ database.params.password = 0b0uezljtKO7RrjR database.params.dbname = bloomsburie database.params.username = root -locales.fr = fr.bloomsburie.dev2.cubedesigners.com locales.en = bloomsburie.dev2.cubedesigners.com webhost = bloomsburie.dev2.cubedesigners.com diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index bcb4cd3..3365a94 100644 --- a/framework/application/layouts/scripts/layout.phtml +++ b/framework/application/layouts/scripts/layout.phtml @@ -3,20 +3,12 @@ $fonts = [ 'google' => [ 'families' => [ - 'Rubik:300,300i,400' + 'Raleway:300,600,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... -// Reference: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/ -// Note: this custom web font is also missing a character currently: "ö" for Jens' surname. -//$fonts = array('custom' => array('families' => array('Roboto Condensed'), 'urls' => array('/css/fonts/robotocondensed.css'))); $this->headScript()->addWebFont($fonts); -//$this->headScript()->addFastclick(); // Removed because it was causing errors on Android and is probably no longer needed for modern devices $this->headScript()->addWOW(); // For reveal on scroll animations if ($this->acl()->isAllowed('edition')) { @@ -28,7 +20,6 @@ $this->headLink()->appendStylesheet('/less/common.less', 'all'); $this->headMeta()->setViewport('device-width'); - profile(__FILE__, __LINE__, 'Before rendering body'); $res = $this->htmlPage($this->render('common/body.phtml')); profile(__FILE__, __LINE__, 'Body rendered'); diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml index c12457d..a0ea1c3 100644 --- a/framework/application/views/scripts/common/footer.phtml +++ b/framework/application/views/scripts/common/footer.phtml @@ -37,23 +37,6 @@ echo $this->clear(); } ?> - - localesEnabled())) { - echo ''; - } else { - echo $this->localeNavigation(true, CubeIT_View_Helper_LocaleNavigation::BIGRAMME); - } - ?> diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml index fd6614d..aa894a9 100644 --- a/framework/application/views/scripts/common/header.phtml +++ b/framework/application/views/scripts/common/header.phtml @@ -15,7 +15,7 @@ if (!is_null($homepage)) { inlineSVG('images/logo/Cube.svg', true, 'logo-symbol'); + $logo['symbol'] = $this->inlineSVG('images/logo/Symbol.svg', true, 'logo-symbol'); $logo['text'] = $this->inlineSVG('images/logo/Typo.svg', true, 'logo-text'); echo $this->link($logo['symbol'] . $logo['text'], $home, array('class' => 'logo')); diff --git a/images/logo/Cube.svg b/images/logo/Cube.svg deleted file mode 100644 index 5e3c2d6..0000000 --- a/images/logo/Cube.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/images/logo/Symbol.svg b/images/logo/Symbol.svg new file mode 100644 index 0000000..023a40a --- /dev/null +++ b/images/logo/Symbol.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/logo/Typo.svg b/images/logo/Typo.svg index b2df553..7fb7e56 100644 --- a/images/logo/Typo.svg +++ b/images/logo/Typo.svg @@ -1,48 +1,27 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/less/00-constants.less b/less/00-constants.less index ad2c0eb..d164bbf 100644 --- a/less/00-constants.less +++ b/less/00-constants.less @@ -2,10 +2,11 @@ @small : ~"screen and (max-width: 1024px)"; // Todo: replace variables properly -@roboto: 'Rubik', sans-serif; -@Klavika: 'Rubik', sans-serif; +@roboto: 'Raleway', sans-serif; +@Klavika: 'Raleway', sans-serif; -@yellow: #f6ae01; +@yellow: #469ef6; +@black: #242323; @import "01-mixins"; @import "02-utilities"; diff --git a/less/admin.less b/less/admin.less index bb64e7a..00d937e 100644 --- a/less/admin.less +++ b/less/admin.less @@ -5,7 +5,7 @@ display: none; } - background: #f6ae01; + background: @yellow; padding: 3px 0 3px; position: absolute; // Needed to make it sit above header. Could also be 'fixed'... width: 100%; diff --git a/less/agence.less b/less/agence.less index 69e62d2..123e19f 100644 --- a/less/agence.less +++ b/less/agence.less @@ -74,7 +74,7 @@ /* Agence equipe */ .agency-persons { background-color: #fff; - color: #222428; + color: @black; .bloc-holder { overflow: hidden; } diff --git a/less/common.less b/less/common.less index 0a3010a..a3858b6 100644 --- a/less/common.less +++ b/less/common.less @@ -3,202 +3,214 @@ /* apply a natural box layout model to all elements, but allowing components to change */ /* Reference: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ html { - box-sizing: border-box; + box-sizing: border-box; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } img.responsive { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .content, .cubeit-content { - .content-center(); - position: relative; + .content-center(); + position: relative; } body { - background-color: #fafafa; - font-family: @roboto; - font-size: 18px; - font-weight: 300; - color: #1b1b1b; - opacity: 0; - transition: opacity 0.25s linear; + background-color: #fafafa; + font-family: @roboto; + font-size: 18px; + font-weight: 300; + color: #1b1b1b; + opacity: 0; + transition: opacity 0.25s linear; } #wrapper { - background-color: #fff; - overflow: hidden; - max-width: @content-max-width; - min-width: 640px; - margin: 0 auto; + background-color: #fff; + overflow: hidden; + max-width: @content-max-width; + min-width: 640px; + margin: 0 auto; } .wf-active body { - opacity: 1; + opacity: 1; } h1, h2, h3, h4, h5, h6, blockquote { - font-family: @Klavika; - transform: rotate(0.1deg); // Hack to fix poor rendering on Chrome + Windows (forces anti-aliasing) - -webkit-font-smoothing: antialiased; + font-family: @Klavika; + transform: rotate(0.1deg); // Hack to fix poor rendering on Chrome + Windows (forces anti-aliasing) + -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { - font-weight: 300; + font-weight: 300; } strong, b { - font-weight: 400; + font-weight: 400; } a { - color: #222428; - text-decoration: none; - transition: color 0.3s; - &:hover, - &:active { - 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; - - border-radius: 2px; - border: 2px solid @yellow; - padding: 13px; - line-height: 12px; - margin: 15px 0 0 0; - font-weight: 400; - font-size: 16px; - text-decoration: none !important; - text-transform: uppercase; - transition: all 0.3s; - - .button(#fff, @yellow, @yellow, transparent); - } + color: @black; + text-decoration: none; + transition: color 0.3s; + + &:hover, + &:active { + color: @yellow; + } + + &.inverted { + color: @yellow; + + &:hover, &:active { + color: @black; + } + } + + &.animated-arrow{ + text-transform: uppercase; + } + + &.arrow-link { + .link(@black, @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; + position: relative; + } + } + + &.but { + display: inline-block; + clear: both; + + border-radius: 2px; + border: 2px solid @yellow; + padding: 13px; + line-height: 12px; + margin: 15px 0 0 0; + font-weight: 400; + font-size: 16px; + text-decoration: none !important; + text-transform: uppercase; + transition: all 0.3s; + + .button(#fff, @yellow, @yellow, transparent); + } } #main { - overflow-x: hidden; - overflow-y: visible; - - .main-holder { - width: 100%; - padding: 0 20px 50px 20px; - } - ul { - list-style: none; - li { - line-height: 1.4; - &:before { - content: "- "; - } - } - } + overflow-x: hidden; + overflow-y: visible; + + .main-holder { + width: 100%; + padding: 0 20px 50px 20px; + } + + ul { + list-style: none; + + li { + line-height: 1.4; + + &:before { + content: "- "; + } + } + } } .title { - margin: 50px 0 10px; - h1 { - text-align: left; - font-size: 56px; - line-height: 1; - margin-bottom: 20px; - } - h2 { - text-align: left; - font-size: 26px; - line-height: 1.3; - white-space: pre-line; // Preserve line breaks from content - font-family: @roboto; - text-transform: none; - font-weight: 300; - - @media screen and (max-width: 980px) { - white-space: normal; - } - } + margin: 50px 0 10px; + + h1 { + text-align: left; + font-size: 56px; + line-height: 1; + margin-bottom: 20px; + } + + h2 { + text-align: left; + font-size: 26px; + line-height: 1.3; + white-space: pre-line; // Preserve line breaks from content + font-family: @roboto; + text-transform: none; + font-weight: 300; + + @media screen and (max-width: 980px) { + white-space: normal; + } + } } .text-block { - max-width: 54rem; // = 864px or 45% of 1920px + max-width: 54rem; // = 864px or 45% of 1920px } .dotclear { - a { - //color: #1b1b1b; - text-decoration: underline; - } + a { + //color: #1b1b1b; + text-decoration: underline; + } - h1, h2 { - &:not(:last-child) { - margin-bottom: 0.75em; - } - } + h1, h2 { + &:not(:last-child) { + margin-bottom: 0.75em; + } + } - p { - line-height: 1.6; - } + p { + line-height: 1.6; + } } .ajaxpopup { - .dotclear { - font-size: 16px; - p { - margin: 10px 0; - } + .dotclear { + font-size: 16px; + + p { + margin: 10px 0; + } - h2 { - font-weight: 400; - } - } + h2 { + font-weight: 400; + } + } } // Standard select dropdown .form-select { - appearance: none; - padding-right: 1.5em; - background: url('data:image/svg+xml;utf8,') center right no-repeat; - background-size: auto 0.4em; - border: none; - border-radius: 0; - font-size: 18px; + appearance: none; + padding-right: 1.5em; + background: url('data:image/svg+xml;utf8,') center right no-repeat; + background-size: auto 0.4em; + border: none; + border-radius: 0; + font-size: 18px; } diff --git a/less/footer.less b/less/footer.less index 14c1393..ea06d37 100644 --- a/less/footer.less +++ b/less/footer.less @@ -184,7 +184,7 @@ float: left; a { - .link(#222428, @yellow); + .link(@black, @yellow); } } diff --git a/less/header.less b/less/header.less index 3bf026d..b58bf29 100644 --- a/less/header.less +++ b/less/header.less @@ -4,7 +4,7 @@ header { height: 130px; - color: #222428; + color: @black; z-index: 100; // Some elements on case studies page have a higher z-index so make sure we are above that position: fixed; top: 0; @@ -99,6 +99,7 @@ header { margin: 59px 0 0; float: right; li { + text-transform: uppercase; &:not(:last-child) { margin-right: 40px; } @@ -196,7 +197,7 @@ header { // When menu is open, white background is in place so force dark colour &.menu-active { - color: #222428 !important; + color: @black !important; } } diff --git a/less/home.less b/less/home.less index 3a64b60..bd80aca 100644 --- a/less/home.less +++ b/less/home.less @@ -64,7 +64,7 @@ nav.active[role="navigation"] { left: 0; width: 100%; height: 100%; - background-color: #222428; // Base colour needed so menu and text is readable before image loads + background-color: @black; // Base colour needed so menu and text is readable before image loads background-size: cover; background-repeat: no-repeat; background-position: 50% 0; @@ -137,7 +137,7 @@ nav.active[role="navigation"] { } #casestudies { - background-color: #222428; + background-color: @black; color: #fff; font-size: 22px; padding: 10px 0 70px 0; diff --git a/less/link-arrow.less b/less/link-arrow.less index 25666b7..1338fb6 100644 --- a/less/link-arrow.less +++ b/less/link-arrow.less @@ -3,7 +3,6 @@ @import "00-constants"; // Variables -@black: #222428; @hover-color: @yellow; @text-arrow-space: 10px; @@ -19,12 +18,13 @@ // The Arrow .the-arrow { width: @shaft-width; + top:0px; //transition: transform 0.2s; &.-left { position: absolute; - top: 60%; left: 0; + top:9px; > .shaft { //width: 0; @@ -53,7 +53,7 @@ } &.-right { - top: 3px; + > .shaft { width: @shaft-width; diff --git a/less/list.less b/less/list.less index 001e033..08de4e1 100644 --- a/less/list.less +++ b/less/list.less @@ -2,7 +2,7 @@ section.list { padding: 60px 0; - color: #222428; + color: @black; &.white { background-color: #fff; diff --git a/less/news.less b/less/news.less index 77f53b2..21f4b0a 100644 --- a/less/news.less +++ b/less/news.less @@ -6,7 +6,7 @@ margin: 34px 0 100px 0; a { - color: #222428; + color: @black; } } -- 2.39.5