kss - Landings and porfolio

doc/styleguide/item-landings-and-portfolio-badgets.html

@@ -91,6 +91,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;52" title="Inside a Call to Action" target="_blank">Inside a Call to Action</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;56" title="Inside a Cover" target="_blank">Inside a Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;57" title="Inside another Cover" target="_blank">Inside another Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Inside a semi transparent layer" target="_blank">Inside a semi transparent layer</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-buttons.html

@@ -87,6 +87,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;1" title="Transparent" target="_blank">Transparent</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Price list" target="_blank">Price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Another price list" target="_blank">Another price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;76" title="In cards" target="_blank">In cards</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-cards.html

@@ -91,6 +91,23 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;23" title="Card 50" target="_blank">Card 50</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="Where we are" target="_blank">Where we are</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;25" title="Fullscreen" target="_blank">Fullscreen</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;75" title="Card 60" target="_blank">Card 60</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-cta-cover.html

@@ -84,9 +84,21 @@
             </a>
           </h2>
 
+            <div class="kss-description">
+              <p>TODO: needs a explanation</p>
+
+            </div>
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demo" target="_blank">Demo</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -125,7 +137,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_promos.scss</code>, line 75
+            Source: <code>modules/_promos.scss</code>, line 81
           </div>
 
       </div>

doc/styleguide/item-landings-and-portfolio-cta.html

@@ -84,9 +84,24 @@
             </a>
           </h2>
 
+            <div class="kss-description">
+              <p>TODO: needs an explanation</p>
+
+            </div>
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;58" title="Font demo" target="_blank">Font demo</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;78" title="An offer" target="_blank">An offer</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-quotes.html

@@ -87,6 +87,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Why WebSlides?" target="_blank">Why WebSlides?</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;84" title="Sheryl Sandberg cite" target="_blank">Sheryl Sandberg cite</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;85" title="Example" target="_blank">Example</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;86" title="With picture" target="_blank">With picture</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;87" title="With side background" target="_blank">With side background</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-resume.html

@@ -87,6 +87,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;50" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-landings-and-portfolio-toc.html

@@ -87,6 +87,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;69" title="Table of contents" target="_blank">Table of contents</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/section-landings-and-portfolio.html

@@ -149,6 +149,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;52" title="Inside a Call to Action" target="_blank">Inside a Call to Action</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;56" title="Inside a Cover" target="_blank">Inside a Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;57" title="Inside another Cover" target="_blank">Inside another Cover</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Inside a semi transparent layer" target="_blank">Inside a semi transparent layer</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -189,6 +209,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;1" title="Transparent" target="_blank">Transparent</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Price list" target="_blank">Price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Another price list" target="_blank">Another price list</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;76" title="In cards" target="_blank">In cards</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -244,6 +284,23 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;23" title="Card 50" target="_blank">Card 50</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="Where we are" target="_blank">Where we are</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;25" title="Fullscreen" target="_blank">Fullscreen</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;75" title="Card 60" target="_blank">Card 60</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -293,9 +350,24 @@
             </a>
           </h2>
 
+            <div class="kss-description">
+              <p>TODO: needs an explanation</p>
+
+            </div>
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;58" title="Font demo" target="_blank">Font demo</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;78" title="An offer" target="_blank">An offer</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -347,9 +419,21 @@
             </a>
           </h2>
 
+            <div class="kss-description">
+              <p>TODO: needs a explanation</p>
+
+            </div>
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demo" target="_blank">Demo</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -388,7 +472,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>modules/_promos.scss</code>, line 75
+            Source: <code>modules/_promos.scss</code>, line 81
           </div>
 
       </div>
@@ -404,6 +488,26 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Why WebSlides?" target="_blank">Why WebSlides?</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;84" title="Sheryl Sandberg cite" target="_blank">Sheryl Sandberg cite</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;85" title="Example" target="_blank">Example</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;86" title="With picture" target="_blank">With picture</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;87" title="With side background" target="_blank">With side background</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -448,6 +552,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;50" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -532,6 +644,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;69" title="Table of contents" target="_blank">Table of contents</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

src/scss/modules/_badges.scss

@@ -6,6 +6,13 @@
 // <p class="badge-android">Google Play</p>
 // <p class="badge-ios">App Store</p>
 //
+// Demos:
+// [Inside a Call to Action](https://webslides.tv/demos/components#slide=52)
+// [Inside a Cover](https://webslides.tv/demos/components#slide=56)
+// [Inside another Cover](https://webslides.tv/demos/components#slide=57)
+// [Inside a semi transparent layer](https://webslides.tv/demos/components#slide=58)
+// [Different types](https://webslides.tv/demos/components#slide=88)
+//
 // Styleguide Landings and portfolio.Badgets
 [class*='badge-'] {
   background-repeat: no-repeat;

src/scss/modules/_button.scss

@@ -3,6 +3,13 @@
 // Markup:
 // <a href="#" class="button {{modifier_class}}">Download</a>
 //
+// Demos:
+// [Transparent](https://webslides.tv/demos/classes#slide=1)
+// [Price list](https://webslides.tv/demos/classes#slide=52)
+// [Another price list](https://webslides.tv/demos/classes#slide=52)
+// [In cards](https://webslides.tv/demos/components#slide=76)
+// [Different types](https://webslides.tv/demos/components#slide=88)
+//
 // .radius - Rounded corners
 //
 // Styleguide Landings and portfolio.Buttons

src/scss/modules/_cards.scss

@@ -12,6 +12,12 @@
 //     </div>
 //   </div>
 //
+// Demos:
+// [Card 50](https://webslides.tv/demos/classes#slide=23)
+// [Where we are](https://webslides.tv/demos/classes#slide=24)
+// [Fullscreen](https://webslides.tv/demos/classes#slide=25)
+// [Card 60](https://webslides.tv/demos/components#slide=75)
+//
 // Styleguide Landings and portfolio.Cards
 [class*='card-'] {
   &,

src/scss/modules/_promos.scss

@@ -1,5 +1,7 @@
 // Call to action
 //
+// TODO: needs an explanation
+//
 // Markup:
 // <div class="cta">
 //   <div class="number">
@@ -11,6 +13,10 @@
 //   </div>
 // </div>
 //
+// Demos:
+// [Font demo](https://webslides.tv/demos/classes#slide=58)
+// [An offer](https://webslides.tv/demos/components#slide=78)
+//
 // Styleguide Landings and portfolio.CTA
 .cta {
   display: flex;
@@ -74,6 +80,8 @@
 
 // Covers
 //
+// TODO: needs a explanation
+//
 // Markup:
 // <div class="cta-cover">
 //   <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -85,6 +93,9 @@
 //   </p>
 // </div>
 //
+// Demos:
+// [Demo](https://webslides.tv/demos/components#slide=53)
+//
 // Styleguide Landings and portfolio.cta-cover
 .cta-cover {
   display: table;

src/scss/modules/_quotes.scss

@@ -6,6 +6,12 @@
 // </blockquote>
 // <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
 //
+// Demos:
+// [Why WebSlides?](https://webslides.tv/demos/components#slide=83)
+// [Sheryl Sandberg cite](https://webslides.tv/demos/components#slide=84)
+// [Example](https://webslides.tv/demos/components#slide=85)
+// [With picture](https://webslides.tv/demos/components#slide=86)
+// [With side background](https://webslides.tv/demos/components#slide=87)
 //
 // Styleguide Landings and portfolio.Quotes
 blockquote {

src/scss/modules/_toc.scss

@@ -27,6 +27,9 @@
 //   </ol>
 // </div>
 //
+// Demos:
+// [Table of contents](https://webslides.tv/demos/components#slide=69)
+//
 // Styleguide Landings and portfolio.TOC
 .toc,
 .toc ol > li:before,

src/scss/modules/_work.scss

@@ -26,6 +26,9 @@
 //   </li>
 // </ul>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/components#slide=50)
+//
 // Styleguide Landings and portfolio.Resume
 .work {
   clear: both;