live generate qr codes

_src/_assets/js/_modals.js

@@ -2,12 +2,13 @@
 // Vex modals
 //
 
-/* global vex, fetch, Clipboard */
+/* global vex, fetch, Clipboard, QRious */
 /* exported krlcModals */
 
 /* eslint-disable spaced-comment */
 //=require vex-js/dist/js/vex.combined.js
 //=require clipboard/dist/clipboard.js
+//=require qrious/dist/qrious.js
 /* eslint-enable spaced-comment */
 
 const krlcModals = (() => { // eslint-disable-line no-unused-vars
@@ -45,31 +46,41 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars
                         <div class="grid grid--full grid-medium--half grid--gutters">
                             <div class="grid__col">
                                 <h4>Bitcoin</h4>
-                                <img class="qr" src="/assets/img/btc-qr.png" />
+                                <canvas class="qr" id="qr-btc"></canvas>
-                                <pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+                                <pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
-                                    <path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path>
-                                </svg></button></pre>
                             </div>
                             <div class="grid__col">
                                 <h4>Ethereum</h4>
-                                <img class="qr" src="/assets/img/eth-qr.png" />
+                                <canvas class="qr" id="qr-eth"></canvas>
-                                <pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+                                <pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
-                                    <path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path>
-                                </svg></button></pre>
                             </div>
                         </div>
                         `
                     })
 
+                    // Generate QR code
+                    const qrBtc = new QRious({
+                        element: document.getElementById('qr-btc'),
+                        value: btcAddress
+                    })
+
+                    const qrEth = new QRious({
+                        element: document.getElementById('qr-eth'),
+                        value: ethAddress
+                    })
+
+                    qrBtc.backgroundAlpha = 0
+                    qrEth.backgroundAlpha = 0
+                    qrBtc.foreground = '#6b7f88'
+                    qrEth.foreground = '#6b7f88'
+                    qrBtc.size = 160
+                    qrEth.size = 160
+
+                    // Clipboard button
                     const clipboard = new Clipboard('.btn')
 
                     clipboard.on('success', e => {
                         e.trigger.classList.add('success')
-
-                        console.info('Action:', e.action)
-                        console.info('Text:', e.text)
-                        console.info('Trigger:', e.trigger)
-
                         e.clearSelection()
                     })
                 })

_src/_assets/styl/_kremalicious/actions.styl

@@ -45,15 +45,16 @@
     @extend .textcenter
 
     .vex-content
-        max-width: 45em
+        max-width: 46em
 
     h4
+        font-size: $font-size-h5
         margin-top: 0
-        margin-bottom: ($spacer / 2)
+        margin-bottom: ($spacer / 4)
+        color: $brand-grey
 
     .qr
-        margin-bottom: $spacer
+        margin-bottom: ($spacer / 2)
-        width: 120px
 
     pre
         @extend .small

_src/_assets/styl/_kremalicious/typography.styl

@@ -125,18 +125,17 @@ a,
     color: $link-color
     text-decoration: none
     transition: .2s ease-in-out
-    box-shadow: 0 1px 0 rgba($link-color, 40%)
 
     &:hover,
     &:focus
         outline: 0
         color: $link-color-hover
-        box-shadow: 0 1px 0 rgba($link-color-hover, 70%)
+        box-shadow: inset 0 -1px 0 rgba($link-color-hover, 70%)
 
     &:active
         transition: none
         color: darken($link-color, 30%)
-        box-shadow: 0 1px 0 darken($link-color, 30%)
+        box-shadow: inset 0 -1px 0 darken($link-color, 30%)
 
     h1 &,
     h2 &,

_src/_assets/styl/_kremalicious/vex.styl

@@ -93,11 +93,12 @@ body.vex-open
         top: ($spacer/4)
         right: ($spacer/2)
 
-
         &:before
             @extend .close
             content: "\00D7" // ×
             display: block
+            color: $brand-grey
+            font-weight: 500
 
         &:hover,
         &:focus

package.json

@@ -41,6 +41,7 @@
     "clipboard": "^1.7.1",
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
+    "qrious": "^4.0.2",
     "simple-jekyll-search": "^1.4.1",
     "time-elements": "^0.6.1",
     "vex-js": "^4.0.0",