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,7 +86,8 @@ 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
.large-6.medium-6.columns
.code-example.shadow.relative-top.margin-under
code.code-demo
span.code-attribute control
| 'sshd-21'
@ -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,7 +144,8 @@ header.blue-gradient
p.t-white
| Easily create custom resources and share them.
/! code
.large-6.medium-6.columns.code-example.shadow.relative-top
.large-6.medium-6.columns
.code-example.shadow.relative-top.margin-under
code.code-demo
span.code-attribute describe
| file('/etc/myap.conf')
@ -177,4 +179,3 @@ header.blue-gradient
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
.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"
ul.footer--links
.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,8 +17,17 @@ footer a.btn:last-child {
}
footer span {
margin-left : 6px;
// Icon
margin-left : 6px;// Icon
}
ul.footer--logos {
margin-left: 0!important;
}
ul.footer--logos li {
display: inline-block;
margin-left: 0!important;
}
.footer--logo {

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 {