From 09323a30572cf47761ccea1c399b04436f616e7f Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Fri, 24 Jul 2015 16:22:02 +0000 Subject: [PATCH] Update General styles according to the new graphic guidelines --- .../application/layouts/scripts/layout.phtml | 3 +- .../views/helpers/FooterActualites.php | 22 +- .../application/views/helpers/HomeAgence.php | 38 ++- .../views/scripts/common/content.phtml | 7 +- .../views/scripts/common/footer.phtml | 2 - less/00-constants.less | 39 +++ less/admin.less | 2 +- less/agence.less | 264 ++++++++---------- less/bannerCookies.less | 2 + less/casestudies.less | 96 ++++--- less/casestudies_detail.less | 4 +- less/common.less | 59 ++-- less/contact.less | 198 +++++++------ less/expertises.less | 18 +- less/footer.less | 41 ++- less/header.less | 74 ++--- less/home.less | 2 + less/list.less | 103 +++---- less/mixins.less | 2 +- less/realisation.less | 24 +- less/realisations.less | 178 ++++++------ less/slideshow.less | 4 +- less/taglist.less | 10 +- less/text.less | 2 + less/twocols.less | 2 + 25 files changed, 582 insertions(+), 614 deletions(-) create mode 100644 less/00-constants.less diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index d9e058e..5297b16 100644 --- a/framework/application/layouts/scripts/layout.phtml +++ b/framework/application/layouts/scripts/layout.phtml @@ -1,6 +1,7 @@ array('families' => array('Roboto+Condensed:400,300,700:latin'))); +$fonts = array('google' => array('families' => array('Roboto+Condensed:400,300,700:latin')), + '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 4d6eb5e..0b5baa7 100644 --- a/framework/application/views/helpers/FooterActualites.php +++ b/framework/application/views/helpers/FooterActualites.php @@ -1,6 +1,6 @@ '; - $res.='

' . __('Actualités') . '

'; + $res .= '

' . __('Actualités') . '

'; foreach ($actus as $id => $actu) { - $res.='
'; + $res .= '
'; $c = $this->view->dateTime($actu['date'], "dd-MM-y", array('class' => 'date')); - $c.= $this->view->markupDotclear($actu['texte']); + $c .= $this->view->markupDotclear($actu['texte']); $actu['link']['label'] = $c; - $res.=$this->view->linkCMS($actu['link']); - $res.='
'; + $res .= $this->view->linkCMS($actu['link']); + $res .= '
'; } - $res.= ''; - return $res; - } + $res .= $this->linkInternal(__('Plus d\'actualités'), 'news', array('class' => 'but')); -} + $res .= ''; -?> + return $res; + } +} \ No newline at end of file diff --git a/framework/application/views/helpers/HomeAgence.php b/framework/application/views/helpers/HomeAgence.php index 5c41fce..8ac700d 100644 --- a/framework/application/views/helpers/HomeAgence.php +++ b/framework/application/views/helpers/HomeAgence.php @@ -2,26 +2,20 @@ class Cubedesigners_View_Helper_HomeAgence extends Zend_View_Helper_Abstract { - public function homeAgence($blocs) { - - $blocs = $blocs['blocs']; - - $res = '
'; - foreach ($blocs as $id => $bloc) { - - $image = $this->view->imageProcess($bloc['picto'], $bloc['titre'], 120, 120); - - $res.='
'; - $res.= $image; - $res.= '

' . $this->view->markupDotclear($bloc['titre']) . '

'; - $res.= '

' . $this->view->markupDotclear($bloc['texte']) . '

'; - $res.='
'; - } - - $res .= '
'; - return $res; - } - + public function homeAgence($blocs) { + $blocs = $blocs['blocs']; + + $res = '
'; + foreach ($blocs as $id => $bloc) { + $image = $this->view->imageProcess($bloc['picto'], $bloc['titre'], 120, 120); + $res .= '
'; + $res .= $image; + $res .= '

' . $this->view->markupDotclear($bloc['titre']) . '

'; + $res .= '

' . $this->view->markupDotclear($bloc['texte']) . '

'; + $res .= '
'; + } + + $res .= '
'; + return $res; + } } - -?> diff --git a/framework/application/views/scripts/common/content.phtml b/framework/application/views/scripts/common/content.phtml index 4388df7..6ccce67 100644 --- a/framework/application/views/scripts/common/content.phtml +++ b/framework/application/views/scripts/common/content.phtml @@ -3,14 +3,13 @@ // Add RSS alternate links $rss = CubeIT_Util_Cms::unserialize(Bootstrap::getInstance()->getOpt('rss')); $feeds = array('news', 'projects', 'casestudies'); -foreach($feeds as $feed) { - $this->headLink()->appendAlternate($rss['rss_'.$feed.'_url'], 'application/rss+xml', $rss['rss_'.$feed.'_title']); +foreach ($feeds as $feed) { + $this->headLink()->appendAlternate($rss['rss_' . $feed . '_url'], 'application/rss+xml', $rss['rss_' . $feed . '_title']); } $content = $this->layout()->content . "\n"; - -echo '
'; echo $this->render('common/header.phtml'); +echo '
'; if ($this->beforeMain) { echo $this->beforeMain; } diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml index e7b7dbc..b4e6e7d 100644 --- a/framework/application/views/scripts/common/footer.phtml +++ b/framework/application/views/scripts/common/footer.phtml @@ -20,7 +20,6 @@ echo $this->clear();
footerActualites($this->option('actus')); ?>
@@ -35,7 +34,6 @@ echo $this->clear(); if (!is_null($mentions)) { echo $this->linkPage($mentions_page); - //echo ' ' . ucfirst($mentions_page->title) . ''; } ?>
diff --git a/less/00-constants.less b/less/00-constants.less new file mode 100644 index 0000000..dfca518 --- /dev/null +++ b/less/00-constants.less @@ -0,0 +1,39 @@ +@small : ~"screen and (max-width: 1024px)"; + +@roboto: 'Roboto Condensed', sans-serif; +@Klavika: 'Klavika', sans-serif; + +@yellow: #f6ae01; + +.media { + overflow: hidden; +} + +.media--item { + float: left; + margin-right: 25px; +} + +.media--body { + overflow: hidden; +} + +.link(@color,@hovercolor) { + color: @color; + &:hover { + color: @hovercolor; + } +} + +.button(@textcolor,@backgroundcolor,@hovercolor,@hoverbackgroundcolor) { + color: @textcolor; + background-color: @backgroundcolor; + &:hover { + color: @hovercolor; + background-color: @hoverbackgroundcolor; + } +} + +.button(@textcolor,@backgroundcolor) { + .button(@textcolor, @backgroundcolor, #fff, @yellow); +} \ No newline at end of file diff --git a/less/admin.less b/less/admin.less index 301c58c..a52ea9a 100644 --- a/less/admin.less +++ b/less/admin.less @@ -1,4 +1,4 @@ -@import "mixins"; +@import "00-constants"; #adminBar { @media @small{ diff --git a/less/agence.less b/less/agence.less index bffc8ab..bb51c7a 100644 --- a/less/agence.less +++ b/less/agence.less @@ -1,160 +1,134 @@ -@import "mixins"; +@import "00-constants"; @twocols : ~"screen and (max-width: 955px)"; @onecol : ~"screen and (max-width: 700px)"; - .agency-pictos { - /* Agence pictos */ - .bloc-holder { - // min-width: 980px; - // max-width: 980px; - // width:100%; - // margin: 0 auto; - padding-bottom: 25px; - margin-top: -25px; - overflow: hidden; - // text-align: center; - } - - .bloc-holder h2 { - font-weight: 300; - font-size: 32px; - } - - article { - display: inline-block; - vertical-align: top; - width: 33%; -// min-width: 290px; - padding-right: 20px; - margin: 25px 0; - text-align: left; - - @media @twocols { - width: 50%; - - &:nth-child(even) { - padding-left: 20px; - padding-right: 0; - } - } - @media @onecol { - width: 100%; - padding: 0 !important; // Override nth-child (Vincent's brilliant idea :)) - } - } - - .sousbloc { - - &:extend(.media); - - //float: left; - - } - - .spacer { - // clear:left; - // padding:25px 0; - display: none; - } - - .dotclear { - - &:extend(.media--body); - - height: 70px; - display: table-cell; - vertical-align: middle; - } - - .sousbloc img { - //float:left; - &:extend(.media--item); - margin-right: 20px; - } + /* Agence pictos */ + .bloc-holder { + padding-bottom: 25px; + margin-top: -25px; + overflow: hidden; + + } + + .bloc-holder h2 { + font-weight: 300; + font-size: 32px; + } + + article { + display: inline-block; + vertical-align: top; + width: 33%; + padding-right: 20px; + margin: 25px 0; + text-align: left; + + @media @twocols { + width: 50%; + + &:nth-child(even) { + padding-left: 20px; + padding-right: 0; + } + } + @media @onecol { + width: 100%; + padding: 0 !important; // Override nth-child (Vincent's brilliant idea :)) + } + } + + .sousbloc { + &:extend(.media); + } + + .spacer { + display: none; + } + + .dotclear { + + &:extend(.media--body); + + height: 70px; + display: table-cell; + vertical-align: middle; + } + + .sousbloc img { + &:extend(.media--item); + margin-right: 20px; + } } /* Agence photo */ .agency-photo { - overflow:hidden; - text-align: center; + overflow: hidden; + text-align: center; - img { - vertical-align: bottom; - } + img { + vertical-align: bottom; + } } /* Agence equipe */ .agency-persons { - background-color:#3885e0; - color:#fff; - - .bloc-holder { - //min-width: 980px; - //max-width: 980px; - //width:100%; - //margin: 0 auto; - padding-top: 50px; - padding-bottom: 25px; - overflow:hidden; - } - - h2 { - font-size:56px; - } - - h3{ - font-size:32px; - padding: 0 0 20px 0; - } - - .blocs { - padding: 40px 0 0 0; - margin-top: -25px; - } - - .spacer { -// clear:left; -// padding:25px 0; - display: none; - } - - .sousbloc { - - &:extend(.media); - - display: inline-block; - vertical-align: top; - width:50%; - min-width: 480px; - padding-right: 25px; - margin: 25px 0; - - @media screen and (max-width: 1048px) { - width: 100%; - } - } - -// .bloc-holder .sousbloc .texte { -// width: 60%; -// float:left; -// } - - .photo { - - &:extend(.media--item); - - width:120px; - height:120px; - float:left; - margin: 10px 25px 0 0; - border-radius: 60px; - } - - .details { - &:extend(.media--body); - - text-align: left; - } + background-color: @yellow; + color: #fff; + .bloc-holder { + padding-top: 50px; + padding-bottom: 25px; + overflow: hidden; + } + + h2 { + font-size: 56px; + } + + h3 { + font-size: 32px; + padding: 0 0 20px 0; + } + + .blocs { + padding: 40px 0 0 0; + margin-top: -25px; + } + + .spacer { + display: none; + } + + .sousbloc { + + &:extend(.media); + + display: inline-block; + vertical-align: top; + width: 50%; + min-width: 480px; + padding-right: 25px; + margin: 25px 0; + + @media screen and (max-width: 1048px) { + width: 100%; + } + } + + .photo { + + &:extend(.media--item); + + width: 120px; + height: 120px; + float: left; + margin: 10px 25px 0 0; + border-radius: 60px; + } + + .details { + &:extend(.media--body); + text-align: left; + } } diff --git a/less/bannerCookies.less b/less/bannerCookies.less index 61d41b5..0ec92fe 100644 --- a/less/bannerCookies.less +++ b/less/bannerCookies.less @@ -1,3 +1,5 @@ +@import "00-constants"; + #cookieBanner { background-color: #262626; } \ No newline at end of file diff --git a/less/casestudies.less b/less/casestudies.less index 85b76eb..72218d3 100644 --- a/less/casestudies.less +++ b/less/casestudies.less @@ -1,38 +1,35 @@ -//.title.margin{ -// margin-bottom: 40px; -//} - +@import "00-constants"; .casestudies-list { - //min-width: 980px; - //max-width: 980px; - //margin: 0 auto; - padding-bottom: 50px; - overflow: hidden; + //min-width: 980px; + //max-width: 980px; + //margin: 0 auto; + padding-bottom: 50px; + overflow: hidden; - // Settings specific to the isotope grid - &.grid { - display: none; // Hidden until Isotope is ready + // Settings specific to the isotope grid + &.grid { + display: none; // Hidden until Isotope is ready - img { - margin-top: 0; - } - } + img { + margin-top: 0; + } + } - a { - display:inline-block; - margin:0; + a { + display: inline-block; + margin: 0; img { //width:100%; //height:auto; display: block; background-color: #ccc; margin-top: 13.333333%; // 40/300 - 40px margin at full size - margin-bottom: 10px; - max-width: 100%; - height: auto; + margin-bottom: 10px; + max-width: 100%; + height: auto; } - h2,h3{ + h2, h3 { white-space: nowrap; overflow: hidden; max-width: 300px; @@ -41,51 +38,52 @@ h2 { font-size: 32px; line-height: 1.3em; // 38px/32px - color:#1b1b1b; + color: #1b1b1b; } h3 { font-size: 14px; line-height: 16px; - height:18px; - color:#545454; - margin:-3px 0 20px; + height: 18px; + color: #545454; + margin: -3px 0 20px; } - } + } // Styling for related case studies at the bottom of the case study detail page &.related a { margin-right: 3.5%; // 2 gutters - width: 31%; // 3 cols + width: 31%; // 3 cols - &:last-of-type{ + &:last-of-type { margin-right: 0; } - h2 { - @media screen and (max-width: 1048px){ - font-size: 28px; - } + h2 { + @media screen and (max-width: 1048px) { + font-size: 28px; + } - @media screen and (max-width: 890px){ - font-size: 24px; - } + @media screen and (max-width: 890px) { + font-size: 24px; + } - @media screen and (max-width: 780px){ - font-size: 20px; - } - } + @media screen and (max-width: 780px) { + font-size: 20px; + } + } } - .blocmargin { - margin-right:40px; - } -// .spacer { -// clear: left; -// height:20px; -// } + .blocmargin { + margin-right: 40px; + } + // .spacer { + // clear: left; + // height:20px; + // } } + .casestudies-detail-content { - background-color: #3885E0; + background-color: @yellow; } \ No newline at end of file diff --git a/less/casestudies_detail.less b/less/casestudies_detail.less index 50388f8..2e02ef1 100644 --- a/less/casestudies_detail.less +++ b/less/casestudies_detail.less @@ -1,3 +1,5 @@ +@import "00-constants"; + .case{ margin:50px 0 0 0; h1{ @@ -13,7 +15,7 @@ overflow: hidden; a { - background-color: #3885e0; + background-color: @yellow; border-radius: 2px; padding: 5px 20px; color:#fff; diff --git a/less/common.less b/less/common.less index e3cf91a..718ed8f 100644 --- a/less/common.less +++ b/less/common.less @@ -1,4 +1,4 @@ -@roboto: 'Roboto Condensed', sans-serif; +@import "00-constants"; /* 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/ */ @@ -23,18 +23,8 @@ img.responsive { padding-left: 34px; position: relative; - // @media screen and (max-width: 980 + (34*2)px) { - // padding: 0; - // margin: 0 34px; - // } } -//.small{ -// .content,.cubeit-content{ -// margin:0 20px; -// } -//} - body { font-family: @roboto; font-size: 16px; @@ -54,6 +44,15 @@ body { } h1, h2, h3, h4, h5, h6 { + font-family: @Klavika; +} + +h1, h2 { + font-weight: 500; + text-transform: uppercase; +} + +h3, h4, h5, h6 { font-weight: 300; } @@ -63,29 +62,25 @@ strong, b { a { text-decoration: none; - color: #3885e0; -} + &:hover, + &:active { + color: @yellow; + } -a:hover, -a:active { - color: #3885e0; -} + &.but { + display: inline-block; + clear: both; -a.but { - display: inline-block; - color: #fff; - background-color: #2874ce; - clear: both; - border-radius: 2px; - padding: 10px 15px 12px; - line-height: 12px; - margin: 15px 0 0 0; - font-weight: 400; - font-size: 16px; - text-decoration: none !important; - &:hover, &.active { - background-color: #84ae1e !important; - color: #fff !important; + border-radius: 2px; + padding: 15px 15px; + line-height: 12px; + margin: 15px 0 0 0; + font-weight: 400; + font-size: 16px; + text-decoration: none !important; + text-transform: uppercase; + + .button(#fff, @yellow, #fff, @yellow); } } diff --git a/less/contact.less b/less/contact.less index c176547..423722a 100644 --- a/less/contact.less +++ b/less/contact.less @@ -1,141 +1,137 @@ +@import "00-constants"; + /* Contact Title */ .contact-title { -// min-width: 980px; -// max-width: 980px; -// margin: 0 auto; - padding-top: 50px; - padding-bottom: 50px; - - h1 { - text-align: left; - font-weight: 300; - font-size: 56px; - } + padding-top: 50px; + padding-bottom: 50px; + + h1 { + text-align: left; + font-weight: 300; + font-size: 56px; + } } .half-full { - float: left; - width: 50%; - padding-right: 20px; // half of middle margin - - &:last-child { - padding-right: 0; - padding-left: 20px; // half of middle margin + float: left; + width: 50%; + padding-right: 20px; // half of middle margin - .inner { - padding-left: 0; - padding-right: 34px; - float: none; - margin-right: 0; - } - } + &:last-child { + padding-right: 0; + padding-left: 20px; // half of middle margin - .inner { - max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column - padding-left: 34px; - float: right; - width: 100%; - } + .inner { + padding-left: 0; + padding-right: 34px; + float: none; + margin-right: 0; + } + } - @media screen and (max-width: 790px){ + .inner { + max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column + padding-left: 34px; + float: right; + width: 100%; + } - float: none; - width: 100%; - padding-right: 0; + @media screen and (max-width: 790px) { - &:last-child { - padding-left: 0; - padding-top: 50px; + float: none; + width: 100%; + padding-right: 0; - .inner { - padding-left: 34px; - } - } + &:last-child { + padding-left: 0; + padding-top: 50px; - .inner { - max-width: 1048px; - min-width: 530px; - float: none; - } + .inner { + padding-left: 34px; + } + } - } + .inner { + max-width: 1048px; + min-width: 530px; + float: none; + } + } } - - /* Contact informations */ .contact-informations { - padding-bottom: 50px; - overflow: hidden; - - .contact-texte { - background-image: url('../images/picto_footer_mail.svg'); - background-repeat: no-repeat; - background-position: 0px 10px; - font-weight: 300; - padding-left: 60px; - padding-bottom: 50px; - } - - .titre { - padding-bottom: 20px; - font-size: 32px; - } - - .adresse { - background-image: url('../images/picto_geoloc.svg'); - background-repeat: no-repeat; - background-position: 0px 0px; - padding-left: 60px; - padding-bottom: 50px; - } - - .numeros { - background-image: url('../images/picto_tel.svg'); - background-repeat: no-repeat; - background-position: 0px 0px; - padding-left: 60px; - padding-bottom: 50px; - } + padding-bottom: 50px; + overflow: hidden; + + .contact-texte { + background-image: url('../images/picto_footer_mail.svg'); + background-repeat: no-repeat; + background-position: 0px 10px; + font-weight: 300; + padding-left: 60px; + padding-bottom: 50px; + } + + .titre { + padding-bottom: 20px; + font-size: 32px; + } + + .adresse { + background-image: url('../images/picto_geoloc.svg'); + background-repeat: no-repeat; + background-position: 0px 0px; + padding-left: 60px; + padding-bottom: 50px; + } + + .numeros { + background-image: url('../images/picto_tel.svg'); + background-repeat: no-repeat; + background-position: 0px 0px; + padding-left: 60px; + padding-bottom: 50px; + } } /* Google Maps */ .googleMap { - height: 390px; - clear: both; + height: 390px; + clear: both; - // To make the map semi-responsive: - //padding-bottom: 37.3%; // Sets height relative to width - //min-height: 300px; // Stops it getting too short + // To make the map semi-responsive: + //padding-bottom: 37.3%; // Sets height relative to width + //min-height: 300px; // Stops it getting too short } // By default, hide the mobile map link button .but.mobile { - display: none; + display: none; } @media screen and (max-height: 530px), screen and (max-width: 530px) { - .half-full:last-child { - padding-top: 0; + .half-full:last-child { + padding-top: 0; - .numeros { - padding-bottom: 5px; - } - } + .numeros { + padding-bottom: 5px; + } + } - .but.mobile { - display: inline-block; - } + .but.mobile { + display: inline-block; + } - // Hide the maps for mobile - .googleMap { - display: none; - } + // Hide the maps for mobile + .googleMap { + display: none; + } } \ No newline at end of file diff --git a/less/expertises.less b/less/expertises.less index d18cc0b..f2fa0d2 100644 --- a/less/expertises.less +++ b/less/expertises.less @@ -1,14 +1,16 @@ -blockquote.citation{ +@import "00-constants"; + +blockquote.citation { font-size: 32px; font-style: italic; - color:#3885e0; + color: @yellow; line-height: 37px; text-align: center; - margin:-20px auto 50px; - white-space: pre-line; + margin: -20px auto 50px; + white-space: pre-line; - @media screen and (max-width: 1048px){ - white-space: normal; - width: 85%; - } + @media screen and (max-width: 1048px) { + white-space: normal; + width: 85%; + } } \ No newline at end of file diff --git a/less/footer.less b/less/footer.less index aaa1b9e..768842a 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,15 +1,22 @@ +@import "00-constants"; + #footer { + a { + .link(#fff; @yellow); + &.but { + .button(#fff, #212327); + } + } + .footer-top { padding: 50px 0 0 0; - background-color: #282828; + background-color: #2d3035; .footer-top-content { - // max-width:980px; - // margin: 0 auto; + overflow: hidden; padding-bottom: 50px; white-space: nowrap; .bloc { - // display: inline-block; float: left; white-space: normal; vertical-align: top; @@ -32,9 +39,8 @@ h2 { color: #fff; - font-size: 56px; - line-height: 45px; - padding-bottom: 50px; + padding-bottom: 36px; + font-size: 40px; @media screen and (max-width: 1000px) { padding-bottom: 30px; @@ -55,7 +61,7 @@ } .actu { - color: #6c6c6c; + color: #fff; padding-bottom: 20px; &:last-child { @@ -63,7 +69,7 @@ } a { - color: #6c6c6c; + color: #fff; } h3 { @@ -90,11 +96,10 @@ padding-bottom: 50px; } .bureau { - //display:inline-block; float: left; width: 50%; vertical-align: top; - color: #6c6c6c; + color: #fff; padding-right: 21px; &:last-child { @@ -119,14 +124,9 @@ padding-bottom: 20px; } - .numeros a { - color: #6c6c6c; - } .geoloc { padding-top: 30px; a.but { - background-color: #191919; - color: #6c6c6c; margin: 0; } } @@ -140,7 +140,7 @@ box-sizing: border-box; text-align: center; margin-right: 20px; - background-color: #191919; + background-color: #212327; border-radius: 25px; padding: 8px 0 0 0; } @@ -163,7 +163,7 @@ } } .footer-bottom { - background-color: #191919; + background-color: #212327; height: 46px; color: #6c6c6c; text-align: left; @@ -184,13 +184,12 @@ height: 30px; width: 30px; border-radius: 30px; - background-color: #282828; - color: #616161; + background-color: #393c42; text-align: center; margin: 0 0 0 10px; &.active, &:hover { - background-color: #3885e0; + background-color: @yellow; color: #fff; } } diff --git a/less/header.less b/less/header.less index 8b0fc57..7f3da74 100644 --- a/less/header.less +++ b/less/header.less @@ -1,28 +1,42 @@ -#header { +@import "00-constants"; + +@yellow: #fc0; + +header { height: 130px; + background-color: #222428; ul { text-transform: uppercase; - font-size: 15px; - color: #3885e0; + font-family: @Klavika; + font-size: 16px; list-style: none; li { float: left; - a { - color: #282828; - padding: 10px; - - &:hover { + &:last-child { + a { + border: 1px solid #fff; border-radius: 2px; - background-color: #84ae1e; - color: #fff !important; + &:hover { + border-color: @yellow; + } + } + &.active { + a { + border-color: @yellow; + } } } + a { + .link(#fff, @yellow); + padding: 5px 10px; + } + &.active a { - color: #3885e0; + color: @yellow; } } @@ -54,33 +68,19 @@ .navigation { margin: 50px 0; float: right; - } - - .navigation li { - margin: 0 20px 0 0; - &:last-child { - margin-right: 0; + li { + margin: 0 20px 0 0; + &:last-child { + margin-right: 0; + } } } } -//////////////////////// -// @TODO tidy this up... and remove old .menu-link classes - .nav-icon { display: none; } -/////// - -//a.menu-link { -// display: none; -// -// &:hover { -// color: #84ae1e; -// } -//} - .js nav[role=navigation] { max-height: none; } @@ -106,7 +106,7 @@ .nav-icon:after, .nav-icon:before, .nav-icon div { - background-color: #3885e0; + background-color: @yellow; border-radius: 3px; content: ''; display: block; @@ -154,18 +154,6 @@ //margin: 0 -20px; // To offset the 20px margin from .content } - // a.menu-link { - // position: absolute; - // top: 0; - // right: 0; - // padding: 0.5em 34px 0.5em 0.5em; // 34px is to push it away from the right margin and keep aligned with right edge - //// background: #3885e0; - //// border-radius: 2px; - // font: bold 36px sans-serif; - // color: #3885e0; - // text-transform: uppercase; - // display: inline-block; - // } nav[role=navigation] { clear: both; transition: all 0.3s ease-out; diff --git a/less/home.less b/less/home.less index 7c01ddf..4cbfec4 100644 --- a/less/home.less +++ b/less/home.less @@ -1,3 +1,5 @@ +@import "00-constants"; + /* Home Title */ .home-title { padding: 50px 0px 50px 0; diff --git a/less/list.less b/less/list.less index 8865807..2a49746 100644 --- a/less/list.less +++ b/less/list.less @@ -1,108 +1,79 @@ -@import "mixins"; +@import "00-constants"; -section.list{ +section.list { - &#agency,&#expertises{ - background-color:#3885e0; - color:#fff; - a{ - color:#fff; + &#agency, &#expertises { + background-color: @yellow; + color: #fff; + a { + color: #fff; text-decoration: underline; } } &#expertisehome { - background-color:#fff; - color:#1b1b1b; + background-color: #fff; + color: #1b1b1b; } - .bloc-holder { -// min-width: 980px; -// max-width: 980px; -// width:100%; -// margin: 0 auto; - padding-top: 50px; - padding-bottom: 50px; - overflow:hidden; - h2 { - font-size:56px; + padding-top: 50px; + padding-bottom: 50px; + overflow: hidden; + h2 { + font-size: 56px; } h3 { - font-size:32px; + font-size: 32px; padding: 0 0 20px 0; } a.but { - background-color: #2874ce; + background-color: @yellow; } - - .blocs { padding: 40px 0; - overflow:hidden; + overflow: hidden; -// .spacer { -// clear:left; -// padding:25px 0; -// } + &.two { + margin-bottom: -50px; // Offset the 50px margins on the .sousbloc - &.two{ - //white-space:nowrap; - margin-bottom: -50px; // Offset the 50px margins on the .sousbloc - - .sousbloc{ + .sousbloc { white-space: normal; width: 50%; padding-right: 20px; - margin-bottom: 50px; + margin-bottom: 50px; - &:nth-of-type(2n) { - padding-right: 0; - padding-left: 20px; - } + &:nth-of-type(2n) { + padding-right: 0; + padding-left: 20px; + } - @media screen and (max-width: 990px){ - display: block; - width: 100%; + @media screen and (max-width: 990px) { + display: block; + width: 100%; - &:nth-of-type(2n) { - padding: 0; - } - } + &:nth-of-type(2n) { + padding: 0; + } + } } } .sousbloc { display: inline-block; - vertical-align: top; - //width: 980px; - margin:0 0 50px 0; - //float: left; - - &:extend(.media); + vertical-align: top; + margin: 0 0 50px 0; + &:extend(.media); .text { - - &:extend(.media--body); -// display: inline-block; -// width:835px; -// vertical-align: top; -// overflow: hidden; // Stop text wrapping under img + &:extend(.media--body); } img { - - &:extend(.media--item); - -// display: inline-block; -// margin:0 25px 0 0; -// vertical-align: top; -// float: left; -// margin-right: 25px; + &:extend(.media--item); } } } - } } \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 109edee..a169125 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,4 +1,4 @@ -@small : ~"screen and (max-width: 1024px)"; + /* diff --git a/less/realisation.less b/less/realisation.less index 17276bd..f4bcf91 100644 --- a/less/realisation.less +++ b/less/realisation.less @@ -1,21 +1,23 @@ -.realisation{ - margin:50px 0 0 0; - h1{ +@import "00-constants"; + +.realisation { + margin: 50px 0 0 0; + h1 { font-size: 32px; } - h2{ - margin:0 0 15px 0; + h2 { + margin: 0 0 15px 0; } - .but{ - margin:20px 0; - float:right; - background-color: #3885e0 !important; + .but { + margin: 20px 0; + float: right; + background-color: @yellow !important; } - .dotclear{ + .dotclear { clear: both; - margin:30px 0 30px 0; + margin: 30px 0 30px 0; } .content { diff --git a/less/realisations.less b/less/realisations.less index f44e714..2907d24 100644 --- a/less/realisations.less +++ b/less/realisations.less @@ -1,21 +1,21 @@ +@import "00-constants"; + #realisations-list { - // min-width: 980px; - max-width: 980px; - margin: 0 auto; - padding: 0 0 50px 0; - - display: none; // Hidden initially until Isotope activates - - a,a:hover { - color:#000; - display:inline-block; - margin:0 0 30px 0; - //height:170px; - img{ + max-width: 980px; + margin: 0 auto; + padding: 0 0 50px 0; + + display: none; // Hidden initially until Isotope activates + + a, a:hover { + color: #000; + display: inline-block; + margin: 0 0 30px 0; + img { display: block; } - h2,h3{ + h2, h3 { white-space: nowrap; overflow-x: hidden; overflow-y: visible; @@ -25,29 +25,29 @@ h2 { font-size: 23px; - color:#1b1b1b; - margin:8px 0 0 0; - line-height:1.3; + color: #1b1b1b; + margin: 8px 0 0 0; + line-height: 1.3; height: 1.35em; } h3 { font-size: 14px; line-height: 16px; - color:#545454; - height:18px; - margin:0 0 0 0; + color: #545454; + height: 18px; + margin: 0 0 0 0; } - &.last{ + &.last { margin-right: 0px; } - } + } - .bloc .project-photo { - background-color: #ccc; - margin:0; - } + .bloc .project-photo { + background-color: #ccc; + margin: 0; + } - .bloc .gray { + .bloc .gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); @@ -56,64 +56,63 @@ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ - } + } - .bloc { + .bloc { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); - //filter: none; /* IE6-9 */ - transition: all 500ms; - } - + //filter: none; /* IE6-9 */ + transition: all 500ms; + } - .bloc .project-title { - font-size: 14px; - padding: 0 0 20px 0; - color: #545454; - } + .bloc .project-title { + font-size: 14px; + padding: 0 0 20px 0; + color: #545454; + } - .blocmargin { - margin:0 15px 15px 0; + .blocmargin { + margin: 0 15px 15px 0; - } + } - .spacer { - clear: left; - height:20px; - } + .spacer { + clear: left; + height: 20px; + } - #detail { - height:440px; + #detail { + height: 440px; clear: both; - display:none; + display: none; margin-bottom: 15px; - width:10000px; + width: 10000px; white-space: nowrap; transition: all .5s; - } + } - .showUp { - height:0px !important; - overflow:hidden; - opacity: 0; + .showUp { + height: 0px !important; + overflow: hidden; + opacity: 0; } .showDown { - height:440px !important; - opacity: 1; + height: 440px !important; + opacity: 1; } - #detailContent { + #detailContent { overflow: visible; width: 100%; height: auto; - .close { - position:absolute; + .close { + position: absolute; right: 0; //top: 0; background-image: url('../images/rea_close.jpg'); @@ -121,17 +120,16 @@ height: 62px; cursor: pointer; } - } - + } - #detail .detailLeft { + #detail .detailLeft { vertical-align: top; - display:inline-block; - width:230px; + display: inline-block; + width: 230px; min-width: 230px; max-width: 230px; - padding-right:15px; - white-space: normal; + padding-right: 15px; + white-space: normal; div { max-width: 220px; @@ -151,23 +149,23 @@ color: #545454; } - ul { - margin-top:20px; + ul { + margin-top: 20px; list-style: none; } - li { + li { font-size: 14px; color: #6f6f6f; padding: 3px 6px; border-radius: 2px; background-color: #ededed; - margin:0 6px 6px 0; + margin: 0 6px 6px 0; display: inline-block; } - li:hover, li:active { - cursor:default; + li:hover, li:active { + cursor: default; color: #fff; background-color: #84ae1e; } @@ -176,42 +174,42 @@ font-size: 14px; color: #545454; margin-bottom: 20px; - margin-top:20px; + margin-top: 20px; } - } + } - .link { - background-color: #3885e0; + .link { + background-color: @yellow; border-radius: 2px; padding: 5px 20px; - color:#fff; + color: #fff; } - .link:hover { + .link:hover { background-color: #84ae1e; - color:#fff; + color: #fff; } - #detail .detailRight { - display:inline-block; - vertical-align:top; + #detail .detailRight { + display: inline-block; + vertical-align: top; //position: absolute; //right: 0; .slides { overflow: hidden; width: 10000px; - ul{ - position:relative; - list-style-type:none; + ul { + position: relative; + list-style-type: none; margin: 0px; padding: 0px; - width:9999px; - li{ - padding:0px; - margin:0px; - list-style:none; + width: 9999px; + li { + padding: 0px; + margin: 0px; + list-style: none; display: inline-block; } } diff --git a/less/slideshow.less b/less/slideshow.less index 78311b9..fdc2c0c 100644 --- a/less/slideshow.less +++ b/less/slideshow.less @@ -1,3 +1,5 @@ +@import "00-constants"; + /* Home Slideshow */ #home-slideshow { overflow: visible; @@ -133,7 +135,7 @@ //padding: 0 0 25px; &:hover { - background-color: #3885e0; + background-color: @yellow; } &.prev { diff --git a/less/taglist.less b/less/taglist.less index c36a7d3..0e72fa3 100644 --- a/less/taglist.less +++ b/less/taglist.less @@ -1,5 +1,7 @@ +@import "00-constants"; + ul.tags { - margin:50px 0 20px; + margin: 50px 0 20px; list-style: none; li { font-size: 14px; @@ -7,10 +9,10 @@ ul.tags { padding: 3px 6px; border-radius: 2px; background-color: #ededed; - margin:0 6px 6px 0; + margin: 0 6px 6px 0; display: inline-block; - &:before{ - content:"" !important; + &:before { + content: "" !important; } &:hover, &.active { cursor: pointer; diff --git a/less/text.less b/less/text.less index 861a8d6..3f8bcef 100644 --- a/less/text.less +++ b/less/text.less @@ -1,3 +1,5 @@ +@import "00-constants"; + .twocols .dotclear { p { diff --git a/less/twocols.less b/less/twocols.less index 5e97774..bd86b41 100644 --- a/less/twocols.less +++ b/less/twocols.less @@ -1,3 +1,5 @@ +@import "00-constants"; + .twocols { max-width: 980px; -- 2.39.5