Layout changes in header/footer

This commit is contained in:
Hannah Maddy 2017-01-13 15:07:38 -08:00 committed by Christoph Hartmann
parent af80f543d1
commit 5fe13f6a01
6 changed files with 142 additions and 85 deletions

View file

@ -69,7 +69,7 @@ header.blue-gradient
#particles-second #particles-second
canvas.particles-js-canvas-el canvas.particles-js-canvas-el
.row .row
.large-5.medium-5.columns.margin-under .large-5.medium-5.columns.margin-under-xs
h3.t-white h3.t-white
i.fa.fa-angle-right.t-dk i.fa.fa-angle-right.t-dk
| Codify agreements | Codify agreements
@ -86,35 +86,36 @@ header.blue-gradient
p.t-white p.t-white
| Combine profiles and customize them with overlays. Pick controls and define exceptions as code. | Combine profiles and customize them with overlays. Pick controls and define exceptions as code.
/! code /! code
.large-6.medium-6.columns.code-example.shadow.relative-top .large-6.medium-6.columns
code.code-demo .code-example.shadow.relative-top.margin-under
span.code-attribute control code.code-demo
| 'sshd-21' span.code-attribute control
br/ | 'sshd-21'
span.code-token.indent title br/
| 'Set SSH Protocol to 2' span.code-token.indent title
br/ | 'Set SSH Protocol to 2'
span.code-token.indent desc br/
| 'A detailed description' span.code-token.indent desc
br/ | 'A detailed description'
span.code-token.indent impact br/
| 1.0 #this is critical span.code-token.indent impact
br/ | 1.0 #this is critical
span.code-token.indent ref br/
| 'compliance guide, section 2.1' span.code-token.indent ref
br/ | 'compliance guide, section 2.1'
br/ br/
span.code-attribute.indent describe br/
| sshd_config span.code-attribute.indent describe
span.code-attribute do | sshd_config
br/ span.code-attribute do
span.code-attribute.indent its br/
| ('Protocol') {should cmp 2} span.code-attribute.indent its
br/ | ('Protocol') {should cmp 2}
span.code-attribute.indent end br/
br/ span.code-attribute.indent end
span.code-attribute end br/
a.btn.strict-right.t-white.try-demo Try the Demo span.code-attribute end
a.btn.strict-right.t-white.try-demo Try the Demo
/! Next row /! Next row
.row .row
.large-6.medium-6.columns.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground" .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 h2.t-white
| Solve your infrastructure testing needs simply and efficiently | Solve your infrastructure testing needs simply and efficiently
.row .row
.large-5.medium-5.columns.margin-under-xl .large-5.medium-5.columns.margin-under-xs
h3.t-white h3.t-white
i.fa.fa-angle-right.t-dk i.fa.fa-angle-right.t-dk
| Test the desired state | Test the desired state
@ -143,38 +144,38 @@ header.blue-gradient
p.t-white p.t-white
| Easily create custom resources and share them. | Easily create custom resources and share them.
/! code /! code
.large-6.medium-6.columns.code-example.shadow.relative-top .large-6.medium-6.columns
code.code-demo .code-example.shadow.relative-top.margin-under
span.code-attribute describe code.code-demo
| file('/etc/myap.conf') span.code-attribute describe
span.code-attribute do | file('/etc/myap.conf')
br/ span.code-attribute do
span.code-attribute.indent it br/
| {should exist} span.code-attribute.indent it
br/ | {should exist}
span.code-attribute.indent its br/
| ('mode') {should cmp '0644'} span.code-attribute.indent its
br/ | ('mode') {should cmp '0644'}
span.code-attribute end br/
br/ span.code-attribute end
br/ br/
span.code-attribute describe br/
| myapp.conf span.code-attribute describe
span.code-attribute do | myapp.conf
br/ span.code-attribute do
span.code-attribute.indent its br/
| ('port') {should cmp 8080} span.code-attribute.indent its
br/ | ('port') {should cmp 8080}
span.code-attribute end br/
br/ span.code-attribute end
br/ br/
span.code-attribute describe br/
| port(8080) span.code-attribute describe
span.code-attribute do | port(8080)
br/ span.code-attribute do
span.code-attribute.indent it br/
| {should be_listening} span.code-attribute.indent it
br/ | {should be_listening}
span.code-attribute end br/
a.btn.strict-right.t-white.try-demo Try the Demo span.code-attribute end
a.btn.strict-right.t-white.try-demo Try the Demo

View file

@ -7,14 +7,18 @@ footer#main-footer.dark-bg
a.btn.t-white href="https://downloads.chef.io/inspec" a.btn.t-white href="https://downloads.chef.io/inspec"
i.fa.fa-cloud-download i.fa.fa-cloud-download
span 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 li
a.footer--link href="/legal/licensing" Licensing a.footer--link href="/legal/licensing" Licensing
li li
@ -24,5 +28,5 @@ footer#main-footer.dark-bg
li li
a.footer--link href="/legal/privacy-policy" Privacy Policy a.footer--link href="/legal/privacy-policy" Privacy Policy
p.strict-center p.strict-center.clear
small © Chef Software 2016 small © Chef Software 2016

View file

@ -48,6 +48,13 @@ a {
background-color : $color_purple; 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 // Form Buttons

View file

@ -1,17 +1,10 @@
#main-footer { #main-footer {
padding-right : 40px; padding-right : 40px; // Same margins as nav
padding-left : 40px; padding-left : 40px;
background : $color_heading; background : $color_heading;
// Same margins as nav
} }
#main-footer > .row {
display : flex;
max-width : 100%;
vertical-align : middle;
align-items : center;
}
footer > #dlmsg { footer > #dlmsg {
// Download Message // Download Message
@ -24,11 +17,20 @@ footer a.btn:last-child {
} }
footer span { footer span {
margin-left : 6px; margin-left : 6px;// Icon
// 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; display : inline-block;
filter : brightness(0) invert(1); filter : brightness(0) invert(1);
vertical-align : middle; vertical-align : middle;

View file

@ -13,6 +13,7 @@ header {
margin-top : -500px; margin-top : -500px;
overflow : hidden; overflow : hidden;
background-color : transparent; background-color : transparent;
} }
#particles-second { #particles-second {
@ -23,6 +24,12 @@ header {
height : 80%; height : 80%;
overflow : hidden; overflow : hidden;
background-color : transparent; background-color : transparent;
//mobile
@media only screen and (max-width: 40.063em) {
height : 100%;
}
} }
.h-top { .h-top {
@ -42,6 +49,11 @@ header {
// Diamond // Diamond
height : 220px; height : 220px;
margin-top : 55px; 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; z-index : 10;
position : absolute; position : absolute;
margin-top : 280px; margin-top : 280px;
//mobile
@media only screen and (max-width: 40.063em) {
margin-top : 260px;
}
} }
} }

View file

@ -10,6 +10,14 @@
.strict-right { .strict-right {
float : right; float : right;
text-align : right; text-align : right;
//mobile
@media only screen and (max-width: 40.063em) {
float: initial;
margin : 0 auto;
text-align : center;
}
} }
.strict-left { .strict-left {
@ -37,14 +45,28 @@
.margin-both-xl { .margin-both-xl {
margin-top : $percent_lg; margin-top : $percent_lg;
margin-bottom : $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-xl {
margin-top : $percent_lg; margin-top : $percent_lg;
//mobile
@media only screen and (max-width: 40.063em) {
margin-top : $percent_md;
}
} }
.margin-under-xl { .margin-under-xl {
margin-bottom : $percent_lg; margin-bottom : $percent_lg;
//mobile
@media only screen and (max-width: 40.063em) {
margin-bottom : $percent_md;
}
} }
// default // default
@ -147,6 +169,11 @@
background : $color_triangle_block; background : $color_triangle_block;
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
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 { .purp-shade {