diff --git a/www/source/index.html.slim b/www/source/index.html.slim
index bbeee36c3..55d0cf045 100644
--- a/www/source/index.html.slim
+++ b/www/source/index.html.slim
@@ -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
diff --git a/www/source/layouts/_footer.slim b/www/source/layouts/_footer.slim
index 9052730d0..32f2e18bb 100644
--- a/www/source/layouts/_footer.slim
+++ b/www/source/layouts/_footer.slim
@@ -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
diff --git a/www/source/stylesheets/_buttons.scss b/www/source/stylesheets/_buttons.scss
index 047ef8abd..84fd61083 100644
--- a/www/source/stylesheets/_buttons.scss
+++ b/www/source/stylesheets/_buttons.scss
@@ -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
diff --git a/www/source/stylesheets/_footer.scss b/www/source/stylesheets/_footer.scss
index 9c38319cc..94d2d77c7 100644
--- a/www/source/stylesheets/_footer.scss
+++ b/www/source/stylesheets/_footer.scss
@@ -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;
diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss
index 2819de05d..279a85300 100644
--- a/www/source/stylesheets/_homepage.scss
+++ b/www/source/stylesheets/_homepage.scss
@@ -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;
+ }
}
}
diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss
index be3b10fda..8497a80fb 100644
--- a/www/source/stylesheets/_layout.scss
+++ b/www/source/stylesheets/_layout.scss
@@ -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 {