]> _ Git - fluidbook-v3.git/commitdiff
done #548 @3
authorvincent@cubedesigners.com <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Tue, 12 Jul 2016 13:34:13 +0000 (13:34 +0000)
committervincent@cubedesigners.com <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Tue, 12 Jul 2016 13:34:13 +0000 (13:34 +0000)
framework/application/views/helpers/BackgroundBlock.php
framework/application/views/helpers/ContactFooter.php
framework/application/views/helpers/IntroBlock.php
less/002-common.less
less/003-mixins.less
less/102-intro.less
less/103-contact-footer.less

index fa284212322cb5e0f63b117927a813065ac2918d..ea33aa4b1bfd101928b607f4cadca8117f3c558b 100644 (file)
@@ -4,9 +4,9 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
        /**\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
index 0d1635a23c3f94d373091532bf5865e52b7c7e3b..0616b29eba63cf4be43fc1316c595ef5b6ac478d 100644 (file)
@@ -17,7 +17,7 @@ class Fluidbook_View_Helper_ContactFooter extends CubeIT_View_Helper_Abstract {
 \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
index 48a0fd826bd3141e9511b177895074f57dc50881..342fe5a4737b0ba03c31e54d7a49828b159ce0e5 100644 (file)
@@ -20,7 +20,7 @@ class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract {
                $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'));
index ad0664f79f3568ed2c77e636169db2e4a4b76be9..13bae5426d1826377531da899bc6a497194668ea 100644 (file)
@@ -14,6 +14,10 @@ body {
        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
@@ -34,7 +38,12 @@ h1, h2 {
                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
@@ -55,7 +64,7 @@ a {
 }\r
 \r
 .no-shrink {\r
-       min-width: @desktop-min-width;\r
+       //min-width: @desktop-min-width;\r
 }\r
 \r
 .cubeit-content {\r
@@ -80,26 +89,54 @@ a {
 // 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
index 414003938950758add5b4e891bf7fcaf010e8d5d..a0fe580891d7d4a5147df6df827224692adfb10c 100644 (file)
 
 .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;
index 8f430e0c504d829bd201f02d8f0edbaaee97781c..be6fa3f7a802dd65781fe351f82dc14c0e79bacf 100644 (file)
@@ -4,18 +4,46 @@
        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
index 7764688d00498931f162eaab94f07ed606597b2a..782c5321b2e5a1c7e1d6a027bd3c296756e06d8d 100644 (file)
@@ -2,11 +2,24 @@
 \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