From 7667144310a603199095ea707dbb3fe04b7be028 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 17 Jan 2025 12:14:54 +0100 Subject: [PATCH] wait #7258 @0.25 --- less/casestudies_detail.less | 365 ++++++++++++++++++----------------- 1 file changed, 185 insertions(+), 180 deletions(-) diff --git a/less/casestudies_detail.less b/less/casestudies_detail.less index a9798ea..24ed030 100644 --- a/less/casestudies_detail.less +++ b/less/casestudies_detail.less @@ -1,193 +1,198 @@ @import "00-constants"; #headerPlaceholder { - display: none; // No placeholder so that header sits over the top of content + display: none; // No placeholder so that header sits over the top of content } .case { - h1 { - font-size: 32px; - } - h2 { - margin: 0 0 15px 0; - } - - .casestudies-detail-header { - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-size: cover; - background-position: center; - - .header-light & { - color: #fff; // When there's a light header, text should also be white - } - - h1 { - font-size: 92px; - margin-bottom: 0.1em; - } - - h2 { - font-size: 18px; - } - } - - /* Case studies detail visuel */ - .casestudies-detail-visuel { - padding-bottom: 50px; - overflow: hidden; - - .visuel-holder { - // min-width: 980px; - // max-width: 980px; - // width:100%; - // margin: 0 auto; - // overflow:hidden; - } - - .visuel-holder .visuel { - // 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. - } - - a{ - float:right; - } - } - - .casestudies-detail-content { - - section { - overflow: hidden; // So margins are contained within each section, extending the section bg colour + h1 { + font-size: 32px; + } + + h2 { + margin: 0 0 15px 0; + } + + .casestudies-detail-header { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-size: cover; + background-position: center; + + .header-light & { + color: #fff; // When there's a light header, text should also be white + } + + h1 { + font-size: 92px; + margin-bottom: 0.1em; + text-align: center; + } + + h2 { + font-size: 18px; + } + } + + /* Case studies detail visuel */ + + .casestudies-detail-visuel { + padding-bottom: 50px; + overflow: hidden; + + .visuel-holder { + // min-width: 980px; + // max-width: 980px; + // width:100%; + // margin: 0 auto; + // overflow:hidden; + } + + .visuel-holder .visuel { + // 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. + } + + a { + float: right; + } + } + + .casestudies-detail-content { + + section { + overflow: hidden; // So margins are contained within each section, extending the section bg colour + } + + .detail-block { + .constrain(margin-top, 5vw); + .constrain(margin-bottom, 5vw); + .constrain(padding-left, 10vw); + .constrain(padding-right, 10vw); + + //&:first-of-type { + // margin-top: 0; + // .constrain(padding-top, 5vw); + //} + } + + .detail-text { + color: #fff; + max-width: 850px; + margin: 0 auto; + position: relative; + z-index: 10; + + a { + color: @yellow; + text-decoration: none; + + &:hover { + color: @yellow; } - - .detail-block { - .constrain(margin-top, 5vw); - .constrain(margin-bottom, 5vw); - .constrain(padding-left, 10vw); - .constrain(padding-right, 10vw); - - //&:first-of-type { - // margin-top: 0; - // .constrain(padding-top, 5vw); - //} - } - - .detail-text { - color: #fff; - max-width: 850px; - margin: 0 auto; - position: relative; - z-index: 10; - - a { - color: @yellow; - text-decoration: none; - &:hover { - color: @yellow; - } - } - } - - .detail-text .titre { - font-size: 60px; - line-height: 1.1; - margin-bottom: 0.5em; - - @media screen and (max-width: 1000px) { - font-size: 5.85vw; - } - @media screen and (max-width: 685px) { - font-size: 40px; - } - } - - .detail-text .dotclear { - 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 - display: block; - margin: 0 auto; - //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. - } - - iframe.oam{ - max-width: 100%; - } - } - - .detail-video-background { - /*display: table;*/ - position: absolute; - top: -325px; - //left: 110px; - width: 1280px; - height: 1280px; - z-index: 2; - } - - .detail-video { - padding: 0 34px 50px 34px; - 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; - } - - .detail-visuel { - width: 100%; - background-position: 50%; - position: relative; - } - } + } + } + + .detail-text .titre { + font-size: 60px; + line-height: 1.1; + margin-bottom: 0.5em; + + @media screen and (max-width: 1000px) { + font-size: 5.85vw; + } + @media screen and (max-width: 685px) { + font-size: 40px; + } + } + + .detail-text .dotclear { + 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 + display: block; + margin: 0 auto; + //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. + } + + iframe.oam { + max-width: 100%; + } + } + + .detail-video-background { + /*display: table;*/ + position: absolute; + top: -325px; + //left: 110px; + width: 1280px; + height: 1280px; + z-index: 2; + } + + .detail-video { + padding: 0 34px 50px 34px; + 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; + } + + .detail-visuel { + width: 100%; + background-position: 50%; + position: relative; + } + } } #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-related { -- 2.39.5