jQuery codex working examples

src/assets/css/forms.css

@@ -0,0 +1,47 @@
+/* All forms, and buttons styles  */
+/* Resets in their propper file */
+
+.btn {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    border: 1px solid #0d6efd;
+    border-radius: 0.375rem;
+    background-color: #0d6efd;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn:hover {
+    color: #fff;
+    background-color: #0b5ed7;
+    border-color: #0a58ca;
+}
+.btn:focus-visible {
+    color: #fff;
+    background-color: #0b5ed7;
+    border-color: #0a58ca;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, .5);
+}
+.btn:first-child:active, .btn.active{
+    color: #fff;
+    background-color: #0a58ca;
+    border-color: #0a53be;
+}
+.btn:disabled, .btn.disabled {
+    color: #fff;
+    pointer-events: none;
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+    opacity: 0.65;
+  }

src/assets/css/style.css

@@ -17,4 +17,5 @@
 @import 'nav.css';
 @import 'profile.css';
 @import 'queries.css';
-@import 'gpx.css';
+@import 'gpx.css';
+@import 'forms.css';

src/blog/2-bitocoin-and-the-lightning-network.njk

@@ -17,6 +17,7 @@ tags:
         <li><a href="https://www.lightning-landscape.net/projects">lightning-landscape.net</a>: The great panorama of the ecosystem.</li>
         <li><a href="https://www.theblock.co/data/on-chain-metrics/bitcoin">TheBlock.co On-Chain Metris</a>.</li>
         <li><a href="https://www.lopp.net/bitcoin-information/books.html">lopp.net</a>: Great resources list by James Loop.</li>
+        <li><a href="https://www.youtube.com/watch?v=sF3WIjX8xP0">PoW, PoS & Crypto Staking simply explained</a></li>
     </ul>
 
 </div>

src/blog/6-jquery-codex.njk

@@ -29,27 +29,63 @@ tags:
         These are the examples of how to use the jQuery Codex to achieve completely and absolutely unproductive text effects.
     </p>
 
-    <div class="uncont">
-        <div class="empty-space empty-single">
-            <span class="empty-space-inner"></span>
-        </div>
-        <div class="wpb_raw_code wpb_content_element wpb_raw_html">
-            <div class="wpb_wrapper">
-                <h6 class="codex" id="codex5" style="font-size:24px;">Thomas Kennerly Wolfe Jr.</h6>
-                <br>
-                <button id="do5">The "Typewriter" effect</button>
-            </div>
-        </div>
-
+    <div class="text-center">
+        <p>
+            <h4 class="codex" id="codex5">Thomas Kennerly Wolfe Jr.</h4>
+            <a class="btn" id="do5">The "Typewriter" effect</a>      
+        </p>
+<pre class=""><code>jQuery('#codex5').codex({
+    effect: 'typewriter', 
+    speed: 50, 
+    reveal: 50
+});</code></pre>          
+        <p>
+            <h4 class="codex" id="codex4">Hunter S. Thompson</h4>
+            <a class="btn" id="do4">Efecto "Char by Char"</a>
+        </p>
+<pre class=""><code>jQuery("#codex4").codex({
+    effect: "charbychar",
+    keep_whitespaces: false,
+    speed: 50,
+    reveal: 100
+});</code></pre>         
+        <p>
+            <h4 class="codex" id="codex2">Roberto Arlt</h4>
+            <a class="btn" id="do2">Efecto normie (slow)</a>            
+        </p>
+<pre class=""><code>jQuery("#codex2").codex({
+    speed: 80,
+    duration: 6000
+});</code></pre>        
     </div>
+    <style>.codex{ font-familiy: monospace; }</style>
     <script src="https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/minimo-labs/jquery-codex/jquery.codex.js"></script>
     <script>
         $(function () {
-            $('#do5').click(function () {
-                alert('OOK');
-                $('#codex5').codex({effect: 'typewriter', speed: 50, reveal: 50});
+            
+            jQuery('#do5').click(function () {
+                jQuery('#codex5').codex({
+                    effect: 'typewriter', 
+                    speed: 50, 
+                    reveal: 50
+                });
+            });
+            jQuery('#do4').click(function () {
+                jQuery("#codex4").codex({
+                        effect: "charbychar",
+                        keep_whitespaces: false,
+                        speed: 50,
+                        reveal: 100
+                });
             });
+            jQuery('#do2').click(function () {
+                jQuery("#codex2").codex({
+                    speed: 80,
+                    duration: 6000
+                });
+            });
+
         })
     </script>
 </div>