From 1c5d80b86496efd989e74adc35e981dd5369cda6 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Wed, 25 Nov 2015 16:09:55 +0000 Subject: [PATCH] #cubedesigners : style links of in case studies Fix style of button on top of the case studies --- .../views/helpers/CasestudiesDetail.php | 2 +- js/common.js | 1 - less/casestudies_detail.less | 141 +++++++++--------- less/realisation.less | 54 +++---- 4 files changed, 97 insertions(+), 101 deletions(-) diff --git a/framework/application/views/helpers/CasestudiesDetail.php b/framework/application/views/helpers/CasestudiesDetail.php index e83e5ee..8d6184e 100644 --- a/framework/application/views/helpers/CasestudiesDetail.php +++ b/framework/application/views/helpers/CasestudiesDetail.php @@ -19,7 +19,7 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs $res .= '
' . $studie->legende . '
'; if ($studie->url != '') { - $res .= '' . __("Voir le site") . ''; + $res .= '' . __("Voir le site") . ''; } $res .= ''; diff --git a/js/common.js b/js/common.js index e1c85ea..cfa9b1e 100644 --- a/js/common.js +++ b/js/common.js @@ -50,7 +50,6 @@ function load_commons() { resize(); $(window).on('orientationchange', orientationchange); - $(screen).on('orientationchange', orientationchange); orientationchange(); var $menu = $('#menu'), diff --git a/less/casestudies_detail.less b/less/casestudies_detail.less index aab90bc..7315523 100644 --- a/less/casestudies_detail.less +++ b/less/casestudies_detail.less @@ -1,55 +1,44 @@ @import "00-constants"; -.case{ - margin:50px 0 0 0; - h1{ +.case { + margin: 50px 0 0 0; + h1 { font-size: 32px; } - h2{ - margin:0 0 15px 0; + h2 { + margin: 0 0 15px 0; } /* Case studies detail visuel */ .casestudies-detail-visuel { - padding-bottom:50px; - overflow: hidden; - - a { - background-color: @yellow; - border-radius: 2px; - padding: 5px 20px; - color:#fff; - } - - a:hover, a:active { - background-color: #65a8f6; - color:#fff; - } + padding-bottom: 50px; + overflow: hidden; .visuel-holder { -// min-width: 980px; -// max-width: 980px; -// width:100%; -// margin: 0 auto; -// overflow:hidden; + // min-width: 980px; + // max-width: 980px; + // width:100%; + // margin: 0 auto; + // overflow:hidden; } .visuel-holder .visuel { -// width:980px; -// height:400px; + // width:980px; + // height:400px; padding-bottom: 20px; } .visuel-holder .legende { font-size: 18px; - float:left; - padding-bottom: 10px; // When there is a long legend and a "view site" button, they may wrap, so provide space between them. + float: left; + padding-bottom: 10px; // When there is a long legend and a "view site" button, they may wrap, so provide space between them. } + a{ + float:right; + } } - - .casestudies-detail-content { text-align: center; background-color: #0194d5; @@ -57,38 +46,46 @@ .detail-text { color: #fff; - max-width:708px; // 640 + 34*2 - margin:auto; + max-width: 708px; // 640 + 34*2 + margin: auto; position: relative; z-index: 10; + + a { + color: @yellow; + text-decoration: none; + &:hover { + color: @yellow; + } + } } .detail-text .titre { - font-size:32px; + font-size: 32px; padding-bottom: 10px; } .detail-text .dotclear { - font-size:18px; - p{ - margin:10px 0 0 0; + font-size: 18px; + p { + margin: 10px 0 0 0; } } .detail-visuel { -// padding: 0px 0 50px 0; -// z-index: 1; - padding-left: 34px; - padding-right: 34px; - max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images - margin: 0 auto; - - img { - min-width: 462px; // 530 - 34*2 - vertical-align: bottom; // Stops gap under image when right at the bottom - // (caused by images being inline elements and having space for character descenders). - // This is a better solution than setting it to display:block because images can still be aligned this way. - } + // padding: 0px 0 50px 0; + // z-index: 1; + padding-left: 34px; + padding-right: 34px; + max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images + margin: 0 auto; + + img { + min-width: 462px; // 530 - 34*2 + vertical-align: bottom; // Stops gap under image when right at the bottom + // (caused by images being inline elements and having space for character descenders). + // This is a better solution than setting it to display:block because images can still be aligned this way. + } } .detail-video-background { @@ -96,25 +93,25 @@ position: absolute; top: -325px; //left: 110px; - width:1280px; - height:1280px; + width: 1280px; + height: 1280px; z-index: 2; } .detail-video { padding: 0 34px 50px 34px; - margin: 0 auto; + margin: 0 auto; position: relative; z-index: 5; text-align: center; /* vertical-align: middle; display: table-cell; */ - max-width: 1048px; /* 980px + left padding + right padding */ - min-width: 530px; + max-width: 1048px; /* 980px + left padding + right padding */ + min-width: 530px; } .detail-visuel { - width:100%; + width: 100%; background-position: 50%; position: relative; } @@ -122,24 +119,24 @@ } #closeButton { - display: inline-block; - position: absolute; - right: 34px; - top: 50%; - margin-top: -13px; // Half of line-height to position vertically in the centre - background-image: url(../images/close-portfolio.png); - background-repeat: no-repeat; - background-position: right center; - padding-right: 33px; - color: #545454; - font-size: 14px; - line-height: 26px; - - &:hover { - color: #000; - } + display: inline-block; + position: absolute; + right: 34px; + top: 50%; + margin-top: -13px; // Half of line-height to position vertically in the centre + background-image: url(../images/close-portfolio.png); + background-repeat: no-repeat; + background-position: right center; + padding-right: 33px; + color: #545454; + font-size: 14px; + line-height: 26px; + + &:hover { + color: #000; + } } .casestudies-list { - padding-top: 60px; + padding-top: 60px; } \ No newline at end of file diff --git a/less/realisation.less b/less/realisation.less index 7c0f1dd..693b0ff 100644 --- a/less/realisation.less +++ b/less/realisation.less @@ -4,17 +4,17 @@ margin: 50px 0 0 0; h1 { font-size: 40px; - font-weight: 300; - text-transform: none; - margin-top: 40px; + font-weight: 300; + text-transform: none; + margin-top: 40px; } h2 { margin: 0 0 15px 0; } - p { - margin: 1.5em 0; - } + p { + margin: 1.5em 0; + } .but { margin: 0 0 80px 0; @@ -27,10 +27,10 @@ margin: 30px 0 30px 0; } - .close-holder { - min-height: 26px; - margin-bottom: 20px; - } + .close-holder { + min-height: 26px; + margin-bottom: 20px; + } .content { position: relative; @@ -54,24 +54,24 @@ } } - .description { - margin-bottom: 100px; - } + .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; - } - } + 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 -- 2.39.5