mirror of
https://github.com/inspec/inspec
synced 2024-11-26 22:50:36 +00:00
Bug fixes + New Elements
** Fixed 404 pages on mobile ** Colored links when on correct page for Nav (probably, a better way to handle this..but it works for now) ** Changed horizontal parallax to vertical ** Per Kaiv’s request slowed down grid animation ** Per Kaiv’s request added a little “code snippet” preview when plus icon on homepage is clicked.
This commit is contained in:
parent
d674d9ae86
commit
9bf72b4fa1
10 changed files with 3044 additions and 37 deletions
|
@ -6,7 +6,7 @@ description: This is where you interact with the InSpec open source community -
|
|||
.row.margin-both-offset
|
||||
.columns.large-6.medium-6
|
||||
|
||||
h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
h2#icon-trigger data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
|
||||
| Inspec is better with friends.
|
||||
br/
|
||||
|
|
2924
www/source/config.codekit3
Normal file
2924
www/source/config.codekit3
Normal file
File diff suppressed because it is too large
Load diff
1
www/source/images/open-close.svg
Normal file
1
www/source/images/open-close.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="15" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#955af2"/><stop offset="1" stop-color="#3ab3ce"/></linearGradient></defs><title>open-close</title><g id="Layer_2" data-name="Layer 2"><g id="polys"><polygon class="cls-1" points="30 14 16 14 16 0 14 0 14 14 0 14 0 16 14 16 14 30 16 30 16 16 30 16 30 14"/></g></g></svg>
|
After Width: | Height: | Size: 549 B |
|
@ -14,15 +14,28 @@ header.blue-gradient.margin-top-offset
|
|||
canvas.particles-js-canvas-el /
|
||||
/! style for callout icons
|
||||
.row
|
||||
.icon.shadow
|
||||
img src="/images/circ-arrow.svg" /
|
||||
.icon.shadow.code-trigger
|
||||
img src="/images/open-close.svg" /
|
||||
|
||||
/! Surprise Code example
|
||||
.code-pop
|
||||
.strict-center
|
||||
p.code.code-demo.code-pop-animate
|
||||
span.code-attribute
|
||||
| describe
|
||||
| code
|
||||
span.code-attribute
|
||||
| do it
|
||||
| {should be_inspec}
|
||||
span.code-attribute
|
||||
| end
|
||||
|
||||
|
||||
/! Second Content
|
||||
.row.margin-both
|
||||
.large-9.medium-9.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
.large-9.medium-9.columns data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
|
||||
h2 Automated testing, codified
|
||||
h2 Automated testing, codified
|
||||
p#icon-trigger
|
||||
| InSpec is an open-source testing framework for infrastructure with a human-readable language for specifying compliance, security and other policy requirements. Easily integrate automated tests that check for adherence to policy into any stage of your deployment pipeline.
|
||||
|
||||
|
@ -115,7 +128,7 @@ header.blue-gradient.margin-top-offset
|
|||
| 'compliance guide, section 2.1'
|
||||
br/
|
||||
br/
|
||||
span.code-attribute.indent describe
|
||||
span.code-attribute describe
|
||||
|
||||
| sshd_config
|
||||
|
||||
|
|
|
@ -12,56 +12,56 @@ nav#main-nav
|
|||
|
||||
ul.main-nav--links
|
||||
li.main-nav--link.hide-docs
|
||||
a href="/tutorials"
|
||||
span.main-nav--link-text Tutorials
|
||||
<a href="/tutorials" class="#{'t-purple' if current_page.url == '/tutorials'}" <span class="main-nav--link-text">Tutorials</span>
|
||||
</a>
|
||||
li.main-nav--link
|
||||
a href="/docs"
|
||||
span.main-nav--link-text.docs Docs
|
||||
<a href="/docs" class="#{'t-purple' if current_page.url == '/docs'}" <span class="main-nav--link-text">Docs</span>
|
||||
</a>
|
||||
span.fa.fa-angle-right.t-purple.toggle.mobile-show
|
||||
|
||||
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/cli.html"
|
||||
a href="/docs/reference/cli/"
|
||||
span.main-nav--link-text inspec executable
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/profiles.html"
|
||||
a href="/docs/reference/profiles/"
|
||||
span.main-nav--link-text Profiles
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/resources.html"
|
||||
a href="/docs/reference/resources/"
|
||||
span.main-nav--link-text Resources
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/matchers.html"
|
||||
a href="/docs/reference/matchers/"
|
||||
span.main-nav--link-text Matchers
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/dsl_inspec.html"
|
||||
a href="/docs/reference/dsl_inspec/"
|
||||
span.main-nav--link-text InSpec DSL
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/dsl_resource.html"
|
||||
a href="/docs/reference/dsl_resource/"
|
||||
span.main-nav--link-text Resource DSL
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/plugin_kitchen_inspec.html"
|
||||
a href="/docs/reference/plugin_kitchen_inspec/"
|
||||
span.main-nav--link-text kitchen-inspec
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/shell.html"
|
||||
a href="/docs/reference/shell/"
|
||||
span.main-nav--link-text inspec shell
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/ruby_usage.html"
|
||||
a href="/docs/reference/ruby_usage/"
|
||||
span.main-nav--link-text Ruby usage
|
||||
|
||||
|
||||
|
||||
li.main-nav--link.hide-docs
|
||||
a href="/community"
|
||||
span.main-nav--link-text Community
|
||||
<a href="/community" class="#{'t-purple' if current_page.url == '/community'}" <span class="main-nav--link-text">Community</span>
|
||||
</a>
|
||||
li.main-nav--link.hide-docs
|
||||
a href="https://github.com/chef/inspec"
|
||||
i.fa.fa-github-alt
|
||||
|
@ -72,3 +72,4 @@ nav#main-nav
|
|||
a.btn href="https://downloads.chef.io/inspec"
|
||||
i.fa.fa-cloud-download
|
||||
span.main-nav--link-text Download
|
||||
|
||||
|
|
|
@ -51,6 +51,16 @@ html
|
|||
$(window).enllax(); //initiate parallax on larger screens
|
||||
}
|
||||
|
||||
javascript:
|
||||
|
||||
//Code pop-up animation on homepage
|
||||
|
||||
$('.code-trigger').click(function() {
|
||||
$(this).toggleClass('turn-angle');
|
||||
$('.code-pop').slideToggle(500);
|
||||
});
|
||||
|
||||
|
||||
javascript:
|
||||
|
||||
//Animate HR on scroll
|
||||
|
|
|
@ -23,6 +23,14 @@ pre {
|
|||
background : $color_heading;
|
||||
}
|
||||
|
||||
// Container for pop-up code example
|
||||
|
||||
.code-pop {
|
||||
padding : $percent_sm/1.5;
|
||||
background : $color_heading;
|
||||
display:none; //Hide until click trigger
|
||||
}
|
||||
|
||||
|
||||
// Code Font Colors
|
||||
|
||||
|
@ -50,3 +58,40 @@ pre {
|
|||
padding-left : 1em;
|
||||
word-wrap : normal;
|
||||
}
|
||||
|
||||
//Animation for type ahead animation
|
||||
|
||||
.code-pop-animate { //Target
|
||||
font-family: Consolas,Liberation Mono,Courier,monospace;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto;
|
||||
-webkit-animation-delay: 6s;
|
||||
animation-delay: 6;
|
||||
-moz-animation-delay: 6s;
|
||||
animation: type 6s steps(41, end);
|
||||
-moz-animation: type 6s steps(41, end);
|
||||
-webkit-animation: type 6s steps(41, end);
|
||||
}
|
||||
|
||||
//Click event trigger {
|
||||
.code-trigger{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-animate { //typing animation for fode
|
||||
animation: type 6s steps(41, end);
|
||||
-moz-animation: type 6s steps(41, end);
|
||||
-webkit-animation: type 6s steps(41, end);
|
||||
}
|
||||
|
||||
|
||||
@keyframes type {
|
||||
from { width: 0; }
|
||||
to {width:100%;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes type {
|
||||
from { width: 0; }
|
||||
to {width:100%;}
|
||||
}
|
||||
|
|
|
@ -161,9 +161,9 @@ img.ball:nth-child(3) {
|
|||
// Warping Grid Animation//
|
||||
|
||||
.grid-animate {
|
||||
-moz-animation : g-animate 5s linear infinite both;
|
||||
-webkit-animation : g-animate 5s linear infinite both;
|
||||
animation : g-animate 5s linear infinite both;
|
||||
-moz-animation : g-animate 8s linear infinite both;
|
||||
-webkit-animation : g-animate 8s linear infinite both;
|
||||
animation : g-animate 8s linear infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes g-animate {
|
||||
|
@ -274,3 +274,13 @@ hr.first {
|
|||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
//Rotate 45 Degs
|
||||
|
||||
.turn-angle{
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
|
@ -100,18 +100,6 @@
|
|||
margin-left: 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color_gray;
|
||||
}
|
||||
|
||||
|
||||
a:hover, a.btn, a:active {
|
||||
color: $color_purple;
|
||||
}
|
||||
|
||||
a.btn:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@include nav-large {
|
||||
|
@ -130,6 +118,21 @@
|
|||
|
||||
//Hannah's Styles'
|
||||
|
||||
.main-nav--link {
|
||||
a {
|
||||
color: $color_gray;
|
||||
}
|
||||
|
||||
|
||||
a:hover, a.btn, a:active {
|
||||
color: $color_purple;
|
||||
}
|
||||
|
||||
a.btn:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 200;
|
||||
height: 80px;
|
||||
|
|
|
@ -116,5 +116,5 @@ hr {
|
|||
}
|
||||
|
||||
.t-purple {
|
||||
color : $color_purple;
|
||||
color : $color_purple!important;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue