diff options
| author | Yuval Adam <_@yuv.al> | 2016-08-15 17:53:01 +0300 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2016-08-15 17:53:01 +0300 |
| commit | 228687c20b2de7c65b4c6587ee51e937aacd6185 (patch) | |
| tree | b9eb0376cb35fcde16d3eb06dbd8fb97ce613024 | |
| parent | 54a1b5d464c1d3f6c6c15badd111fe3f3edffc87 (diff) | |
Styles and stuff
| -rw-r--r-- | base.scss | 30 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | index.js | 6 |
3 files changed, 32 insertions, 12 deletions
@@ -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 @@ -7,10 +7,6 @@ <meta name="description" content="Interactive QR code generator"> <meta name="author" content="Yuval Adam"> <link rel="canonical" href="http://qrgen.xyz"> - </head> - <body> - <div id="root"></div> - <script type="text/javascript" src="bundle.js" charset="utf-8"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), @@ -20,5 +16,9 @@ ga('create', 'UA-82486356-1', 'auto'); ga('send', 'pageview'); </script> + </head> + <body> + <div id="root"></div> + <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html> @@ -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 <div id='root'> - <h1>qrgen</h1> - <canvas ref='qr' id='qr'></canvas> + <h1>QR Code Generator</h1> <input type='text' value={this.state.text} onChange={(e) => { this.setState(Object.assign({}, this.state, { text: e.target.value })) }}></input> <input type='text' value={this.state.size} onChange={(e) => { this.setState(Object.assign({}, this.state, { size: e.target.value })) }}></input> + <canvas ref='qr' id='qr'></canvas> <footer> <p>Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/qrgen.xyz">Github</a>.</p> </footer> |