From fecd248f8970e1f1c6f583e0b945ee897e2a0572 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Fri, 28 Aug 2015 09:12:11 +0000 Subject: [PATCH] Adjust home page, case studies, portfolio, and expertise / client pages plus many styling tweaks for the new look. --- .../application/forms/CMS/Expertises.php | 4 + .../forms/CMS/Sub/ExpertiseCategories.php | 2 +- .../forms/CMS/Sub/Home/Agence/Bloc.php | 4 + .../forms/CMS/Sub/Home/Clients/Bloc.php | 4 + .../forms/CMS/Sub/Home/Expertises/Bloc.php | 8 +- .../views/helpers/CasestudiesList.php | 9 +- .../views/helpers/FooterContact.php | 2 +- .../application/views/helpers/HomeBlocs.php | 8 +- .../views/helpers/HomeSlideshow.php | 2 +- framework/application/views/helpers/Liste.php | 11 +- .../views/helpers/RealisationsList.php | 2 +- .../views/scripts/templates/casestudies.phtml | 2 +- .../views/scripts/templates/expertise.phtml | 12 +- .../views/scripts/templates/expertises.phtml | 8 +- .../views/scripts/templates/home.phtml | 14 ++- .../scripts/templates/realisations.phtml | 2 +- js/header.js | 2 +- less/casestudies.less | 111 +++++++++++++----- less/common.less | 24 ++-- less/expertises.less | 38 ++++-- less/footer.less | 1 + less/header.less | 2 +- less/home.less | 20 +++- less/list.less | 24 ++-- less/realisations.less | 7 +- less/twocols.less | 8 +- 26 files changed, 234 insertions(+), 97 deletions(-) diff --git a/framework/application/forms/CMS/Expertises.php b/framework/application/forms/CMS/Expertises.php index 5d5002f..42aecfa 100644 --- a/framework/application/forms/CMS/Expertises.php +++ b/framework/application/forms/CMS/Expertises.php @@ -11,6 +11,10 @@ class Cubedesigners_Form_CMS_Expertises extends Cubedesigners_Form_CMS_Twocolumn $citation->setAttrib('rows', 3); $this->addElement($citation); + $citation_author = new Zend_Form_Element_Text('citation_author'); + $citation_author->setLabel('Citation Author'); + $this->addElement($citation_author); + $expertises = new Cubedesigners_Form_CMS_Sub_Home_Expertises(); $expertises->setLegend('Domaines d\'expertises'); $this->addSubForm($expertises, 'expertises'); diff --git a/framework/application/forms/CMS/Sub/ExpertiseCategories.php b/framework/application/forms/CMS/Sub/ExpertiseCategories.php index 837ddcd..183358f 100644 --- a/framework/application/forms/CMS/Sub/ExpertiseCategories.php +++ b/framework/application/forms/CMS/Sub/ExpertiseCategories.php @@ -6,7 +6,7 @@ class Cubedesigners_Form_CMS_Sub_ExpertiseCategories extends CubeIT_Form_SubForm parent::init(); $titre = new Zend_Form_Element_Text('title'); - $titre->setLabel('Expertise Titre'); + $titre->setLabel('Case Studies sous-titre'); $this->addElementLocalized($titre); $categories = new Cubedesigners_Form_Element_CategoriesCheckboxes('categories'); diff --git a/framework/application/forms/CMS/Sub/Home/Agence/Bloc.php b/framework/application/forms/CMS/Sub/Home/Agence/Bloc.php index 39c0f0e..7e6b859 100644 --- a/framework/application/forms/CMS/Sub/Home/Agence/Bloc.php +++ b/framework/application/forms/CMS/Sub/Home/Agence/Bloc.php @@ -9,6 +9,10 @@ class Cubedesigners_Form_CMS_Sub_Home_Agence_Bloc extends CubeIT_Form_SubForm { $titre->setLabel('Titre du bloc'); $this->addElement($titre); + $page = new CubeIT_Form_Element_Page('lien'); + $page->setLabel('Lien vers'); + $this->addElement($page); + $texte = new CubeIT_Form_Element_Markitup_Basic('texte'); $texte->setLabel('Texte'); $this->addElement($texte); diff --git a/framework/application/forms/CMS/Sub/Home/Clients/Bloc.php b/framework/application/forms/CMS/Sub/Home/Clients/Bloc.php index ca99f4e..e9a360d 100755 --- a/framework/application/forms/CMS/Sub/Home/Clients/Bloc.php +++ b/framework/application/forms/CMS/Sub/Home/Clients/Bloc.php @@ -9,6 +9,10 @@ class Cubedesigners_Form_CMS_Sub_Home_Clients_Bloc extends CubeIT_Form_SubForm { $titre->setLabel('Titre du bloc'); $this->addElement($titre); + $page = new CubeIT_Form_Element_Page('lien'); + $page->setLabel('Lien vers'); + $this->addElement($page); + $texte = new CubeIT_Form_Element_Markitup_Basic('texte'); $texte->setLabel('Texte'); $this->addElement($texte); diff --git a/framework/application/forms/CMS/Sub/Home/Expertises/Bloc.php b/framework/application/forms/CMS/Sub/Home/Expertises/Bloc.php index 4a87522..05d71ae 100644 --- a/framework/application/forms/CMS/Sub/Home/Expertises/Bloc.php +++ b/framework/application/forms/CMS/Sub/Home/Expertises/Bloc.php @@ -9,6 +9,10 @@ class Cubedesigners_Form_CMS_Sub_Home_Expertises_Bloc extends CubeIT_Form_SubFor $titre->setLabel('Titre du bloc'); $this->addElement($titre); + $page = new CubeIT_Form_Element_Page('lien'); + $page->setLabel('Lien vers'); + $this->addElement($page); + $texte = new CubeIT_Form_Element_Markitup_Basic('texte'); $texte->setLabel('Texte'); $this->addElement($texte); @@ -17,10 +21,6 @@ class Cubedesigners_Form_CMS_Sub_Home_Expertises_Bloc extends CubeIT_Form_SubFor $picto->setLabel('Pictogramme'); $picto->setMaxItems(1); $this->addElement($picto); - - $page = new CubeIT_Form_Element_Page('lien'); - $page->setLabel('Lien vers'); - $this->addElement($page); } } diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php index 09b5ce8..35a93c4 100644 --- a/framework/application/views/helpers/CasestudiesList.php +++ b/framework/application/views/helpers/CasestudiesList.php @@ -152,10 +152,13 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr $addOffline = 'data-offline="1"'; } */ - $image = $this->view->imageProcess($s->visuel, $s->titre, 318, 318); - $url = Cubedesigners_Util::generateAutoUri($s, $this->_datas['seourl_stu']); + // Max display size is 318 but we over-sample the size by 20% because there is a CSS scale effect on hover + $image = $this->view->imageProcess($s->visuel, $s->titre, 382, 382); + $url = Cubedesigners_Util::generateAutoUri($s, $this->_datas['seourl_stu']); - $c = $image; + $c = '
'; + $c.= $image; + $c.= '
'; $c.= '

' . $s->titre . '

'; $c.='

' . $s->description . '

'; diff --git a/framework/application/views/helpers/FooterContact.php b/framework/application/views/helpers/FooterContact.php index c02f800..fca2e59 100644 --- a/framework/application/views/helpers/FooterContact.php +++ b/framework/application/views/helpers/FooterContact.php @@ -18,7 +18,7 @@ class Cubedesigners_View_Helper_FooterContact extends Zend_View_Helper_Abstract $res.='
'; $res.='

' . __('Tel') . ' ' . $this->view->linkPhone($bureau['coordonnees']['tel']) . '

'; - $res.='

' . __('Fax') . ' ' . $this->view->linkPhone($bureau['coordonnees']['fax']) . '

'; + //$res.='

' . __('Fax') . ' ' . $this->view->linkPhone($bureau['coordonnees']['fax']) . '

'; $res.='
'; //$res.= $this->view->microdataPlace($bureau['coordonnees']['adresse']); diff --git a/framework/application/views/helpers/HomeBlocs.php b/framework/application/views/helpers/HomeBlocs.php index d3ec6bf..f9ba244 100644 --- a/framework/application/views/helpers/HomeBlocs.php +++ b/framework/application/views/helpers/HomeBlocs.php @@ -15,11 +15,17 @@ class Cubedesigners_View_Helper_HomeBlocs extends Zend_View_Helper_Abstract { // } // } $image = $this->view->imageCms($bloc['picto'], $bloc['titre'], 120, 120); + + if(!empty($bloc['lien'])) { + $image = $this->view->linkInternal($image, $bloc['lien']); + } + $res .= '
'; $res.= $image; $res.= '
'; - $res.= '

' . $bloc['titre'] . '

'; + $titre = !empty($bloc['lien']) ? $this->view->linkInternal($bloc['titre'], $bloc['lien']) : $bloc['titre']; + $res.= '

' . $titre . '

'; $res.=$this->view->markupDotclear($bloc['texte']); if ($displayDetailsButton && isset($bloc['lien']) && $bloc['lien']) { $res.=$this->view->linkInternal(__('En savoir plus'), $bloc['lien'], array('class' => 'but')); diff --git a/framework/application/views/helpers/HomeSlideshow.php b/framework/application/views/helpers/HomeSlideshow.php index 04645a2..dcfe2c7 100644 --- a/framework/application/views/helpers/HomeSlideshow.php +++ b/framework/application/views/helpers/HomeSlideshow.php @@ -23,7 +23,7 @@ class Cubedesigners_View_Helper_HomeSlideshow extends CubeIT_View_Helper_Abstrac $time = $slide['time'] * 1000; } - $attributes['style'] = 'background-image:url("/images/slideshow/pattern.png"),url("' . CubeIT_View_Helper_ImageCms::getPath($slide['image']) . '");'; + $attributes['style'] = 'background-image:url("' . CubeIT_View_Helper_ImageCms::getPath($slide['image']) . '");'; $attributes['data-time'] = $time; $attributes['class'] = 'slide'; $link = $slide['lien']; diff --git a/framework/application/views/helpers/Liste.php b/framework/application/views/helpers/Liste.php index 266af9e..13edc64 100644 --- a/framework/application/views/helpers/Liste.php +++ b/framework/application/views/helpers/Liste.php @@ -9,7 +9,16 @@ class Cubedesigners_View_Helper_Liste extends CubeIT_View_Helper_Abstract { $this->view->headLink()->appendStylesheet('/less/list.less'); $res = '
'; if ($items['titre']) { - $res .= '

' . ucfirst($items['titre']) . '

'; + $t = '

' . ucfirst($items['titre']) . '

'; + + // Link title if applicable + if ($items['button']['label']) { + $title_link = $items['button']; // Copy the button details + $title_link['label'] = $t; // Override the title of the link + $res .= $this->view->linkCMS($title_link); + } else { + $res .= $t; // no link on the title + } } $res .= $this->view->homeBlocs($items, $displayDetailsButtons, $cols); if ($items['button']['label']) { diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php index 67f5d4e..64d2c35 100644 --- a/framework/application/views/helpers/RealisationsList.php +++ b/framework/application/views/helpers/RealisationsList.php @@ -31,7 +31,7 @@ class Cubedesigners_View_Helper_RealisationsList extends CubeIT_View_Helper_Abst //$visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440); $rea = '
'; - $rea .= $this->view->imageProcess($r->visuel, $r->titre, 236, 236); + $rea .= $this->view->imageProcess($r->visuel, $r->titre, 284, 284); $rea .= '
'; // fb($r, 'r'); $rea.= '
'; diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml index 375f9bf..0779798 100644 --- a/framework/application/views/scripts/templates/casestudies.phtml +++ b/framework/application/views/scripts/templates/casestudies.phtml @@ -7,7 +7,7 @@ $this->headScript()->addScriptAndStyle('casestudies');
CategoriesList('casestudies', 'casestudies-list', 300, 40); + echo $this->CategoriesList('casestudies', 'casestudies-list', 382, 13); ?>
diff --git a/framework/application/views/scripts/templates/expertise.phtml b/framework/application/views/scripts/templates/expertise.phtml index 73a441c..6a6aaff 100644 --- a/framework/application/views/scripts/templates/expertise.phtml +++ b/framework/application/views/scripts/templates/expertise.phtml @@ -2,17 +2,23 @@ $this->headScript()->addScriptAndStyle('expertises'); echo $this->twocols(); -echo $this->htmlElement($this->citation, 'blockquote', array('class' => 'citation content')); + +if(!empty($this->citation)) { + $citation_author = isset($this->citation_author) ? $this->htmlElement($this->citation_author, 'div', array('class' => 'citation-author')) : ''; + $citation = $this->htmlElement($this->citation . $citation_author, 'blockquote'); + echo $this->htmlElement($citation, 'div', array('class' => 'citation')); +} + echo $this->liste($this->expertises, true, array('id' => 'expertises'), 1); $casestudy_page_data = Bootstrap::getInstance()->getCMSDatasOfPage(4); // Fetch page details - needed for the SEO URL to build links $expertise = CubeIT_Util_Cms::unserialize($this->expertises); -echo '
'; +echo '
'; echo '
'; echo '

'. __('Case Studies') .'

'; -echo '

'. sprintf(__('Projets de %s'), $expertise['related_categories']['title']) .'

'; // ToDo: improve the way this is done +echo '

'. $expertise['related_categories']['title'] .'

'; echo '
'; // .title $limit_results = 3; // How many case studies to return diff --git a/framework/application/views/scripts/templates/expertises.phtml b/framework/application/views/scripts/templates/expertises.phtml index 1970ada..d56e1e4 100644 --- a/framework/application/views/scripts/templates/expertises.phtml +++ b/framework/application/views/scripts/templates/expertises.phtml @@ -2,5 +2,11 @@ $this->headScript()->addScriptAndStyle('expertises'); echo $this->twocols(); -echo $this->htmlElement($this->citation, 'blockquote', array('class' => 'citation')); + +if(!empty($this->citation)) { + $citation_author = isset($this->citation_author) ? $this->htmlElement($this->citation_author, 'div', array('class' => 'citation-author')) : ''; + $citation = $this->htmlElement($this->citation . $citation_author, 'blockquote'); + echo $this->htmlElement($citation, 'div', array('class' => 'citation')); +} + echo $this->liste($this->expertises, true, array('id' => 'expertises')); diff --git a/framework/application/views/scripts/templates/home.phtml b/framework/application/views/scripts/templates/home.phtml index 3d467c1..baa8b24 100644 --- a/framework/application/views/scripts/templates/home.phtml +++ b/framework/application/views/scripts/templates/home.phtml @@ -10,8 +10,18 @@ $case_studies_data = Bootstrap::getInstance()->getCMSDatasOfPage($case_studies_p echo '
'; echo '
'; -echo '

'. $this->case_studies['titre'] .'

'; -echo $this->markupDotclear($this->case_studies['texte']); + +$t = '

'. $this->case_studies['titre'] .'

'; +// Link title using button link +if ($this->case_studies['button']['label']) { + $title_link = $this->case_studies['button']; // Copy the button details + $title_link['label'] = $t; // Override the title of the link + echo $this->linkCMS($title_link); +} else { + echo $t; // no link on the title +} + +echo $this->markupDotclear($this->case_studies['texte'], array(), array('class' => 'intro')); echo '
'; echo $this->CasestudiesList($case_studies_data, null, null, $this->case_studies['display_count']); diff --git a/framework/application/views/scripts/templates/realisations.phtml b/framework/application/views/scripts/templates/realisations.phtml index 5ab73b3..4ea2ad4 100644 --- a/framework/application/views/scripts/templates/realisations.phtml +++ b/framework/application/views/scripts/templates/realisations.phtml @@ -6,7 +6,7 @@ $this->headScript()->addScriptAndStyle('realisations');
CategoriesList("realisations", 'realisations-list', 236, 12); + echo $this->CategoriesList("realisations", 'realisations-list', 284, 12); ?>
diff --git a/js/header.js b/js/header.js index f0c71cf..75f1a31 100644 --- a/js/header.js +++ b/js/header.js @@ -19,7 +19,7 @@ function load_header() { {backgroundColor: 'rgba(34,36,40,1)', height: 68}), 0); // Navigation var nav = $(h).find('.navigation'); - htl.add(TweenMax.fromTo(nav, 1, {marginTop: 57}, {marginTop: 24}), 0); + htl.add(TweenMax.fromTo(nav, 1, {marginTop: 59}, {marginTop: 24}), 0); // Logo var logo = $(h).find('.logo'); htl.add(TweenMax.fromTo(logo, 1, {top: 36}, {top: 14}), 0); diff --git a/less/casestudies.less b/less/casestudies.less index f9b1a19..89c216d 100644 --- a/less/casestudies.less +++ b/less/casestudies.less @@ -4,30 +4,51 @@ //min-width: 980px; //max-width: 980px; //margin: 0 auto; - padding-bottom: 50px; +// padding-bottom: 50px; overflow: hidden; // Settings specific to the isotope grid &.grid { display: none; // Hidden until Isotope is ready - - img { - margin-top: 0; - } + margin-bottom: 50px; } a { display: inline-block; - margin: 0; + margin-bottom: 4.333333%; + + .img-wrapper { + overflow: hidden; // Give blurred image hovers a sharp edge by hiding any blur bleed + position: relative; + + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + background-color: transparent; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAABp1BMVEUAAAD2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH2rgH5x1H967/84Z/////+9d/714D5zGH3sxH85q/++u/98M/4vTH4wkH3uCH60nH7249RxKUJAAAAfHRSTlMAIlmJsM/k8/LOrocCRJvjmEIeiOGGHCWc+ZkjDI77+lLlTgqdCB/QzBsy598mOO/qM/DtLejJBp6PU/5MDQ+NJIuCBd4BSj6R1Bdainmizcfg3ezx+NfGr6FRIRXSmkg76dx+GSDiTwnF2xYuKMsYn/aTHYUDQ5dBetmgCFBy9QAAArJJREFUeF6l1Plb01gYxfFTwKgD0gpYiaAFR8UqKhRwwKogBXVQlEVU3HBlAGdFcT3dV5Y/2oY+eabc5N4m8fN7v3lv3txCyldX37BP208e0A7+0ljngztNh5r9FPgDh5vgVEurRlttR4Jw4mi7Tin9WAdq6Tx+gkqh+k4odXWzpraTkPv1FB0JnIbEmR46dDYMW+fO07HeC7Bx8RJd6Ou3mSFCVwYGIQgO0SV/UNhFD127/BuqDdODEVS5Qi+iV2HCNY2eaNdhGqVHo2Zh7AQ9CvlQcYqeDWNXi04b8WQilUonMltU0YMw3KBVNp0yJZSRcZTF+ijK5VNVClnKTUwCuGktFFOGdCKfqERUjVsAminanSFfoiFbMBqblLoNQKMgXnlw9UjpHGV+BzooMt7ktnAs+VGiU7hDQcnYAqtslhNFSnXhLgUZy0ONMeQnmUaD3cvMCVHVC72H+xQYi+Qem8rEDGZrJ7LKxBzmKUiWE1ustqNMRKBTsF1OZCxbptQDLFCwZVyLnNDMUzHFPEX5vT8pFZTnoIZeWscwGuYccaOQoNxDcanm5KlCpkTm4pW7upMtUeYRHtMqmbLKUmIRjRSZV9xULCob06ijna2kGUlnmVTO8QRPKRHPlG2XzHPJGtFnQBtryRUVjecAXvCnGiMAlvhTjZcAYq/cNOJC4fUkylrpoiF+p29gCOrOG+JJ9LfYFaCC+p+8HRW+kLNGoiAWFt6hAvX06C5Mncv0ZPkaTPiDXkSXUCVAD+pRbeUsXVuNYY+gny6tvYdgcICu9I3Bor+PLgz9CRt/zdKxuTHYCv9Nh2b+gUTseJQORFtjkLuqsaaJJShdH9WppI+voBbfvyFK/bfeAic+fOymre7xKTi18enzHAVr61824E646+vi6rfuSET7tvp9uisMmR8A02/S/W9HBAAAAABJRU5ErkJggg=='); + background-position: center; + background-repeat: no-repeat; + position: absolute; + top: 0; + left: 0; + z-index: 1; + opacity: 0; + transition: all 0.2s ease-out; + background-size: 33px; + } + } + + img { //width:100%; //height:auto; display: block; - background-color: #ccc; - margin-top: 13.333333%; // 40/300 - 40px margin at full size - margin-bottom: 10px; +// background-color: #ccc; max-width: 100%; height: auto; + transition: transform 0.25s ease-out; // Speed of the hover-out animation } h2, h3 { white-space: nowrap; @@ -45,34 +66,68 @@ line-height: 1.4; height: 18px; color: #545454; - margin: -3px 0 20px; + margin-top: -3px; } } + a:hover { + + .img-wrapper { + + &:before { + opacity: 1; + background-size: 66px; + } + } + + img { + //filter: blur(2.4px); + transform: scale(1.2); + transition-duration: 0.4s; // Speed of the hover animation + } + } + + // 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 + &.related { + margin-bottom: 50px; - &:last-of-type { - margin-right: 0; - } + .title { + margin-top: 0; - h2 { - @media screen and (max-width: 1048px) { - font-size: 28px; - } + h1 { + margin-bottom: 5px; + } + h2 { + margin-bottom: 15px; + } + } - @media screen and (max-width: 890px) { - font-size: 24px; - } + a { + // margin-right: 3.5%; // 2 gutters + width: 32.5%; // 3 cols + max-width: 318px; - @media screen and (max-width: 780px) { - font-size: 20px; - } - } - } + &:last-of-type { + margin-right: 0; + } + + h2 { + @media screen and (max-width: 1048px) { + font-size: 28px; + } + + @media screen and (max-width: 890px) { + font-size: 24px; + } + + @media screen and (max-width: 780px) { + font-size: 20px; + } + } + } + } .blocmargin { margin-right: 40px; diff --git a/less/common.less b/less/common.less index 05ae9cb..b44d3c1 100644 --- a/less/common.less +++ b/less/common.less @@ -23,7 +23,7 @@ img.responsive { body { font-family: @roboto; - font-size: 16px; + font-size: 18px; font-weight: 300; color: #1b1b1b; opacity: 0; @@ -41,11 +41,11 @@ body { h1, h2, h3, h4, h5, h6 { font-family: @Klavika; +// -webkit-font-smoothing: antialiased; } h1, h2 { font-weight: 400; - text-transform: uppercase; } h3, h4, h5, h6 { @@ -57,7 +57,8 @@ strong, b { } a { - text-decoration: none; + color: #222428; + text-decoration: none; &:hover, &:active { color: @yellow; @@ -91,6 +92,7 @@ a { ul { list-style: none; li { + line-height: 1.4; &:before { content: "- "; } @@ -99,18 +101,17 @@ a { } .title { - margin: 0 auto; - padding-top: 40px; + margin: 50px auto 10px auto; h1 { text-align: left; font-size: 56px; line-height: 1; - margin-bottom: 10px; + margin-bottom: 20px; } h2 { text-align: left; - font-size: 22px; - line-height: 25px; + font-size: 26px; + line-height: 1.3; white-space: pre-line; // Preserve line breaks from content font-family: @roboto; text-transform: none; @@ -123,11 +124,16 @@ a { } .dotclear { + a { + color: #1b1b1b; + text-decoration: underline; + } + h3, h4 { font-weight: 400; } p { - line-height: 1.56em; + line-height: 1.4; } } diff --git a/less/expertises.less b/less/expertises.less index f2fa0d2..c5212c7 100644 --- a/less/expertises.less +++ b/less/expertises.less @@ -1,16 +1,30 @@ @import "00-constants"; -blockquote.citation { - font-size: 32px; - font-style: italic; - color: @yellow; - line-height: 37px; - text-align: center; - margin: -20px auto 50px; - white-space: pre-line; +.citation { + background-color: #eeeff3; + padding: 70px 0; + margin-bottom: 50px; - @media screen and (max-width: 1048px) { - white-space: normal; - width: 85%; - } + blockquote { + font-size: 32px; + font-style: italic; + font-family: @Klavika; + line-height: 1.2; + text-align: center; + margin: 0 auto; + width: 80%; + max-width: 800px; + +// white-space: pre-line; + + @media screen and (max-width: 1048px) { +// white-space: normal; + + } + } +} + +.citation-author { + font-size: 18px; + margin-top: 15px; } \ No newline at end of file diff --git a/less/footer.less b/less/footer.less index 768842a..7634780 100644 --- a/less/footer.less +++ b/less/footer.less @@ -3,6 +3,7 @@ #footer { a { .link(#fff; @yellow); + text-decoration: none; &.but { .button(#fff, #212327); } diff --git a/less/header.less b/less/header.less index 076d13c..b426091 100644 --- a/less/header.less +++ b/less/header.less @@ -58,7 +58,7 @@ header { } .navigation { - margin: 57px 0 0; + margin: 59px 0 0; float: right; li { margin: 0 20px 0 0; diff --git a/less/home.less b/less/home.less index 103ce50..fc83ace 100644 --- a/less/home.less +++ b/less/home.less @@ -34,10 +34,10 @@ nav.active[role="navigation"] { .slides { .slideshowmixin(); .slide { - background-repeat: repeat, no-repeat; - background-size: auto, cover; - background-position: 0 0, 50% 0; - background-blend-mode: multiply; + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 0; +// background-blend-mode: multiply; > div { text-align: center; @@ -84,11 +84,21 @@ nav.active[role="navigation"] { background-color: #222428; color: #fff; font-size: 22px; - padding: 100px 0 77px 0; + padding: 10px 0 70px 0; .title { font-size: 56px; padding-top: 0; + color: #fff; + display: inline-block; + } + + .intro { + margin-bottom: 30px; + } + + a:hover .title { + color: @yellow; } .casestudies-list { diff --git a/less/list.less b/less/list.less index 9de7372..a65baff 100644 --- a/less/list.less +++ b/less/list.less @@ -1,25 +1,15 @@ @import "00-constants"; section.list { - padding-top: 100px; - padding-bottom: 100px; + padding: 60px 0; + color: #222428; &.white { background-color: #fff; - color: #222428; - a { - color: #222428; - text-decoration: underline; - } } &.grey { background-color: #eeeff3; - color: #222428; - a { - color: #222428; - text-decoration: underline; - } } &#expertisehome { @@ -32,10 +22,16 @@ section.list { overflow: hidden; h2 { font-size: 56px; + line-height: 1; + display: inline-block; } h3 { font-size: 32px; - padding: 0 0 20px 0; + line-height: 1; + margin-bottom: 10px; + } + a { + text-decoration: none; } a.but { background-color: @yellow; @@ -46,7 +42,7 @@ section.list { overflow: hidden; &.two { - margin-bottom: -50px; // Offset the 50px margins on the .sousbloc +// margin-bottom: -50px; // Offset the 50px margins on the .sousbloc .sousbloc { white-space: normal; diff --git a/less/realisations.less b/less/realisations.less index b2ca812..afc072a 100644 --- a/less/realisations.less +++ b/less/realisations.less @@ -37,6 +37,7 @@ img { display: block; + transition: transform 0.25s ease-out; // Speed of the hover-out animation } h2, h3 { @@ -79,9 +80,9 @@ } img { - filter: blur(2.4px); - transform: scale(1.02); // Scale up a little bit to clean up the edges after blurring - transition: filter 0.25s ease-in; + //filter: blur(2.4px); + transform: scale(1.2); + transition-duration: 0.4s; // Speed of the hover animation } } diff --git a/less/twocols.less b/less/twocols.less index bd86b41..50b0f15 100644 --- a/less/twocols.less +++ b/less/twocols.less @@ -7,13 +7,15 @@ .dotclear { p { - margin: 30px 0 30px 0; + margin: 20px 0; } ul { - margin: 15px 0 30px 0; + margin: 20px 0; list-style: none; li { + line-height: 1.4; + &:before { content: "- "; } @@ -22,7 +24,7 @@ } .cols { - padding-bottom: 50px; + padding-bottom: 30px; white-space: nowrap; .col { -- 2.39.5