kss - typography

doc/styleguide/item-layout-alignment.html

@@ -177,7 +177,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 133
+            Source: <code>_base.scss</code>, line 136
           </div>
 
       </div>

doc/styleguide/item-layout-sizes.html

@@ -193,7 +193,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 197
+            Source: <code>_base.scss</code>, line 200
           </div>
 
       </div>

doc/styleguide/item-longforms-interviews.html

@@ -155,7 +155,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 504
+            Source: <code>_typography.scss</code>, line 534
           </div>
 
       </div>

doc/styleguide/item-typography-columns.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/classes#slide&#x3D;65" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 346
+            Source: <code>_typography.scss</code>, line 364
           </div>
 
       </div>

doc/styleguide/item-typography-context.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/classes#slide&#x3D;64" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 376
+            Source: <code>_typography.scss</code>, line 397
           </div>
 
       </div>

doc/styleguide/item-typography-data.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/classes#slide&#x3D;63" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 314
+            Source: <code>_typography.scss</code>, line 326
           </div>
 
       </div>

doc/styleguide/item-typography-emoji.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/keynote#slide&#x3D;40" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 296
+            Source: <code>_typography.scss</code>, line 305
           </div>
 
       </div>

doc/styleguide/item-typography-info.html

@@ -113,7 +113,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 549
+            Source: <code>_typography.scss</code>, line 579
           </div>
 
       </div>

doc/styleguide/item-typography-intro.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/classes#slide&#x3D;2" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-typography-label.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/classes#slide&#x3D;66" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -109,7 +117,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 333
+            Source: <code>_typography.scss</code>, line 348
           </div>
 
       </div>

doc/styleguide/item-typography-landings.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/classes#slide&#x3D;35" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 233
+            Source: <code>_typography.scss</code>, line 236
           </div>
 
       </div>

doc/styleguide/item-typography-lowercase.html

@@ -109,7 +109,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 286
+            Source: <code>_typography.scss</code>, line 295
           </div>
 
       </div>

doc/styleguide/item-typography-pull_quote.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/classes#slide&#x3D;69" title="Pull right" target="_blank">Pull right</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -119,7 +127,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 449
+            Source: <code>_typography.scss</code>, line 476
           </div>
 
       </div>

doc/styleguide/item-typography-separator.html

@@ -113,7 +113,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 418
+            Source: <code>_typography.scss</code>, line 445
           </div>
 
       </div>

doc/styleguide/item-typography-serif.html

@@ -113,7 +113,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 220
+            Source: <code>_typography.scss</code>, line 223
           </div>
 
       </div>

doc/styleguide/item-typography-shadow.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/classes#slide&#x3D;55" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">

doc/styleguide/item-typography-subtitle.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/classes#slide&#x3D;58" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 250
+            Source: <code>_typography.scss</code>, line 256
           </div>
 
       </div>

doc/styleguide/item-typography-symbols.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/classes#slide&#x3D;69" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 404
+            Source: <code>_typography.scss</code>, line 428
           </div>
 
       </div>

doc/styleguide/item-typography-uppercase.html

@@ -109,7 +109,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 276
+            Source: <code>_typography.scss</code>, line 285
           </div>
 
       </div>

doc/styleguide/section-layout.html

@@ -275,7 +275,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 133
+            Source: <code>_base.scss</code>, line 136
           </div>
 
       </div>
@@ -1203,7 +1203,7 @@ Auto-fill &amp; Equal height</p>
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 197
+            Source: <code>_base.scss</code>, line 200
           </div>
 
       </div>

doc/styleguide/section-longforms.html

@@ -212,7 +212,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 504
+            Source: <code>_typography.scss</code>, line 534
           </div>
 
       </div>

doc/styleguide/section-typography.html

@@ -189,6 +189,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;65" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -211,7 +219,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 346
+            Source: <code>_typography.scss</code>, line 364
           </div>
 
       </div>
@@ -231,6 +239,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;64" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -253,7 +269,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 376
+            Source: <code>_typography.scss</code>, line 397
           </div>
 
       </div>
@@ -273,6 +289,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;63" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -295,7 +319,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 314
+            Source: <code>_typography.scss</code>, line 326
           </div>
 
       </div>
@@ -315,6 +339,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/keynote#slide&#x3D;40" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -337,7 +369,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 296
+            Source: <code>_typography.scss</code>, line 305
           </div>
 
       </div>
@@ -379,7 +411,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 549
+            Source: <code>_typography.scss</code>, line 579
           </div>
 
       </div>
@@ -399,6 +431,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;2" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -437,6 +477,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;66" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -459,7 +507,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 333
+            Source: <code>_typography.scss</code>, line 348
           </div>
 
       </div>
@@ -479,6 +527,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;35" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -501,7 +557,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 233
+            Source: <code>_typography.scss</code>, line 236
           </div>
 
       </div>
@@ -539,7 +595,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 286
+            Source: <code>_typography.scss</code>, line 295
           </div>
 
       </div>
@@ -559,6 +615,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Pull right" target="_blank">Pull right</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -587,7 +651,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 449
+            Source: <code>_typography.scss</code>, line 476
           </div>
 
       </div>
@@ -629,7 +693,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 418
+            Source: <code>_typography.scss</code>, line 445
           </div>
 
       </div>
@@ -671,7 +735,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 220
+            Source: <code>_typography.scss</code>, line 223
           </div>
 
       </div>
@@ -691,6 +755,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;55" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -737,6 +809,14 @@
 
         </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="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -759,7 +839,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 250
+            Source: <code>_typography.scss</code>, line 256
           </div>
 
       </div>
@@ -779,6 +859,14 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Example" target="_blank">Example</a>
+              </li>
+          </ul>
 
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
@@ -801,7 +889,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 404
+            Source: <code>_typography.scss</code>, line 428
           </div>
 
       </div>
@@ -839,7 +927,7 @@
             </details>
 
           <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 276
+            Source: <code>_typography.scss</code>, line 285
           </div>
 
       </div>

src/scss/_base.scss

@@ -79,6 +79,9 @@ nav a[rel='external'] em,
 //   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
 // </div>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=55)
+//
 // Styleguide Typography.Shadow
 .shadow {
   position: relative;

src/scss/_typography.scss

@@ -210,6 +210,9 @@ h3 [class*='bg-'] {
 // Markup:
 // <p class="text-intro">Create a simple web presence.</p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=2)
+//
 // Styleguide Typography.Intro
 .text-intro,
 [class*='content-'] p {
@@ -237,6 +240,9 @@ h1 span {
 // Markup:
 // <h1 class="text-landing">Landings</h1>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=35)
+//
 // Styleguide Typography.Landings
 .text-landing {
   letter-spacing: .4rem;
@@ -254,6 +260,9 @@ h1 span {
 // Markup:
 // <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=58)
+//
 // Styleguide Typography.Subtitle
 .text-subtitle {
   letter-spacing: .2rem;
@@ -300,6 +309,9 @@ h1 span {
 // Markup:
 // <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/keynote#slide=40)
+//
 // Styleguide Typography.Emoji
 .text-emoji {
   font-size: 6.8rem;
@@ -318,6 +330,9 @@ h1 span {
 // Markup:
 // <p class="text-data">23,478,289</p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=63)
+//
 // Styleguide Typography.Data
 .text-data {
   font-size: 6.4rem;
@@ -335,6 +350,9 @@ h1 span {
 // Markup:
 // <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=66)
+//
 // Styleguide Typography.Label
 .text-label {
   display: inline-block;
@@ -350,6 +368,9 @@ h1 span {
 // Markup:
 // <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=65)
+//
 // Styleguide Typography.Columns
 @media  (min-width: 768px) {
   .text-cols {
@@ -380,6 +401,9 @@ h1 span {
 // Markup:
 // <p class="text-context">Why WebSlides?</p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=64)
+//
 // Styleguide Typography.Context
 .text-context {
   position: relative;
@@ -408,6 +432,9 @@ h1 span {
 // Markup:
 // <p class="text-symbols">* * *</p>
 //
+// Demos:
+// [Example](https://webslides.tv/demos/classes#slide=69)
+//
 // Styleguide Typography.Symbols
 .text-symbols {
   font-weight: 600;
@@ -456,6 +483,9 @@ h1 span {
 // <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
 // <p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
 //
+// Demos:
+// [Pull right](https://webslides.tv/demos/classes#slide=69)
+//
 // Styleguide Typography.Pull_Quote
 [class*='text-pull'] {
   font-size: 2.4rem;