@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 {
projects / bloomsburie.git / commitdiff