Merge pull request #1108 from chef/mw/community-and-tutorials

Add community and tutorials pages

www/source/community.html.slim

@@ -1,26 +1,35 @@
 ---
 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.
-classes: community
 ---
-section.community
-  .row
-    .columns.medium-12
-      .content
-        h1 Let's build together
-        p
-          | InSpec is an open source project created and supported
-            by a passionate group of people. We have active, dedicated users
-            with a great vision for this project.
 
-        h2 Get answers
+.row
-        p
+  .columns.large-10.large-offset-1
-          | Is something unclear or just feeling stuck? We're here to help keep you moving.
+    img.hero--img src="/images/community/community-icon.png"
-            Join us on Slack and chat with us.
+    h1.hero--heading InSpec Community
-        a.button href="http://slack.habitat.sh" target="_blank" Join us on Slack
+    h2.hero--subhead.text-center
-
+      | Let's build together
-        h2 Bug reports and features
+.icon-blocks.row
-        p
+  .columns.medium-4
-          | We rely on your feedback to improve InSpec. Whether you found a bug or
+    img.icon-block--img src="/images/community/contribute-icon.png"
-            have a great idea for an improvement, join us on GitHub.
+    h3.icon-block--heading Contribute to InSpec
-        a.button href="https://github.com/chef/inspec" target="_blank" GitHub
+    p.icon-block--text
+      | InSpec is an open source project created and supported by a passionate
+        group of active and dedicated users. If you would like to contribute
+        to the project, please do. We would love to work with you.
+    a.button.primary.block href="" Start Contributing
+  .columns.medium-4
+    img.icon-block--img src="/images/community/get-icon.png"
+    h3.icon-block--heading Get Answers Quickly
+    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.
+    a.button.primary.block href="" Get Help
+  .columns.medium-4
+    img.icon-block--img src="/images/community/report-icon.png"
+    h3.icon-block--heading Report Bugs and Request Features
+    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.
+    a.button.primary.block href="" Give Feedback

www/source/index.html.slim

@@ -19,23 +19,23 @@ title: InSpec - Audit and Test Framework
       .columns.large-3.medium-6
         img.icon-block--img src="/images/home/platform-icon.png"
         h3.icon-block--heading Platform Agnostic
-        p
+        p.icon-block--text
           | InSpec supports all major operating systems and many applications
             out of the box.
       .columns.large-3.medium-6
         img.icon-block--img src="/images/home/test-icon.png"
         h3.icon-block--heading Test Locally or Remotely
-        p
+        p.icon-block--text
           | InSpec provides a local agent, as well as full remote testing support.
       .columns.large-3.medium-6
         img.icon-block--img src="/images/home/free-icon.png"
         h3.icon-block--heading Free to Run Anywhere
-        p
+        p.icon-block--text
           | InSpec is a language that can easily express freedom to run anywhere.
       .columns.large-3.medium-6
         img.icon-block--img src="/images/home/fully-icon.png"
         h3.icon-block--heading Fully Extensible Language
-        p
+        p.icon-block--text
           | Easily extend the InSpec language to cover new operating systems,
             devices, or applications.
     hr.home-divider

www/source/stylesheets/_buttons.scss

@@ -22,6 +22,10 @@
     }
   }
 
+  &.block {
+    display: block;
+  }
+
   & + .button {
     margin-left: 15px;
   }

www/source/stylesheets/_hero.scss

@@ -0,0 +1,19 @@
+.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;
+  }
+}

www/source/stylesheets/_icon-block.scss

@@ -19,3 +19,7 @@
   font-size: 16px;
   line-height: 1.1;
 }
+
+.icon-block--text {
+  font-size: 14px;
+}

www/source/stylesheets/_tutorials-page.scss

@@ -0,0 +1,23 @@
+.tutorials--subhead {
+  font-family: $heading-font;
+  text-transform: uppercase;
+  color: $inspec-blue;
+  font-size: 18px;
+}
+
+.tutorials--links {
+  margin-bottom: 30px;
+
+  @media (min-width: 640px) {
+    padding-left: 30px;
+  }
+
+  & > li {
+    margin-bottom: 4px;
+  }
+}
+
+.tutorials--link {
+  text-transform: uppercase;
+  font-family: $heading-font;
+}

www/source/stylesheets/_typography.scss

@@ -8,7 +8,7 @@ h1,h2,h3,h4,h5,h6 {
   }
 }
 
-p {
+p, ul {
   @media (max-width: 400px) {
     font-size: 14px;
   }

www/source/stylesheets/site.css.scss

@@ -7,4 +7,6 @@
 @import "layout";
 @import "typography";
 @import "icon-block";
+@import "hero";
 @import "homepage";
+@import "tutorials-page";

www/source/tutorials.html.slim

@@ -0,0 +1,87 @@
+---
+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
+  .columns.medium-12
+    h3.tutorials--subhead Tutorials
+    p 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
+          |  Day 1
+        |  - Hello World
+      li
+        a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-2"
+          i.fa.fa-link
+          |  Day 2
+        |  - Command Resource Blog Logo
+      li
+        a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-3"
+          i.fa.fa-link
+          |  Day 3
+        |  - File Resource
+      li
+        a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-4"
+          i.fa.fa-link
+          |  Day 4
+        |  - Custom Matchers
+      li
+        a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-5"
+          i.fa.fa-link
+          |  Day 5
+        |  - Create a Profile
+      li
+        a.tutorials--link href="http://www.anniehedgie.com/inspec-basics-6"
+          i.fa.fa-link
+          |  Day 6
+        |  - 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
+          |  Day 7
+        |  - How to Inherit a Profile from Chef Compliance Server
+      li
+        a.tutorials--link href=""
+          i.fa.fa-link
+          |  Day 8
+        |  - InSpec and Chef Automate for Visualization and Workflow
+    h3.tutorials--subhead Guides For Advanced Topics
+    p
+      | 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
+        |  Windows infrastructure testing using InSpec - Part 1
+      li
+        a.tutorials--link href="http://datatomix.com/?p=238"
+          i.fa.fa-link
+        |  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
+        |  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
+        |  Testing Ansible with InSpec
+    h3.tutorials--subhead Podcasts
+    ul.tutorials--links.no-bullet
+      li
+        a.tutorials--link href="http://foodfightshow.org/2016/02/inspec.html"
+          i.fa.fa-link
+        |  InSpec Foodfight
+      li
+        a.tutorials--link href="https://www.arresteddevops.com/tdi/"
+          i.fa.fa-link
+        |  Test Driven Infrastructure With Arthur Maltson and Michael Goetz