Quick reference codepen links

docs/quick_reference.html

@@ -915,7 +915,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/BQMMyX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;progress value=&quot;0&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress value=&quot;1000&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
@@ -929,7 +929,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/MbLLwb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress class=&quot;nano&quot; value=&quot;750&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
@@ -944,7 +944,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Donut spinner <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Donut spinner <a href="https://codepen.io/chalarangelo/pen/XNOOba" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;spinner-donut&quot;&gt;&lt;/div&gt;</pre>
               </div>
               <div class="col-sm-12 col-md-6">
@@ -956,7 +956,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Donut spinner variants <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Donut spinner variants <a href="https://codepen.io/chalarangelo/pen/VmggLE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;spinner-donut secondary&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;spinner-donut tertiary&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;spinner-donut large&quot;&gt;&lt;/div&gt;</pre>
@@ -979,7 +979,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/ObddVK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;span class=&quot;hidden&quot;&gt;Hidden text&lt;/span&gt;
 &lt;span class=&quot;visually-hidden&quot;&gt;Screen-reader-only text&lt;/span&gt;</pre>
               </div>
@@ -992,7 +992,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Floats, centering &amp; clearfix <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Floats, centering &amp; clearfix <a href="https://codepen.io/chalarangelo/pen/pNGGjE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;span class=&quot;float-left&quot;&gt;Float left&lt;/span&gt;
 &lt;span class=&quot;float-right&quot;&gt;Float right&lt;/span&gt;
 &lt;span class=&quot;clearfix&quot;&gt;Clearfix&lt;/span&gt;
@@ -1007,7 +1007,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Generic border &amp; shadows <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;span class=&quot;bordered&quot;&gt;Bordered&lt;/span&gt;
 &lt;span class=&quot;rounded&quot;&gt;Rounded&lt;/span&gt;
 &lt;span class=&quot;circular&quot;&gt;Circular&lt;/span&gt;
@@ -1025,7 +1025,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Responsive sizing &amp; spacing classes <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Responsive sizing &amp; spacing classes <a href="https://codepen.io/chalarangelo/pen/VmggvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;responsive-padding&quot;&gt;Responsive padding&lt;/div&gt;
 &lt;div class=&quot;responsive-margin&quot;&gt;Responsive margin&lt;/div&gt;</pre>
               </div>
@@ -1038,7 +1038,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Breadcrumbs <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Breadcrumbs <a href="https://codepen.io/chalarangelo/pen/bBzzEN" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;ul class=&quot;breadcrumbs&quot;&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Root&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder&lt;/a&gt;&lt;/li&gt;
@@ -1054,7 +1054,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Close icon <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Close icon <a href="https://codepen.io/chalarangelo/pen/KNJJVM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;span class=&quot;close&quot;&gt;&lt;/span&gt;</pre>
               </div>
               <div class="col-sm-12 col-md-6">

docs/v2/DEVLOG.md

@@ -678,3 +678,4 @@
 - *TODO* Notes for `quick reference`.
 - *TODO* Readme, demo image etc.
 - Extensive proofreading and fixes.
+- Finished Codepens.