diff --git a/_src/_assets/img/btc-qr.png b/_src/_assets/img/btc-qr.png
deleted file mode 100644
index 072b5ec0..00000000
Binary files a/_src/_assets/img/btc-qr.png and /dev/null differ
diff --git a/_src/_assets/img/eth-qr.png b/_src/_assets/img/eth-qr.png
deleted file mode 100644
index 0714eed5..00000000
Binary files a/_src/_assets/img/eth-qr.png and /dev/null differ
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
Bitcoin
-
![](/assets/img/btc-qr.png)
-
${btcAddress}
+
+
${btcAddress}
Ethereum
-
![](/assets/img/eth-qr.png)
-
${ethAddress}
+
+
${ethAddress}
`
})
+ // 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" // ×
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",