diff --git a/client/src/index.js b/client/src/index.js index c1f31c5..6c8e971 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,10 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import './style.reset.css'; ReactDOM.render( , - document.getElementById('root') + document.getElementById('root'), ); diff --git a/client/src/style/reset.css b/client/src/style/reset.css new file mode 100644 index 0000000..ee28b36 --- /dev/null +++ b/client/src/style/reset.css @@ -0,0 +1,373 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* + HTML5 Reset :: style.css + ---------------------------------------------------------- + We have learned much from/been inspired by/taken code where offered from: + + Eric Meyer :: http://meyerweb.com + HTML5 Doctor :: http://html5doctor.com + and the HTML5 Boilerplate :: http://html5boilerplate.com + +-------------------------------------------------------------------------------*/ + +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 + credits to: Tim Murtaugh - https://gist.github.com/murtaugh/5247154 */ +html, +body { + cursor: default; +} + +code { + cursor: text; +} + +/* +textarea and input[type="text"] already receive +"cursor: text" via browsers' base stylesheets +*/ + +a, +label, +button, +input[type='radio'], +input[type='submit'], +input[type='checkbox'] { + cursor: pointer; +} + +button[disabled], +input[disabled] { + cursor: default; +} + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed { + max-width: 100%; +} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: + +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html { + overflow-y: scroll; +} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +/* tables still need cellspacing="0" in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} +.ie7 input[type='checkbox'] { + vertical-align: baseline; +} +.ie6 input { + vertical-align: text-bottom; +} + +select, +input, +textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, +td img { + vertical-align: top; +} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 + This is tested to not break line-heights in: + -- WinXP/IE6, + -- WinXP/IE7, + -- WinXP/IE8, + -- Mac/FF 3.5.9, + -- Mac/Chrome 5.0, + -- Mac/Safari 4.0.4, + assuming a base font size of 14px and a line-height of 21px, or 1.5em. + Poke this, try to make it break! + + credits to: Ruthie BenDor - https://gist.github.com/unruthless/413930 */ +sub, +sup { + /* Specified in % so that the sup/sup is the + right size relative to the surrounding text */ + font-size: 75%; + + /* Zero out the line-height so that it doesn't + interfere with the positioning that follows */ + line-height: 0; + + /* Where the magic happens: makes all browsers position + the sup/sup properly, relative to the surrounding text */ + position: relative; + + /* Note that if you're using Eric Meyer's reset.css, this + is already set and you can remove this rule + vertical-align: baseline;*/ +} +sup { + /* Move the superscripted text up */ + top: -0.5em; +} +sub { + /* Move the subscripted text down, but only + half as far down as the superscript moved up */ + bottom: -0.25em; +} + +/* standardize any monospaced elements */ +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, +input, +select, +textarea { + margin: 0; +} + +/* make buttons play nice in IE */ +button, +input[type='button'] { + width: auto; + overflow: visible; +} + +/* scale images in IE7 more attractively */ +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { + content: ' '; + display: block; + clear: both; +} diff --git a/client/src/style/style.css b/client/src/style/style.css deleted file mode 100644 index b3fa106..0000000 --- a/client/src/style/style.css +++ /dev/null @@ -1,11 +0,0 @@ -* { - margin: 0; - box-sizing: border-box; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -}