Updating sub page video

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index 4746b2e07cb0a089d9755fe6dd19f1ed6ad36609..579d16f6d1b0a69de8b2e1432eec1277d1c4a699 100644 (file)
--- 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 f1a4881209a7e2f178027147552c4bb102bd602b..7473e01f41d3cd0d75fe1053d40db5f3a8735582 100644 (file)
--- 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 b88173ea047bb12995e1351ae1aa017ecf70bc67..95bac23af20540d6f5132832de3437145bcc0ff6 100644 (file)
--- 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