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:
hannah-radish 2017-01-22 18:50:12 -08:00
parent d674d9ae86
commit 9bf72b4fa1
10 changed files with 3044 additions and 37 deletions

View file

@ -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

File diff suppressed because it is too large Load diff

View 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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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%;}
}

View file

@ -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);
}

View file

@ -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;

View file

@ -116,5 +116,5 @@ hr {
}
.t-purple {
color : $color_purple;
color : $color_purple!important;
}