/**\r
* @return string\r
*/\r
- public function backgroundBlock($content, $data) {\r
+ public function backgroundBlock($content, $data, $class = array('content-wrapper', 'no-shrink')) {\r
$style = '';\r
- $attributes = array('class' => array('content-wrapper', 'no-shrink'));\r
+ $attributes = array('class' => $class);\r
\r
$bgimage = CubeIT_Util_Cms::extractFile($data['bg_image']);\r
$extra_attributes = array();\r
\r
$res = $this->htmlElement($res, 'div', array('class' => 'col-2'));\r
$res = $this->htmlElement($res, 'div', array('class' => 'grid'));\r
- $res = $this->backgroundBlock($res, $cf);\r
+ $res = $this->backgroundBlock($res, $cf, array('content-wrapper'));\r
\r
return $this->htmlElement($res, 'section', array('class' => 'contactFooter'));\r
}\r
$res = $this->backgroundBlock($res, $intro);
if ($intro['chapo']) {
- $res .= $this->htmlElement(nl2br($intro['chapo']), 'blockquote');
+ $res .= $this->htmlElement($this->htmlElement(nl2br($intro['chapo']), 'div'), 'blockquote');
}
return $this->htmlElement($res, 'section', array('class' => 'intro'));
font-size: 14px;\r
line-height: 26/14;\r
min-width: @content-min-width;\r
+\r
+ @media @m900 {\r
+ font-size: 12px;\r
+ }\r
}\r
\r
main {\r
font-size: 60px;\r
font-weight: 400;\r
line-height: 1.3;\r
- .divider(85px);\r
+ .divider(1.4em);\r
+\r
+ @media @m900 {\r
+ text-align: center;\r
+ font-size: 30px;\r
+ }\r
}\r
}\r
\r
}\r
\r
.no-shrink {\r
- min-width: @desktop-min-width;\r
+ //min-width: @desktop-min-width;\r
}\r
\r
.cubeit-content {\r
// Grid contains 6 columns without gutters\r
.col-1 {\r
flex-basis: percentage(1/6);\r
+ @media @m1280 {\r
+ flex-basis: percentage(1/4);\r
+ }\r
+\r
+ @media @m900 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.col-2 {\r
flex-basis: percentage(2/6);\r
+ @media @m1280 {\r
+ flex-basis: percentage(2/4);\r
+ }\r
+ @media @m900 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.col-3 {\r
flex-basis: percentage(3/6);\r
+ @media @m1280 {\r
+ flex-basis: percentage(3/4);\r
+ }\r
+ @media @m900 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.col-4 {\r
flex-basis: percentage(4/6);\r
+ @media @m1280 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.col-5 {\r
flex-basis: percentage(5/6);\r
+ @media @m1280 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.col-6 {\r
flex-basis: percentage(6/6);\r
+ @media @m1280 {\r
+ flex-basis: 100%;\r
+ }\r
}\r
\r
.dotclear {\r
.divider(@bottom-padding: 100px) {
position: relative;
- padding-bottom: @bottom-padding;
+ padding-bottom: 1.4em;
&:after {
content: '';
position: absolute;
- bottom: 50px;
+ bottom: 0.83em;
left: 0;
- width: 120px;
+ width: 2em;
height: 1px;
background-color: #343c44;
+
+ @media @m900 {
+ left: 50%;
+ margin-left: -1em;
+ }
}
}
&:after {
content: '-';
- .font-thinning();
+ .font-thinning();
font-family: @icons;
font-size: 1.5em;
position: absolute;
color: #151e28;\r
\r
.content-wrapper {\r
- background-size: 1680px auto;\r
+ background-size: 100% auto;\r
+ background-position: 100% 100%;\r
padding-top: 152px; // Minimum clearance and top for fixed menu\r
+\r
+ @media @m1280 {\r
+ padding-top: 120px;\r
+ }\r
+\r
+ @media @m900 {\r
+ padding-bottom: 85%;\r
+ background-size: 180% auto;\r
+ padding-top: 100px;\r
+ text-align: center;\r
+ }\r
+\r
+ @media @m768 {\r
+ padding-top: 80px;\r
+ }\r
+\r
}\r
\r
blockquote {\r
background-color: #f3f3f3;\r
- padding: 60px 20%;\r
+ padding: 60px 0;\r
color: #343c44;\r
font-family: @opensans;\r
font-weight: 300;\r
- font-size: 22px;\r
+ font-size: 1.6em;\r
text-align: center;\r
- line-height: 35px;\r
+ line-height: 1.6;\r
+\r
+ div {\r
+ width: 60%;\r
+ min-width: 980px;\r
+ margin: 0 auto;\r
+\r
+ @media @m1024 {\r
+ width: 80%;\r
+ min-width: 0;\r
+ }\r
+ }\r
}\r
}
\ No newline at end of file
\r
.contactFooter {\r
.content-wrapper {\r
- background-size: 1680px auto;\r
+ background-size: 100% auto;\r
+ background-position: 100% 100%;\r
+\r
+ @media @m900 {\r
+ background-size: 180% auto;\r
+ padding-bottom: 55%;\r
+ }\r
}\r
\r
.buttons {\r
margin-top: 50px;\r
+ white-space: nowrap;\r
+ width: 0;\r
+\r
+ @media @m900 {\r
+ width: auto;\r
+ }\r
+\r
a {\r
.border-button-fill(#343c44, #f3f3f3, 5%);\r
.longarrow-button(20px, 40px, 18px);\r
color: #fff;\r
.background-button-green();\r
}\r
+\r
+ @media @m1024 {\r
+ min-width: 0;\r
+ padding-left: 20px;\r
+ padding-right: 20px;\r
+ }\r
+\r
+ @media @m900 {\r
+ display: block;\r
+ margin: 10px auto;\r
+ min-width: 220px;\r
+ width: 40%;\r
+\r
+ }\r
}\r
\r
}\r
+\r
+ @media @m900 {\r
+ text-align: center;\r
+ }\r
}
\ No newline at end of file