Adds a css reset. (#5)

skellock · web-flow · commit 0029bb868eaa · 2017-07-15T22:07:11.000-04:00
diff --git a/fuse.js b/fuse.js
@@ -10,7 +10,7 @@ const isProduction = process.env.NODE_ENV === 'production'
 // copy the renderer's html file into the right place
 Sparky.task('copy-html', () => {
   return Sparky
-    .src('src/renderer/index.html')
+    .src('src/renderer/{index.html,*.css}')
     .dest(`${OUTPUT_DIR}/$name`)
 })
 
diff --git a/src/renderer/app/app.tsx b/src/renderer/app/app.tsx
@@ -1,8 +1,29 @@
 import * as React from 'react'
 import { Text } from '../platform'
 
+const appStyle = {
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+  width: '100vw',
+  overflow: 'hidden',
+  backgroundColor: 'rebeccapurple',
+  color: 'white',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: "'Avenir Next', sans-serif",
+  fontSize: '1.5rem',
+  userSelect: 'none',
+  cursor: 'default'
+}
+
 export class App extends React.Component<{}, {}> {
-  render () {
-    return <Text>Welcome</Text>
+  render() {
+    return (
+      <div style={appStyle}>
+        <Text>Wake up and smell the electrons.</Text>
+      </div>
+    )
   }
 }
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
+  <title>Welcome</title>
+  <style>
+    @import url('./reset.css');
+  </style>
 </head>
+
 <body>
   <div id='root'></div>
   <script type="text/javascript" src="renderer.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/src/renderer/reset.css b/src/renderer/reset.css
@@ -0,0 +1,74 @@
+/* A CSS Reset. */
+
+*:focus {
+  outline: 0;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+img {
+  border: 0 none;
+  vertical-align: top;
+}
+
+i,
+em {
+  font-style: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+input,
+select,
+button,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-family: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+  color: #333;
+}
