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
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

View file

@ -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

View file

@ -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

View file

@ -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;

View file

@ -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;
}
}
}

View file

@ -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 {