mirror of
https://github.com/inspec/inspec
synced 2024-11-27 07:00:39 +00:00
Layout changes in header/footer
This commit is contained in:
parent
af80f543d1
commit
5fe13f6a01
6 changed files with 142 additions and 85 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue