kss - Adding Media

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">

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>

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>

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>

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;

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;