From 228687c20b2de7c65b4c6587ee51e937aacd6185 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 15 Aug 2016 17:53:01 +0300 Subject: Styles and stuff --- base.scss | 30 +++++++++++++++++++++++++----- index.html | 8 ++++---- index.js | 6 +++--- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/base.scss b/base.scss index d94bb3f..83a8bee 100644 --- a/base.scss +++ b/base.scss @@ -1,13 +1,33 @@ +@import 'bourbon'; + * { padding: 0; margin: 0; } -div#root { - canvas#qr { - display: block; +body { + font-family: $lucida-grande; + color: #ddd; + background: rgb(120, 23, 89); + a { + color: #aaa; } - input { - display: block; + div#root { + text-align: center; + h1 { + margin: 20px; + } + canvas#qr { + display: block; + margin: 10px auto; + padding: 20px; + border: 5px solid #ddd; + border-radius: 3px; + background-color: white; + } + input { + display: block; + margin: 10px auto; + } } } \ No newline at end of file diff --git a/index.html b/index.html index 7c742d2..507e04f 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,6 @@ - - -
- + + +
+ diff --git a/index.js b/index.js index 38fac1b..bea4da8 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,7 @@ class Qrgen extends React.Component { super(props) this.state = { text: 'Hello World!', - size: 100 + size: 300 } } @@ -29,14 +29,14 @@ class Qrgen extends React.Component { render () { return
-

qrgen

- +

QR Code Generator

{ this.setState(Object.assign({}, this.state, { text: e.target.value })) }}> { this.setState(Object.assign({}, this.state, { size: e.target.value })) }}> + -- cgit v1.3.1