From dbafa9fb10e2e76e6037c95bd63a9ecd7324518d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= <displaynone@gmail.com>
Date: Thu, 19 Oct 2017 20:26:12 +0200
Subject: [PATCH] kss - Adding Media

---
 doc/styleguide/item-media-embed.html          | 11 ++++++
 .../item-media-fullscreen-embed.html          | 13 ++++++-
 doc/styleguide/item-media-screenshots.html    | 12 +++++--
 doc/styleguide/section-media.html             | 36 +++++++++++++++++--
 src/scss/modules/_browser.scss                |  5 ++-
 src/scss/modules/_media.scss                  |  8 +++++
 6 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html
index bce00ee..a0434ed 100644
--- a/doc/styleguide/item-media-embed.html
+++ b/doc/styleguide/item-media-embed.html
@@ -91,6 +91,17 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;16" title="Patty McCord" target="_blank">Patty McCord</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
diff --git a/doc/styleguide/item-media-fullscreen-embed.html b/doc/styleguide/item-media-fullscreen-embed.html
index 3e4d6db..2b5a138 100644
--- a/doc/styleguide/item-media-fullscreen-embed.html
+++ b/doc/styleguide/item-media-fullscreen-embed.html
@@ -92,6 +92,17 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;12" title="Netflix" target="_blank">Netflix</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -126,7 +137,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_media.scss</code>, line 35
+            Source: <code>modules/_media.scss</code>, line 39
           </div>
 
       </div>
diff --git a/doc/styleguide/item-media-screenshots.html b/doc/styleguide/item-media-screenshots.html
index 9af0a23..89b97f4 100644
--- a/doc/styleguide/item-media-screenshots.html
+++ b/doc/styleguide/item-media-screenshots.html
@@ -91,6 +91,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;114" title="Screenshot" target="_blank">Screenshot</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -100,7 +108,7 @@
 
             <div class="kss-modifier__example">
               <figure class="browser">
-  <img src="http://lorempixel.com/500/500/food/" />
+  <img src="http://lorempixel.com/1000/500/food/" />
   <figcaption>Foddie</figcaption>
 </figure>
               <div class="kss-modifier__example-footer"></div>
@@ -113,7 +121,7 @@
                   Markup
               </summary>
               <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
-  &lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
+  &lt;img src&#x3D;&quot;http://lorempixel.com/1000/500/food/&quot; /&gt;
   &lt;figcaption&gt;Foddie&lt;/figcaption&gt;
 &lt;/figure&gt;</code></pre>
             </details>
diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html
index 8f4f2cc..1bc62a7 100644
--- a/doc/styleguide/section-media.html
+++ b/doc/styleguide/section-media.html
@@ -197,6 +197,17 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;16" title="Patty McCord" target="_blank">Patty McCord</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -264,6 +275,17 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/netflix-culture#slide&#x3D;12" title="Netflix" target="_blank">Netflix</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;33" title="Keynote" target="_blank">Keynote</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -298,7 +320,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_media.scss</code>, line 35
+            Source: <code>modules/_media.scss</code>, line 39
           </div>
 
       </div>
@@ -318,6 +340,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;114" title="Screenshot" target="_blank">Screenshot</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -327,7 +357,7 @@
 
             <div class="kss-modifier__example">
               <figure class="browser">
-  <img src="http://lorempixel.com/500/500/food/" />
+  <img src="http://lorempixel.com/1000/500/food/" />
   <figcaption>Foddie</figcaption>
 </figure>
               <div class="kss-modifier__example-footer"></div>
@@ -340,7 +370,7 @@
                   Markup
               </summary>
               <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class&#x3D;&quot;browser&quot;&gt;
-  &lt;img src&#x3D;&quot;http://lorempixel.com/500/500/food/&quot; /&gt;
+  &lt;img src&#x3D;&quot;http://lorempixel.com/1000/500/food/&quot; /&gt;
   &lt;figcaption&gt;Foddie&lt;/figcaption&gt;
 &lt;/figure&gt;</code></pre>
             </details>
diff --git a/src/scss/modules/_browser.scss b/src/scss/modules/_browser.scss
index 600b645..bc0f480 100644
--- a/src/scss/modules/_browser.scss
+++ b/src/scss/modules/_browser.scss
@@ -4,10 +4,13 @@
 //
 // Markup:
 // <figure class="browser">
-//   <img src="http://lorempixel.com/500/500/food/" />
+//   <img src="http://lorempixel.com/1000/500/food/" />
 //   <figcaption>Foddie</figcaption>
 // </figure>
 //
+// Demos:
+// [Screenshot](https://webslides.tv/demos/components#slide=114)
+//
 // Styleguide Media.Screenshots
 .browser {
   border-radius: .3rem;
diff --git a/src/scss/modules/_media.scss b/src/scss/modules/_media.scss
index 33b19ef..174ad69 100644
--- a/src/scss/modules/_media.scss
+++ b/src/scss/modules/_media.scss
@@ -9,6 +9,10 @@
 //   </video>
 // </div>
 //
+// Demos:
+// [Patty McCord](https://webslides.tv/demos/netflix-culture#slide=16)
+// [Keynote](https://webslides.tv/demos/keynote#slide=33)
+//
 // Styleguide Media.Embed
 .embed {
   height: 0;
@@ -46,6 +50,10 @@
   //   </div>
   // </div>
   //
+  // Demos:
+  // [Netflix](https://webslides.tv/demos/netflix-culture#slide=12)
+  // [Keynote](https://webslides.tv/demos/keynote#slide=33)
+  //
   // Styleguide Media.Fullscreen.Embed
   .fullscreen > & {
     bottom: 0;