demo: show toggle button for lorem paragraphs

It's useful to see how an element sits in its "natural habitat", but sometimes it obscures the actual stuff we want to show a bit.
arp242 · Feb 15, 2019 · 377a58e · 377a58e
1 parent 3443544
commit 377a58e
Show file tree

Hide file tree

Showing 25 changed files with 572 additions and 55 deletions.
diff --git a/demo/a.html b/demo/a.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>a demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -39,13 +44,25 @@ <h1>a demo</h1>
                 <li><a href="tel:+123456789">Phone</a></li>
             </ul>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/abbr.html b/demo/abbr.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>abbr demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -35,13 +40,25 @@ <h1>abbr demo</h1>
             <p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to
             style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/aside.html b/demo/aside.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>aside demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -34,13 +39,25 @@ <h1>aside demo</h1>
 
             <aside>Some text to the side, see aside.css.</aside>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/blockquote.html b/demo/blockquote.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>blockquote demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -37,13 +42,25 @@ <h1>blockquote demo</h1>
                 <p><cite>– Aldous Huxley, Brave New World</cite></p>
             </blockquote>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/del.html b/demo/del.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>del demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -34,13 +39,25 @@ <h1>del demo</h1>
 
             <p>There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.</p>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/details.html b/demo/details.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>details demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -53,13 +58,25 @@ <h1>details demo</h1>
                 widget.</p>
             </details>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/dl.html b/demo/dl.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>dl demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -45,13 +50,25 @@ <h1>dl demo</h1>
                 <dd>A giant owl-like creature.</dd>
             </dl>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>
diff --git a/demo/figure.html b/demo/figure.html
@@ -23,8 +23,13 @@
     </nav>
 
     <article class="page">
+        <label style="float: right"
+          title="Makes it easier to see how it fits in normal content">Show paragraphs of text
+          <input type="checkbox" checked="checked" id="lorem-toggle">
+        </label>
         <h1>figure demo</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -37,7 +42,7 @@ <h1>figure demo</h1>
                 <figcaption><em>Skull of a Skeleton with Burning Cigarette</em>, by Vincent van Gogh</figcaption>
             </figure>
 
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -50,7 +55,7 @@ <h1>figure demo</h1>
                 <figcaption><em>The Tower of Babel</em>, by Pieter Bruegel the Elder</figcaption>
             </figure>
 
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -63,7 +68,7 @@ <h1>figure demo</h1>
                 <figcaption><em>The Garden of Earthly Delights</em>, by Hieronymus Bosch</figcaption>
             </figure>
 
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -77,13 +82,25 @@ <h1>figure demo</h1>
                 <figcaption><em>Drunkard on an Egg</em>, by Pieter Brueghel the Younger</figcaption>
             </figure>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est
             laborum.</p>
     </article>
+
+    <script>
+      window.addEventListener('load', function() {
+        document.getElementById('lorem-toggle').addEventListener('change', function(e) {
+          var p = document.getElementsByClassName('lorem');
+          for (var i=0; i<p.length; i++) {
+            p[i].style.display = this.checked ? 'block' : 'none';
+          }
+
+        }, false);
+      }, false);
+    </script>
 </body>
 </html>