mirror of
https://github.com/inspec/inspec
synced 2024-11-23 13:13:22 +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
|
||||
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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue