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

- -
${btcAddress}
+ +
${btcAddress}

Ethereum

- -
${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",