diff --git a/.gitignore b/.gitignore
index 6e985a867..17bb232ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,7 @@ habitat/VERSION
habitat/results
/.ruby-gemset
/.ruby-version
+
+www/source/index.html.slim
+
+www/source/index.html.slim
diff --git a/www/config.rb b/www/config.rb
index ced52f01f..ad3d7bbfa 100644
--- a/www/config.rb
+++ b/www/config.rb
@@ -13,7 +13,7 @@ page '/*.json', layout: false
page '/*.txt', layout: false
# With alternative layout: we send the sidebar request to the default layout
-page 'docs/*', layout: :layout, locals: { sidebar_layout: 'docs' }
+page 'docs/*', layout: :docs, locals: { sidebar_layout: 'docs' }
# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/)
# proxy '/this-page-has-no-template.html', '/template-file.html', locals: {
diff --git a/www/data/docs_sidebar.yml b/www/data/docs_sidebar.yml
index 1c705a25d..5a4d6d23d 100644
--- a/www/data/docs_sidebar.yml
+++ b/www/data/docs_sidebar.yml
@@ -7,7 +7,7 @@ sidebar_links:
- title: Get InSpec
link: "https://downloads.chef.io/inspec"
- title: Tutorials
- link: "/docs/tutorials.html"
+ link: "/tutorials"
- title: InSpec and friends
link: "/docs/reference/inspec_and_friends.html"
- title: Reference
diff --git a/www/lib/sidebar_helpers.rb b/www/lib/sidebar_helpers.rb
index d9ca03ef6..6770c7b4e 100644
--- a/www/lib/sidebar_helpers.rb
+++ b/www/lib/sidebar_helpers.rb
@@ -12,7 +12,7 @@ module SidebarHelpers
end
def link_classes(current_url, item_link)
- 'is-active' if same_link?(current_url, item_link.link)
+ 't-purple' if same_link?(current_url, item_link.link)
end
def print_sub_links?(current_url, item_link)
diff --git a/www/source/community.html.slim b/www/source/community.html.slim
index 8d7d553ff..d9a835c2f 100644
--- a/www/source/community.html.slim
+++ b/www/source/community.html.slim
@@ -3,40 +3,81 @@ title: InSpec - Community
description: This is where you interact with the InSpec open source community - contribute to the project, provide feedback and ask questions of other community members.
---
+.row.margin-both-offset
+ .columns.large-6.medium-6
+
+ h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ | Inspec is better with friends.
+ br/
+ | Let’s build together.
+ hr.strict-left.margin-under
+ h3.clear
+
+ | Join us on Slack and get answers fast
+ P
+ | Is something unclear or are you just feeling stuck? We're here to help keep you moving. Chat with us on Slack, so we can help you keep moving.
+ p
+ | Sign in to slack or request an invite below:
+
+
+
+
+ .columns.large-6.medium-6.relative.mobile-hide
+ img.grid.strict-right src="/images/community/blue-web.svg" /
+ img.ball src="/images/community/glow-ball.png" /
+ img.ball.bright-animate src="/images/community/glow-ball.png" /
+ img.ball src="/images/community/glow-ball.png" /
+
.row
- .columns.large-10.large-offset-1
- img.hero--img src="/images/community/community-icon.png"
- h1.hero--heading InSpec Community
- h2.hero--subhead.text-center
- | Let's build together
-.icon-blocks.row
- .columns.medium-4.center
- img.icon-block--img src="/images/community/contribute-icon.png"
- h3.icon-block--heading Contribute to InSpec
- .columns.medium-4.center
- img.icon-block--img src="/images/community/get-icon.png"
- h3.icon-block--heading Get Answers Quickly
- .columns.medium-4.center
- img.icon-block--img src="/images/community/report-icon.png"
- h3.icon-block--heading Report Bugs and Request Features
-.icon-blocks.row
- .columns.medium-4
- p.icon-block--text
- | InSpec is an open source project created and supported by active and
- passionate users. If you would like to contribute, we would love to have you.
- .columns.medium-4
- p.icon-block--text
- | Is something unclear or are you just feeling stuck? We're here to
- help keep you moving. Chat with us on Slack, so we can help you keep
- moving.
- .columns.medium-4
- p.icon-block--text
- | We rely on your feedback to improve InSpec. Whether you found a bug
- or have a great idea for an improvement, join us on GitHub.
-.icon-blocks.row
- .columns.medium-4
- a.button.primary.block href="https://github.com/chef/inspec" Start Contributing
- .columns.medium-4
- a.button.primary.block href="https://community-slack.chef.io" Get Help
- .columns.medium-4
- a.button.primary.block href="https://github.com/chef/inspec/issues" Give Feedback
+ .icon.shadow
+ img src="/images/circ-arrow.svg" /
+.block-angl.blue-gradient.relative
+ .section.purp-shade
+ #particles-second
+ canvas.particles-js-canvas-el
+ .row.relative-top.padding-top-xl.padding-under
+ .large-6.medium-6.strict-center.column.margin-under-xs
+ .box-white.shadow
+ img.icon-art src="/images/community/contribute.svg" /
+ h3 Contribute to InSpec
+ p
+ | InSpec is an open source project created and supported by active and
+ passionate users. If you would like to contribute, we would love to have you.
+ br/
+ a.btn.margin-top-xs href="https://github.com/chef/inspec" Start Contributing
+ p
+
+ .large-6.medium-6.strict-center.column
+ .box-white.shadow
+ img.icon-art src="/images/community/bugs.svg" /
+ h3 Report Bugs and Request Features
+ p
+ | We rely on your feedback to improve InSpec.
Whether you found a bug
+ or have a great idea for an improvement, join us on GitHub.
+ br/
+ a.btn.margin-top-xs href="https://github.com/chef/inspec/issues" Give Feedback
+ p
+
+
+
+ //Old Twitter - Hannah
+ /.row
+ / .icon.shadow
+ / img src="/images/circ-arrow.svg" /
+ /.block-angl.blue-gradient
+ / .section.purp-shade
+ / .row.triangle-shade
+
+ / .large-7.medium-7.columns.margin-top-xl.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ / small.t-dk Inspec on Twitter
+ / h2.t-white
+ / | Latest from #inspec
+ / .row
+ / .large-12.medium-12.columns.margin-under
+ / .shadow
+ /
diff --git a/www/source/docs/index.html.slim b/www/source/docs/index.html.slim
index 3a93cf8de..35c1eca62 100644
--- a/www/source/docs/index.html.slim
+++ b/www/source/docs/index.html.slim
@@ -1,23 +1,28 @@
-h1 InSpec Documentation
+h2.margin-under-xs InSpec Documentation
p Welcome to the InSpec documentation! This is a reference guide for all available features and options.
p In the navigation, you will see 2 sections. The first provides a few links to get started and context around InSpec. The second section contains references to all elements of InSpec: The DSL, CLI, profiles, resources, and matchers.
-h2 Are you new to InSpec?
+h3.margin-top-xs Are you new to InSpec?
+
+hr.strict-left
+br
p If you're just getting started and want a quick introduction, then we recommend you start with the following items in the order listed.
.row
- .columns.medium-6.center
- a.button.try-demo href="#" Try InSpec demo
- p Complete a short interactive demo
- .columns.medium-6.center
- a.button.try-demo href="tutorials" Tutorials
- p Get your first hands-on experience
-
-h2 Contributing
-
-p This documentation is automatically generated from the InSpec repository and source code.
+ .columns.medium-6
+ .box-white-brdr.strict-center.
+ p Complete a short interactive demo
+ a.btn.try-demo href="#" Try the Demo
+ .columns.medium-6
+ .box-white-brdr.strict-center
+ p Get your first hands-on experience
+ a.btn href="tutorials" Tutorials
+h3.margin-top-xs Contributing
+hr.strict-left
+br
+p.clear This documentation is automatically generated from the InSpec repository and source code.
p To contribute, please have a look at the docs folder of the project.
diff --git a/www/source/docs/search.html.slim b/www/source/docs/search.html.slim
index 8e3396501..91cfc052a 100644
--- a/www/source/docs/search.html.slim
+++ b/www/source/docs/search.html.slim
@@ -2,18 +2,19 @@
title: Search InSpec Docs
---
-h2 Search the InSpec Documentation
+.row
+ h2.margin-under-xs- Search the InSpec Documentation
-javascript:
- // TODO: add the inspec search here
- (function() {
- var cx = '014746884379529974319:rvxyzhpu2us';
- var gcse = document.createElement('script');
- gcse.type = 'text/javascript';
- gcse.async = true;
- gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(gcse, s);
- })();
+ javascript:
+ // TODO: add the inspec search here
+ (function() {
+ var cx = '014746884379529974319:rvxyzhpu2us';
+ var gcse = document.createElement('script');
+ gcse.type = 'text/javascript';
+ gcse.async = true;
+ gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(gcse, s);
+ })();
-
+
diff --git a/www/source/images/circ-arrow.svg b/www/source/images/circ-arrow.svg
new file mode 100644
index 000000000..5e2a6ba79
--- /dev/null
+++ b/www/source/images/circ-arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/community/Contrinue.svg b/www/source/images/community/Contrinue.svg
new file mode 100644
index 000000000..4ee6ff33c
--- /dev/null
+++ b/www/source/images/community/Contrinue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/community/blue-web.svg b/www/source/images/community/blue-web.svg
new file mode 100644
index 000000000..86246683b
--- /dev/null
+++ b/www/source/images/community/blue-web.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/community/bugs.svg b/www/source/images/community/bugs.svg
new file mode 100644
index 000000000..10916d83b
--- /dev/null
+++ b/www/source/images/community/bugs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/community/contribute.svg b/www/source/images/community/contribute.svg
new file mode 100644
index 000000000..1ef3d751f
--- /dev/null
+++ b/www/source/images/community/contribute.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/community/glow-ball.png b/www/source/images/community/glow-ball.png
new file mode 100644
index 000000000..b7291de66
Binary files /dev/null and b/www/source/images/community/glow-ball.png differ
diff --git a/www/source/images/community/search.svg b/www/source/images/community/search.svg
new file mode 100644
index 000000000..d8802af0a
--- /dev/null
+++ b/www/source/images/community/search.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/hexagon.svg b/www/source/images/hexagon.svg
new file mode 100644
index 000000000..712a87cd1
--- /dev/null
+++ b/www/source/images/hexagon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/circ-arrow.svg b/www/source/images/home/circ-arrow.svg
new file mode 100644
index 000000000..5e2a6ba79
--- /dev/null
+++ b/www/source/images/home/circ-arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/circ-lock.svg b/www/source/images/home/circ-lock.svg
new file mode 100644
index 000000000..0e67711f5
--- /dev/null
+++ b/www/source/images/home/circ-lock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/code-1.png b/www/source/images/home/code-1.png
deleted file mode 100755
index 8a3f4d4dd..000000000
Binary files a/www/source/images/home/code-1.png and /dev/null differ
diff --git a/www/source/images/home/code-1.svg b/www/source/images/home/code-1.svg
deleted file mode 100755
index eeaed527c..000000000
--- a/www/source/images/home/code-1.svg
+++ /dev/null
@@ -1,12973 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-]>
-
diff --git a/www/source/images/home/code-2.png b/www/source/images/home/code-2.png
deleted file mode 100644
index 576d68f88..000000000
Binary files a/www/source/images/home/code-2.png and /dev/null differ
diff --git a/www/source/images/home/code-2.svg b/www/source/images/home/code-2.svg
deleted file mode 100644
index 46af6d549..000000000
--- a/www/source/images/home/code-2.svg
+++ /dev/null
@@ -1,759 +0,0 @@
-
-
-
diff --git a/www/source/images/home/diamond.png b/www/source/images/home/diamond.png
new file mode 100644
index 000000000..bfb4658d0
Binary files /dev/null and b/www/source/images/home/diamond.png differ
diff --git a/www/source/images/home/free-icon.png b/www/source/images/home/free-icon.png
deleted file mode 100755
index 802e04e93..000000000
Binary files a/www/source/images/home/free-icon.png and /dev/null differ
diff --git a/www/source/images/home/free.svg b/www/source/images/home/free.svg
new file mode 100644
index 000000000..fe5e48920
--- /dev/null
+++ b/www/source/images/home/free.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/fully-icon.png b/www/source/images/home/fully-icon.png
deleted file mode 100755
index 6ef580c88..000000000
Binary files a/www/source/images/home/fully-icon.png and /dev/null differ
diff --git a/www/source/images/home/heart.svg b/www/source/images/home/heart.svg
new file mode 100644
index 000000000..beed5fb17
--- /dev/null
+++ b/www/source/images/home/heart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/hero-code.gif b/www/source/images/home/hero-code.gif
deleted file mode 100755
index 0a1b1891d..000000000
Binary files a/www/source/images/home/hero-code.gif and /dev/null differ
diff --git a/www/source/images/home/hero.png b/www/source/images/home/hero.png
deleted file mode 100755
index 05b939f20..000000000
Binary files a/www/source/images/home/hero.png and /dev/null differ
diff --git a/www/source/images/home/language.svg b/www/source/images/home/language.svg
new file mode 100644
index 000000000..6ce84643e
--- /dev/null
+++ b/www/source/images/home/language.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/platform-icon.png b/www/source/images/home/platform-icon.png
deleted file mode 100755
index f3c1b2717..000000000
Binary files a/www/source/images/home/platform-icon.png and /dev/null differ
diff --git a/www/source/images/home/platform.svg b/www/source/images/home/platform.svg
new file mode 100644
index 000000000..408a17c8f
--- /dev/null
+++ b/www/source/images/home/platform.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/test-icon.png b/www/source/images/home/test-icon.png
deleted file mode 100755
index 81a322a98..000000000
Binary files a/www/source/images/home/test-icon.png and /dev/null differ
diff --git a/www/source/images/home/test.svg b/www/source/images/home/test.svg
new file mode 100644
index 000000000..4979bb382
--- /dev/null
+++ b/www/source/images/home/test.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/images/home/triangle-motif.png b/www/source/images/home/triangle-motif.png
new file mode 100644
index 000000000..ff914224a
Binary files /dev/null and b/www/source/images/home/triangle-motif.png differ
diff --git a/www/source/images/home/web.svg b/www/source/images/home/web.svg
new file mode 100644
index 000000000..77f685f85
--- /dev/null
+++ b/www/source/images/home/web.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/source/index.html.slim b/www/source/index.html.slim
index 6cf33b640..599f012eb 100644
--- a/www/source/index.html.slim
+++ b/www/source/index.html.slim
@@ -1,75 +1,205 @@
---
title: InSpec - Audit and Test Framework
---
-.row
- .columns.medium-12
- .home-hero
- img.home-hero--code src="/images/home/hero-code.gif" alt=""
- h2.main-subhead.text-center InSpec is compliance as code
+
+/! animated banner
+header.blue-gradient.margin-top-offset
+ .h-top.strict-center.purp-shade
+ h1.columns.t-white.strict-center data-enllax-ratio=".1" data-enllax-type="foreground" InSpec is compliance as code
+ img.grid-animate.strict-center style="opacity:0.8" src="/images/home/web.svg" /
+ /! diamond image
+ img.strict-center.bright-animate.3d-animate src="/images/home/diamond.png" /
+ /! canvas elements
+ #particles-js
+ canvas.particles-js-canvas-el /
+ /! style for callout icons
+ .row
+ .icon.shadow
+ img src="/images/circ-arrow.svg" /
+
+
+/! Second Content
+.row.margin-both
+ .large-9.medium-9.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ 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.
+
+/! Third Content
+#icon-trigger.row.strict-center.margin-under-xs
+ .large-12.columns
+ hr.first/
+ small FEATURES OF INSPEC
+ h2 InSpec is compliance by design
+ hr.first/
+/! images with text - grid of 4
+.row.strict-center.margin-under
+ .large-3.medium-3.columns.strict-center
+ img.floating.icon-art src="/images/home/platform.svg" /
+ h3 Platform Agnostic
p
- | InSpec is compliance as code – a human-readable language for automating
- the continuous testing and compliance auditing of your entire
- infrastructure. You can also use it to verify if your servers and
- applications are configured correctly.
- p.text-center.home-hero--buttons
- a.button.secondary href="https://downloads.chef.io/inspec" Download InSpec
- a.button.primary.try-demo href="#" Start the Demo
- hr.home-divider
- .icon-blocks.row
- .columns.large-3.small-6
- img.icon-block--img src="/images/home/platform-icon.png"
- h3.icon-block--heading Platform Agnostic
- p.icon-block--text
- | InSpec supports all major operating systems and many applications
- out of the box.
- .columns.large-3.small-6
- img.icon-block--img src="/images/home/test-icon.png"
- h3.icon-block--heading Test Locally or Remotely
- p.icon-block--text
- | InSpec provides a local agent, as well as full remote testing support.
- .columns.large-3.small-6
- img.icon-block--img src="/images/home/free-icon.png"
- h3.icon-block--heading Free to Run Anywhere
- p.icon-block--text
- | InSpec is a language that can easily express compliance as code, with the freedom to run anywhere.
- .columns.large-3.small-6
- img.icon-block--img src="/images/home/fully-icon.png"
- h3.icon-block--heading Fully Extensible Language
- p.icon-block--text
- | Easily extend the InSpec language to cover new operating systems,
- devices, or applications.
- hr.home-divider
- .code-snippet.row
- .columns.large-6
- img.code-snippet--img[src="/images/home/code-1.svg" onerror="this.src='/images/home/code-1.png'"
- alt="Code Snippet"]
- .columns.large-6.code-snippet--panel.first
- small.code-snippet--description
- strong Transform your compliance and security requirements into simple code.
- h3.code-snippet--heading Codify Agreements:
- p.code-snippet--text
- | Combine profiles and customize them with overlays. Pick controls
- and define exceptions as code.
- h3.code-snippet--heading Add Context to Your Tests:
- p.code-snippet--text Supports many fields like descriptions, tags, and impact.
- h3.code-snippet--heading Apply to all systems:
- p.code-snippet--text
- | Combine profiles and customize them with overlays. Pick controls
- and define exceptions as code.
- .code-snippet.row
- .columns.large-6
- img.code-snippet--img[src="/images/home/code-2.svg" onerror="this.src='/images/home/code-2.png'"
- alt="Code Snippet"]
- .columns.large-6.code-snippet--panel.second
- small.code-snippet--description
- strong Solve your infrastructure testing needs simply and efficiently.
- h3.code-snippet--heading Test the desired state:
- p.code-snippet--text Match your infrastructure to your expectations.
- h3.code-snippet--heading Use simple and expressive code:
- p.code-snippet--text These tests are easy to understand by anyone, reducing friction.
- h3.code-snippet--heading Test any system anywhere:
- p.code-snippet--text
- | Runs locally and remotely. Supports all major operating systems
- and configurations.
- h3.code-snippet--heading Extensible:
- p.code-snippet--text Easily create custom resources and share them.
+ | InSpec supports all major operating systems and many applications out of the box.
+ .large-3.medium-3.columns.strict-center
+ img.icon-art src="/images/home/free.svg" /
+ h3 Free to run anywhere
+ p
+ | InSpec is a language that can easily express compliance as code, with the freedom to run anywhere.
+ .large-3.medium-3.columns.strict-center
+ img.icon-art src="/images/home/test.svg" /
+ h3 Test locally or remotely
+ p
+ | InSpec provides a local agent, as well as full remote testing support.
+ .large-3.medium-3.columns.strict-center
+ img.icon-art src="/images/home/language.svg" /
+ h3 Extensible language
+ p
+ | Easily extend the InSpec language to cover new operating systems, devices, or applications.
+
+/! Fourth Content
+/! style for callout icons
+.row
+ .icon.shadow
+ img src="/images/circ-arrow.svg" /
+.block-angl.blue-gradient
+ .section.purp-shade
+
+ .row.relative-top
+ .large-7.medium-7.columns.margin-top-xl.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ small.t-dk Inspec for compliance
+ h2.t-white
+ | Transform your compliance and security requirements into simple code
+ #particles-second
+ canvas.particles-js-canvas-el
+ .row
+ .large-5.medium-5.columns.margin-under-xs
+
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Codify agreements
+ p.t-white
+ | Combine profiles and customize them with overlays. Pick controls and define exceptions as code.
+
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Add context to your tests
+ p.t-white
+ | Supports many fields like descriptions, tags, and impact.
+
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Apply to all systems
+ 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.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.mobile-hide Try the Demo
+ /! Next row
+ .row
+ .large-6.medium-6.columns.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ small.t-dk Inspec for infrastructure
+ h2.t-white
+ | Solve your infrastructure testing needs simply and efficiently
+ .row
+ .large-5.medium-5.columns.margin-under-xs
+
+ h3.t-white
+ i.fa.fa-angle-right.t-dk
+ | Test the desired state
+ p.t-white Match your infrastructure to your expectations.
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Use simple and expressive code
+ p.t-white
+ | These tests are easy to understand by anyone, reducing friction.
+
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Test any system anywhere
+ p.t-white
+ | Runs locally and remotely. Supports all major operating systems and configurations.
+
+ h3.t-white
+
+ i.fa.fa-angle-right.t-dk
+ | Extensible
+ p.t-white
+ | Easily create custom resources and share them.
+ /! code
+ .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.mobile-hide Try the Demo
+
+
diff --git a/www/source/javascripts/all.js b/www/source/javascripts/all.js
index edae1808d..9b53b1c3e 100644
--- a/www/source/javascripts/all.js
+++ b/www/source/javascripts/all.js
@@ -1,3 +1,8 @@
//= require vendor/jquery.min
//= require vendor/foundation.min
-//= require nav
\ No newline at end of file
+//= require jquery.enllax.min
+//= require jquery.sticky
+//= require nav
+//= require particles
+//= require app
+//= require slackform
diff --git a/www/source/javascripts/app.js b/www/source/javascripts/app.js
new file mode 100755
index 000000000..45d136da2
--- /dev/null
+++ b/www/source/javascripts/app.js
@@ -0,0 +1,254 @@
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+
+particlesJS.load('particles-js', 'particles-second' , 'particles.json', function() {
+ console.log('particles.js loaded - callback');
+});
+
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-second',
+
+{
+ "particles": {
+ "number": {
+ "value": 20,
+ "density": {
+ "enable": true,
+ "value_area": 500
+ }
+ },
+ "color": {
+ "value": "#ffffff"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#000000"
+ },
+ "polygon": {
+ "nb_sides": 3
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.5,
+ "random": false,
+ "anim": {
+ "enable": false,
+ "speed": 4,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 3,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 40,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": true,
+ "distance": 150,
+ "color": "#ffffff",
+ "opacity": 0.6,
+ "width": 1
+ },
+ "move": {
+ "enable": true,
+ "speed": 4,
+ "direction": "none",
+ "random": true,
+ "straight": false,
+ "out_mode": "out",
+ "attract": {
+ "enable": false,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": false,
+ "mode": "repulse"
+ },
+ "onclick": {
+ "enable": false,
+ "mode": "repulse"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 400,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 10,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 300
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true,
+ "config_demo": {
+ "hide_card": false,
+ "background_color": "#b61924",
+ "background_image": "",
+ "background_position": "50% 50%",
+ "background_repeat": "no-repeat",
+ "background_size": "cover"
+ }
+}
+
+);
+
+particlesJS('particles-js',
+
+ {
+ "particles": {
+ "number": {
+ "value": 31,
+ "density": {
+ "enable": true,
+ "value_area": 500
+ }
+ },
+ "color": {
+ "value": "#ffffff"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#000000"
+ },
+ "polygon": {
+ "nb_sides": 3
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.5,
+ "random": false,
+ "anim": {
+ "enable": false,
+ "speed": 4,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 3,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 40,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": false,
+ "distance": 150,
+ "color": "#ffffff",
+ "opacity": 0.3,
+ "width": 1
+ },
+ "move": {
+ "enable": true,
+ "speed": 4,
+ "direction": "none",
+ "random": true,
+ "straight": false,
+ "out_mode": "out",
+ "attract": {
+ "enable": false,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": true,
+ "mode": "repulse"
+ },
+ "onclick": {
+ "enable": true,
+ "mode": "repulse"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 400,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 10,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 150
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true,
+ "config_demo": {
+ "hide_card": false,
+ "background_color": "#b61924",
+ "background_image": "",
+ "background_position": "50% 50%",
+ "background_repeat": "no-repeat",
+ "background_size": "cover"
+ }
+ }
+
+);
diff --git a/www/source/javascripts/jquery.drawsvg.js b/www/source/javascripts/jquery.drawsvg.js
new file mode 100755
index 000000000..a19e8d085
--- /dev/null
+++ b/www/source/javascripts/jquery.drawsvg.js
@@ -0,0 +1,352 @@
+
+window.addEventListener("load", windowLoadHandler, false);
+var sphereRad = 280;
+var radius_sp=1;
+//for debug messages
+var Debugger = function() { };
+Debugger.log = function(message) {
+ try {
+ console.log(message);
+ }
+ catch (exception) {
+ return;
+ }
+}
+
+function windowLoadHandler() {
+ canvasApp();
+}
+
+function canvasSupport() {
+ return Modernizr.canvas;
+}
+
+function canvasApp() {
+ if (!canvasSupport()) {
+ return;
+ }
+
+ var theCanvas = document.getElementById("canvasOne");
+ var context = theCanvas.getContext("2d");
+
+ var displayWidth;
+ var displayHeight;
+ var timer;
+ var wait;
+ var count;
+ var numToAddEachFrame;
+ var particleList;
+ var recycleBin;
+ var particleAlpha;
+ var r,g,b;
+ var fLen;
+ var m;
+ var projCenterX;
+ var projCenterY;
+ var zMax;
+ var turnAngle;
+ var turnSpeed;
+ var sphereCenterX, sphereCenterY, sphereCenterZ;
+ var particleRad;
+ var zeroAlphaDepth;
+ var randAccelX, randAccelY, randAccelZ;
+ var gravity;
+ var rgbString;
+ //we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame.
+ var p;
+ var outsideTest;
+ var nextParticle;
+ var sinAngle;
+ var cosAngle;
+ var rotX, rotZ;
+ var depthAlphaFactor;
+ var i;
+ var theta, phi;
+ var x0, y0, z0;
+
+ init();
+
+ function init() {
+ wait = 1;
+ count = wait - 1;
+ numToAddEachFrame = 8;
+
+ //particle color
+ r = 70;
+ g = 255;
+ b = 140;
+
+ rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.
+ particleAlpha = 1; //maximum alpha
+
+ displayWidth = theCanvas.width;
+ displayHeight = theCanvas.height;
+
+ fLen = 320; //represents the distance from the viewer to z=0 depth.
+
+ //projection center coordinates sets location of origin
+ projCenterX = displayWidth/2;
+ projCenterY = displayHeight/2;
+
+ //we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
+ zMax = fLen-2;
+
+ particleList = {};
+ recycleBin = {};
+
+ //random acceleration factors - causes some random motion
+ randAccelX = 0.1;
+ randAccelY = 0.1;
+ randAccelZ = 0.1;
+
+ gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.
+
+ particleRad = 2.5;
+
+ sphereCenterX = 0;
+ sphereCenterY = 0;
+ sphereCenterZ = -3 - sphereRad;
+
+ //alpha values will lessen as particles move further back, causing depth-based darkening:
+ zeroAlphaDepth = -750;
+
+ turnSpeed = 2*Math.PI/1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames).
+ turnAngle = 0; //initial angle
+
+ timer = setInterval(onTimer, 10/24);
+ }
+
+ function onTimer() {
+ //if enough time has elapsed, we will add new particles.
+ count++;
+ if (count >= wait) {
+
+ count = 0;
+ for (i = 0; i < numToAddEachFrame; i++) {
+ theta = Math.random()*2*Math.PI;
+ phi = Math.acos(Math.random()*2-1);
+ x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
+ y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
+ z0 = sphereRad*Math.cos(phi);
+
+ //We use the addParticle function to add a new particle. The parameters set the position and velocity components.
+ //Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
+ //it becomes unstuck).
+ var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002*x0, 0.002*y0, 0.002*z0);
+
+ //we set some "envelope" parameters which will control the evolving alpha of the particles.
+ p.attack = 50;
+ p.hold = 50;
+ p.decay = 100;
+ p.initValue = 0;
+ p.holdValue = particleAlpha;
+ p.lastValue = 0;
+
+ //the particle will be stuck in one place until this time has elapsed:
+ p.stuckTime = 90 + Math.random()*20;
+
+ p.accelX = 0;
+ p.accelY = gravity;
+ p.accelZ = 0;
+ }
+ }
+
+ //update viewing angle
+ turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
+ sinAngle = Math.sin(turnAngle);
+ cosAngle = Math.cos(turnAngle);
+
+ //background fill
+ context.fillStyle = "rgba(255,255,255, 0)";
+ context.fillRect(0,0,displayWidth,displayHeight);
+
+ //update and draw particles
+ p = particleList.first;
+ while (p != null) {
+ //before list is altered record next particle
+ nextParticle = p.next;
+
+ //update age
+ p.age++;
+
+ //if the particle is past its "stuck" time, it will begin to move.
+ if (p.age > p.stuckTime) {
+ p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
+ p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
+ p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);
+
+ p.x += p.velX;
+ p.y += p.velY;
+ p.z += p.velZ;
+ }
+
+ /*
+ We are doing two things here to calculate display coordinates.
+ The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
+ x and z (but the y coordinate will not change).
+ Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
+ */
+ rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
+ rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
+ m =radius_sp* fLen/(fLen - rotZ);
+ p.projX = rotX*m + projCenterX;
+ p.projY = p.y*m + projCenterY;
+
+ //update alpha according to envelope parameters.
+ if (p.age < p.attack+p.hold+p.decay) {
+ if (p.age < p.attack) {
+ p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
+ }
+ else if (p.age < p.attack+p.hold) {
+ p.alpha = p.holdValue;
+ }
+ else if (p.age < p.attack+p.hold+p.decay) {
+ p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
+ }
+ }
+ else {
+ p.dead = true;
+ }
+
+ //see if the particle is still within the viewable range.
+ if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
+ outsideTest = true;
+ }
+ else {
+ outsideTest = false;
+ }
+
+ if (outsideTest||p.dead) {
+ recycle(p);
+ }
+
+ else {
+ //depth-dependent darkening
+ depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
+ depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
+ context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";
+
+ //draw
+ context.beginPath();
+ context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);
+ context.closePath();
+ context.fill();
+ }
+
+ p = nextParticle;
+ }
+ }
+
+ function addParticle(x0,y0,z0,vx0,vy0,vz0) {
+ var newParticle;
+ var color;
+
+ //check recycle bin for available drop:
+ if (recycleBin.first != null) {
+ newParticle = recycleBin.first;
+ //remove from bin
+ if (newParticle.next != null) {
+ recycleBin.first = newParticle.next;
+ newParticle.next.prev = null;
+ }
+ else {
+ recycleBin.first = null;
+ }
+ }
+ //if the recycle bin is empty, create a new particle (a new ampty object):
+ else {
+ newParticle = {};
+ }
+
+ //add to beginning of particle list
+ if (particleList.first == null) {
+ particleList.first = newParticle;
+ newParticle.prev = null;
+ newParticle.next = null;
+ }
+ else {
+ newParticle.next = particleList.first;
+ particleList.first.prev = newParticle;
+ particleList.first = newParticle;
+ newParticle.prev = null;
+ }
+
+ //initialize
+ newParticle.x = x0;
+ newParticle.y = y0;
+ newParticle.z = z0;
+ newParticle.velX = vx0;
+ newParticle.velY = vy0;
+ newParticle.velZ = vz0;
+ newParticle.age = 0;
+ newParticle.dead = false;
+ if (Math.random() < 0.5) {
+ newParticle.right = true;
+ }
+ else {
+ newParticle.right = false;
+ }
+ return newParticle;
+ }
+
+ function recycle(p) {
+ //remove from particleList
+ if (particleList.first == p) {
+ if (p.next != null) {
+ p.next.prev = null;
+ particleList.first = p.next;
+ }
+ else {
+ particleList.first = null;
+ }
+ }
+ else {
+ if (p.next == null) {
+ p.prev.next = null;
+ }
+ else {
+ p.prev.next = p.next;
+ p.next.prev = p.prev;
+ }
+ }
+ //add to recycle bin
+ if (recycleBin.first == null) {
+ recycleBin.first = p;
+ p.prev = null;
+ p.next = null;
+ }
+ else {
+ p.next = recycleBin.first;
+ recycleBin.first.prev = p;
+ recycleBin.first = p;
+ p.prev = null;
+ }
+ }
+}
+
+
+$(function() {
+ $( "#slider-range" ).slider({
+ range:false,
+ min: 20,
+ max: 500,
+ value: 280,
+ slide: function( event, ui ) {
+ console.log(ui.value);
+ sphereRad = ui.value;
+ }
+ });
+ });
+
+$(function() {
+ $( "#slider-test" ).slider({
+ range:false,
+ min: 1.0,
+ max: 2.0,
+ value: 1,
+ step:0.01,
+ slide: function( event, ui ) {
+ radius_sp = ui.value;
+ }
+ });
+ });
diff --git a/www/source/javascripts/jquery.enllax.min.js b/www/source/javascripts/jquery.enllax.min.js
new file mode 100755
index 000000000..8e3a19888
--- /dev/null
+++ b/www/source/javascripts/jquery.enllax.min.js
@@ -0,0 +1,2 @@
+/* jQuery.enllax.js - v1.1.0 | copyright 2015, MMK Jony | https://github.com/mmkjony/enllax.js | released under the MIT license */
+!function(t){"use strict";t.fn.enllax=function(r){var a=t(window).height(),n=t(document).height(),o=t.extend({ratio:0,type:"background",direction:"vertical"},r),e=t("[data-enllax-ratio]");e.each(function(){var r,e,s,i=t(this),c=i.offset().top,l=i.outerHeight(),p=i.data("enllax-ratio"),d=i.data("enllax-type"),x=i.data("enllax-direction");r=p?p:o.ratio,e=d?d:o.type,s=x?x:o.direction;var f=Math.round(c*r),u=Math.round((c-a/2+l)*r);"background"==e?"vertical"==s?i.css({"background-position":"center "+-f+"px"}):"horizontal"==s&&i.css({"background-position":-f+"px center"}):"foreground"==e&&("vertical"==s?i.css({"-webkit-transform":"translateY("+u+"px)","-moz-transform":"translateY("+u+"px)",transform:"translateY("+u+"px)"}):"horizontal"==s&&i.css({"-webkit-transform":"translateX("+u+"px)","-moz-transform":"translateX("+u+"px)",transform:"translateX("+u+"px)"})),t(window).on("scroll",function(){var o=t(this).scrollTop();f=Math.round((c-o)*r),u=Math.round((c-a/2+l-o)*r),"background"==e?"vertical"==s?i.css({"background-position":"center "+-f+"px"}):"horizontal"==s&&i.css({"background-position":-f+"px center"}):"foreground"==e&&n>o&&("vertical"==s?i.css({"-webkit-transform":"translateY("+u+"px)","-moz-transform":"translateY("+u+"px)",transform:"translateY("+u+"px)"}):"horizontal"==s&&i.css({"-webkit-transform":"translateX("+u+"px)","-moz-transform":"translateX("+u+"px)",transform:"translateX("+u+"px)"}))})})}}(jQuery);
diff --git a/www/source/javascripts/jquery.slicknav.min.js b/www/source/javascripts/jquery.slicknav.min.js
new file mode 100755
index 000000000..598cbcb93
--- /dev/null
+++ b/www/source/javascripts/jquery.slicknav.min.js
@@ -0,0 +1,6 @@
+/*!
+ * SlickNav Responsive Mobile Menu v1.0.10
+ * (c) 2016 Josh Cope
+ * licensed under MIT
+ */
+!function(e,t,n){function a(t,n){this.element=t,this.settings=e.extend({},i,n),this.settings.duplicate||n.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",animations:"jquery",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",o="slicknav",l={DOWN:40,ENTER:13,ESCAPE:27,LEFT:37,RIGHT:39,SPACE:32,TAB:9,UP:38};a.prototype.init=function(){var n,a,i=this,s=e(this.element),r=this.settings;if(r.duplicate?i.mobileNav=s.clone():i.mobileNav=s,r.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("id")})),r.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("class")})),r.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("style")})),n=o+"_icon",""===r.label&&(n+=" "+o+"_no-text"),"a"==r.parentTag&&(r.parentTag='a href="#"'),i.mobileNav.attr("class",o+"_nav"),a=e(''),""!==r.brand){var c=e(''+r.brand+"
");e(a).append(c)}i.btn=e(["<"+r.parentTag+' aria-haspopup="true" role="button" tabindex="0" class="'+o+"_btn "+o+'_collapsed">','",'','','','',"",""].join("")),e(a).append(i.btn),""!==r.appendTo?e(r.appendTo).append(a):e(r.prependTo).prepend(a),a.append(i.mobileNav);var p=i.mobileNav.find("li");e(p).each(function(){var t=e(this),n={};if(n.children=t.children("ul").attr("role","menu"),t.data("menu",n),n.children.length>0){var a=t.contents(),s=!1,l=[];e(a).each(function(){return e(this).is("ul")?!1:(l.push(this),void(e(this).is("a")&&(s=!0)))});var c=e("<"+r.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+o+'_item"/>');if(r.allowParentLinks&&!r.nestedParentLinks&&s)e(l).wrapAll('').parent();else{var p=e(l).wrapAll(c).parent();p.addClass(o+"_row")}r.showChildren?t.addClass(o+"_open"):t.addClass(o+"_collapsed"),t.addClass(o+"_parent");var d=e(''+(r.showChildren?r.openedSymbol:r.closedSymbol)+"");r.allowParentLinks&&!r.nestedParentLinks&&s&&(d=d.wrap(c).parent()),e(l).last().after(d)}else 0===t.children().length&&t.addClass(o+"_txtnode");t.children("a").attr("role","menuitem").click(function(t){r.closeOnClick&&!e(t.target).parent().closest("li").hasClass(o+"_parent")&&e(i.btn).click()}),r.closeOnClick&&r.allowParentLinks&&(t.children("a").children("a").click(function(t){e(i.btn).click()}),t.find("."+o+"_parent-link a:not(."+o+"_item)").click(function(t){e(i.btn).click()}))}),e(p).each(function(){var t=e(this).data("menu");r.showChildren||i._visibilityToggle(t.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(t).mousedown(function(){i._outlines(!1)}),e(t).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+o+"_item",function(t){t.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(t){var n=t||event;switch(n.keyCode){case l.ENTER:case l.SPACE:case l.DOWN:t.preventDefault(),n.keyCode===l.DOWN&&e(i.btn).hasClass(o+"_open")||i._menuToggle(),e(i.btn).next().find('[role="menuitem"]').first().focus()}}),i.mobileNav.on("keydown","."+o+"_item",function(t){var n=t||event;switch(n.keyCode){case l.ENTER:t.preventDefault(),i._itemClick(e(t.target));break;case l.RIGHT:t.preventDefault(),e(t.target).parent().hasClass(o+"_collapsed")&&i._itemClick(e(t.target)),e(t.target).next().find('[role="menuitem"]').first().focus()}}),i.mobileNav.on("keydown",'[role="menuitem"]',function(t){var n=t||event;switch(n.keyCode){case l.DOWN:t.preventDefault();var a=e(t.target).parent().parent().children().children('[role="menuitem"]:visible'),s=a.index(t.target),r=s+1;a.length<=r&&(r=0);var c=a.eq(r);c.focus();break;case l.UP:t.preventDefault();var a=e(t.target).parent().parent().children().children('[role="menuitem"]:visible'),s=a.index(t.target),c=a.eq(s-1);c.focus();break;case l.LEFT:if(t.preventDefault(),e(t.target).parent().parent().parent().hasClass(o+"_open")){var p=e(t.target).parent().parent().prev();p.focus(),i._itemClick(p)}else e(t.target).parent().parent().hasClass(o+"_nav")&&(i._menuToggle(),e(i.btn).focus());break;case l.ESCAPE:t.preventDefault(),i._menuToggle(),e(i.btn).focus()}}),r.allowParentLinks&&r.nestedParentLinks&&e("."+o+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var t=this,n=t.btn,a=t.mobileNav;n.hasClass(o+"_collapsed")?(n.removeClass(o+"_collapsed"),n.addClass(o+"_open")):(n.removeClass(o+"_open"),n.addClass(o+"_collapsed")),n.addClass(o+"_animating"),t._visibilityToggle(a,n.parent(),!0,n)},a.prototype._itemClick=function(e){var t=this,n=t.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+o+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(o+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(o+"_collapsed")?(a.arrow.html(n.openedSymbol),a.parent.removeClass(o+"_collapsed"),a.parent.addClass(o+"_open"),a.parent.addClass(o+"_animating"),t._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(n.closedSymbol),a.parent.addClass(o+"_collapsed"),a.parent.removeClass(o+"_open"),a.parent.addClass(o+"_animating"),t._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(t,n,a,i,s){function l(t,n){e(t).removeClass(o+"_animating"),e(n).removeClass(o+"_animating"),s||p.afterOpen(t)}function r(n,a){t.attr("aria-hidden","true"),d.attr("tabindex","-1"),c._setVisAttr(t,!0),t.hide(),e(n).removeClass(o+"_animating"),e(a).removeClass(o+"_animating"),s?"init"==n&&p.init():p.afterClose(n)}var c=this,p=c.settings,d=c._getActionItems(t),u=0;a&&(u=p.duration),t.hasClass(o+"_hidden")?(t.removeClass(o+"_hidden"),s||p.beforeOpen(i),"jquery"===p.animations?t.stop(!0,!0).slideDown(u,p.easingOpen,function(){l(i,n)}):"velocity"===p.animations&&t.velocity("finish").velocity("slideDown",{duration:u,easing:p.easingOpen,complete:function(){l(i,n)}}),t.attr("aria-hidden","false"),d.attr("tabindex","0"),c._setVisAttr(t,!1)):(t.addClass(o+"_hidden"),s||p.beforeClose(i),"jquery"===p.animations?t.stop(!0,!0).slideUp(u,this.settings.easingClose,function(){r(i,n)}):"velocity"===p.animations&&t.velocity("finish").velocity("slideUp",{duration:u,easing:p.easingClose,complete:function(){r(i,n)}}))},a.prototype._setVisAttr=function(t,n){var a=this,i=t.children("li").children("ul").not("."+o+"_hidden");n?i.each(function(){var t=e(this);t.attr("aria-hidden","true");var i=a._getActionItems(t);i.attr("tabindex","-1"),a._setVisAttr(t,n)}):i.each(function(){var t=e(this);t.attr("aria-hidden","false");var i=a._getActionItems(t);i.attr("tabindex","0"),a._setVisAttr(t,n)})},a.prototype._getActionItems=function(e){var t=e.data("menu");if(!t){t={};var n=e.children("li"),a=n.find("a");t.links=a.add(n.find("."+o+"_item")),e.data("menu",t)}return t.links},a.prototype._outlines=function(t){t?e("."+o+"_item, ."+o+"_btn").css("outline",""):e("."+o+"_item, ."+o+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(o+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(o+"_open")&&e._menuToggle()},e.fn[s]=function(t){var n=arguments;if(void 0===t||"object"==typeof t)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var i;return this.each(function(){var o=e.data(this,"plugin_"+s);o instanceof a&&"function"==typeof o[t]&&(i=o[t].apply(o,Array.prototype.slice.call(n,1)))}),void 0!==i?i:this}}}(jQuery,document,window);
\ No newline at end of file
diff --git a/www/source/javascripts/jquery.sticky.js b/www/source/javascripts/jquery.sticky.js
new file mode 100755
index 000000000..65a0988bf
--- /dev/null
+++ b/www/source/javascripts/jquery.sticky.js
@@ -0,0 +1,9 @@
+/*
+ Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
+*/
+(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
+if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b(""))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),100)||0)-q,
+u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),eb&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"100px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
+a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
+y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n .particles-js-canvas-el');
+
+ /* particles.js variables with default values */
+ this.pJS = {
+ canvas: {
+ el: canvas_el,
+ w: canvas_el.offsetWidth,
+ h: canvas_el.offsetHeight
+ },
+ particles: {
+ number: {
+ value: 400,
+ density: {
+ enable: true,
+ value_area: 800
+ }
+ },
+ color: {
+ value: '#fff'
+ },
+ shape: {
+ type: 'circle',
+ stroke: {
+ width: 0,
+ color: '#ff0000'
+ },
+ polygon: {
+ nb_sides: 5
+ },
+ image: {
+ src: '',
+ width: 100,
+ height: 100
+ }
+ },
+ opacity: {
+ value: 1,
+ random: false,
+ anim: {
+ enable: false,
+ speed: 2,
+ opacity_min: 0,
+ sync: false
+ }
+ },
+ size: {
+ value: 20,
+ random: false,
+ anim: {
+ enable: false,
+ speed: 20,
+ size_min: 0,
+ sync: false
+ }
+ },
+ line_linked: {
+ enable: true,
+ distance: 100,
+ color: '#fff',
+ opacity: 1,
+ width: 1
+ },
+ move: {
+ enable: true,
+ speed: 2,
+ direction: 'none',
+ random: false,
+ straight: false,
+ out_mode: 'out',
+ bounce: false,
+ attract: {
+ enable: false,
+ rotateX: 3000,
+ rotateY: 3000
+ }
+ },
+ array: []
+ },
+ interactivity: {
+ detect_on: 'canvas',
+ events: {
+ onhover: {
+ enable: true,
+ mode: 'grab'
+ },
+ onclick: {
+ enable: true,
+ mode: 'push'
+ },
+ resize: true
+ },
+ modes: {
+ grab:{
+ distance: 100,
+ line_linked:{
+ opacity: 1
+ }
+ },
+ bubble:{
+ distance: 200,
+ size: 80,
+ duration: 0.4
+ },
+ repulse:{
+ distance: 200,
+ duration: 0.4
+ },
+ push:{
+ particles_nb: 4
+ },
+ remove:{
+ particles_nb: 2
+ }
+ },
+ mouse:{}
+ },
+ retina_detect: false,
+ fn: {
+ interact: {},
+ modes: {},
+ vendors:{}
+ },
+ tmp: {}
+ };
+
+ var pJS = this.pJS;
+
+ /* params settings */
+ if(params){
+ Object.deepExtend(pJS, params);
+ }
+
+ pJS.tmp.obj = {
+ size_value: pJS.particles.size.value,
+ size_anim_speed: pJS.particles.size.anim.speed,
+ move_speed: pJS.particles.move.speed,
+ line_linked_distance: pJS.particles.line_linked.distance,
+ line_linked_width: pJS.particles.line_linked.width,
+ mode_grab_distance: pJS.interactivity.modes.grab.distance,
+ mode_bubble_distance: pJS.interactivity.modes.bubble.distance,
+ mode_bubble_size: pJS.interactivity.modes.bubble.size,
+ mode_repulse_distance: pJS.interactivity.modes.repulse.distance
+ };
+
+
+ pJS.fn.retinaInit = function(){
+
+ if(pJS.retina_detect && window.devicePixelRatio > 1){
+ pJS.canvas.pxratio = window.devicePixelRatio;
+ pJS.tmp.retina = true;
+ }
+ else{
+ pJS.canvas.pxratio = 1;
+ pJS.tmp.retina = false;
+ }
+
+ pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
+ pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
+
+ pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;
+ pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;
+ pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;
+ pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;
+ pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;
+ pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;
+ pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;
+ pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;
+ pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;
+
+ };
+
+
+
+ /* ---------- pJS functions - canvas ------------ */
+
+ pJS.fn.canvasInit = function(){
+ pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
+ };
+
+ pJS.fn.canvasSize = function(){
+
+ pJS.canvas.el.width = pJS.canvas.w;
+ pJS.canvas.el.height = pJS.canvas.h;
+
+ if(pJS && pJS.interactivity.events.resize){
+
+ window.addEventListener('resize', function(){
+
+ pJS.canvas.w = pJS.canvas.el.offsetWidth;
+ pJS.canvas.h = pJS.canvas.el.offsetHeight;
+
+ /* resize canvas */
+ if(pJS.tmp.retina){
+ pJS.canvas.w *= pJS.canvas.pxratio;
+ pJS.canvas.h *= pJS.canvas.pxratio;
+ }
+
+ pJS.canvas.el.width = pJS.canvas.w;
+ pJS.canvas.el.height = pJS.canvas.h;
+
+ /* repaint canvas on anim disabled */
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesEmpty();
+ pJS.fn.particlesCreate();
+ pJS.fn.particlesDraw();
+ pJS.fn.vendors.densityAutoParticles();
+ }
+
+ /* density particles enabled */
+ pJS.fn.vendors.densityAutoParticles();
+
+ });
+
+ }
+
+ };
+
+
+ pJS.fn.canvasPaint = function(){
+ pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+ };
+
+ pJS.fn.canvasClear = function(){
+ pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+ };
+
+
+ /* --------- pJS functions - particles ----------- */
+
+ pJS.fn.particle = function(color, opacity, position){
+
+ /* size */
+ this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;
+ if(pJS.particles.size.anim.enable){
+ this.size_status = false;
+ this.vs = pJS.particles.size.anim.speed / 100;
+ if(!pJS.particles.size.anim.sync){
+ this.vs = this.vs * Math.random();
+ }
+ }
+
+ /* position */
+ this.x = position ? position.x : Math.random() * pJS.canvas.w;
+ this.y = position ? position.y : Math.random() * pJS.canvas.h;
+
+ /* check position - into the canvas */
+ if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius;
+ else if(this.x < this.radius*2) this.x = this.x + this.radius;
+ if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;
+ else if(this.y < this.radius*2) this.y = this.y + this.radius;
+
+ /* check position - avoid overlap */
+ if(pJS.particles.move.bounce){
+ pJS.fn.vendors.checkOverlap(this, position);
+ }
+
+ /* color */
+ this.color = {};
+ if(typeof(color.value) == 'object'){
+
+ if(color.value instanceof Array){
+ var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
+ this.color.rgb = hexToRgb(color_selected);
+ }else{
+ if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){
+ this.color.rgb = {
+ r: color.value.r,
+ g: color.value.g,
+ b: color.value.b
+ }
+ }
+ if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){
+ this.color.hsl = {
+ h: color.value.h,
+ s: color.value.s,
+ l: color.value.l
+ }
+ }
+ }
+
+ }
+ else if(color.value == 'random'){
+ this.color.rgb = {
+ r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
+ g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
+ b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
+ }
+ }
+ else if(typeof(color.value) == 'string'){
+ this.color = color;
+ this.color.rgb = hexToRgb(this.color.value);
+ }
+
+ /* opacity */
+ this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;
+ if(pJS.particles.opacity.anim.enable){
+ this.opacity_status = false;
+ this.vo = pJS.particles.opacity.anim.speed / 100;
+ if(!pJS.particles.opacity.anim.sync){
+ this.vo = this.vo * Math.random();
+ }
+ }
+
+ /* animation - velocity for speed */
+ var velbase = {}
+ switch(pJS.particles.move.direction){
+ case 'top':
+ velbase = { x:0, y:-1 };
+ break;
+ case 'top-right':
+ velbase = { x:0.5, y:-0.5 };
+ break;
+ case 'right':
+ velbase = { x:1, y:-0 };
+ break;
+ case 'bottom-right':
+ velbase = { x:0.5, y:0.5 };
+ break;
+ case 'bottom':
+ velbase = { x:0, y:1 };
+ break;
+ case 'bottom-left':
+ velbase = { x:-0.5, y:1 };
+ break;
+ case 'left':
+ velbase = { x:-1, y:0 };
+ break;
+ case 'top-left':
+ velbase = { x:-0.5, y:-0.5 };
+ break;
+ default:
+ velbase = { x:0, y:0 };
+ break;
+ }
+
+ if(pJS.particles.move.straight){
+ this.vx = velbase.x;
+ this.vy = velbase.y;
+ if(pJS.particles.move.random){
+ this.vx = this.vx * (Math.random());
+ this.vy = this.vy * (Math.random());
+ }
+ }else{
+ this.vx = velbase.x + Math.random()-0.5;
+ this.vy = velbase.y + Math.random()-0.5;
+ }
+
+ // var theta = 2.0 * Math.PI * Math.random();
+ // this.vx = Math.cos(theta);
+ // this.vy = Math.sin(theta);
+
+ this.vx_i = this.vx;
+ this.vy_i = this.vy;
+
+
+
+ /* if shape is image */
+
+ var shape_type = pJS.particles.shape.type;
+ if(typeof(shape_type) == 'object'){
+ if(shape_type instanceof Array){
+ var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];
+ this.shape = shape_selected;
+ }
+ }else{
+ this.shape = shape_type;
+ }
+
+ if(this.shape == 'image'){
+ var sh = pJS.particles.shape;
+ this.img = {
+ src: sh.image.src,
+ ratio: sh.image.width / sh.image.height
+ }
+ if(!this.img.ratio) this.img.ratio = 1;
+ if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){
+ pJS.fn.vendors.createSvgImg(this);
+ if(pJS.tmp.pushing){
+ this.img.loaded = false;
+ }
+ }
+ }
+
+
+
+ };
+
+
+ pJS.fn.particle.prototype.draw = function() {
+
+ var p = this;
+
+ if(p.radius_bubble != undefined){
+ var radius = p.radius_bubble;
+ }else{
+ var radius = p.radius;
+ }
+
+ if(p.opacity_bubble != undefined){
+ var opacity = p.opacity_bubble;
+ }else{
+ var opacity = p.opacity;
+ }
+
+ if(p.color.rgb){
+ var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')';
+ }else{
+ var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')';
+ }
+
+ pJS.canvas.ctx.fillStyle = color_value;
+ pJS.canvas.ctx.beginPath();
+
+ switch(p.shape){
+
+ case 'circle':
+ pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
+ break;
+
+ case 'edge':
+ pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2);
+ break;
+
+ case 'triangle':
+ pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2);
+ break;
+
+ case 'polygon':
+ pJS.fn.vendors.drawShape(
+ pJS.canvas.ctx,
+ p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX
+ p.y - radius / (2.66/3.5), // startY
+ radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
+ pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
+ 1 // sideCountDenominator
+ );
+ break;
+
+ case 'star':
+ pJS.fn.vendors.drawShape(
+ pJS.canvas.ctx,
+ p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX
+ p.y - radius / (2*2.66/3.5), // startY
+ radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
+ pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
+ 2 // sideCountDenominator
+ );
+ break;
+
+ case 'image':
+
+ function draw(){
+ pJS.canvas.ctx.drawImage(
+ img_obj,
+ p.x-radius,
+ p.y-radius,
+ radius*2,
+ radius*2 / p.img.ratio
+ );
+ }
+
+ if(pJS.tmp.img_type == 'svg'){
+ var img_obj = p.img.obj;
+ }else{
+ var img_obj = pJS.tmp.img_obj;
+ }
+
+ if(img_obj){
+ draw();
+ }
+
+ break;
+
+ }
+
+ pJS.canvas.ctx.closePath();
+
+ if(pJS.particles.shape.stroke.width > 0){
+ pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;
+ pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;
+ pJS.canvas.ctx.stroke();
+ }
+
+ pJS.canvas.ctx.fill();
+
+ };
+
+
+ pJS.fn.particlesCreate = function(){
+ for(var i = 0; i < pJS.particles.number.value; i++) {
+ pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));
+ }
+ };
+
+ pJS.fn.particlesUpdate = function(){
+
+ for(var i = 0; i < pJS.particles.array.length; i++){
+
+ /* the particle */
+ var p = pJS.particles.array[i];
+
+ // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;
+ // var f = -BANG_SIZE / d;
+ // if ( d < BANG_SIZE ) {
+ // var t = Math.atan2( dy, dx );
+ // p.vx = f * Math.cos(t);
+ // p.vy = f * Math.sin(t);
+ // }
+
+ /* move the particle */
+ if(pJS.particles.move.enable){
+ var ms = pJS.particles.move.speed/2;
+ p.x += p.vx * ms;
+ p.y += p.vy * ms;
+ }
+
+ /* change opacity status */
+ if(pJS.particles.opacity.anim.enable) {
+ if(p.opacity_status == true) {
+ if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;
+ p.opacity += p.vo;
+ }else {
+ if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;
+ p.opacity -= p.vo;
+ }
+ if(p.opacity < 0) p.opacity = 0;
+ }
+
+ /* change size */
+ if(pJS.particles.size.anim.enable){
+ if(p.size_status == true){
+ if(p.radius >= pJS.particles.size.value) p.size_status = false;
+ p.radius += p.vs;
+ }else{
+ if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;
+ p.radius -= p.vs;
+ }
+ if(p.radius < 0) p.radius = 0;
+ }
+
+ /* change particle position if it is out of canvas */
+ if(pJS.particles.move.out_mode == 'bounce'){
+ var new_pos = {
+ x_left: p.radius,
+ x_right: pJS.canvas.w,
+ y_top: p.radius,
+ y_bottom: pJS.canvas.h
+ }
+ }else{
+ var new_pos = {
+ x_left: -p.radius,
+ x_right: pJS.canvas.w + p.radius,
+ y_top: -p.radius,
+ y_bottom: pJS.canvas.h + p.radius
+ }
+ }
+
+ if(p.x - p.radius > pJS.canvas.w){
+ p.x = new_pos.x_left;
+ p.y = Math.random() * pJS.canvas.h;
+ }
+ else if(p.x + p.radius < 0){
+ p.x = new_pos.x_right;
+ p.y = Math.random() * pJS.canvas.h;
+ }
+ if(p.y - p.radius > pJS.canvas.h){
+ p.y = new_pos.y_top;
+ p.x = Math.random() * pJS.canvas.w;
+ }
+ else if(p.y + p.radius < 0){
+ p.y = new_pos.y_bottom;
+ p.x = Math.random() * pJS.canvas.w;
+ }
+
+ /* out of canvas modes */
+ switch(pJS.particles.move.out_mode){
+ case 'bounce':
+ if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
+ else if (p.x - p.radius < 0) p.vx = -p.vx;
+ if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
+ else if (p.y - p.radius < 0) p.vy = -p.vy;
+ break;
+ }
+
+ /* events */
+ if(isInArray('grab', pJS.interactivity.events.onhover.mode)){
+ pJS.fn.modes.grabParticle(p);
+ }
+
+ if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){
+ pJS.fn.modes.bubbleParticle(p);
+ }
+
+ if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){
+ pJS.fn.modes.repulseParticle(p);
+ }
+
+ /* interaction auto between particles */
+ if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){
+ for(var j = i + 1; j < pJS.particles.array.length; j++){
+ var p2 = pJS.particles.array[j];
+
+ /* link particles */
+ if(pJS.particles.line_linked.enable){
+ pJS.fn.interact.linkParticles(p,p2);
+ }
+
+ /* attract particles */
+ if(pJS.particles.move.attract.enable){
+ pJS.fn.interact.attractParticles(p,p2);
+ }
+
+ /* bounce particles */
+ if(pJS.particles.move.bounce){
+ pJS.fn.interact.bounceParticles(p,p2);
+ }
+
+ }
+ }
+
+
+ }
+
+ };
+
+ pJS.fn.particlesDraw = function(){
+
+ /* clear canvas */
+ pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+
+ /* update each particles param */
+ pJS.fn.particlesUpdate();
+
+ /* draw each particle */
+ for(var i = 0; i < pJS.particles.array.length; i++){
+ var p = pJS.particles.array[i];
+ p.draw();
+ }
+
+ };
+
+ pJS.fn.particlesEmpty = function(){
+ pJS.particles.array = [];
+ };
+
+ pJS.fn.particlesRefresh = function(){
+
+ /* init all */
+ cancelRequestAnimFrame(pJS.fn.checkAnimFrame);
+ cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ pJS.tmp.source_svg = undefined;
+ pJS.tmp.img_obj = undefined;
+ pJS.tmp.count_svg = 0;
+ pJS.fn.particlesEmpty();
+ pJS.fn.canvasClear();
+
+ /* restart */
+ pJS.fn.vendors.start();
+
+ };
+
+
+ /* ---------- pJS functions - particles interaction ------------ */
+
+ pJS.fn.interact.linkParticles = function(p1, p2){
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ /* draw a line between p1 and p2 if the distance between them is under the config distance */
+ if(dist <= pJS.particles.line_linked.distance){
+
+ var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;
+
+ if(opacity_line > 0){
+
+ /* style */
+ var color_line = pJS.particles.line_linked.color_rgb_line;
+ pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
+ pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+ //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
+
+ /* path */
+ pJS.canvas.ctx.beginPath();
+ pJS.canvas.ctx.moveTo(p1.x, p1.y);
+ pJS.canvas.ctx.lineTo(p2.x, p2.y);
+ pJS.canvas.ctx.stroke();
+ pJS.canvas.ctx.closePath();
+
+ }
+
+ }
+
+ };
+
+
+ pJS.fn.interact.attractParticles = function(p1, p2){
+
+ /* condensed particles */
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ if(dist <= pJS.particles.line_linked.distance){
+
+ var ax = dx/(pJS.particles.move.attract.rotateX*1000),
+ ay = dy/(pJS.particles.move.attract.rotateY*1000);
+
+ p1.vx -= ax;
+ p1.vy -= ay;
+
+ p2.vx += ax;
+ p2.vy += ay;
+
+ }
+
+
+ }
+
+
+ pJS.fn.interact.bounceParticles = function(p1, p2){
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy),
+ dist_p = p1.radius+p2.radius;
+
+ if(dist <= dist_p){
+ p1.vx = -p1.vx;
+ p1.vy = -p1.vy;
+
+ p2.vx = -p2.vx;
+ p2.vy = -p2.vy;
+ }
+
+ }
+
+
+ /* ---------- pJS functions - modes events ------------ */
+
+ pJS.fn.modes.pushParticles = function(nb, pos){
+
+ pJS.tmp.pushing = true;
+
+ for(var i = 0; i < nb; i++){
+ pJS.particles.array.push(
+ new pJS.fn.particle(
+ pJS.particles.color,
+ pJS.particles.opacity.value,
+ {
+ 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
+ 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
+ }
+ )
+ )
+ if(i == nb-1){
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesDraw();
+ }
+ pJS.tmp.pushing = false;
+ }
+ }
+
+ };
+
+
+ pJS.fn.modes.removeParticles = function(nb){
+
+ pJS.particles.array.splice(0, nb);
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesDraw();
+ }
+
+ };
+
+
+ pJS.fn.modes.bubbleParticle = function(p){
+
+ /* on hover event */
+ if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
+ ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
+
+ function init(){
+ p.opacity_bubble = p.opacity;
+ p.radius_bubble = p.radius;
+ }
+
+ /* mousemove - check ratio */
+ if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
+
+ if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){
+
+ /* size */
+ if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){
+
+ if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){
+ var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio);
+ if(size >= 0){
+ p.radius_bubble = size;
+ }
+ }else{
+ var dif = p.radius - pJS.interactivity.modes.bubble.size,
+ size = p.radius - (dif*ratio);
+ if(size > 0){
+ p.radius_bubble = size;
+ }else{
+ p.radius_bubble = 0;
+ }
+ }
+
+ }
+
+ /* opacity */
+ if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){
+
+ if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){
+ var opacity = pJS.interactivity.modes.bubble.opacity*ratio;
+ if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){
+ p.opacity_bubble = opacity;
+ }
+ }else{
+ var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio;
+ if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){
+ p.opacity_bubble = opacity;
+ }
+ }
+
+ }
+
+ }
+
+ }else{
+ init();
+ }
+
+
+ /* mouseleave */
+ if(pJS.interactivity.status == 'mouseleave'){
+ init();
+ }
+
+ }
+
+ /* on click event */
+ else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){
+
+
+ if(pJS.tmp.bubble_clicking){
+ var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
+ time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000;
+
+ if(time_spent > pJS.interactivity.modes.bubble.duration){
+ pJS.tmp.bubble_duration_end = true;
+ }
+
+ if(time_spent > pJS.interactivity.modes.bubble.duration*2){
+ pJS.tmp.bubble_clicking = false;
+ pJS.tmp.bubble_duration_end = false;
+ }
+ }
+
+
+ function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){
+
+ if(bubble_param != particles_param){
+
+ if(!pJS.tmp.bubble_duration_end){
+ if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
+ if(p_obj_bubble != undefined) var obj = p_obj_bubble;
+ else var obj = p_obj;
+ if(obj != bubble_param){
+ var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);
+ if(id == 'size') p.radius_bubble = value;
+ if(id == 'opacity') p.opacity_bubble = value;
+ }
+ }else{
+ if(id == 'size') p.radius_bubble = undefined;
+ if(id == 'opacity') p.opacity_bubble = undefined;
+ }
+ }else{
+ if(p_obj_bubble != undefined){
+ var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),
+ dif = bubble_param - value_tmp;
+ value = bubble_param + dif;
+ if(id == 'size') p.radius_bubble = value;
+ if(id == 'opacity') p.opacity_bubble = value;
+ }
+ }
+
+ }
+
+ }
+
+ if(pJS.tmp.bubble_clicking){
+ /* size */
+ process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');
+ /* opacity */
+ process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');
+ }
+
+ }
+
+ };
+
+
+ pJS.fn.modes.repulseParticle = function(p){
+
+ if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
+
+ var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse},
+ repulseRadius = pJS.interactivity.modes.repulse.distance,
+ velocity = 100,
+ repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);
+
+ var pos = {
+ x: p.x + normVec.x * repulseFactor,
+ y: p.y + normVec.y * repulseFactor
+ }
+
+ if(pJS.particles.move.out_mode == 'bounce'){
+ if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;
+ if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;
+ }else{
+ p.x = pos.x;
+ p.y = pos.y;
+ }
+
+ }
+
+
+ else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
+
+ if(!pJS.tmp.repulse_finish){
+ pJS.tmp.repulse_count++;
+ if(pJS.tmp.repulse_count == pJS.particles.array.length){
+ pJS.tmp.repulse_finish = true;
+ }
+ }
+
+ if(pJS.tmp.repulse_clicking){
+
+ var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3);
+
+ var dx = pJS.interactivity.mouse.click_pos_x - p.x,
+ dy = pJS.interactivity.mouse.click_pos_y - p.y,
+ d = dx*dx + dy*dy;
+
+ var force = -repulseRadius / d * 1;
+
+ function process(){
+
+ var f = Math.atan2(dy,dx);
+ p.vx = force * Math.cos(f);
+ p.vy = force * Math.sin(f);
+
+ if(pJS.particles.move.out_mode == 'bounce'){
+ var pos = {
+ x: p.x + p.vx,
+ y: p.y + p.vy
+ }
+ if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
+ else if (pos.x - p.radius < 0) p.vx = -p.vx;
+ if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
+ else if (pos.y - p.radius < 0) p.vy = -p.vy;
+ }
+
+ }
+
+ // default
+ if(d <= repulseRadius){
+ process();
+ }
+
+ // bang - slow motion mode
+ // if(!pJS.tmp.repulse_finish){
+ // if(d <= repulseRadius){
+ // process();
+ // }
+ // }else{
+ // process();
+ // }
+
+
+ }else{
+
+ if(pJS.tmp.repulse_clicking == false){
+
+ p.vx = p.vx_i;
+ p.vy = p.vy_i;
+
+ }
+
+ }
+
+ }
+
+ }
+
+
+ pJS.fn.modes.grabParticle = function(p){
+
+ if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
+
+ /* draw a line between the cursor and the particle if the distance between them is under the config distance */
+ if(dist_mouse <= pJS.interactivity.modes.grab.distance){
+
+ var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;
+
+ if(opacity_line > 0){
+
+ /* style */
+ var color_line = pJS.particles.line_linked.color_rgb_line;
+ pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
+ pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+ //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
+
+ /* path */
+ pJS.canvas.ctx.beginPath();
+ pJS.canvas.ctx.moveTo(p.x, p.y);
+ pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
+ pJS.canvas.ctx.stroke();
+ pJS.canvas.ctx.closePath();
+
+ }
+
+ }
+
+ }
+
+ };
+
+
+
+ /* ---------- pJS functions - vendors ------------ */
+
+ pJS.fn.vendors.eventsListeners = function(){
+
+ /* events target element */
+ if(pJS.interactivity.detect_on == 'window'){
+ pJS.interactivity.el = window;
+ }else{
+ pJS.interactivity.el = pJS.canvas.el;
+ }
+
+
+ /* detect mouse pos - on hover / click event */
+ if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){
+
+ /* el on mousemove */
+ pJS.interactivity.el.addEventListener('mousemove', function(e){
+
+ if(pJS.interactivity.el == window){
+ var pos_x = e.clientX,
+ pos_y = e.clientY;
+ }
+ else{
+ var pos_x = e.offsetX || e.clientX,
+ pos_y = e.offsetY || e.clientY;
+ }
+
+ pJS.interactivity.mouse.pos_x = pos_x;
+ pJS.interactivity.mouse.pos_y = pos_y;
+
+ if(pJS.tmp.retina){
+ pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
+ pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
+ }
+
+ pJS.interactivity.status = 'mousemove';
+
+ });
+
+ /* el on onmouseleave */
+ pJS.interactivity.el.addEventListener('mouseleave', function(e){
+
+ pJS.interactivity.mouse.pos_x = null;
+ pJS.interactivity.mouse.pos_y = null;
+ pJS.interactivity.status = 'mouseleave';
+
+ });
+
+ }
+
+ /* on click event */
+ if(pJS.interactivity.events.onclick.enable){
+
+ pJS.interactivity.el.addEventListener('click', function(){
+
+ pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;
+ pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;
+ pJS.interactivity.mouse.click_time = new Date().getTime();
+
+ if(pJS.interactivity.events.onclick.enable){
+
+ switch(pJS.interactivity.events.onclick.mode){
+
+ case 'push':
+ if(pJS.particles.move.enable){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
+ }else{
+ if(pJS.interactivity.modes.push.particles_nb == 1){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
+ }
+ else if(pJS.interactivity.modes.push.particles_nb > 1){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);
+ }
+ }
+ break;
+
+ case 'remove':
+ pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);
+ break;
+
+ case 'bubble':
+ pJS.tmp.bubble_clicking = true;
+ break;
+
+ case 'repulse':
+ pJS.tmp.repulse_clicking = true;
+ pJS.tmp.repulse_count = 0;
+ pJS.tmp.repulse_finish = false;
+ setTimeout(function(){
+ pJS.tmp.repulse_clicking = false;
+ }, pJS.interactivity.modes.repulse.duration*1000)
+ break;
+
+ }
+
+ }
+
+ });
+
+ }
+
+
+ };
+
+ pJS.fn.vendors.densityAutoParticles = function(){
+
+ if(pJS.particles.number.density.enable){
+
+ /* calc area */
+ var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;
+ if(pJS.tmp.retina){
+ area = area/(pJS.canvas.pxratio*2);
+ }
+
+ /* calc number of particles based on density area */
+ var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;
+
+ /* add or remove X particles */
+ var missing_particles = pJS.particles.array.length - nb_particles;
+ if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));
+ else pJS.fn.modes.removeParticles(missing_particles);
+
+ }
+
+ };
+
+
+ pJS.fn.vendors.checkOverlap = function(p1, position){
+ for(var i = 0; i < pJS.particles.array.length; i++){
+ var p2 = pJS.particles.array[i];
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ if(dist <= p1.radius + p2.radius){
+ p1.x = position ? position.x : Math.random() * pJS.canvas.w;
+ p1.y = position ? position.y : Math.random() * pJS.canvas.h;
+ pJS.fn.vendors.checkOverlap(p1);
+ }
+ }
+ };
+
+
+ pJS.fn.vendors.createSvgImg = function(p){
+
+ /* set color to svg element */
+ var svgXml = pJS.tmp.source_svg,
+ rgbHex = /#([0-9A-F]{3,6})/gi,
+ coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {
+ if(p.color.rgb){
+ var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')';
+ }else{
+ var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')';
+ }
+ return color_value;
+ });
+
+ /* prepare to create img with colored svg */
+ var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),
+ DOMURL = window.URL || window.webkitURL || window,
+ url = DOMURL.createObjectURL(svg);
+
+ /* create particle img obj */
+ var img = new Image();
+ img.addEventListener('load', function(){
+ p.img.obj = img;
+ p.img.loaded = true;
+ DOMURL.revokeObjectURL(url);
+ pJS.tmp.count_svg++;
+ });
+ img.src = url;
+
+ };
+
+
+ pJS.fn.vendors.destroypJS = function(){
+ cancelAnimationFrame(pJS.fn.drawAnimFrame);
+ canvas_el.remove();
+ pJSDom = null;
+ };
+
+
+ pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){
+
+ // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/
+ var sideCount = sideCountNumerator * sideCountDenominator;
+ var decimalSides = sideCountNumerator / sideCountDenominator;
+ var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;
+ var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians
+ c.save();
+ c.beginPath();
+ c.translate(startX, startY);
+ c.moveTo(0,0);
+ for (var i = 0; i < sideCount; i++) {
+ c.lineTo(sideLength,0);
+ c.translate(sideLength,0);
+ c.rotate(interiorAngle);
+ }
+ //c.stroke();
+ c.fill();
+ c.restore();
+
+ };
+
+ pJS.fn.vendors.exportImg = function(){
+ window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');
+ };
+
+
+ pJS.fn.vendors.loadImg = function(type){
+
+ pJS.tmp.img_error = undefined;
+
+ if(pJS.particles.shape.image.src != ''){
+
+ if(type == 'svg'){
+
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', pJS.particles.shape.image.src);
+ xhr.onreadystatechange = function (data) {
+ if(xhr.readyState == 4){
+ if(xhr.status == 200){
+ pJS.tmp.source_svg = data.currentTarget.response;
+ pJS.fn.vendors.checkBeforeDraw();
+ }else{
+ console.log('Error pJS - Image not found');
+ pJS.tmp.img_error = true;
+ }
+ }
+ }
+ xhr.send();
+
+ }else{
+
+ var img = new Image();
+ img.addEventListener('load', function(){
+ pJS.tmp.img_obj = img;
+ pJS.fn.vendors.checkBeforeDraw();
+ });
+ img.src = pJS.particles.shape.image.src;
+
+ }
+
+ }else{
+ console.log('Error pJS - No image.src');
+ pJS.tmp.img_error = true;
+ }
+
+ };
+
+
+ pJS.fn.vendors.draw = function(){
+
+ if(pJS.particles.shape.type == 'image'){
+
+ if(pJS.tmp.img_type == 'svg'){
+
+ if(pJS.tmp.count_svg >= pJS.particles.number.value){
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }else{
+ //console.log('still loading...');
+ if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ }else{
+
+ if(pJS.tmp.img_obj != undefined){
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }else{
+ if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ }
+
+ }else{
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ };
+
+
+ pJS.fn.vendors.checkBeforeDraw = function(){
+
+ // if shape is image
+ if(pJS.particles.shape.type == 'image'){
+
+ if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){
+ pJS.tmp.checkAnimFrame = requestAnimFrame(check);
+ }else{
+ //console.log('images loaded! cancel check');
+ cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);
+ if(!pJS.tmp.img_error){
+ pJS.fn.vendors.init();
+ pJS.fn.vendors.draw();
+ }
+
+ }
+
+ }else{
+ pJS.fn.vendors.init();
+ pJS.fn.vendors.draw();
+ }
+
+ };
+
+
+ pJS.fn.vendors.init = function(){
+
+ /* init canvas + particles */
+ pJS.fn.retinaInit();
+ pJS.fn.canvasInit();
+ pJS.fn.canvasSize();
+ pJS.fn.canvasPaint();
+ pJS.fn.particlesCreate();
+ pJS.fn.vendors.densityAutoParticles();
+
+ /* particles.line_linked - convert hex colors to rgb */
+ pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
+
+ };
+
+
+ pJS.fn.vendors.start = function(){
+
+ if(isInArray('image', pJS.particles.shape.type)){
+ pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);
+ pJS.fn.vendors.loadImg(pJS.tmp.img_type);
+ }else{
+ pJS.fn.vendors.checkBeforeDraw();
+ }
+
+ };
+
+
+
+
+ /* ---------- pJS - start ------------ */
+
+
+ pJS.fn.vendors.eventsListeners();
+
+ pJS.fn.vendors.start();
+
+
+
+};
+
+/* ---------- global functions - vendors ------------ */
+
+Object.deepExtend = function(destination, source) {
+ for (var property in source) {
+ if (source[property] && source[property].constructor &&
+ source[property].constructor === Object) {
+ destination[property] = destination[property] || {};
+ arguments.callee(destination[property], source[property]);
+ } else {
+ destination[property] = source[property];
+ }
+ }
+ return destination;
+};
+
+window.requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback){
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
+
+window.cancelRequestAnimFrame = ( function() {
+ return window.cancelAnimationFrame ||
+ window.webkitCancelRequestAnimationFrame ||
+ window.mozCancelRequestAnimationFrame ||
+ window.oCancelRequestAnimationFrame ||
+ window.msCancelRequestAnimationFrame ||
+ clearTimeout
+} )();
+
+function hexToRgb(hex){
+ // By Tim Down - http://stackoverflow.com/a/5624139/3493650
+ // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+ var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+ hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+ return r + r + g + g + b + b;
+ });
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+};
+
+function clamp(number, min, max) {
+ return Math.min(Math.max(number, min), max);
+};
+
+function isInArray(value, array) {
+ return array.indexOf(value) > -1;
+}
+
+
+/* ---------- particles.js functions - start ------------ */
+
+window.pJSDom = [];
+
+window.particlesJS = function(tag_id, params){
+
+ //console.log(params);
+
+ /* no string id? so it's object params, and set the id with default id */
+ if(typeof(tag_id) != 'string'){
+ params = tag_id;
+ tag_id = 'particles-js';
+ }
+
+ /* no id? set the id to default id */
+ if(!tag_id){
+ tag_id = 'particles-js';
+ }
+
+ /* pJS elements */
+ var pJS_tag = document.getElementById(tag_id),
+ pJS_canvas_class = 'particles-js-canvas-el',
+ exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
+
+ /* remove canvas if exists into the pJS target tag */
+ if(exist_canvas.length){
+ while(exist_canvas.length > 0){
+ pJS_tag.removeChild(exist_canvas[0]);
+ }
+ }
+
+ /* create canvas element */
+ var canvas_el = document.createElement('canvas');
+ canvas_el.className = pJS_canvas_class;
+
+ /* set size canvas */
+ canvas_el.style.width = "100%";
+ canvas_el.style.height = "100%";
+
+ /* append canvas */
+ var canvas = document.getElementById(tag_id).appendChild(canvas_el);
+
+ /* launch particle.js */
+ if(canvas != null){
+ pJSDom.push(new pJS(tag_id, params));
+ }
+
+};
+
+window.particlesJS.load = function(tag_id, path_config_json, callback){
+
+ /* load json config */
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', path_config_json);
+ xhr.onreadystatechange = function (data) {
+ if(xhr.readyState == 4){
+ if(xhr.status == 200){
+ var params = JSON.parse(data.currentTarget.response);
+ window.particlesJS(tag_id, params);
+ if(callback) callback();
+ }else{
+ console.log('Error pJS - XMLHttpRequest status: '+xhr.status);
+ console.log('Error pJS - File config not found');
+ }
+ }
+ };
+ xhr.send();
+
+};
diff --git a/www/source/javascripts/slackform.js b/www/source/javascripts/slackform.js
new file mode 100644
index 000000000..c11c74440
--- /dev/null
+++ b/www/source/javascripts/slackform.js
@@ -0,0 +1,57 @@
+/*global io,superagent*/
+
+var body = document.body;
+var request = superagent;
+
+// elements
+var form = body.querySelector('form#invite');
+var channel = form.elements['channel'] || {};
+var email = form.elements['email'];
+var coc = form.elements['coc'];
+var button = body.querySelector('button');
+
+// remove loading state
+button.className = '';
+
+// capture submit
+body.addEventListener('submit', function(ev){
+ ev.preventDefault();
+ button.disabled = true;
+ button.className = '';
+ button.innerHTML = 'Please Wait';
+ invite(channel ? channel.value : null, coc && coc.checked ? 1 : 0, email.value, function(err, msg){
+ if (err) {
+ button.removeAttribute('disabled');
+ button.className = 'error';
+ button.innerHTML = err.message;
+ } else {
+ button.className = 'success';
+ button.innerHTML = msg;
+ }
+ });
+});
+
+
+function invite(channel, coc, email, fn){
+ request
+ .post(data.path + 'invite')
+ .send({
+ coc: coc,
+ channel: channel,
+ email: email
+ })
+ .end(function(res){
+ if (res.body.redirectUrl) {
+ var err = new Error(res.body.msg || 'Server error');
+ window.setTimeout(function() {
+ topLevelRedirect(res.body.redirectUrl);
+ }, 1500);
+ }
+ if (res.error) {
+ var err = new Error(res.body.msg || 'Server error');
+ return fn(err);
+ } else {
+ fn(null, res.body.msg);
+ }
+ });
+}
diff --git a/www/source/javascripts/stars.js b/www/source/javascripts/stars.js
new file mode 100644
index 000000000..534ce744b
--- /dev/null
+++ b/www/source/javascripts/stars.js
@@ -0,0 +1,90 @@
+var WIDTH = window.innerWidth,
+ HEIGHT = window.innerHeight,
+ MAX_PARTICLES = 100,
+ DRAW_INTERVAL = 20,
+ container = document.querySelector('#container'),
+ canvas = document.querySelector('#pixie'),
+ context = canvas.getContext('2d'),
+ gradient = null,
+ pixies = new Array();
+
+function setDimensions(e) {
+ WIDTH = window.innerWidth;
+ container.style.width = WIDTH+'px';
+ canvas.width = WIDTH;
+ canvas.height = HEIGHT;
+}
+setDimensions();
+window.addEventListener('resize', setDimensions);
+
+
+function Circle() {
+ this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};
+
+ this.reset = function() {
+ this.x = (this.settings.random ? WIDTH*Math.random() : this.settings.xdef);
+ this.y = (this.settings.random ? HEIGHT*Math.random() : this.settings.ydef);
+ this.r = ((this.settings.rmax-1)*Math.random()) + 1;
+ this.dx = (Math.random()*this.settings.xmax) * (Math.random() < .5 ? -1 : 1);
+ this.dy = (Math.random()*this.settings.ymax) * (Math.random() < .5 ? -1 : 1);
+ this.hl = (this.settings.ttl/DRAW_INTERVAL)*(this.r/this.settings.rmax);
+ this.rt = Math.random()*this.hl;
+ this.settings.rt = Math.random()+1;
+ this.stop = Math.random()*.2+.4;
+ this.settings.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
+ this.settings.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
+ }
+
+ this.fade = function() {
+ this.rt += this.settings.rt;
+ }
+
+ this.draw = function() {
+ if(this.settings.blink && (this.rt <= 0 || this.rt >= this.hl)) {
+ this.settings.rt = this.settings.rt*-1;
+ } else if(this.rt >= this.hl) {
+ this.reset();
+ }
+
+ var newo = 1-(this.rt/this.hl);
+ context.beginPath();
+ context.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
+ context.closePath();
+
+ var cr = this.r*newo;
+ gradient = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
+ gradient.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
+ gradient.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.6)+')');
+ gradient.addColorStop(1.0, 'rgba(77,101,181,0)');
+ context.fillStyle = gradient;
+ context.fill();
+ }
+
+ this.move = function() {
+ this.x += (this.rt/this.hl)*this.dx;
+ this.y += (this.rt/this.hl)*this.dy;
+ if(this.x > WIDTH || this.x < 0) this.dx *= -1;
+ if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
+ }
+
+ this.getX = function() { return this.x; }
+ this.getY = function() { return this.y; }
+}
+
+
+
+for (var i = 0; i < MAX_PARTICLES; i++) {
+ pixies.push(new Circle());
+ pixies[i].reset();
+}
+
+function draw() {
+ context.clearRect(0, 0, WIDTH, HEIGHT);
+ for(var i = 0; i < pixies.length; i++) {
+ pixies[i].fade();
+ pixies[i].move();
+ pixies[i].draw();
+ }
+}
+
+setInterval(draw, DRAW_INTERVAL);
diff --git a/www/source/layouts/_footer.slim b/www/source/layouts/_footer.slim
index 1d64b5aa7..da73780d0 100644
--- a/www/source/layouts/_footer.slim
+++ b/www/source/layouts/_footer.slim
@@ -1,22 +1,45 @@
-footer#main-footer
- .container
- .row
- .columns.large-3.medium-4
- .footer--logos
- a.footer--logo.chef href="http://www.chef.io"
+footer#main-footer.dark-bg
+ #dlmsg.strict-center
+ img#hex src="/images/hexagon.svg" /
+ h3.t-white.margin-top-xs See how it works in less than 10 minutes!
+
+ .row.margin-top-xs
+ a.btn.t-white.try-demo.hide-for-small-only href="#" Try the Demo
+ a.btn.t-white href="https://downloads.chef.io/inspec"
+ i.fa.fa-cloud-download
+ span Download
+
+ .columns.large-4.medium-4.mobile-hide
+ 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
+ a.footer--link href="/legal/terms-and-conditions" Terms & Conditions
+ li
+ a.footer--link href="/legal/trademark-policy" Trademark Policy
+ li
+ a.footer--link href="/legal/privacy-policy" Privacy Policy
+
+
+ //logos for mobile
+
+ .columns.large-4.medium-4.margin-both-xs.mobile-show
+ ul.footer--logos
+ li
a.footer--logo.inspec href="/"
img src="/images/inspec-by-chef-logo.png"
- .columns.large-9.medium-8.medium-text-right.text-center
- ul.footer--links
- li
- a.footer--link href="/legal/licensing" Licensing
- li
- a.footer--link href="/legal/terms-and-conditions" Terms & Conditions
- ul.footer--links
- li
- a.footer--link href="/legal/trademark-policy" Trademark Policy
- li
- a.footer--link href="/legal/privacy-policy" Privacy Policy
- p
- small © Chef Software 2016
\ No newline at end of file
+ li
+ a.footer--logo.chef href="http://www.chef.io"
+ img src="/images/chef-logo.png"
+
+ p.strict-center.clear
+ small © Chef Software 2016
diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim
index 8da700a09..f91b55cab 100644
--- a/www/source/layouts/_nav.slim
+++ b/www/source/layouts/_nav.slim
@@ -1,46 +1,74 @@
-nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
- a.main-nav--logo href="/"
- img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
- = partial "layouts/svg/nav-icon.svg"
- ul.main-nav--links
- li.main-nav--link-ctas
- a.button.transparent.try-demo href="#" Try the Demo
- a.button.secondary href="https://downloads.chef.io/inspec" Download
- - if locals[:sidebar_layout] == 'docs'
- li.main-nav--sidebar
- = partial "layouts/sidebar"
- - else
- li.main-nav--link
- a href="/"
- i.main-nav--link-icon.fa.fa-home
- span.main-nav--link-text Overview
- li.main-nav--link
+nav#main-nav
+
+
+ #main-nav-ctas
+ a.main-nav--logo href="/"
+ img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
+
+ i.fa.fa-bars.main-nav--toggle.strict-right.show-for-small-only
+
+
+ ul.main-nav--links
+ li.main-nav--link.hide-docs
a href="/tutorials"
- i.main-nav--link-icon.fa.fa-flask
span.main-nav--link-text Tutorials
li.main-nav--link
a href="/docs"
- i.main-nav--link-icon.fa.fa-file-text-o
- span.main-nav--link-text Docs
- li.main-nav--link
- a href="/community"
- i.main-nav--link-icon.fa.fa-group
- span.main-nav--link-text Community
- li.main-nav--link
- a href="https://downloads.chef.io/inspec"
- i.main-nav--link-icon.fa.fa-download
- span.main-nav--link-text Downloads
- li.main-nav--link
- a href="https://github.com/chef/inspec"
- i.main-nav--link-icon.fa.fa-github
- span.main-nav--link-text Github Project
- li.main-nav--link
- a href="https://github.com/chef/inspec/blob/master/CONTRIBUTING.md"
- i.main-nav--link-icon.fa.fa-code-fork
- span.main-nav--link-text Contribute
+ span.main-nav--link-text.docs Docs
+ span.fa.fa-angle-right.t-purple.toggle.mobile-show
-nav#main-nav-ctas
- a.button.transparent.try-demo href="#" Try the Demo
- a.button.secondary href="https://downloads.chef.io/inspec" Download
+
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/cli.html"
+ span.main-nav--link-text inspec executable
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/profiles.html"
+ span.main-nav--link-text Profiles
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/resources.html"
+ span.main-nav--link-text Resources
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/matchers.html"
+ span.main-nav--link-text Matchers
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/dsl_inspec.html"
+ span.main-nav--link-text InSpec DSL
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/dsl_resource.html"
+ span.main-nav--link-text Resource DSL
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/plugin_kitchen_inspec.html"
+ span.main-nav--link-text kitchen-inspec
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/shell.html"
+ span.main-nav--link-text inspec shell
+
+ li.main-nav--link.docs--inside--link
+ a href="/docs/reference/ruby_usage.html"
+ span.main-nav--link-text Ruby usage
+
+
+
+ li.main-nav--link.hide-docs
+ a href="/community"
+ span.main-nav--link-text Community
+ li.main-nav--link.hide-docs
+ a href="https://github.com/chef/inspec"
+ i.fa.fa-github-alt
+ span.main-nav--link-text Github
+ li.main-nav--link.mobile-hide
+ a.btn.try-demo href="#" Try the Demo
+ li.main-nav--link.hide-docs
+ a.btn href="https://downloads.chef.io/inspec"
+ i.fa.fa-cloud-download
+ span.main-nav--link-text Download
diff --git a/www/source/layouts/_sidebar.slim b/www/source/layouts/_sidebar.slim
index 1efe5e6dc..e69de29bb 100644
--- a/www/source/layouts/_sidebar.slim
+++ b/www/source/layouts/_sidebar.slim
@@ -1,16 +0,0 @@
-- if locals[:sidebar_layout] == 'docs'
- form.main-sidebar--search action="/docs/search/" method="get"
- input type="text" placeholder="Search Documentation" name="q"
-ul.main-sidebar--links
- - sidebar_data(sidebar_layout).each do |item|
- li.main-sidebar--link
- h6 = item.title
- ul.main-sidebar--list.no-bullet
- - item.links.each do |item_link|
- li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
- = link_to item_link.title, item_link.link
- - if print_sub_links?(current_resource.url, item_link)
- ul.main-sidebar--list--item--dropdown.no-bullet
- - item_link.sub_links.each do |sub_link|
- li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link)
- = link_to sub_link.title, sub_link.link
diff --git a/www/source/layouts/docs.slim b/www/source/layouts/docs.slim
new file mode 100644
index 000000000..9211e4ba8
--- /dev/null
+++ b/www/source/layouts/docs.slim
@@ -0,0 +1,41 @@
+= wrap_layout :layout do
+
+ /! animated banner
+ header.child-h.blue-gradient.margin-top-offset
+ #particles-second
+ canvas.particles-js-canvas-el /
+ .purp-shade
+ .row.relative-top.searchbar
+
+ .column.columns
+
+
+ form.main-sidebar--search action="/docs/search/" method="get"
+ input type="text" placeholder="Search Documentation" name="q"
+
+
+ button.search.shadow action="/docs/search/" method="get"
+ img src="/images/community/search.svg"
+
+
+ .row.margin-both
+
+ column.columns.large-3.medium-3#sidebar.mobile-hide
+ - if locals[:sidebar_layout] == 'docs'
+ ul.main-sidebar--links
+ - sidebar_data(sidebar_layout).each do |item|
+ li.main-sidebar--link
+ small = item.title
+ ul.main-sidebar--list.no-bullet
+ - item.links.each do |item_link|
+ li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
+ = link_to item_link.title, item_link.link
+ - if print_sub_links?(current_resource.url, item_link)
+ ul.main-sidebar--list--item--dropdown.no-bullet
+ - item_link.sub_links.each do |sub_link|
+ li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link)
+ = link_to sub_link.title, sub_link.link
+
+ column.columns.large-9.medium-9
+
+ == yield
diff --git a/www/source/layouts/layout.slim b/www/source/layouts/layout.slim
index 7ab67022a..5acdbabab 100644
--- a/www/source/layouts/layout.slim
+++ b/www/source/layouts/layout.slim
@@ -10,7 +10,9 @@ html
title = current_page.data.title || "InSpec"
- link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'
+ link href='//fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'
+ link href='//allfont.net/allfont.css?fonts=source-sans-pro' rel='stylesheet' type='text/css'
+
link rel='stylesheet' type='text/css' href='css/inspec_tutorial.css'
== stylesheet_link_tag :site
@@ -26,13 +28,105 @@ html
= partial "layouts/footer"
+ script src='https://s3.amazonaws.com/menumaker/menumaker.min.js'
script src='scripts/inspec_tutorial.js'
script src='dist/inspec_tutorial.js'
div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
= "Loading"
== javascript_include_tag "all"
+
+
javascript:
+
+ //initiate sticky sidebar from jquery.sticky.js
+
+ $('#sidebar').stick_in_parent();
+
+ javascript:
+
+ //Parallax Text
+
+ if (window.innerWidth > 760) { //don't parallax on tablet/mobile
+ $(window).enllax(); //initiate parallax on larger screens
+ }
+
+ javascript:
+
+ //Animate HR on scroll
+
+ $(window).scroll(function() {
+
+ var scroll = $(window).scrollTop();
+ var objectSelect = $('#icon-trigger'); //parent that triggers scroll
+ var objectPosition = objectSelect.offset().top;
+ if (scroll > objectPosition) {
+ $('hr.first').addClass('stretch') //add class animate class to HR
+
+ }
+ });
+
+ javascript:
+
+ //Animating progress bar for header
+
+ $(document).ready(function(){
+
+ var getMax = function(){
+ return $(document).height() - $(window).height();
+ }
+
+ var getValue = function(){
+ return $(window).scrollTop();
+ }
+
+ if('max' in document.createElement('progress')){
+ // Browser supports progress element
+ var progressBar = $('progress');
+
+ // Set the Max attr for the first time
+ progressBar.attr({ max: getMax() });
+
+ $(document).on('scroll', function(){
+ // On scroll only Value attr needs to be calculated
+ progressBar.attr({ value: getValue() });
+ });
+
+ $(window).resize(function(){
+ // On resize, both Max/Value attr needs to be calculated
+ progressBar.attr({ max: getMax(), value: getValue() });
+ });
+ }
+ else {
+ var progressBar = $('.progress-bar'),
+ max = getMax(),
+ value, width;
+
+ var getWidth = function(){
+ // Calculate width in percentage
+ value = getValue();
+ width = (value/max) * 100;
+ width = width + '%';
+ return width;
+ }
+
+ var setWidth = function(){
+ progressBar.css({ width: getWidth() });
+ }
+
+ $(document).on('scroll', setWidth);
+ $(window).on('resize', function(){
+ // Need to reset the Max attr
+ max = getMax();
+ setWidth();
+ });
+ }
+ });
+
+
+ javascript:
+
+
$(document).foundation();
$('.try-demo').click(function(event){
event.stopPropagation();
@@ -43,7 +137,7 @@ html
$('.inspec-tutorial').hide()
})
});
-
+
javascript:
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;tGrant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+ li
+ p Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
- li
- p Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+ li
+ p Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
- li
- p Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+ li
+ p Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
- ol.lower-alpha
- li You must give any other recipients of the Work or Derivative Works a copy of this License; and
- li You must cause any modified files to carry prominent notices stating that You changed the files; and
- li You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
- li If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+ ol.lower-alpha
+ li You must give any other recipients of the Work or Derivative Works a copy of this License; and
+ li You must cause any modified files to carry prominent notices stating that You changed the files; and
+ li You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+ li If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
- p You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
- 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+ p You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+ 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
- li
- p Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+ li
+ p Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
- li
- p Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+ li
+ p Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
- li
- p Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+ li
+ p Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
- li
- p Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+ li
+ p Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-p END OF TERMS AND CONDITIONS
+ p END OF TERMS AND CONDITIONS
diff --git a/www/source/legal/privacy-policy.html.slim b/www/source/legal/privacy-policy.html.slim
index 10aa2c7da..d0fc99243 100644
--- a/www/source/legal/privacy-policy.html.slim
+++ b/www/source/legal/privacy-policy.html.slim
@@ -2,9 +2,9 @@
title: InSpec - Privacy Policy
---
-.row
+.row.margin-both-offset
.columns.medium-12
- h1.no-margin Chef Privacy Policy
+ h2.no-margin Chef Privacy Policy
p This privacy policy ("Policy") explains how Personal Information is collected, used, and disclosed by Chef Software, Inc. ("Chef, "we" or "us") with respect to your use of the Web sites operated by Chef that link to this Policy, including without limitation www.Chef.io (collectively the "Sites") and any services provided to you by Chef (the "Services"). We reserve the right to change the provisions of this Policy at any time. We will alert you that changes have been made by indicating on the Policy the date it was last updated. We encourage you to review this Policy from time to time to make sure that you understand how any Personal Information you provide will be used.
p Please read this policy carefully to understand our policies and practices regarding your information and how we will treat it. If you do not agree with our policies and practices, your choice is not to use our Sites or Services. By accessing or using the Sites or Services, you agree to this privacy policy. Your continued use of the Sites or Services after we make changes is deemed to be acceptance of those changes, so please check the policy periodically for updates.
h4 WHAT IS PERSONAL INFORMATION?
diff --git a/www/source/legal/terms-and-conditions.html.slim b/www/source/legal/terms-and-conditions.html.slim
index 8b3e6c9e6..74d894fd8 100644
--- a/www/source/legal/terms-and-conditions.html.slim
+++ b/www/source/legal/terms-and-conditions.html.slim
@@ -2,9 +2,9 @@
title: Terms and Conditions of Use
---
-.row
+.row.margin-both-offset
.columns.medium-12
- h1.no-margin Terms and Conditions of Use
+ h2.no-margin Terms and Conditions of Use
p
strong
diff --git a/www/source/legal/trademark-policy.html.slim b/www/source/legal/trademark-policy.html.slim
index 09c1e9f37..628bba6b6 100644
--- a/www/source/legal/trademark-policy.html.slim
+++ b/www/source/legal/trademark-policy.html.slim
@@ -1,84 +1,85 @@
---
title: Inspec - Trademark Policy
---
+.row.margin-both-offset.columns
-h1 Chef Trademark Policy
-p
- small June 16, 2016
+ h2 Chef Trademark Policy
+ p
+ small June 16, 2016
-h4
- u INTRODUCTION
-p This document outlines the policy of Chef Software Inc. ("Chef") regarding the use of Chef trademarks and/or logos, including without limitation Chef's Open Source Projects, such as for example, Habitat, InSpec and Server ("Chef Marks"). Any use of any Chef Mark must be in accordance with this policy or a separate license agreement. Any use that does not comply with this policy or does not have written authorization from Chef is not authorized. Any goodwill generated by the use of any Chef Marks will be for the benefit of Chef. This Trademark Policy ("Policy") attempts to balance two competing interests: Chef's need to ensure that the Chef Marks remain reliable indicators of quality, source, and security; and Chef's desire to permit community members, contributors, software users and distributors, and others to discuss the Chef products and to accurately describe their affiliation with Chef. Striking a proper balance is a complex situation that many organizations - in particular those whose products are distributed electronically - wrestle with every day and Chef has attempted to balance it here. Chef protects its Chef Marks on behalf and for the benefit of the entire community. The law obligates trademark owners to police their marks and prevent the use of confusingly similar names by third parties. If you have questions about this Policy, please contact the Chef marketing team at marketing@chef.io.
-p Underlying this Policy is the general law of trademarks. Trademarks exist to help consumers identify, and organizations publicize, the source of products. Someone's trust in the Chef name and products is crucial to us. Particularly in connection with intangible products like software, trust is all consumers have to decide on which product to choose. Chef also caretakes and curates the trust of the Chef community. This Policy seeks to protect both the public's and the Chef community's trust in the Chef Marks.
-p In addition, Chef may receive reports about websites or companies using the Chef Marks to promote other products and services, or using modified versions of the Chef Marks. The problem with these activities is that they may be deceptive, harm users, cause consumer confusion, or jeopardize the identity and meaning of the Chef Marks. Such cases range from good intentions but improper use of the trademarks, to people intentionally trading on the Chef brand for their own benefit and/or to distribute modified versions of the product, to a clear intent to deceive, manipulate and steal from users in a highly organized and syndicated fashion. When Chef receives reports of such activities, or identifies problematic activities, Chef analyzes the reports and treats each case individually based on the intent and severity of the matter.
In creating this Policy, Chef seeks to clarify legitimate uses of the Chef Marks. Although this Policy is composed of a number of specific examples, most reflect the fundamental requirement that your use of the Chef Marks be non-confusing and non-disparaging. "Non-confusing" means people should always know with whom they are dealing and where the software originates. Websites, software and other services that are not officially maintained or supported by Chef should not imply, either directly or by omission, that they are. These basic requirements can serve as a guide as you work your way through the Policy.
-p This Policy, prepared by Chef, sets out rules for proper use of the Chef Marks. Some, but not all, Chef Marks include the following:
-ul
- li Chef and Chef Logo
- li Inspec and Inspec Logo
- li Compliance at Velocity
- li CODE CAN
- li RULE THE CLOUD
- li POWERED BY CHEF
-p Chef may update its Chef Marks from time to time and without prior notice. If you ever have any questions about a Chef Mark, please contact Chef at marketing@chef.io.
Approved Chef logos can be downloaded here: http://style.chef.io/branding/
-p This Policy applies to all uses of the Chef Marks, in text and logo form, whether or not identified above.
-h4
- u OBJECTIVE AND SCOPE OF THE CHEF TRADEMARK POLICY
-p The objective of this Policy is to ensure that the Chef Marks remain reliable indicators of source and quality and that they are protected from inappropriate and unauthorized use. This Policy explains when and how you may use the Chef Marks without written authorization and, conversely, when written permission from Chef is required. Chef reserves the right to review all usage of the Chef Marks and to terminate use of the Chef Marks by any party for non-compliance with this Policy or written authorization. Chef may change this Policy at its sole discretion at any time effective immediately upon being published at https://www.chef.io/trademark-policy/ .
-h4
- u AUTHORIZED USE OF CHEF MARKS
-ul
- li
- u SUMMARY
- ul
- li AS A GENERAL RULE, THE CHEF MARKS MAY NOT BE USED IN ANY MANNER OTHER THAN EXPRESSLY AUTHORIZED IN A WRITTEN AGREEMENT SIGNED BY A DULY AUTHORIZED CHEF REPRESENTATIVE OR AS EXPRESSLY PERMITTED BY THIS POLICY.
- li You must use a Chef Mark in accordance with this Policy. To the extent any part of this Policy conflicts or is inconsistent with any part of a written agreement between you and Chef, the written agreement shall control. No other rights of any kind are granted hereunder by implication or otherwise.
You must obtain written permission from Chef to use the Chef Marks for any use, including but not limited to; (i) merchandising purposes (e.g. T-shirts, mugs); (ii) on or in relation to a software product that includes or is built on top of any Chef product, including Chef's open source projects; or (iii) in an attention-getting or branding manner. Without the express prior written consent of Chef, no Chef Marks may be used in a manner that implies an affiliation with, approval by, endorsement of or sponsorship by Chef.
- li
- u GENERAL GUIDELINES
- ul
- li You may use of the Chef Marks, without a license, provided such use complies with the following requirements: (i) the Chef Mark is used only to refer to the Chef project and/or technology; (ii) the Chef Mark is not used as part of your product, brand, domain, URL, or service name; (iii) the Chef Mark appears less prominent than your company or product name; (iv) the reference to Chef does not create a sense of endorsement, sponsorship, or ownership by Chef; and/or (v) Your use of the Chef Mark is necessary to fully describe your services or products and is limited to as much of the Chef Mark as is necessary for such identification ("Nominative Use"). ALL OTHER USES OF THE CHEF MARK, INCLUDING LOGOS, REQUIRE A WRITTEN LICENSE AGREEMENT.
- li
- u SPECIFIC USE CASES
- ul
- li USE WITH OPEN SOURCE SOFTWARE: We release open source code under the Apache 2.0 license, which permits third parties to copy and redistribute the underlying software under the terms of the license. However, the Apache 2.0 license does not provide any license or right to use any of the Chef Marks. You may redistribute the applicable Chef open source software under the terms of the Apache 2.0 license, but You may not use the Chef Marks in doing so without express written permission from Chef or as expressly permitted in this Policy.
- li PUBLICATIONS AND PRESENTATIONS: Third parties may use the Chef Marks in publications, such as books or magazines, or in connection with the presentations and publications that are displayed to the public (collectively, "Publications"), provided that: (i) such use is referential only: You are simply referring to Chef and its products; (ii) Your name or mark and logo shall appear in a prominent location on the cover or the title page of the Publication and shall be featured with greater prominence than the Chef Mark; (iii) You do not apply to register or register any term comprised or consisting of in whole or in part the Chef Mark, or any confusingly similar mark as trademarks, service marks, corporate names, trade names or domain names, Internet keywords, metatags, or trigger words to lead to a website or other Internet destination; (iv) You do not alter or change any Chef Mark or logo; (v) You comply with this Policy and usage guidelines; (vi) You attribute the Chef Marks with the proper symbol and footnote it on all Publications, webpages, announcements, or anywhere you might use the term.
- li TRADEMARK NOTICE SYMBOL: When using the Chef Marks, you must use the appropriate trademark symbol (either ™ or ®) as a notice to third parties of our rights to the Chef Mark. A trademark notice symbol must be used in connection with the first and most prominent usage of a mark (e.g. "Chef™"). A Chef Logo must always appear with the TM notice in every use.
- li ATTRIBUTION STATEMENT: You must acknowledge the rights of Chef in the Chef Marks and agree not to register or seek to register any Chef Marks in any country. All uses of Chef Marks must identify the Marks as being trademarks of Chef with our standard trademark attribution statement. The following statement must be used in all materials using the Chef Marks, including but not limited to websites, publications, splash screens, screenshots or in documentation or source code: "The Chef™ Mark and Chef Logo are either registered trademarks/service marks or trademarks/ service marks of Chef, in the United States and other countries and are used with Chef Software Inc.'s permission. We are not affiliated with, endorsed or sponsored by Chef Software Inc." While you may scale the size to suit your needs, you may not modify any of the Chef logos in any other way (such as by changing the design or color or the relative proportions of the elements which comprise the logo). When using Chef Marks, you will never vary the spelling, hyphenation or spacing of the any portion of the marks. You will never use a Chef Mark as a verb or noun or in possessive or plural form. (This is just good form.)
- li DOMAIN NAMES AND URLs: You may not use Chef Marks in your own domain names or URLs in a way that would likely to confuse a relevant consumer about the source of software or services provided through your website without written approval from Chef.
- li PRODUCTS AND SERVICES RELATED TO CHEF SOFTWARE: If you offer products or services related to Chef Marks, you may use the Chef Marks in describing and advertising your product so long as you don't mislead customers into thinking that either your website, service, or product is a Chef website, service, or product, or that Chef has any direct relationship with your organization. For example: "FooCo Management Dashboard for Chef Inspec" is okay. "FooCo Chef" is not okay, nor is "FooCo Chef Automate Dashboard". In addition, your website may not copy the look and feel of any Chef website. Again, Chef does not want the visitor to your website to be confused with whom she/he is dealing. When in doubt, err on the side of providing more, rather than less, explanation and information.
- li MARKS AND MERCHANDISE: You must obtain prior written approval from Chef to use the Chef Marks in any merchandise. In general, permission to use a Chef Mark may be granted for those wishing to create merchandise that promotes Chef and the Chef community. Permission will typically be denied to merchandise that would detract, disparage, or insult Chef or the Chef community. (We hope this comes as no surprise.)
- li MODIFICATIONS: There is one additional broad category of things you can't do with the Chef Marks - produce modified versions of them. A modified mark also would raise the possibility of consumer confusion, thus violating Chef trademark rights (remember the overarching requirement that any use of a Chef Mark be non-confusing?).
-h4
- u UNAUTHORIZED USE OF THE CHEF MARKS
-p Unauthorized use of the Chef Marks or marks that are confusingly similar may constitute an infringement of Chef trademark rights and are strictly prohibited. The following are examples of unauthorized uses of the Chef Marks or company name "Chef Software":
-ul
- li
- u Use of Chef Marks in connection with third party marks:
- | Use of the Chef Marks in connection with or as part of company names, trademarks or logos is not allowed. Do not hyphenate Chef with your product name to create a new product name. You may not use or register, in whole or in part, Chef, Chef logos or any other Chef trademarks, including Chef -owned graphic symbols, icons or any alteration thereof, as part of your trademark, service mark, company name, trade name, product name or service name. You may not incorporate the Chef Marks into the name or logo of your website, domain name, Internet keywords, metatags, or trigger words to lead to a website or other Internet destination, product, business or service.
- li
- u Incorporation of all or a portion of a Chef Mark into a domain name:
- | You may not register a domain name or use a registered domain name that includes a Chef, or any marks that are phonetically equivalent to or confusingly similar to the Chef Marks.
- li
- u Damaging Use:
- | Use of the Chef Marks or any other Chef-owned graphic, symbol or logo in a manner that disparages Chef, the Chef project and community or its technology or damages the brand integrity, including use of the Chef Marks in a manner that is, in the opinion of Chef, offensive, defamatory, illegal or unethical.
- li
- u Confusingly similar marks:
- | You may not use trademarks, logos or other content that is confusingly similar to the Chef Marks, Chef-owned graphics, symbols or any logos ("Chef Brand Assets").
- li
- u Variations or abbreviations or combinations with any other marks:
- | You may not use variations, foreign language equivalent or abbreviation of the Chef Marks for any purpose.
- li
- u Endorsement or Sponsorship:
- | You may not use Chef Marks to imply approval, sponsorship, endorsement or affiliation of your company, website, products or services by Chef or the Chef project.
-p Please note that the preceding examples are illustrative rather than an exhaustive list of types of unauthorized uses of the Chef Marks. All rights not explicitly granted in this Policy are expressly reserved by Chef.
-h4
- u QUESTIONS AND REPORTING MISUSE OF THE CHEF MARKS
-p If You wish to obtain Chef permission for any uses above or for any other use which is not specifically addressed in this Policy or You became aware of unauthorized use of the Chef Marks, please contact marketing@chef.io. Please note that permission will only be granted under certain conditions and/or subject to You entering into an agreement with Chef to maintain the quality of the products and or services You offer.
-p Chef reserves the right to revoke the authorization at any time in its sole discretion. If Chef determines that Your use of a Chef Mark does not truthfully and accurately identify the inclusion of the applicable Chef technology or Your use is otherwise unacceptable or detrimental to Chef or outside the scope of this Policy or an applicable license, Chef will revoke the authorization. Upon revocation of the authorization You agree that You will immediately cease all use of the applicable Chef Mark.
-h4
- u ACKNOWLEDGEMENT
-p
- strong Nothing in this Trademark Policy shall be interpreted to allow any third party to claim any association with Chef or to imply any approval or support by Chef for any third party products or services.
-p
- strong You acknowledge and agree that Chef is the sole and exclusive owner of the Chef Marks and agree that You will do nothing inconsistent with such ownership either during the term of such use or afterwards. You agree that you will not acquire any rights in the Chef Marks and that any goodwill generated by your use of the Chef Marks inures solely to the benefit of Chef. You also agree that "Chef" is not descriptive or generic and you agree not to challenge Chef's rights in the Chef Marks, including but not limited to its trademark applications and registrations, on any grounds. You also ensure that Your use of the Chef Marks does not create any confusion as to the source of Your products, services and activities and those of the Chef community or Chef. You agree not to challenge Chef's rights in the Chef Marks, including but not limited to its trademark applications and registrations, on any grounds.
-p
- strong Thank you for caring about the Chef brand!
+ h4
+ u INTRODUCTION
+ p This document outlines the policy of Chef Software Inc. ("Chef") regarding the use of Chef trademarks and/or logos, including without limitation Chef's Open Source Projects, such as for example, Habitat, InSpec and Server ("Chef Marks"). Any use of any Chef Mark must be in accordance with this policy or a separate license agreement. Any use that does not comply with this policy or does not have written authorization from Chef is not authorized. Any goodwill generated by the use of any Chef Marks will be for the benefit of Chef. This Trademark Policy ("Policy") attempts to balance two competing interests: Chef's need to ensure that the Chef Marks remain reliable indicators of quality, source, and security; and Chef's desire to permit community members, contributors, software users and distributors, and others to discuss the Chef products and to accurately describe their affiliation with Chef. Striking a proper balance is a complex situation that many organizations - in particular those whose products are distributed electronically - wrestle with every day and Chef has attempted to balance it here. Chef protects its Chef Marks on behalf and for the benefit of the entire community. The law obligates trademark owners to police their marks and prevent the use of confusingly similar names by third parties. If you have questions about this Policy, please contact the Chef marketing team at marketing@chef.io.
+ p Underlying this Policy is the general law of trademarks. Trademarks exist to help consumers identify, and organizations publicize, the source of products. Someone's trust in the Chef name and products is crucial to us. Particularly in connection with intangible products like software, trust is all consumers have to decide on which product to choose. Chef also caretakes and curates the trust of the Chef community. This Policy seeks to protect both the public's and the Chef community's trust in the Chef Marks.
+ p In addition, Chef may receive reports about websites or companies using the Chef Marks to promote other products and services, or using modified versions of the Chef Marks. The problem with these activities is that they may be deceptive, harm users, cause consumer confusion, or jeopardize the identity and meaning of the Chef Marks. Such cases range from good intentions but improper use of the trademarks, to people intentionally trading on the Chef brand for their own benefit and/or to distribute modified versions of the product, to a clear intent to deceive, manipulate and steal from users in a highly organized and syndicated fashion. When Chef receives reports of such activities, or identifies problematic activities, Chef analyzes the reports and treats each case individually based on the intent and severity of the matter.
In creating this Policy, Chef seeks to clarify legitimate uses of the Chef Marks. Although this Policy is composed of a number of specific examples, most reflect the fundamental requirement that your use of the Chef Marks be non-confusing and non-disparaging. "Non-confusing" means people should always know with whom they are dealing and where the software originates. Websites, software and other services that are not officially maintained or supported by Chef should not imply, either directly or by omission, that they are. These basic requirements can serve as a guide as you work your way through the Policy.
+ p This Policy, prepared by Chef, sets out rules for proper use of the Chef Marks. Some, but not all, Chef Marks include the following:
+ ul
+ li Chef and Chef Logo
+ li Inspec and Inspec Logo
+ li Compliance at Velocity
+ li CODE CAN
+ li RULE THE CLOUD
+ li POWERED BY CHEF
+ p Chef may update its Chef Marks from time to time and without prior notice. If you ever have any questions about a Chef Mark, please contact Chef at marketing@chef.io.
Approved Chef logos can be downloaded here: http://style.chef.io/branding/
+ p This Policy applies to all uses of the Chef Marks, in text and logo form, whether or not identified above.
+ h4
+ u OBJECTIVE AND SCOPE OF THE CHEF TRADEMARK POLICY
+ p The objective of this Policy is to ensure that the Chef Marks remain reliable indicators of source and quality and that they are protected from inappropriate and unauthorized use. This Policy explains when and how you may use the Chef Marks without written authorization and, conversely, when written permission from Chef is required. Chef reserves the right to review all usage of the Chef Marks and to terminate use of the Chef Marks by any party for non-compliance with this Policy or written authorization. Chef may change this Policy at its sole discretion at any time effective immediately upon being published at https://www.chef.io/trademark-policy/ .
+ h4
+ u AUTHORIZED USE OF CHEF MARKS
+ ul
+ li
+ u SUMMARY
+ ul
+ li AS A GENERAL RULE, THE CHEF MARKS MAY NOT BE USED IN ANY MANNER OTHER THAN EXPRESSLY AUTHORIZED IN A WRITTEN AGREEMENT SIGNED BY A DULY AUTHORIZED CHEF REPRESENTATIVE OR AS EXPRESSLY PERMITTED BY THIS POLICY.
+ li You must use a Chef Mark in accordance with this Policy. To the extent any part of this Policy conflicts or is inconsistent with any part of a written agreement between you and Chef, the written agreement shall control. No other rights of any kind are granted hereunder by implication or otherwise.
You must obtain written permission from Chef to use the Chef Marks for any use, including but not limited to; (i) merchandising purposes (e.g. T-shirts, mugs); (ii) on or in relation to a software product that includes or is built on top of any Chef product, including Chef's open source projects; or (iii) in an attention-getting or branding manner. Without the express prior written consent of Chef, no Chef Marks may be used in a manner that implies an affiliation with, approval by, endorsement of or sponsorship by Chef.
+ li
+ u GENERAL GUIDELINES
+ ul
+ li You may use of the Chef Marks, without a license, provided such use complies with the following requirements: (i) the Chef Mark is used only to refer to the Chef project and/or technology; (ii) the Chef Mark is not used as part of your product, brand, domain, URL, or service name; (iii) the Chef Mark appears less prominent than your company or product name; (iv) the reference to Chef does not create a sense of endorsement, sponsorship, or ownership by Chef; and/or (v) Your use of the Chef Mark is necessary to fully describe your services or products and is limited to as much of the Chef Mark as is necessary for such identification ("Nominative Use"). ALL OTHER USES OF THE CHEF MARK, INCLUDING LOGOS, REQUIRE A WRITTEN LICENSE AGREEMENT.
+ li
+ u SPECIFIC USE CASES
+ ul
+ li USE WITH OPEN SOURCE SOFTWARE: We release open source code under the Apache 2.0 license, which permits third parties to copy and redistribute the underlying software under the terms of the license. However, the Apache 2.0 license does not provide any license or right to use any of the Chef Marks. You may redistribute the applicable Chef open source software under the terms of the Apache 2.0 license, but You may not use the Chef Marks in doing so without express written permission from Chef or as expressly permitted in this Policy.
+ li PUBLICATIONS AND PRESENTATIONS: Third parties may use the Chef Marks in publications, such as books or magazines, or in connection with the presentations and publications that are displayed to the public (collectively, "Publications"), provided that: (i) such use is referential only: You are simply referring to Chef and its products; (ii) Your name or mark and logo shall appear in a prominent location on the cover or the title page of the Publication and shall be featured with greater prominence than the Chef Mark; (iii) You do not apply to register or register any term comprised or consisting of in whole or in part the Chef Mark, or any confusingly similar mark as trademarks, service marks, corporate names, trade names or domain names, Internet keywords, metatags, or trigger words to lead to a website or other Internet destination; (iv) You do not alter or change any Chef Mark or logo; (v) You comply with this Policy and usage guidelines; (vi) You attribute the Chef Marks with the proper symbol and footnote it on all Publications, webpages, announcements, or anywhere you might use the term.
+ li TRADEMARK NOTICE SYMBOL: When using the Chef Marks, you must use the appropriate trademark symbol (either ™ or ®) as a notice to third parties of our rights to the Chef Mark. A trademark notice symbol must be used in connection with the first and most prominent usage of a mark (e.g. "Chef™"). A Chef Logo must always appear with the TM notice in every use.
+ li ATTRIBUTION STATEMENT: You must acknowledge the rights of Chef in the Chef Marks and agree not to register or seek to register any Chef Marks in any country. All uses of Chef Marks must identify the Marks as being trademarks of Chef with our standard trademark attribution statement. The following statement must be used in all materials using the Chef Marks, including but not limited to websites, publications, splash screens, screenshots or in documentation or source code: "The Chef™ Mark and Chef Logo are either registered trademarks/service marks or trademarks/ service marks of Chef, in the United States and other countries and are used with Chef Software Inc.'s permission. We are not affiliated with, endorsed or sponsored by Chef Software Inc." While you may scale the size to suit your needs, you may not modify any of the Chef logos in any other way (such as by changing the design or color or the relative proportions of the elements which comprise the logo). When using Chef Marks, you will never vary the spelling, hyphenation or spacing of the any portion of the marks. You will never use a Chef Mark as a verb or noun or in possessive or plural form. (This is just good form.)
+ li DOMAIN NAMES AND URLs: You may not use Chef Marks in your own domain names or URLs in a way that would likely to confuse a relevant consumer about the source of software or services provided through your website without written approval from Chef.
+ li PRODUCTS AND SERVICES RELATED TO CHEF SOFTWARE: If you offer products or services related to Chef Marks, you may use the Chef Marks in describing and advertising your product so long as you don't mislead customers into thinking that either your website, service, or product is a Chef website, service, or product, or that Chef has any direct relationship with your organization. For example: "FooCo Management Dashboard for Chef Inspec" is okay. "FooCo Chef" is not okay, nor is "FooCo Chef Automate Dashboard". In addition, your website may not copy the look and feel of any Chef website. Again, Chef does not want the visitor to your website to be confused with whom she/he is dealing. When in doubt, err on the side of providing more, rather than less, explanation and information.
+ li MARKS AND MERCHANDISE: You must obtain prior written approval from Chef to use the Chef Marks in any merchandise. In general, permission to use a Chef Mark may be granted for those wishing to create merchandise that promotes Chef and the Chef community. Permission will typically be denied to merchandise that would detract, disparage, or insult Chef or the Chef community. (We hope this comes as no surprise.)
+ li MODIFICATIONS: There is one additional broad category of things you can't do with the Chef Marks - produce modified versions of them. A modified mark also would raise the possibility of consumer confusion, thus violating Chef trademark rights (remember the overarching requirement that any use of a Chef Mark be non-confusing?).
+ h4
+ u UNAUTHORIZED USE OF THE CHEF MARKS
+ p Unauthorized use of the Chef Marks or marks that are confusingly similar may constitute an infringement of Chef trademark rights and are strictly prohibited. The following are examples of unauthorized uses of the Chef Marks or company name "Chef Software":
+ ul
+ li
+ u Use of Chef Marks in connection with third party marks:
+ | Use of the Chef Marks in connection with or as part of company names, trademarks or logos is not allowed. Do not hyphenate Chef with your product name to create a new product name. You may not use or register, in whole or in part, Chef, Chef logos or any other Chef trademarks, including Chef -owned graphic symbols, icons or any alteration thereof, as part of your trademark, service mark, company name, trade name, product name or service name. You may not incorporate the Chef Marks into the name or logo of your website, domain name, Internet keywords, metatags, or trigger words to lead to a website or other Internet destination, product, business or service.
+ li
+ u Incorporation of all or a portion of a Chef Mark into a domain name:
+ | You may not register a domain name or use a registered domain name that includes a Chef, or any marks that are phonetically equivalent to or confusingly similar to the Chef Marks.
+ li
+ u Damaging Use:
+ | Use of the Chef Marks or any other Chef-owned graphic, symbol or logo in a manner that disparages Chef, the Chef project and community or its technology or damages the brand integrity, including use of the Chef Marks in a manner that is, in the opinion of Chef, offensive, defamatory, illegal or unethical.
+ li
+ u Confusingly similar marks:
+ | You may not use trademarks, logos or other content that is confusingly similar to the Chef Marks, Chef-owned graphics, symbols or any logos ("Chef Brand Assets").
+ li
+ u Variations or abbreviations or combinations with any other marks:
+ | You may not use variations, foreign language equivalent or abbreviation of the Chef Marks for any purpose.
+ li
+ u Endorsement or Sponsorship:
+ | You may not use Chef Marks to imply approval, sponsorship, endorsement or affiliation of your company, website, products or services by Chef or the Chef project.
+ p Please note that the preceding examples are illustrative rather than an exhaustive list of types of unauthorized uses of the Chef Marks. All rights not explicitly granted in this Policy are expressly reserved by Chef.
+ h4
+ u QUESTIONS AND REPORTING MISUSE OF THE CHEF MARKS
+ p If You wish to obtain Chef permission for any uses above or for any other use which is not specifically addressed in this Policy or You became aware of unauthorized use of the Chef Marks, please contact marketing@chef.io. Please note that permission will only be granted under certain conditions and/or subject to You entering into an agreement with Chef to maintain the quality of the products and or services You offer.
+ p Chef reserves the right to revoke the authorization at any time in its sole discretion. If Chef determines that Your use of a Chef Mark does not truthfully and accurately identify the inclusion of the applicable Chef technology or Your use is otherwise unacceptable or detrimental to Chef or outside the scope of this Policy or an applicable license, Chef will revoke the authorization. Upon revocation of the authorization You agree that You will immediately cease all use of the applicable Chef Mark.
+ h4
+ u ACKNOWLEDGEMENT
+ p
+ strong Nothing in this Trademark Policy shall be interpreted to allow any third party to claim any association with Chef or to imply any approval or support by Chef for any third party products or services.
+ p
+ strong You acknowledge and agree that Chef is the sole and exclusive owner of the Chef Marks and agree that You will do nothing inconsistent with such ownership either during the term of such use or afterwards. You agree that you will not acquire any rights in the Chef Marks and that any goodwill generated by your use of the Chef Marks inures solely to the benefit of Chef. You also agree that "Chef" is not descriptive or generic and you agree not to challenge Chef's rights in the Chef Marks, including but not limited to its trademark applications and registrations, on any grounds. You also ensure that Your use of the Chef Marks does not create any confusion as to the source of Your products, services and activities and those of the Chef community or Chef. You agree not to challenge Chef's rights in the Chef Marks, including but not limited to its trademark applications and registrations, on any grounds.
+ p
+ strong Thank you for caring about the Chef brand!
diff --git a/www/source/stylesheets/_buttons.scss b/www/source/stylesheets/_buttons.scss
index b61545895..c843440ff 100644
--- a/www/source/stylesheets/_buttons.scss
+++ b/www/source/stylesheets/_buttons.scss
@@ -1,39 +1,73 @@
-.button {
- font-family: $heading-font;
- text-transform: uppercase;
- border-radius: 0;
- box-shadow: 3px 3px 0 0 $off-white;
- transition: all 0.3s ease;
+// Normal Links
- &.primary {
- color: $inspec-grey;
- background: $white;
- border: 1px solid $inspec-blue;
- }
+a {
+ @extend %transition;
+ color : $color_link;
+ font-family : $heading-font;
+}
- &.primary:active,
- &.secondary:active {
- transform: translateX(2px) translateY(2px);
- box-shadow: 0 0 0 0 $off-white;
- }
+// All CTA's
- &.transparent {
- color: $inspec-grey;
- background: transparent;
- padding-left: 0;
- padding-right: 0;
- box-shadow: none;
+.btn {
+ @extend %transition;
+ box-sizing : border-box;
+ padding : 0.6rem 1.25rem;
+ color : $color_purple;
+ border : 1px solid transparent;
+ border-right : 1px solid $color_link;
+ border-left : 1px solid $color_purple;
+ border-radius : 4px;
+ background : transparent;
+ background-image : linear-gradient(
+ to right,
+ $color_purple 0,
+ $color_link 100%
+ ),
+ linear-gradient(
+ to right,
+ $color_purple 0,
+ $color_link 100%
+ );
+ background-repeat : no-repeat;
+ background-position : 0 0,
+ 0 100%;
+ background-size : 100% 1px;
- &:hover {
- color: darken($inspec-grey, 20%);
- }
- }
+ &:hover {
+ color : $color_white;
+ border-color : $color_purple;
+ background-image : initial;
+ background-color : $color_purple;
+ }
- &.block {
- display: block;
- }
+ &.btn-inverse {
+ color : $color_purple;
- & + .button {
- margin-left: 15px;
- }
-}
\ No newline at end of file
+ &:hover {
+ color : $color_white;
+ 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
+
+button {
+ @extend %transition;
+ padding : 0.6rem 1.25rem;
+ color : $color_white;
+ border : 2px $color-purple;
+ border-radius : 4px;
+ background : $color_purple;
+}
+
+button:hover {
+ opacity : 0.8;
+}
diff --git a/www/source/stylesheets/_code.scss b/www/source/stylesheets/_code.scss
index bbabc4dea..648c505dc 100644
--- a/www/source/stylesheets/_code.scss
+++ b/www/source/stylesheets/_code.scss
@@ -1,18 +1,52 @@
-pre {
- padding: 10px;
- margin-bottom: 1em;
- background: rgba($inspec-blue, 0.15);
- border: 1px solid rgba($inspec-blue, 0.3);
- color: darken($inspec-blue, 25%);
-
- & > code {
- background: transparent;
- border: none;
- }
-}
+//default
code {
- background: rgba($inspec-blue, 0.15);
- border: 1px solid transparent;
- color: darken($inspec-blue, 25%);
+ color : $color_link;
+ border-radius : 7px;
+ background : $color_lt_blue;
+ border-color: $color_lt_blue;
+}
+
+pre {
+ padding: 10px;
+ margin-bottom: 1em;
+ background : $color_lt_blue;
+ border: 1px solid rgba(65,151,181,0.3);
+ color: $color_link
+}
+
+// Container for code example
+
+.code-example {
+ padding : $percent_sm;
+ border-radius : 7px;
+ background : $color_heading;
+}
+
+
+// Code Font Colors
+
+.code-demo {
+ color : $color_white;
+ border : 0;
+ background-color : initial;
+}
+
+.code-attribute {
+ color : $color_purple;
+}
+
+.code-token {
+ color : $color_code_token;
+}
+
+.code-comment {
+ opacity : 0.6;
+}
+
+// Indentation
+
+.indent {
+ padding-left : 1em;
+ word-wrap : normal;
}
diff --git a/www/source/stylesheets/_fonts.scss b/www/source/stylesheets/_fonts.scss
index 47102d351..e1a9d8916 100644
--- a/www/source/stylesheets/_fonts.scss
+++ b/www/source/stylesheets/_fonts.scss
@@ -1,45 +1,3 @@
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
-
-@font-face {
- font-family: 'Jaapokki';
- src: url('/fonts/jaapokki-regular-webfont.eot');
- src: url('/fonts/jaapokki-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/jaapokki-regular-webfont.woff2') format('woff2'),
- url('/fonts/jaapokki-regular-webfont.woff') format('woff'),
- url('/fonts/jaapokki-regular-webfont.ttf') format('truetype');
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Jaapokki Alternate';
- src: url('/fonts/jaapokkisubtract-regular-webfont.eot');
- src: url('/fonts/jaapokkisubtract-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/jaapokkisubtract-regular-webfont.woff2') format('woff2'),
- url('/fonts/jaapokkisubtract-regular-webfont.woff') format('woff'),
- url('/fonts/jaapokkisubtract-regular-webfont.ttf') format('truetype');
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Roboto';
- src: url('/fonts/roboto-light-webfont.eot');
- src: url('/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/roboto-light-webfont.woff2') format('woff2'),
- url('/fonts/roboto-light-webfont.woff') format('woff'),
- url('/fonts/roboto-light-webfont.ttf') format('truetype');
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Roboto';
- src: url('/fonts/roboto-medium-webfont.eot');
- src: url('/fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
- url('/fonts/roboto-medium-webfont.woff') format('woff'),
- url('/fonts/roboto-medium-webfont.ttf') format('truetype');
- font-weight: 500;
- font-style: bold;
-}
+@import "https://fonts.googleapis.com/css?family=Roboto:300,400";
+@import "https://allfont.net/allfont.css?fonts=source-sans-pro";
diff --git a/www/source/stylesheets/_footer.scss b/www/source/stylesheets/_footer.scss
index 27025937f..dab31e0f2 100644
--- a/www/source/stylesheets/_footer.scss
+++ b/www/source/stylesheets/_footer.scss
@@ -1,78 +1,104 @@
-
#main-footer {
- padding: 30px 0;
- margin-top: 40px;
- background: $off-white-2;
+ padding-right : 40px; // Same margins as nav
+ padding-left : 40px;
+ background : $color_heading;
}
-.footer--logos {
+
+footer > #dlmsg {
+ // Download Message
+ padding-top : $percent_md;
+ padding-bottom : $percent_md;
+}
+
+footer a.btn:last-child {
+ margin-left : 1.6em;
+
+ //mobile
+ @include nav-small{
+ margin-left: initial;
+ }
+
+}
+
+footer span {
+ margin-left : 6px;// Icon
+}
+
+ul.footer--logos {
+ margin-left: 0!important;
@include nav-small {
- max-width: 230px;
- width: 100%;
- margin: 0 auto;
text-align: center;
}
}
-.footer--logo {
+ul.footer--logos li {
display: inline-block;
- vertical-align: middle;
- padding-top: 10px;
- padding-bottom: 10px;
+ margin-left: 0!important;
+
+}
+
+.footer--logo {
+ display : inline-block;
+ filter : brightness(0) invert(1);
+ vertical-align : middle;
&.chef {
- width: 27%;
- padding-right: 5%;
- border-right: 1px solid $inspec-grey;
+ width : 80px;
+ padding-left : 1.6em; //same as default li margin
+ border-left : 1px solid $color_white;
+
+ //mobile
+ @include nav-small{
+ border-left : initial;
+ }
+
}
&.inspec {
- width: 46%;
- padding-left: 5%;
+ width : 130px;
+ padding-right : 1.6em; //same as default li margin
}
}
-.footer--links {
- @extend .no-bullet;
- margin: 25px 0 0;
- font-size: 14px;
- line-height: 1.1;
-
- & > li {
- margin-bottom: 25px;
+ul.footer--links {
+ @extend .no-bullet;
+ display : inline-flex;
+ margin-left : auto;
+ //mobile
+ @include nav-small{
+ display:block;
}
- @media (min-width: 640px) {
- margin: 10px 0 5px;
-
- & > li {
- display: inline-block;
- margin: 0 25px 0 0;
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
-
- @media (min-width: 880px) {
- display: inline-block;
-
- &:first-child {
- margin-right: 25px;
+ li {
+ //mobile
+ @include nav-small{
+ margin-left: initial;
+ margin-bottom: $percent_sm/2;
}
}
}
-.footer--link {
- color: $inspec-grey;
- text-transform: uppercase;
- font-family: $heading-font;
+li a.footer--link {
+ color : $color_gray;
+ font-family : $heading-font;
+ font-weight: 400;
- &:hover,
+ &:active,
&:focus,
- &:active {
- color: darken($inspec-grey, 15%);
+ &:hover {
+ color : $color_purple;
}
-}
\ No newline at end of file
+
+}
+
+
+// Hex Animation
+
+img#hex {
+ width : 25px;
+ -moz-animation : spin 2s linear infinite both;
+ -webkit-animation : spin 2s linear infinite both;
+ animation : spin 2s linear infinite both;
+}
diff --git a/www/source/stylesheets/_global-message.scss b/www/source/stylesheets/_global-message.scss
index 652b40ee0..5f47e1ce1 100644
--- a/www/source/stylesheets/_global-message.scss
+++ b/www/source/stylesheets/_global-message.scss
@@ -1,47 +1 @@
-#global-message {
- position: fixed;
- z-index: 95;
- top: -200px;
- right: 0;
- left: 0;
- padding: 15px 0;
- background-color: $inspec-blue;
- color: $white;
- font-size: 15px;
- transition: top 0.3s ease;
-
- &.is-visible {
- top: 0;
- }
-
- .dismiss-button {
- margin: 3px;
- color: $white;
- cursor: pointer;
- font-weight: 700;
-
- .fa {
- margin-right: 5px;
- }
- }
-
- a, a:hover, a:visited, a:active, a:link {
- color: $white;
- text-decoration: none;
- }
-
- @media (max-width: 649px) {
- font-size: 13px;
- }
-
- @include nav-small {
- position: fixed;
- top: -200px;
- right: 0;
- left: 0;
- }
-
- @include nav-large {
- z-index: 1100;
- }
-}
\ No newline at end of file
+///Deleted old global message
diff --git a/www/source/stylesheets/_hero.scss b/www/source/stylesheets/_hero.scss
index 8c0e140bf..8954fc85b 100644
--- a/www/source/stylesheets/_hero.scss
+++ b/www/source/stylesheets/_hero.scss
@@ -1,19 +1 @@
-.hero--img {
- display: block;
- max-width: 100px;
- margin: 0 auto;
-}
-
-.hero--heading {
- font-family: $heading-accent-font;
- text-transform: uppercase;
- text-align: center;
-}
-
-.hero--subhead {
- margin-bottom: 20px;
-
- @media (min-width: 640px) {
- font-size: 24px;
- }
-}
\ No newline at end of file
+//Nothing here right now..
diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss
index 2db43fb5d..6962dc577 100644
--- a/www/source/stylesheets/_homepage.scss
+++ b/www/source/stylesheets/_homepage.scss
@@ -1,106 +1,276 @@
-.home-divider {
- margin: 50px auto;
- width: 90%;
- max-width: 600px;
+// Hero Banner - Home Page
+
+header {
+ height : 360px;
+ @include nav-small {
+ height: 300px;
+ }
}
-.home-hero {
- position: relative;
- padding-bottom: 45%;
- margin-bottom: 20px;
+#particles-js {
+ // Animated dot particles
+ z-index : 20;
+ position : absolute;
+ width : 100%;
+ height : 500px;
+ margin-top : -500px;
+ overflow : hidden;
+ background-color : transparent;
- @media (min-width: 420px) {
- padding-bottom: 0;
- min-height: 140px;
- }
}
-.home-hero--code {
- position: absolute;
- top: 10%;
- left: 50%;
- width: 95%;
- max-width: 300px;
- transform: translateX(-50%);
+#particles-second {
+ // Animated line particles
+ position : absolute;
+ width : 100%;
+ max-width : 100%;
+ height : 80%;
+ overflow : hidden;
+ background-color : transparent;
+
+ //mobile
+ @include nav-small{
+ height : 100%;
+ }
+
}
-.home-hero--buttons > .button {
- @media (max-width: 430px) {
- display: block;
- width: 90%;
- margin: 0 auto 15px;
- }
+.h-top {
+ // Container for homepage header art
+ height : 360px; //same as header height
+ @include nav-small {
+ height: 300px;
+ }
+
+ img {
+ &:first-of-type {
+ // Grid Art
+ z-index : 10;
+ position : absolute;
+ top : 90px;
+ height : 360px;
+ @include nav-small {
+ height: 300px;
+ top : 50px;
+ }
+ }
+
+ &:nth-child(3) {
+ // Diamond
+ height : 220px;
+ margin-top : 55px;
+ //mobile
+ @include nav-small{
+ height : 190px;
+ margin-top : 35px;
+ }
+ }
+ }
+
+ h1 {
+ // Heading
+ z-index : 10;
+ position : absolute;
+ margin-top : 280px;
+ //mobile
+ @include nav-small{
+ margin-top : 210px;
+ }
+ }
}
-.code-snippet {
- margin-bottom: 40px;
+// Hero illustration for Community
+
+img.grid {
+ z-index : -1;
+ margin-top : -80px;
}
-.code-snippet--panel {
- position: relative;
- padding-top: 20px;
- padding-bottom: 20px;
-
- &:before {
- content: "";
- display: block;
- position: absolute;
- z-index: -1;
- top: -20px;
- right: 0;
- bottom: 0;
- left: 0;
-
-
- @media (min-width: 1024px) {
- top: -10px;
- left: -60px;
- }
- }
-
- &.first {
- .code-snippet--heading {
- color: $inspec-green;
- }
-
- &:before {
- background: rgba($inspec-green, 0.1);
- }
- }
-
- &.second {
- .code-snippet--heading {
- color: $inspec-blue;
- }
-
- &:before {
- background: rgba($inspec-blue, 0.1);
- }
- }
+img.ball {
+ position : absolute;
+ width : 35px;
+ margin-top : 20px;
+ margin-left : 240px;
+ -moz-animation : spin 2s linear infinite both;
+ -webkit-animation : spin 2s linear infinite both;
+ animation : spin 2s linear infinite both;
}
-.code-snippet--img {
- display: block;
- margin: 0 auto;
- width: 100%;
-
- @media (max-width: 1023px) {
- max-width: 400px;
- }
+img.ball:nth-child(2) {
+ width : 55px;
+ margin-top : 110px;
+ margin-left : 150px;
}
-.code-snippet--description {
- display: block;
- margin-bottom: 16px;
+img.ball:nth-child(3) {
+ width : 75px;
+ margin-top : 130px;
+ margin-left : 290px;
}
-.code-snippet--heading {
- margin-bottom: 0;
- font-family: $heading-font;
- font-size: 17px;
- text-transform: uppercase;
+// Children page Headers
+
+.child-h {
+ height : 180px;
+ // plus header height
}
-.code-snippet--text {
- font-size: 15px;
-}
\ No newline at end of file
+.child-h #particles-second,
+.child-h .purp-shade {
+ height : 180px;
+}
+
+.child-h .row {
+ position : relative;
+ top : 50%;
+ -ms-transform : translateY(-50%);
+ -webkit-transform : translateY(-50%);
+ transform : translateY(-50%);
+ // vertically align content inside parent
+ // vertically align content inside parent
+}
+
+.child-h #particles-second {
+ z-index : 1;
+}
+
+// Animation for Home Page
+
+// Reflecting Diamond
+
+.bright-animate {
+ -moz-animation : brightness 6s infinite;
+ -webkit-animation : brightness 6s infinite;
+ animation : brightness 6s infinite;
+}
+
+@-webkit-keyframes brightness {
+ 0%,
+ 100% {}
+
+ 50% {}
+}
+
+@keyframes brightness {
+ 0%,
+ 100% {}
+
+ 50% {}
+}
+
+// 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;
+}
+
+@-webkit-keyframes g-animate {
+ 25% {
+ -webkit-transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
+ transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
+ }
+
+ 50% {
+ -webkit-transform : scale3d(1.2, 0.7, 1);
+ transform : scale3d(1.2, 0.7, 1);
+ }
+
+ 75% {
+ -webkit-transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
+ transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
+ }
+}
+
+@keyframes g-animate {
+ 25% {
+ -moz-transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
+ transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
+ }
+
+ 50% {
+ -moz-transform : scale3d(1.2, 0.7, 1);
+ transform : scale3d(1.2, 0.7, 1);
+ }
+
+ 75% {
+ -moz-transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
+ transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
+ }
+}
+
+// Growing HR
+
+hr.first {
+ width : 0px;
+ // Apply to animated HR, JS calls this
+}
+
+.stretch {
+ -moz-animation : grow 0.6s linear 1 both;
+ -webkit-animation : grow 0.6s linear 1 both;
+ animation : grow 0.6s linear 1 both;
+}
+
+@-webkit-keyframes grow {
+ from {
+ width : 0px;
+ }
+
+ to {
+ width : 150px;
+ }
+}
+
+@keyframes grow {
+ from {
+ width : 0px;
+ }
+
+ to {
+ width : 150px;
+ }
+}
+
+// Spin Animation Keyframes
+
+@-moz-keyframes spin {
+ from {
+ -moz-transform : rotate(0deg);
+ }
+
+ to {
+ -moz-transform : rotate(360deg);
+ }
+}
+
+@-webkit-keyframes spin {
+ from {
+ -webkit-transform : rotate(0deg);
+ }
+
+ to {
+ -webkit-transform : rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ from {
+ transform : rotate(0deg);
+ }
+
+ to {
+ transform : rotate(360deg);
+ }
+}
+
+//Rotate 90 degrees for nav-small
+
+.turn {
+-webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
diff --git a/www/source/stylesheets/_icon-block.scss b/www/source/stylesheets/_icon-block.scss
index 936e66e09..9be1699fd 100644
--- a/www/source/stylesheets/_icon-block.scss
+++ b/www/source/stylesheets/_icon-block.scss
@@ -1,25 +1 @@
-.index .icon-blocks {
- @media (max-width: 1023px) {
- .columns:nth-child(odd) {
- clear: left;
- }
- }
-}
-
-.icon-block--img {
- width: 100%;
- max-width: 100px;
- margin-bottom: 20px;
-}
-
-.icon-block--heading {
- color: $inspec-blue;
- font-family: $heading-font;
- text-transform: uppercase;
- font-size: 16px;
- line-height: 1.1;
-}
-
-.icon-block--text {
- font-size: 14px;
-}
+//Deleted Old Inspec.io//
diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss
index 2c1031f3e..c0ea998c0 100644
--- a/www/source/stylesheets/_layout.scss
+++ b/www/source/stylesheets/_layout.scss
@@ -1,29 +1,442 @@
-body {
- position: relative;
- font-family: $main-font;
- color: $body-text;
+// Alignment
+
+.strict-center {
+ right : 0;
+ left : 0;
+ margin : auto;
+ text-align : center;
}
-.container {
- max-width: 1200px;
- margin: 0 auto;
+.strict-right {
+ float : right;
+ text-align : right;
+
+ //mobile
+ @include nav-small{
+ float: initial;
+ margin : 0 auto;
+ text-align : center;
+ }
+
}
-.row {
- max-width: 1200px;
+.strict-left {
+ float : left;
+ text-align : left;
}
-#main-content {
- position: relative;
- margin-top: 64px;
- transition: margin 0.3s ease;
+.clear {
+ clear : both;
+}
- @include nav-small {
- padding: 0 $side-nav-padding-small;
- }
+.relative {
+ position : relative;
+}
- @include nav-large {
- padding-right: 10px;
- margin: $top-nav-height 0 0 ($side-nav-width + 50px);
- }
-}
\ No newline at end of file
+.relative-top {
+ z-index : 10;
+ position : relative;
+}
+
+// margins
+
+// xl
+
+.margin-both-xl {
+ margin-top : $percent_lg;
+ margin-bottom : $percent_lg;
+ //mobile
+ @include nav-small{
+ margin-top : $percent_md;
+ margin-bottom : $percent_md;
+ }
+
+}
+
+.margin-top-xl {
+ margin-top : $percent_lg;
+ //mobile
+ @include nav-small{
+ margin-top : $percent_md;
+ }
+}
+
+.margin-under-xl {
+ margin-bottom : $percent_lg;
+ //mobile
+ @include nav-small{
+ margin-bottom : $percent_md;
+ }
+}
+
+.padding-top-xl {
+ padding-top : $percent_lg;
+ //mobile
+ @include nav-small{
+ padding-top : $percent_md;
+ }
+}
+
+// default
+
+.margin-both {
+ margin-top : $percent_md;
+ margin-bottom : $percent_md;
+}
+
+.pad-both {
+ padding-top : $percent_md;
+ padding-bottom : $percent_md;
+}
+
+.margin-both-offset {
+ margin-top : $percent_md + 80px; // add header height
+ margin-bottom : $percent_md;
+ @include nav-small {
+ margin-top : $percent_md + 60px;
+ }
+}
+
+.margin-top-offset {
+ margin-top : 80px; // add header height
+ @include nav-small {
+ margin-top : 60px;
+ }
+}
+
+.margin-top {
+ margin-top : $percent_md;
+}
+
+.margin-under {
+ margin-bottom : $percent_md;
+}
+
+.padding-under {
+ padding-bottom : $percent_md;
+}
+
+// small
+
+.margin-both-xs {
+ margin-top : $percent_sm;
+ margin-bottom : $percent_sm;
+}
+
+.margin-top-xs {
+ margin-top : $percent_sm;
+}
+
+.margin-under-xs {
+ margin-bottom : $percent_sm;
+}
+
+// White Box
+
+.box-white {
+ padding : 2em;
+ border-radius : 7px;
+ background-color : white;
+}
+
+// White Box with border
+
+.box-white-brdr {
+ padding : 2em;
+ border : 1px solid #d3e2e2;
+ border-radius : 7px;
+ @include nav-small {
+ margin-bottom: 1em;
+ }
+}
+
+// Art
+
+.icon-art {
+ // Illustrations with content underneath
+ height : 100px;
+ margin-top : 15px;
+ margin-bottom : 15px;
+}
+
+.icon {
+ // gradient arrows with white box
+ z-index : 50;
+ position : absolute;
+ width : 70px;
+ height : 70px;
+ margin-top : -35px;
+ overflow : hidden;
+ border : 2px solid $color_white;
+ border-radius : 50%;
+ background : $color_white;
+
+ img {
+ display : block;
+ height : auto;
+ padding : 30%;
+ }
+}
+
+.shadow {
+ // dropshadow
+ box-shadow : 0 0 25px $color_shadow;
+}
+
+.block-angl {
+ // Angled Background
+ 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
+ @include nav-small{
+ -webkit-clip-path: initial;
+ clip-path: initial;
+ }
+}
+
+.purp-shade {
+ // Purple radial gradient applied over blue-gradient
+ background : -moz-radial-gradient(
+
+ center,
+ ellipse cover,
+ rgba(151,110,229,0.4) 0%,
+ rgba(151,110,229,0.2) 50%,
+ rgba(151,110,229,0) 100%
+ );
+ background : -webkit-radial-gradient(
+ center,
+ ellipse cover,
+ rgba(151,110,229,0.4) 0%,
+ rgba(151,110,229,0.2) 50%,
+ rgba(151,110,229,0) 100%
+ );
+ background : radial-gradient(
+ ellipse at center,
+ rgba(151,110,229,0.4) 0%,
+ rgba(151,110,229,0.2) 50%,
+ rgba(151,110,229,0) 100%
+
+ );
+ filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#66976ee5', endColorstr='#00976ee5',GradientType=1 );
+}
+
+.dark-bg {
+ background-color : $color_heading;
+}
+
+.blue-gradient {
+ // Default Blue Gradient
+ background : -moz-linear-gradient(
+ 100% -14.24% -80deg,
+ rgba(99, 206, 153, 1) 0%,
+ rgba(91, 201, 163, 1) 8.33%,
+ rgba(67, 185, 194, 1) 36.64%,
+ rgba(58, 179, 206, 1) 52.48%,
+ rgba(58, 175, 206, 1) 67.93%,
+ rgba(58, 162, 206, 1) 83.94%,
+ rgba(58, 142, 206, 1) 100%
+ );
+ background : -ms-linear-gradient(
+ -80deg,
+ rgba(99, 206, 153, 1) 0%,
+ rgba(91, 201, 163, 1) 8.33%,
+ rgba(67, 185, 194, 1) 36.64%,
+ rgba(58, 179, 206, 1) 52.48%,
+ rgba(58, 175, 206, 1) 67.93%,
+ rgba(58, 162, 206, 1) 83.94%,
+ rgba(58, 142, 206, 1) 100%
+ );
+ background : -o-linear-gradient(
+ -80deg,
+ rgba(99, 206, 153, 1) 0%,
+ rgba(91, 201, 163, 1) 8.33%,
+ rgba(67, 185, 194, 1) 36.64%,
+ rgba(58, 179, 206, 1) 52.48%,
+ rgba(58, 175, 206, 1) 67.93%,
+ rgba(58, 162, 206, 1) 83.94%,
+ rgba(58, 142, 206, 1) 100%
+ );
+ background : -webkit-gradient(linear,100% -14.24% ,56.15% 114.24% ,color-stop(0,rgba(99, 206, 153, 1) ),color-stop(0.0833,rgba(91, 201, 163, 1) ),color-stop(0.3664,rgba(67, 185, 194, 1) ),color-stop(0.5248,rgba(58, 179, 206, 1) ),color-stop(0.6793,rgba(58, 175, 206, 1) ),color-stop(0.8394,rgba(58, 162, 206, 1) ),color-stop(1,rgba(58, 142, 206, 1) ));
+ background : -webkit-linear-gradient(
+ -80deg,
+ rgba(99, 206, 153, 1) 0%,
+ rgba(91, 201, 163, 1) 8.33%,
+ rgba(67, 185, 194, 1) 36.64%,
+ rgba(58, 179, 206, 1) 52.48%,
+ rgba(58, 175, 206, 1) 67.93%,
+ rgba(58, 162, 206, 1) 83.94%,
+ rgba(58, 142, 206, 1) 100%
+
+ );
+}
+
+// form
+
+input.form-item {
+ display : inline;
+ width : 60%;
+ @include nav-small {
+ width: 100%;
+ display: block;
+ }
+}
+
+form > button {
+ margin-left : 1em;
+ @include nav-small {
+ margin: 0 auto;
+ text-align: center;
+ margin-top: 1em;
+ }
+}
+
+form > button > i {
+ margin-right : 6px;
+}
+
+input[type="email"], input[type="text"] {
+ color : $color_heading;
+ border : 1px solid #d3e2e2;
+ -webkit-box-shadow : 0 0 2px $color_shadow;
+ box-shadow : 0 0 2px $color_shadow;
+ font-family : $main-font;
+ font-weight : 300;
+ margin:0;
+}
+input[type="text"]:focus,
+input[type="text"]:hover,
+input[type="email"]:focus,
+input[type="email"]:hover {
+ border : 1px solid $color_purple;
+ -webkit-box-shadow : 0 0 5px $color_shadow;
+ box-shadow : 0 0 5px $color_shadow;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+ color : $color_gray;
+ font-family : $main-font;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+ color : $color_gray;
+ font-family : $main-font;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+ color : $color_gray;
+ font-family : $main-font;
+}
+
+input::placeholder,
+textarea::placeholder {
+ color : $color_gray;
+ font-family : $main-font;
+}
+
+// Progress bar
+
+progress {
+ /* Positioning */
+ -moz-appearance : none;
+ -webkit-appearance : none;
+ appearance : none;
+ position : fixed;
+ top : 0;
+ left : 0;
+ width : 100%;
+ height : 1.6px;
+ color : $color_link;
+ border : none;
+ background-color : transparent;
+ z-index : 500;
+ /* Dimensions */
+ /* Reset the appearance */
+ /* Get rid of the default border in Firefox/Opera. */
+ /* Progress bar container for Firefox/IE10+ */
+ /* Progress bar value for IE10+ */
+}
+
+progress[value]::-webkit-progress-bar {
+ background-color : white;
+}
+
+progress[value]::-webkit-progress-value {
+ background-color : $color_link;
+}
+
+progress[value]::-moz-progress-bar {
+ background-color : white;
+}
+
+progress[value]::-moz-progress-value {
+ background-color : $color_link;
+}
+
+progress[value]::progress-bar {
+ background-color : white;
+}
+
+progress[value]::progress-value {
+ background-color : $color_link;
+}
+
+
+//search bar
+
+
+.searchbar{
+ display:flex;
+ align-items: center;
+ width:100%;
+}
+
+//search form
+
+form.main-sidebar--search {
+ width: 100%;
+}
+
+//search input
+
+form.main-sidebar--search input[type="text"] {
+ width: 90%;
+ display: inline;
+ margin-top: 1.2em;
+
+ @include nav-small {
+ width:100%;
+ }
+
+}
+
+
+//Search button
+
+.search {
+ // search icon
+ width : 70px;
+ height : 70px;
+ overflow : hidden;
+ border : 2px solid $color_white;
+ border-radius : 50%;
+ background : $color_white;
+ cursor: pointer;
+ position: relative;
+ z-index: 50;
+ float: right;
+ outline: none;
+
+ @include nav-small {
+ display: none;
+ }
+
+ img {
+ display : block;
+ height : auto;
+ }
+}
diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss
index 78501f23f..0f3df182e 100644
--- a/www/source/stylesheets/_nav.scss
+++ b/www/source/stylesheets/_nav.scss
@@ -1,28 +1,11 @@
-$side-nav-width: 200px;
-$top-nav-height: 100px;
-$side-nav-padding-large: 10px;
-$side-nav-padding-small: 30px;
-$nav-breakpoint: 730px;
-
-@mixin nav-large {
- @media (min-width: #{$nav-breakpoint}) {
- @content;
- }
-}
-
-@mixin nav-small {
- @media (max-width: $nav-breakpoint - 1px) {
- @content;
- }
-}
#main-nav {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
- background: $white;
+ background: $color_white;
transition: top 0.3s ease;
@include nav-large {
@@ -47,63 +30,25 @@ $nav-breakpoint: 730px;
}
}
-.main-nav--toggle {
- display: none;
- transition: all 0.3s ease;
- path {
- fill: $inspec-grey;
- }
-
- @include nav-small {
- display: block;
- position: absolute;
- top: 20px;
- right: $side-nav-padding-small;
- width: 20px;
- height: 20px;
- cursor: pointer;
- }
-
- &.is-active {
- transform: rotate(-90deg);
-
- path {
- fill: $inspec-blue;
- }
- }
-}
.main-nav--link-ctas {
padding: 9px 0 9px $side-nav-padding-small;
- border-bottom: 1px solid lighten($inspec-grey, 40%);
+ border-bottom: 1px solid lighten($color_gray, 40%);
& > .button {
margin-bottom: 0;
}
- @include nav-large {
- display: none;
- }
}
.main-nav--logo {
- display: block;
-
- @include nav-small {
- max-width: 130px;
- margin: 15px 0 15px $side-nav-padding-small;
- }
-
- @include nav-large {
- padding: 0 $side-nav-padding-large;
- margin: 30px 0;
- }
+ display: inline-block;
+ width: 130px;
+ float: left;
}
.main-nav--links {
- border-top: 1px solid lighten($inspec-grey, 40%);
- margin-bottom: 0;
@extend .no-bullet;
@include nav-small {
@@ -120,23 +65,7 @@ $nav-breakpoint: 730px;
}
}
-.main-nav--link {
- position: relative;
- padding: 9px 0;
- border-bottom: 1px solid lighten($inspec-grey, 40%);
- text-transform: uppercase;
- font-size: 14px;
- & > a {
- color: $inspec-grey;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($inspec-grey, 15%);
- }
- }
-}
.main-nav--link-icon {
position: absolute;
@@ -147,10 +76,7 @@ $nav-breakpoint: 730px;
@include nav-large {
left: $side-nav-padding-large;
}
-}
-.main-nav--link-text {
- margin-left: 55px;
@include nav-large {
margin-left: 34px;
@@ -159,23 +85,121 @@ $nav-breakpoint: 730px;
#main-nav-ctas {
transition: top 0.3s ease;
- background: $white;
+ background: $color_white;
+ padding-left: 40px;
+ padding-right: 40px;
+ box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
@include nav-small {
- display: none;
+ padding-left: .9375rem;
+ padding-right: .9375rem;
+ box-shadow: initial;
}
+ .main-nav--link-text {
+ margin-left: 6px;
+ }
+
+ a {
+ color: $color_gray;
+ }
+
+
+ a:hover, a.btn, a:active {
+ color: $color_purple;
+ }
+
+ a.btn:hover {
+ color: white;
+ }
+
+
@include nav-large {
position: fixed;
z-index: 90;
top: 0;
width: 100%;
- max-width: 1200px;
- padding: 30px 10px 30px 0;
+ line-height: 80px;
text-align: right;
& > .button {
margin-bottom: 0;
}
}
-}
\ No newline at end of file
+}
+
+//Hannah's Styles'
+
+nav {
+ z-index: 200;
+ height: 80px;
+ margin-bottom: 80px;
+
+ @include nav-small {
+ height: 60px;
+ }
+}
+
+nav ul {
+ margin-bottom: 0;
+
+}
+
+nav li {
+ display: inline-block;
+ font-weight: 400;
+ line-height: 80px;
+
+ @include nav-small {
+ line-height: 60px;
+ clear:both;
+ display:block;
+ line-height: initial;
+ padding-top: $percent_sm/2;
+ padding-bottom: $percent_sm/2;
+ border-bottom: 1px solid $color_lt_blue;
+ }
+
+}
+
+nav li:first-child{
+ @include nav-small {
+ padding-top: $percent_sm;
+ }
+}
+
+nav li:last-child {
+ @include nav-small {
+ padding-top: $percent_sm;
+ padding-bottom: $percent_sm;
+ }
+}
+
+#main-nav-ctas > i {
+ display:none;
+ color: $color_gray;
+
+ @include nav-small {
+ display: block;
+ font-size: 1.25em;
+ float: right;
+ margin-top: 1em;
+ }
+}
+
+span.toggle {
+ font-size: 1.25em;
+ float: right;
+
+}
+
+a.main-nav--logo {
+ display: inline-block;
+ width: 130px;
+ float: left;
+ margin-left: initial!important;
+
+ @include nav-small {
+ margin-top: 0.8em;
+ }
+}
diff --git a/www/source/stylesheets/_settings.scss b/www/source/stylesheets/_settings.scss
index 961ece89f..5c3c91c70 100644
--- a/www/source/stylesheets/_settings.scss
+++ b/www/source/stylesheets/_settings.scss
@@ -1,13 +1,87 @@
-$inspec-blue: #4197b5;
-$inspec-green: #63ce99;
-$inspec-dark-blue: #5c6670;
-$inspec-grey: #606468;
-$inspec-light-grey: #c3c6c8;
-$off-white: #e6e6e6;
-$off-white-2: #f2f2f2;
-$white: #fff;
-$body-text: $inspec-dark-blue;
+$color_heading : #2c2e30;
+$color_paragraph : #69787f;
+$color_gray : #b0bebf;
+$color_white : white;
+$color_link : #3ab3ce;
+$color_purple : #8d66d8;
+$color_code_token : #3bc5cc;
+$color_hr : rgba(99,206,153,1);
+$color_shadow : rgba(151,110,229,0.2);
+$color_triangle_block : #41ade5;
+$color_purple_shade : rgba(151,110,229,0.4);
+$color_blue_shade : rgba(91, 201, 163, 1);
+$color_blue_shade_2 : rgba(58, 142, 206, 1);
+$color_lt_blue : #eaf8f9;
-$heading-accent-font: 'Jaapokki Alternate', 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$heading-font: 'Jaapokki', 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$main-font: 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+//fonts
+$heading-font : 'Roboto', sans-serif;
+$main-font : 'source sans pro light', Helvetica, Arial, sans-serif;
+
+//margins
+$percent_lg : 12%;
+$percent_md : 100px;
+$percent_sm : 40px;
+
+//mixins
+
+$side-nav-width: 200px;
+$top-nav-height: 100px;
+$side-nav-padding-large: 10px;
+$side-nav-padding-small: 30px;
+$nav-breakpoint: 780px;
+
+
+@mixin nav-large {
+ @media (min-width: #{$nav-breakpoint}) {
+ @content;
+ }
+}
+
+@mixin nav-small {
+ @media (max-width: $nav-breakpoint - 1px) {
+ @content;
+ }
+}
+
+//shared styles
+%uppercase {
+ text-transform : uppercase;
+ font-weight : bold;
+ letter-spacing : 0.1em;
+}
+
+%transition {
+ -moz-transition : all .2s;
+ -webkit-transition : all .2s;
+ transition : all .2s;
+}
+
+//Hide/show div on mobile
+
+.mobile-hide {
+ display: initial;
+ @include nav-small {
+ display: none;
+ }
+}
+
+.mobile-show {
+ display: none;
+ @include nav-small {
+ display: block;
+ }
+}
+
+.hide {
+ display: none;
+}
+
+.show {
+ display: block;
+}
+
+//Hide Global Message
+
+#global-message {
+ display : none;
+}
diff --git a/www/source/stylesheets/_sidebar.scss b/www/source/stylesheets/_sidebar.scss
index 2c8b6095b..e48296c56 100644
--- a/www/source/stylesheets/_sidebar.scss
+++ b/www/source/stylesheets/_sidebar.scss
@@ -1,85 +1,56 @@
-.sidebar-layout-docs {
- .main-nav--links {
- border-top: none;
- }
- .main-nav--link-ctas {
- border-bottom: none;
- margin-bottom: 3px;
- }
+
+//stickjs - subtract header height
+.is_stuck {
+ margin-top: $percent_md;
}
-.main-nav--sidebar {
- padding: 0 $side-nav-padding-small;
+//overwriting default ul li styles for side bar
- @include nav-large {
- padding: 0 $side-nav-padding-large;
- }
+ul.main-sidebar--links {
+ list-style-type: none;
+ margin-bottom: $percent_sm!important;
}
-.main-sidebar--links {
- list-style: none;
- margin-left: 0.5rem;
-
- ul {
- margin-left: 0;
- margin-bottom: 1rem;
- }
+ul.main-sidebar--links li {
+ margin-left: 0em;
+}
+ul.main-sidebar--links li:last-child {
+ margin-bottom: $percent_sm!important;
}
-.main-sidebar--link h6 {
- font-weight: 500;
-}
+// THIS IS STILL OLD STUFF - don't know what it is - hannah//
-.main-sidebar--list--item {
- position: relative;
- padding: 3px 0;
- text-transform: uppercase;
- font-size: 14px;
-
- & > a {
- color: $inspec-grey;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($inspec-grey, 15%);
- }
- }
-}
-
-.center {
- text-align: center;
-}
-
-.gsc-adBlock, .gcsc-branding {
- display: none !important;
+.gcsc-branding,
+.gsc-adBlock {
+ display : none !important;
}
.gsc-control-cse {
- padding: 0 !important;
+ padding : 0 !important;
tbody {
- border: none;
- background: none;
+ border : none;
+ background : none;
}
.gsc-input-box {
- height: 3rem;
+ height : 3rem;
+
table {
- margin-bottom: 0;
+ margin-bottom : 0;
}
}
.gsc-input input {
- box-shadow: none !important;
+ box-shadow : none !important;
}
.gsc-search-button {
- font-family: inherit;
- font-size: 11px;
- padding: 5px 18px;
- height: 27px;
- min-width: 54px;
+ min-width : 54px;
+ height : 27px;
+ padding : 5px 18px;
+ font-family : inherit;
+ font-size : 11px;
}
}
diff --git a/www/source/stylesheets/_tutorials-page.scss b/www/source/stylesheets/_tutorials-page.scss
index 75dd5fde6..f6c77d506 100644
--- a/www/source/stylesheets/_tutorials-page.scss
+++ b/www/source/stylesheets/_tutorials-page.scss
@@ -1,29 +1,20 @@
.tutorials--subhead {
- font-family: $heading-font;
- text-transform: uppercase;
- color: $inspec-blue;
- font-size: 18px;
+ color : $color_link;
+ font-family : $heading-font;
}
.tutorials--links {
- margin-bottom: 30px;
-
- @media (min-width: 640px) {
- padding-left: 30px;
- }
-
& > li {
- margin-bottom: 4px;
+ margin-bottom : 4px;
}
}
.tutorials--link {
- text-transform: uppercase;
- font-family: $heading-font;
+ font-family : $heading-font;
& > span {
- text-transform: none;
- font-family: $main-font;
- color: $body-text;
+ color : $color_paragraph;
+ text-transform : none;
+ font-family : $main-font;
}
-}
\ No newline at end of file
+}
diff --git a/www/source/stylesheets/_typography.scss b/www/source/stylesheets/_typography.scss
index a45780a78..8117f7a12 100644
--- a/www/source/stylesheets/_typography.scss
+++ b/www/source/stylesheets/_typography.scss
@@ -1,15 +1,120 @@
-h1,h2,h3,h4,h5,h6 {
- font-family: $main-font;
+h1 {
+ color : $color_heading;
+ font-family : $heading-font;
+ font-size : 2.25em;
+ font-weight : 300;
+ //mobile
+ @include nav-small{
+ font-size : 1.8em;
+ }
}
-.main-subhead {
- @media (min-width: 640px) {
- font-size: 30px;
- }
+h2 {
+ color : $color_heading;
+ font-family : $heading-font;
+ font-size : 1.75em;
+ font-weight : 300;
+ //mobile
+ @include nav-small{
+ font-size : 1.4em;
+ }
}
-p, ul {
- @media (max-width: 400px) {
- font-size: 14px;
- }
-}
\ No newline at end of file
+h3 {
+ color : $color_heading;
+ font-family : $heading-font;
+ font-size : 1.25em;
+ font-weight : 300;
+ //mobile
+ @include nav-small{
+ font-size : 1.2em;
+ }
+}
+
+h4 {
+ color : $color_paragraph;
+ font-family : $heading-font;
+ font-size : 1.25em;
+ font-weight : 300;
+ line-height : 1.4em;
+ //mobile
+ @include nav-small{
+ font-size : 1.2em;
+ line-height : 1.6em;
+ }
+
+}
+
+p {
+ //mobile
+ @include nav-small{
+ line-height : 1.6em;
+ }
+
+}
+
+li,
+ol,
+p,
+ul {
+ color : $color_paragraph;
+ font-family : $main-font;
+ font-weight : 300;
+ list-style-type: none;
+}
+
+
+small {
+ @extend %uppercase;
+ color : $color_gray;
+ font-family : $main-font;
+ font-size : 65%;
+}
+
+li {
+ // indent for li
+ margin-left : 1.6em;
+
+ @include nav-small {
+ margin-left : initial;
+ }
+}
+
+hr {
+ width : 150px;
+ height : 1px;
+ margin-top : 6px;
+ margin-bottom : 6px;
+ border : 0;
+ background : linear-gradient(
+
+ to right,
+ $color_hr 0,
+ $color_link 100%
+
+ );
+ background-color : $color_hr;
+ filter : progid:dximagetransform.microsoft.gradient(startcolorstr='$color_hr', endcolorstr='$color_link', gradienttype=1 );
+}
+
+// Font Colors//
+
+.t-dk {
+ color : $color_heading;
+}
+
+.t-white {
+ color : $color_white;
+}
+
+.t-blue {
+ color : $color_link;
+}
+
+.t-transparent {
+ opacity : 0.6;
+}
+
+.t-purple {
+ color : $color_purple;
+}
diff --git a/www/source/stylesheets/site.css.scss b/www/source/stylesheets/site.css.scss
index b2299be2c..383b09971 100644
--- a/www/source/stylesheets/site.css.scss
+++ b/www/source/stylesheets/site.css.scss
@@ -4,13 +4,13 @@
@import "settings";
@import "buttons";
@import "nav";
-@import "global-message";
+//@import "global-message";
@import "sidebar";
@import "footer";
@import "layout";
@import "typography";
-@import "icon-block";
-@import "hero";
+//@import "icon-block";
+//@import "hero";
@import "homepage";
@import "tutorials-page";
@import "code";
diff --git a/www/source/tutorials.html.slim b/www/source/tutorials.html.slim
index aee9fad20..482858995 100644
--- a/www/source/tutorials.html.slim
+++ b/www/source/tutorials.html.slim
@@ -2,103 +2,125 @@
title: InSpec - Tutorials
---
-.row
- .columns.large-10.large-offset-1
- img.hero--img src="/images/tutorials/tutorial-icon.png"
- h1.hero--heading InSpec Tutorials
- h2.hero--subhead.text-center
- | Clear, step-by-step instructions for getting started and building
- your InSpec skills.
-.row
+/! animated banner
+header.child-h.blue-gradient.margin-top-offset
+ #particles-second
+ canvas.particles-js-canvas-el /
+ .purp-shade
+ .row
+ .columns.large-8.medium-8
+
+ h2.t-white#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
+
+ | Clear, step-by-step instructions for getting started and building your InSpec skills
+
+
+
+.row.margin-both
.columns.medium-12
- h3.tutorials--subhead Tutorials
- p Huge thanks to Annie Hedgpeth for creating all of these fantastic tutorials.
+ h3 Tutorials
+
+ hr.strict-left
+
+ br
+ p.clear Huge thanks to Annie Hedgpeth for creating all of these fantastic tutorials.
ul.tutorials--links.no-bullet
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-1"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 1
span - Hello World
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-2"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 2
span - Command Resource Blog Logo
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-3"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 3
span - File Resource
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-4"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 4
span - Custom Matchers
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-5"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 5
span - Create a Profile
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-6"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 6
span - Ways to Run It and Places to Store It
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-7"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 7
span - How to Inherit a Profile from Chef Compliance Server
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-8"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 8
span - Regular Expressions
li
a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-9"
- i.fa.fa-link
+ i.fa.fa-angle-right
| Day 9
span - Attributes
li
- a.tutorials--link href="https://learn.chef.io/tutorials/inspec/"
- i.fa.fa-link
- span Verify Your Chef Code with InSpec
+
+ a.tutorials--link href="https://learn.chef.io/tutorials/test-your-infrastructure-code/"
+ i.fa.fa-angle-right
+ span Test Your Infrastructure Code with Chef
+
li
a.tutorials--link href="https://learn.chef.io/tutorials/compliance-assess/"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Assess Your Infrastructure with Chef Compliance Scanner
li
a.tutorials--link href="https://learn.chef.io/tutorials/compliance-remediate/"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Remediate Compliance Failures on your Infrastructure with Chef
- h3.tutorials--subhead Guides For Advanced Topics
- p
- | Additional huge thanks to Christian Johannsen, Jeremy Miller, and
- blindscientist for these amazing materials.
+
+
+ h3.margin-top-xs Guides For Advanced Topics
+ hr.strict-left
+
+ br
+ p.clear Additional huge thanks to Christian Johannsen, Jeremy Miller, and blindscientist for these amazing materials.
+
ul.tutorials--links.no-bullet
li
a.tutorials--link href="http://datatomix.com/?p=236"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Windows infrastructure testing using InSpec - Part 1
li
a.tutorials--link href="http://datatomix.com/?p=238"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Windows infrastructure testing using InSpec and Profiles - Part 2
li
a.tutorials--link href="https://github.com/jeremymv2/chef-intranet-scaffolding/blob/master/README.md"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Operating InSpec in an air-gapped environment
li
a.tutorials--link href="http://scienceofficersblog.blogspot.de/2016/02/testing-ansible-with-inspec.html"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Testing Ansible with InSpec
- h3.tutorials--subhead Podcasts
+
+
+ h3.margin-top-xs Podcasts
+ hr.strict-left
+
+ br
ul.tutorials--links.no-bullet
li
a.tutorials--link href="http://foodfightshow.org/2016/02/inspec.html"
- i.fa.fa-link
+ i.fa.fa-angle-right
span InSpec Foodfight
li
a.tutorials--link href="https://www.arresteddevops.com/tdi/"
- i.fa.fa-link
+ i.fa.fa-angle-right
span Test Driven Infrastructure With Arthur Maltson and Michael Goetz