From c2a3514830f98cf56b24caad7e3efdc493c9f2ab Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 19 Aug 2015 18:12:02 +0000 Subject: [PATCH] Update design for the portfolio section plus other minor styling adjustments on the site. --- .../application/views/helpers/Realisation.php | 2 +- .../views/helpers/RealisationsList.php | 4 +- js/taglist.js | 1 + less/casestudies.less | 4 +- less/common.less | 6 ++- less/realisation.less | 40 ++++++++++++-- less/realisations.less | 53 +++++++++++++++++-- 7 files changed, 96 insertions(+), 14 deletions(-) diff --git a/framework/application/views/helpers/Realisation.php b/framework/application/views/helpers/Realisation.php index 02de4b4..524e5fc 100644 --- a/framework/application/views/helpers/Realisation.php +++ b/framework/application/views/helpers/Realisation.php @@ -29,7 +29,7 @@ class Cubedesigners_View_Helper_Realisation extends CubeIT_View_Helper_Abstract } $res .= $this->imageSlideshowScroll($slides, 439, array(), array('shortcuts' => false)); - $res .= '
'; + $res .= '
'; $res .= '

' . $r->titre . '

'; $res .= '
    '; $res .= '
  • ' . $this->dateTime($realisation->date, Zend_Date::YEAR) . '
    • '; diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php index 161962c..67f5d4e 100644 --- a/framework/application/views/helpers/RealisationsList.php +++ b/framework/application/views/helpers/RealisationsList.php @@ -30,7 +30,9 @@ class Cubedesigners_View_Helper_RealisationsList extends CubeIT_View_Helper_Abst //$visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440); - $rea = $this->view->imageProcess($r->visuel, $r->titre, 236, 236); + $rea = '
    '; + $rea .= $this->view->imageProcess($r->visuel, $r->titre, 236, 236); + $rea .= '
    '; // fb($r, 'r'); $rea.= '
    '; $rea.= '
    '; diff --git a/js/taglist.js b/js/taglist.js index 04b8aa9..1c72774 100644 --- a/js/taglist.js +++ b/js/taglist.js @@ -158,6 +158,7 @@ var naturalHeight = $(a).find('img').attr('height'); var imageRatio = naturalWidth / naturalHeight; $(a).find('img').css({width: ew, height: ew / imageRatio}); + $(a).find('.img-wrapper').css({width: ew, height: ew / imageRatio}); // Reset isotope grid $(container).isotope({ diff --git a/less/casestudies.less b/less/casestudies.less index 72218d3..f9b1a19 100644 --- a/less/casestudies.less +++ b/less/casestudies.less @@ -41,8 +41,8 @@ color: #1b1b1b; } h3 { - font-size: 14px; - line-height: 16px; + font-size: 16px; + line-height: 1.4; height: 18px; color: #545454; margin: -3px 0 20px; diff --git a/less/common.less b/less/common.less index 1f068e5..05ae9cb 100644 --- a/less/common.less +++ b/less/common.less @@ -104,13 +104,17 @@ a { h1 { text-align: left; font-size: 56px; - line-height: 81px; + line-height: 1; + margin-bottom: 10px; } h2 { text-align: left; font-size: 22px; line-height: 25px; 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; diff --git a/less/realisation.less b/less/realisation.less index f4bcf91..7c0f1dd 100644 --- a/less/realisation.less +++ b/less/realisation.less @@ -3,14 +3,21 @@ .realisation { margin: 50px 0 0 0; h1 { - font-size: 32px; + font-size: 40px; + font-weight: 300; + text-transform: none; + margin-top: 40px; } h2 { margin: 0 0 15px 0; } + p { + margin: 1.5em 0; + } + .but { - margin: 20px 0; + margin: 0 0 80px 0; float: right; background-color: @yellow !important; } @@ -20,6 +27,11 @@ margin: 30px 0 30px 0; } + .close-holder { + min-height: 26px; + margin-bottom: 20px; + } + .content { position: relative; @@ -27,8 +39,7 @@ display: inline-block; position: absolute; right: 34px; - top: 50%; - margin-top: -13px; // Half of line-height to position vertically in the centre + top: 0; background-image: url(../images/close-portfolio.png); background-repeat: no-repeat; background-position: right center; @@ -42,4 +53,25 @@ } } } + + .description { + margin-bottom: 100px; + } +} + +ul.tags { + margin: 10px 0 -10px 0; + list-style: none; + li { + font-size: 14px; + color: #6f6f6f; + padding: 3px 6px; + border-radius: 2px; + background-color: #ededed; + margin: 0 6px 6px 0; + display: inline-block; + &:before { + content: "" !important; + } + } } \ No newline at end of file diff --git a/less/realisations.less b/less/realisations.less index 2907d24..b2ca812 100644 --- a/less/realisations.less +++ b/less/realisations.less @@ -3,14 +3,38 @@ #realisations-list { max-width: 980px; margin: 0 auto; - padding: 0 0 50px 0; + padding: 14px 0 50px 0; display: none; // Hidden initially until Isotope activates - a, a:hover { + a { color: #000; display: inline-block; - margin: 0 0 30px 0; + margin: 0 0 60px 0; + + .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 { display: block; @@ -24,7 +48,9 @@ } h2 { - font-size: 23px; + font-size: 22px; + font-weight: 300; + text-transform: none; color: #1b1b1b; margin: 8px 0 0 0; line-height: 1.3; @@ -38,10 +64,27 @@ margin: 0 0 0 0; } &.last { - margin-right: 0px; + margin-right: 0; } } + a:hover { + + .img-wrapper { + + &:before { + opacity: 1; + background-size: 66px; + } + } + + 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; + } + } + .bloc .project-photo { background-color: #ccc; margin: 0; -- 2.39.5