From: Kevin Chu <kwhchu@users.noreply.github.com>
Date: Tue, 18 Apr 2017 22:03:51 +0000 (-0700)
Subject: Updating sub page video
X-Git-Tag: v6.4.0-rc1~46^2~66
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d1456718117e0e29e4c78aa9e866d0aa48da4612;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Updating sub page video
---

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index 4746b2e07..579d16f6d 100644
--- a/docs/assets/scss/_accordion-content.scss
+++ b/docs/assets/scss/_accordion-content.scss
@@ -83,10 +83,22 @@
   border-bottom: 1px dashed #e5e5e5;
 }
 
+.accordion-content-item-thumbnail {
+  
+  @include breakpoint(small down) {
+    margin-bottom: 1rem;
+  }
+}
+
+.accordion-content-item {
+  font-family: "Proxima Nova", Helvetica, Arial, sans-serif;
+}
+
 .accordion-content-item-cta {
 
   img {
     margin-right: 0.5rem;
+    
   }
 }
 
diff --git a/docs/pages/index.md b/docs/pages/index.md
index f1a488120..7473e01f4 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -29,36 +29,36 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
 
       <div class="row accordion-content-item">
 
-        <div class="medium-4 columns">
+        <div class="medium-4 columns accordion-content-item-thumbnail">
           <img src="http://placehold.it/350x250">
         </div>
-        <div class="medium-8 columns">
-          <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-          <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+        <div class="medium-8 columns accordion-content-item-text">
+          <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
+          <a href="#" class="accordion-content-item-cta">Watch Video</a>
         </div>
       </div>
 
       <hr class="accordion-content-item-divider">
 
       <div class="row">
-        <div class="medium-4 columns">
+        <div class="medium-4 columns accordion-content-item-thumbnail">
           <img src="http://placehold.it/350x250">
         </div>
         <div class="medium-8 columns">
-          <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-          <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+          <a href="#" class="accordion-content-item-cta">Watch Video</a>
         </div>
       </div>
 
       <hr class="accordion-content-item-divider">
 
       <div class="row">
-        <div class="medium-4 columns">
+        <div class="medium-4 columns accordion-content-item-thumbnail">
           <img src="http://placehold.it/350x250">
         </div>
         <div class="medium-8 columns">
-          <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-          <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+          <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+          <a href="#" class="accordion-content-item-cta">Watch Video</a>
         </div>
       </div>
 
@@ -69,36 +69,36 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
       <div class="accordion-content " data-tab-content>
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
@@ -109,36 +109,36 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
       <div class="accordion-content " data-tab-content>
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
@@ -149,36 +149,36 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
       <div class="accordion-content " data-tab-content>
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
         <hr class="accordion-content-item-divider">
 
         <div class="row">
-          <div class="medium-4 columns">
+          <div class="medium-4 columns accordion-content-item-thumbnail">
             <img src="http://placehold.it/350x250">
           </div>
           <div class="medium-8 columns">
-            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas and More</h4>
-            <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
+            <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
+            <a href="#" class="accordion-content-item-cta">Watch Video</a>
           </div>
         </div>
 
diff --git a/docs/pages/installation.md b/docs/pages/installation.md
index b88173ea0..95bac23af 100644
--- a/docs/pages/installation.md
+++ b/docs/pages/installation.md
@@ -5,7 +5,11 @@ description: There are many ways to install Foundation, but if you're just getti
 
 ## Installation
 
-<iframe width="500" height="315" src="https://www.youtube.com/embed/sKYsLkJ0yvQ" frameborder="0" allowfullscreen></iframe>
+<div class="subpage-intro-video">
+  <iframe width="690" height="385" src="https://www.youtube.com/embed/sKYsLkJ0yvQ" frameborder="0" allowfullscreen></iframe>
+</div>
+
+---
 
 ### Command-Line Tool