From: vincent@cubedesigners.com Date: Tue, 12 Jul 2016 13:34:13 +0000 (+0000) Subject: done #548 @3 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6b5d44964a0951331dfed4994cb136035fb29e9c;p=fluidbook-v3.git done #548 @3 --- diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php index fa28421..ea33aa4 100644 --- a/framework/application/views/helpers/BackgroundBlock.php +++ b/framework/application/views/helpers/BackgroundBlock.php @@ -4,9 +4,9 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract /** * @return string */ - public function backgroundBlock($content, $data) { + public function backgroundBlock($content, $data, $class = array('content-wrapper', 'no-shrink')) { $style = ''; - $attributes = array('class' => array('content-wrapper', 'no-shrink')); + $attributes = array('class' => $class); $bgimage = CubeIT_Util_Cms::extractFile($data['bg_image']); $extra_attributes = array(); diff --git a/framework/application/views/helpers/ContactFooter.php b/framework/application/views/helpers/ContactFooter.php index 0d1635a..0616b29 100644 --- a/framework/application/views/helpers/ContactFooter.php +++ b/framework/application/views/helpers/ContactFooter.php @@ -17,7 +17,7 @@ class Fluidbook_View_Helper_ContactFooter extends CubeIT_View_Helper_Abstract { $res = $this->htmlElement($res, 'div', array('class' => 'col-2')); $res = $this->htmlElement($res, 'div', array('class' => 'grid')); - $res = $this->backgroundBlock($res, $cf); + $res = $this->backgroundBlock($res, $cf, array('content-wrapper')); return $this->htmlElement($res, 'section', array('class' => 'contactFooter')); } diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php index 48a0fd8..342fe5a 100644 --- a/framework/application/views/helpers/IntroBlock.php +++ b/framework/application/views/helpers/IntroBlock.php @@ -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')); diff --git a/less/002-common.less b/less/002-common.less index ad0664f..13bae54 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -14,6 +14,10 @@ body { font-size: 14px; line-height: 26/14; min-width: @content-min-width; + + @media @m900 { + font-size: 12px; + } } main { @@ -34,7 +38,12 @@ h1, h2 { font-size: 60px; font-weight: 400; line-height: 1.3; - .divider(85px); + .divider(1.4em); + + @media @m900 { + text-align: center; + font-size: 30px; + } } } @@ -55,7 +64,7 @@ a { } .no-shrink { - min-width: @desktop-min-width; + //min-width: @desktop-min-width; } .cubeit-content { @@ -80,26 +89,54 @@ a { // Grid contains 6 columns without gutters .col-1 { flex-basis: percentage(1/6); + @media @m1280 { + flex-basis: percentage(1/4); + } + + @media @m900 { + flex-basis: 100%; + } } .col-2 { flex-basis: percentage(2/6); + @media @m1280 { + flex-basis: percentage(2/4); + } + @media @m900 { + flex-basis: 100%; + } } .col-3 { flex-basis: percentage(3/6); + @media @m1280 { + flex-basis: percentage(3/4); + } + @media @m900 { + flex-basis: 100%; + } } .col-4 { flex-basis: percentage(4/6); + @media @m1280 { + flex-basis: 100%; + } } .col-5 { flex-basis: percentage(5/6); + @media @m1280 { + flex-basis: 100%; + } } .col-6 { flex-basis: percentage(6/6); + @media @m1280 { + flex-basis: 100%; + } } .dotclear { diff --git a/less/003-mixins.less b/less/003-mixins.less index 4140039..a0fe580 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -78,16 +78,21 @@ .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; + } } } @@ -116,7 +121,7 @@ &:after { content: '-'; - .font-thinning(); + .font-thinning(); font-family: @icons; font-size: 1.5em; position: absolute; diff --git a/less/102-intro.less b/less/102-intro.less index 8f430e0..be6fa3f 100644 --- a/less/102-intro.less +++ b/less/102-intro.less @@ -4,18 +4,46 @@ color: #151e28; .content-wrapper { - background-size: 1680px auto; + background-size: 100% auto; + background-position: 100% 100%; padding-top: 152px; // Minimum clearance and top for fixed menu + + @media @m1280 { + padding-top: 120px; + } + + @media @m900 { + padding-bottom: 85%; + background-size: 180% auto; + padding-top: 100px; + text-align: center; + } + + @media @m768 { + padding-top: 80px; + } + } blockquote { background-color: #f3f3f3; - padding: 60px 20%; + padding: 60px 0; color: #343c44; font-family: @opensans; font-weight: 300; - font-size: 22px; + font-size: 1.6em; text-align: center; - line-height: 35px; + line-height: 1.6; + + div { + width: 60%; + min-width: 980px; + margin: 0 auto; + + @media @m1024 { + width: 80%; + min-width: 0; + } + } } } \ No newline at end of file diff --git a/less/103-contact-footer.less b/less/103-contact-footer.less index 7764688..782c532 100644 --- a/less/103-contact-footer.less +++ b/less/103-contact-footer.less @@ -2,11 +2,24 @@ .contactFooter { .content-wrapper { - background-size: 1680px auto; + background-size: 100% auto; + background-position: 100% 100%; + + @media @m900 { + background-size: 180% auto; + padding-bottom: 55%; + } } .buttons { margin-top: 50px; + white-space: nowrap; + width: 0; + + @media @m900 { + width: auto; + } + a { .border-button-fill(#343c44, #f3f3f3, 5%); .longarrow-button(20px, 40px, 18px); @@ -17,7 +30,25 @@ color: #fff; .background-button-green(); } + + @media @m1024 { + min-width: 0; + padding-left: 20px; + padding-right: 20px; + } + + @media @m900 { + display: block; + margin: 10px auto; + min-width: 220px; + width: 40%; + + } } } + + @media @m900 { + text-align: center; + } } \ No newline at end of file