Responsive content design.

Author: mrmrs

docs/typography/measure/index.html

@@ -85,22 +85,22 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-typography</h4>
         <h1 class="f5 fw4 sans-serif pt5 ttu black"><b>6rem/96px</b> at <b>30em</b></h1>
         <div class="w-100 overflow-x-scroll">
           <p class="f-headline measure lh-title mt4">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+            Lorem ipsum <span class="dn di-ns">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</span>
           </p>
 </div>
         <h1 class="f5 fw4 sans-serif pt5 ttu black"><b>5rem/80px</b> at <b>30em</b></h1>
         <div class="w-100 overflow-x-scroll">
         <p class="f-subheadline measure lh-title mt4">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+          Lorem ipsum <span class="dn di=ns">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</span>
         </p>
 </div>
         <h1 class="f5 fw4 sans-serif pt5 bt b--black-10 ttu black"> <b>3rem(48px)</b> at <b>30em</b></h1>
         <div class="pb4 w-100 overflow-x-scroll">
           <p class="f1 measure lh-title mt4">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+            Lorem ipsum dolor sit <span class="dn di-ns">amet, consetetur sadipscing elitr, sed diam nonumy eirmod
             tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
             vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-            no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
           </p>
         </div>
         <h1 class="f6 pt5 mb4 bt b--black-10 ttu black"><b>2.25rem (36px)</b> at <b>30em</b></h1>
@@ -109,11 +109,11 @@ <h1 class="f6 pt5 mb4 bt b--black-10 ttu black"><b>2.25rem (36px)</b> at <b>30em
             <p class="f2 measure lh-copy">
               Climb leg sit by the fire. Scream at teh bath intrigued by the
               shower, yet spot something, big eyes, big eyes, crouch, shake butt, prepare to
-              pounce yet swat at dog. Then cats take over the world loves cheeseburgers or
+              pounce yet swat at dog. <span class="dn di-ns">Then cats take over the world loves cheeseburgers or
               cough
                             claws in your leg. Hide from vacuum cleaner intently sniff hand
               knock dish off table head butt cant eat out of my own dish chew foot, and stick
-              butt in face.
+              butt in face.</span>
             </p>
           </div>
         </div>

src/templates/docs/measure/index.html

@@ -49,22 +49,22 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
         <h1 class="f5 fw4 sans-serif pt5 ttu black"><b>6rem/96px</b> at <b>30em</b></h1>
         <div class="w-100 overflow-x-scroll">
           <p class="f-headline measure lh-title mt4">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+            Lorem ipsum <span class="dn di-ns">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</span>
           </p>
 </div>
         <h1 class="f5 fw4 sans-serif pt5 ttu black"><b>5rem/80px</b> at <b>30em</b></h1>
         <div class="w-100 overflow-x-scroll">
         <p class="f-subheadline measure lh-title mt4">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+          Lorem ipsum <span class="dn di=ns">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</span>
         </p>
 </div>
         <h1 class="f5 fw4 sans-serif pt5 bt b--black-10 ttu black"> <b>3rem(48px)</b> at <b>30em</b></h1>
         <div class="pb4 w-100 overflow-x-scroll">
           <p class="f1 measure lh-title mt4">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+            Lorem ipsum dolor sit <span class="dn di-ns">amet, consetetur sadipscing elitr, sed diam nonumy eirmod
             tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
             vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-            no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
           </p>
         </div>
         <h1 class="f6 pt5 mb4 bt b--black-10 ttu black"><b>2.25rem (36px)</b> at <b>30em</b></h1>
@@ -73,11 +73,11 @@ <h1 class="f6 pt5 mb4 bt b--black-10 ttu black"><b>2.25rem (36px)</b> at <b>30em
             <p class="f2 measure lh-copy">
               Climb leg sit by the fire. Scream at teh bath intrigued by the
               shower, yet spot something, big eyes, big eyes, crouch, shake butt, prepare to
-              pounce yet swat at dog. Then cats take over the world loves cheeseburgers or
+              pounce yet swat at dog. <span class="dn di-ns">Then cats take over the world loves cheeseburgers or
               cough
                             claws in your leg. Hide from vacuum cleaner intently sniff hand
               knock dish off table head butt cant eat out of my own dish chew foot, and stick
-              butt in face.
+              butt in face.</span>
             </p>
           </div>
         </div>