From 5fe13f6a01e004847fe0211156d303aadd2ff75c Mon Sep 17 00:00:00 2001 From: Hannah Maddy Date: Fri, 13 Jan 2017 15:07:38 -0800 Subject: [PATCH] Layout changes in header/footer --- www/source/index.html.slim | 133 +++++++++++++------------- www/source/layouts/_footer.slim | 20 ++-- www/source/stylesheets/_buttons.scss | 7 ++ www/source/stylesheets/_footer.scss | 24 ++--- www/source/stylesheets/_homepage.scss | 16 ++++ www/source/stylesheets/_layout.scss | 27 ++++++ 6 files changed, 142 insertions(+), 85 deletions(-) diff --git a/www/source/index.html.slim b/www/source/index.html.slim index bbeee36c3..55d0cf045 100644 --- a/www/source/index.html.slim +++ b/www/source/index.html.slim @@ -69,7 +69,7 @@ header.blue-gradient #particles-second canvas.particles-js-canvas-el .row - .large-5.medium-5.columns.margin-under + .large-5.medium-5.columns.margin-under-xs h3.t-white i.fa.fa-angle-right.t-dk | Codify agreements @@ -86,35 +86,36 @@ header.blue-gradient p.t-white | Combine profiles and customize them with overlays. Pick controls and define exceptions as code. /! code - .large-6.medium-6.columns.code-example.shadow.relative-top - code.code-demo - span.code-attribute control - | 'sshd-21' - br/ - span.code-token.indent title - | 'Set SSH Protocol to 2' - br/ - span.code-token.indent desc - | 'A detailed description' - br/ - span.code-token.indent impact - | 1.0 #this is critical - br/ - span.code-token.indent ref - | 'compliance guide, section 2.1' - br/ - br/ - span.code-attribute.indent describe - | sshd_config - span.code-attribute do - br/ - span.code-attribute.indent its - | ('Protocol') {should cmp 2} - br/ - span.code-attribute.indent end - br/ - span.code-attribute end - a.btn.strict-right.t-white.try-demo Try the Demo + .large-6.medium-6.columns + .code-example.shadow.relative-top.margin-under + code.code-demo + span.code-attribute control + | 'sshd-21' + br/ + span.code-token.indent title + | 'Set SSH Protocol to 2' + br/ + span.code-token.indent desc + | 'A detailed description' + br/ + span.code-token.indent impact + | 1.0 #this is critical + br/ + span.code-token.indent ref + | 'compliance guide, section 2.1' + br/ + br/ + span.code-attribute.indent describe + | sshd_config + span.code-attribute do + br/ + span.code-attribute.indent its + | ('Protocol') {should cmp 2} + br/ + span.code-attribute.indent end + br/ + span.code-attribute end + a.btn.strict-right.t-white.try-demo Try the Demo /! Next row .row .large-6.medium-6.columns.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground" @@ -122,7 +123,7 @@ header.blue-gradient h2.t-white | Solve your infrastructure testing needs simply and efficiently .row - .large-5.medium-5.columns.margin-under-xl + .large-5.medium-5.columns.margin-under-xs h3.t-white i.fa.fa-angle-right.t-dk | Test the desired state @@ -143,38 +144,38 @@ header.blue-gradient p.t-white | Easily create custom resources and share them. /! code - .large-6.medium-6.columns.code-example.shadow.relative-top - code.code-demo - span.code-attribute describe - | file('/etc/myap.conf') - span.code-attribute do - br/ - span.code-attribute.indent it - | {should exist} - br/ - span.code-attribute.indent its - | ('mode') {should cmp '0644'} - br/ - span.code-attribute end - br/ - br/ - span.code-attribute describe - | myapp.conf - span.code-attribute do - br/ - span.code-attribute.indent its - | ('port') {should cmp 8080} - br/ - span.code-attribute end - br/ - br/ - span.code-attribute describe - | port(8080) - span.code-attribute do - br/ - span.code-attribute.indent it - | {should be_listening} - br/ - span.code-attribute end - a.btn.strict-right.t-white.try-demo Try the Demo - + .large-6.medium-6.columns + .code-example.shadow.relative-top.margin-under + code.code-demo + span.code-attribute describe + | file('/etc/myap.conf') + span.code-attribute do + br/ + span.code-attribute.indent it + | {should exist} + br/ + span.code-attribute.indent its + | ('mode') {should cmp '0644'} + br/ + span.code-attribute end + br/ + br/ + span.code-attribute describe + | myapp.conf + span.code-attribute do + br/ + span.code-attribute.indent its + | ('port') {should cmp 8080} + br/ + span.code-attribute end + br/ + br/ + span.code-attribute describe + | port(8080) + span.code-attribute do + br/ + span.code-attribute.indent it + | {should be_listening} + br/ + span.code-attribute end + a.btn.strict-right.t-white.try-demo Try the Demo diff --git a/www/source/layouts/_footer.slim b/www/source/layouts/_footer.slim index 9052730d0..32f2e18bb 100644 --- a/www/source/layouts/_footer.slim +++ b/www/source/layouts/_footer.slim @@ -7,14 +7,18 @@ footer#main-footer.dark-bg a.btn.t-white href="https://downloads.chef.io/inspec" i.fa.fa-cloud-download span Download - .row - .footer--logos - a.footer--logo.inspec href="/" - img src="/images/inspec-by-chef-logo.png" - a.footer--logo.chef href="http://www.chef.io" - img src="/images/chef-logo.png" - ul.footer--links + .columns.large-4.medium-4 + ul.footer--logos + li + a.footer--logo.inspec href="/" + img src="/images/inspec-by-chef-logo.png" + li + a.footer--logo.chef href="http://www.chef.io" + img src="/images/chef-logo.png" + + .columns.large-8.medium-8 + ul.footer--links.strict-right li a.footer--link href="/legal/licensing" Licensing li @@ -24,5 +28,5 @@ footer#main-footer.dark-bg li a.footer--link href="/legal/privacy-policy" Privacy Policy - p.strict-center + p.strict-center.clear small © Chef Software 2016 diff --git a/www/source/stylesheets/_buttons.scss b/www/source/stylesheets/_buttons.scss index 047ef8abd..84fd61083 100644 --- a/www/source/stylesheets/_buttons.scss +++ b/www/source/stylesheets/_buttons.scss @@ -48,6 +48,13 @@ a { background-color : $color_purple; } } + //mobile + @media only screen and (max-width: 40.063em) { + float: initial; + padding : 0.8rem 1.6rem; + margin : 0 auto; + text-align : center; + } } // Form Buttons diff --git a/www/source/stylesheets/_footer.scss b/www/source/stylesheets/_footer.scss index 9c38319cc..94d2d77c7 100644 --- a/www/source/stylesheets/_footer.scss +++ b/www/source/stylesheets/_footer.scss @@ -1,17 +1,10 @@ #main-footer { - padding-right : 40px; + padding-right : 40px; // Same margins as nav padding-left : 40px; background : $color_heading; - // Same margins as nav } -#main-footer > .row { - display : flex; - max-width : 100%; - vertical-align : middle; - align-items : center; -} footer > #dlmsg { // Download Message @@ -24,11 +17,20 @@ footer a.btn:last-child { } footer span { - margin-left : 6px; - // Icon + margin-left : 6px;// Icon } -.footer--logo { +ul.footer--logos { + margin-left: 0!important; +} + +ul.footer--logos li { + display: inline-block; + margin-left: 0!important; + +} + +.footer--logo { display : inline-block; filter : brightness(0) invert(1); vertical-align : middle; diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss index 2819de05d..279a85300 100644 --- a/www/source/stylesheets/_homepage.scss +++ b/www/source/stylesheets/_homepage.scss @@ -13,6 +13,7 @@ header { margin-top : -500px; overflow : hidden; background-color : transparent; + } #particles-second { @@ -23,6 +24,12 @@ header { height : 80%; overflow : hidden; background-color : transparent; + + //mobile + @media only screen and (max-width: 40.063em) { + height : 100%; + } + } .h-top { @@ -42,6 +49,11 @@ header { // Diamond height : 220px; margin-top : 55px; + //mobile + @media only screen and (max-width: 40.063em) { + height : 200px; + margin-top : 65px; + } } } @@ -50,6 +62,10 @@ header { z-index : 10; position : absolute; margin-top : 280px; + //mobile + @media only screen and (max-width: 40.063em) { + margin-top : 260px; + } } } diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss index be3b10fda..8497a80fb 100644 --- a/www/source/stylesheets/_layout.scss +++ b/www/source/stylesheets/_layout.scss @@ -10,6 +10,14 @@ .strict-right { float : right; text-align : right; + + //mobile + @media only screen and (max-width: 40.063em) { + float: initial; + margin : 0 auto; + text-align : center; + } + } .strict-left { @@ -37,14 +45,28 @@ .margin-both-xl { margin-top : $percent_lg; margin-bottom : $percent_lg; + //mobile + @media only screen and (max-width: 40.063em) { + margin-top : $percent_md; + margin-bottom : $percent_md; + } + } .margin-top-xl { margin-top : $percent_lg; + //mobile + @media only screen and (max-width: 40.063em) { + margin-top : $percent_md; + } } .margin-under-xl { margin-bottom : $percent_lg; + //mobile + @media only screen and (max-width: 40.063em) { + margin-bottom : $percent_md; + } } // default @@ -147,6 +169,11 @@ background : $color_triangle_block; -webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%); + //mobile + @media only screen and (max-width: 40.063em) { + -webkit-clip-path: initial; + clip-path: initial; + } } .purp-shade {