Update design for the portfolio section plus other minor styling adjustments on the...

diff --git a/framework/application/views/helpers/Realisation.php b/framework/application/views/helpers/Realisation.php
index 02de4b4de575dbb8d4eaf3cb35265266bb66a573..524e5fceb8e22c7394983f7abccdaa62979fc493 100644 (file)
--- 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 .= '<div class="content">';
+               $res .= '<div class="content description">';
         $res .= '<h1>' . $r->titre . '</h1>';
         $res .= '<ul class="tags">';
         $res .= '<li>' . $this->dateTime($realisation->date, Zend_Date::YEAR) . '</li>';

diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php
index 161962c3485b21a67aa592260247839bf2c7ef75..67f5d4e2d6b6ebcf20d0422de9e14c1d514d6b8d 100644 (file)
--- 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 = '<div class="img-wrapper">';
+            $rea .= $this->view->imageProcess($r->visuel, $r->titre, 236, 236);
+            $rea .= '</div>';
 //            fb($r, 'r');
             $rea.= '<div class="details-positioner">';
             $rea.= '<div class="details-holder">';

diff --git a/js/taglist.js b/js/taglist.js
index 04b8aa91d744992de844fd5833457ce2898aa2bd..1c7277452f3739279d0b31325ac40d8f64e87e08 100644 (file)
--- 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 72218d3a70d6be253a1c7b08c2470444ecab6c59..f9b1a19e66283455c25b0137ee323f26cf973330 100644 (file)
--- 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 1f068e5ad885733f0c6b75a6c24cae30d125da11..05ae9cbb38087a27e788c5b500258d5b19251c4d 100644 (file)
--- 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 f4bcf91f22f8add3cfe3114c506ac6ef2dd8e22b..7c0f1dd5e01be149013d19c70a5df2b161ef734e 100644 (file)
--- 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 2907d24081ed96e71a20633cb7ae3901564ad03a..b2ca8123a8cb716e9a8b8128f36614e514101a13 100644 (file)
--- 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;