feat: home

src/client/app.jsx

@@ -4,6 +4,12 @@ import {hot} from 'react-hot-loader';
 
 import React from 'react';
 
-const App = () => <div className="app" />;
+import Home from './home';
+
+const App = () => (
+  <div className="app">
+    <Home />
+  </div>
+);
 
 export default hot(module)(App);

src/client/home.jsx

@@ -0,0 +1,25 @@
+import './home.scss';
+
+import React from 'react';
+
+export default function Home() {
+  return (
+    <div className="home">
+      <div className="home__inner">
+        <h1 className="home__title">Reddi? Chat!</h1>
+        <div className="home__bar">
+          <div className="home__login-wrapper">
+            <a className="home__login button" href="/auth/reddit">Touch to start</a>
+          </div>
+          <p className="home__instructions">
+            You will be sent to reddit to log in.
+            reddit will simply confirm your reddichat login and send you back here.
+            Then you can chat!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Home.propTypes = {};

src/client/home.scss

@@ -0,0 +1,61 @@
+@import '~/client/scss/breakpoints.scss';
+@import '~/client/scss/colors.scss';
+
+.home {
+  margin: auto;
+  max-width: map-get($breakpoints, desktop);
+}
+
+.home__inner {
+  padding: 1em;
+  @include breakpoint(desktop) {
+    padding: 3em 1em 1em;
+  }
+  width: 100%;
+}
+
+.home__title {
+  background-color: #171717;
+  font-family: var(--title-font-family);
+  font-size: 2em;
+  padding: 1em;
+  text-align: center;
+  @include breakpoint(tiny) {
+    font-size: 2.5em;
+    padding: 2em;
+  }
+  @include breakpoint(tablet) {
+    font-size: 4em;
+    padding: 2em;
+  }
+}
+
+.home__bar {
+  padding: 2em 0;
+}
+
+.home__login-wrapper {
+  text-align: center;
+  width: 100%;
+}
+
+.home__login {
+  background-color: $active-color;
+  display: inline-block;
+  font-family: var(--thick-title-font-family);
+  font-size: 2em;
+  padding: 1em;
+  text-decoration: none;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: lighten($active-color, 10%);
+  }
+}
+
+.home__instructions {
+  font-family: var(--message-font-family);
+  line-height: 1.5em;
+  padding: 2em 0;
+  text-align: center;
+  width: 100%;
+}

src/client/index.scss

@@ -1,3 +1,5 @@
+@import '~/client/scss/colors.scss';
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -48,8 +50,9 @@ table {
 html {
   background-color: #212121;
   color: #FFFFFF;
-  --active-color: rgb(0, 180, 204);
+  --message-font-family: verdana, arial, helvetica, sans-serif;
-  --title-font-family: Ubuntu, "Droid Sans", sans-serif;
+  --title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
+  --thick-title-font-family: LatoRegular, Ubuntu, "Droid Sans", sans-serif;
 }
 body {
   scrollbar-width: thin;
@@ -117,14 +120,14 @@ fieldset {
   width: 100%;
 }
 
-button {
+button, .button {
   background: #222222;
 	border: 1px solid rgba(255, 255, 255, 0.1);
   color: #ffffff;
   font-size: 100%;
 }
 
-button, input[type="checkbox"], input[type="checkbox"] + label {
+button, .button, input[type="checkbox"], input[type="checkbox"] + label {
   cursor: pointer;
 }
 
@@ -140,7 +143,7 @@ select {
 }
 
 *:focus {
-  box-shadow: 0 0 2px 0 var(--active-color);
+  box-shadow: 0 0 2px 0 $active-color;
   outline: none;
   z-index: 1;
 }
@@ -229,3 +232,20 @@ select {
 .react-tabs__tab-panel--selected {
   display: block;
 }
+
+/* Webfont: Lato-Light */
+@font-face {
+  font-family: 'LatoLight';
+  src: url('./Lato-Light.eot');
+  src: url('./Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./Lato-Light.woff') format('woff'), /* Modern Browsers */ url('./Lato-Light.ttf') format('truetype');
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: 'LatoRegular';
+  src: url('./Lato-Regular.eot');
+  src: url('./Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./Lato-Regular.woff') format('woff'), /* Modern Browsers */ url('./Lato-Regular.ttf') format('truetype');
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}

src/client/scss/breakpoints.scss

@@ -0,0 +1,31 @@
+$breakpoints: (
+  tiny: 320px,
+  tablet: 720px,
+  desktop: 1280px,
+  hd: 1920px,
+  uhd: 3840px,
+);
+
+@mixin breakpoint($breakpoint, $min-max: 'min-width') {
+  $output: false;
+  @if (type-of($breakpoint) == number) {
+    $output: $breakpoint;
+  }
+  @else {
+    @if $min-max == 'max-width' {
+      $output: #{map-get($breakpoints, $breakpoint) - 1px };
+    }
+    @else {
+      $output: #{map-get($breakpoints, $breakpoint)};
+    }
+  }
+  @if $breakpoint == default {
+    @content;
+  }
+  @else {
+    @media ($min-max: #{$output}) {
+      @content;
+    }
+  }
+}
+

src/client/scss/colors.scss

@@ -0,0 +1 @@
+$active-color: rgb(0, 99, 112);