From 6deceecd7ccbb430d74870983065a5ed51348beb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 21 Sep 2017 19:22:52 +0200
Subject: [PATCH] live generate qr codes

---
 _src/_assets/img/btc-qr.png                   | Bin 455 -> 0 bytes
 _src/_assets/img/eth-qr.png                   | Bin 4957 -> 0 bytes
 _src/_assets/js/_modals.js                    |  39 +++++++++++-------
 _src/_assets/styl/_kremalicious/actions.styl  |   9 ++--
 .../styl/_kremalicious/typography.styl        |   5 +--
 _src/_assets/styl/_kremalicious/vex.styl      |   3 +-
 package.json                                  |   1 +
 7 files changed, 35 insertions(+), 22 deletions(-)
 delete mode 100644 _src/_assets/img/btc-qr.png
 delete mode 100644 _src/_assets/img/eth-qr.png

diff --git a/_src/_assets/img/btc-qr.png b/_src/_assets/img/btc-qr.png
deleted file mode 100644
index 072b5ec0073dd4dc7051631b2c2e70ab0e7139e2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq00B4v00A}u00000-43(200002bW%=J009A%
z{jLB20f0$FK~#7F?buO{+b|FV&;fD)A4yl&k#Yb7QxKd`NWSvLcDH1Ax03YapMh-I
z)!!w~<#tWFpO5ZckFL6IT;Q(B73XtTBR5-B__HvwiP4I4y1Q5?RuJ9wtU6<V$Hg^f
zSD)5jb#dBJg`gGZcberRhFeH$5vz+Uh86tyGx52&6VwegLh(?+KC!tt?w-E&h~WvD
zduxsXJ{N~>BZJ{c3K$iv%jV+PLP%7yH3S!kGdZ2Znq#jcF}kG{aW2O~5zpIu&+b`g
z#TDms>M~q0$K-kJbezp?-O{#R9x+C@xi-$_xR11Zv}|g*nu&9|^UlsKq-C{ul{lj-
zL|A3q=Ug1;b9+9-&o{>I!3ZDzaZaaCDuw7}{%tdLoXfGRM}C!FTNqBn*_=X$OlvLx
zY;$qDCT!_t9z<UyeJ&0Ydb*st%^$8cy0{yyms_)9$b9VbyEwKM$V6j*!^I)`!t#Cr
xql^2jQLA`57yDdXP0ri<d&}zLzKP4l{Q>nl!$EbCpvC|I002ovPDHLkV1l=1)z1I`

diff --git a/_src/_assets/img/eth-qr.png b/_src/_assets/img/eth-qr.png
deleted file mode 100644
index 0714eed59e3adc1d441a21fefef848dddf5736c9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4957
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
I_-g$B0QV~)!vFvP

diff --git a/_src/_assets/js/_modals.js b/_src/_assets/js/_modals.js
index f2bf5e3a..e72cedb8 100644
--- a/_src/_assets/js/_modals.js
+++ b/_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" />
-                                <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>
+                                <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"><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" />
-                                <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>
+                                <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"><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()
                     })
                 })
diff --git a/_src/_assets/styl/_kremalicious/actions.styl b/_src/_assets/styl/_kremalicious/actions.styl
index 9b80d391..2e76f1ad 100644
--- a/_src/_assets/styl/_kremalicious/actions.styl
+++ b/_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
-        width: 120px
+        margin-bottom: ($spacer / 2)
 
     pre
         @extend .small
diff --git a/_src/_assets/styl/_kremalicious/typography.styl b/_src/_assets/styl/_kremalicious/typography.styl
index 12640f31..9c308532 100644
--- a/_src/_assets/styl/_kremalicious/typography.styl
+++ b/_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 &,
diff --git a/_src/_assets/styl/_kremalicious/vex.styl b/_src/_assets/styl/_kremalicious/vex.styl
index de52c5be..c3e3218f 100644
--- a/_src/_assets/styl/_kremalicious/vex.styl
+++ b/_src/_assets/styl/_kremalicious/vex.styl
@@ -93,11 +93,12 @@ body.vex-open
         top: ($spacer/4)
         right: ($spacer/2)
 
-
         &:before
             @extend .close
             content: "\00D7" // &times;
             display: block
+            color: $brand-grey
+            font-weight: 500
 
         &:hover,
         &:focus
diff --git a/package.json b/package.json
index 24a8e9c8..f0097aea 100644
--- a/package.json
+++ b/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",