feat: about page

src/client/about.jsx

@@ -0,0 +1,81 @@
+import './about.scss';
+
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const About = () => (
+  <div className="about">
+    <h1 className="about__title">
+      <span className="about__titleMessage">
+        Hi! ^_^
+        {' '}
+        <img
+          alt="cha0s's icon"
+          title="This is a photo-realistic portrait. I have telekinetic powers."
+          className="about__avatar"
+          src="http://i.imgur.com/Xf7KBRR.png"
+        />
+      </span>
+    </h1>
+    <section className="about__explains">
+      <h2>reddichat is a chat site for redditors</h2>
+      <p>
+        Chatting with people on reddit.com is
+        {' '}
+        <em>okay</em>
+        , but it&apos;s kinda lame.
+      </p>
+      <h2>
+        Don&apos;t expect any chat logs to be kept
+        {' '}
+        <small>
+          ...that means you too, 3-letter bois
+        </small>
+      </h2>
+      <p>
+        I&apos;m big on privacy and all that, so I&apos;m not keeping any permanent logs of this
+        chat. This may or may not be a good idea. I could go either way. I am inclined to suggest
+        that only through the transient nature of existence can we truly appreciate its permanence.
+        Or something.
+      </p>
+      <h2>Be excellent to each other</h2>
+      <p>
+        This service has one simple rule, which you agree to respect when using it:
+        {' '}
+        <a
+          className="about__dont-be-a-dick"
+          href="http://meta.wikimedia.org/wiki/Don%27t_be_a_dick#Fundamentals"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Don&apos;t be a dick
+        </a>
+      </p>
+      <p>♡ Please and thank you! ♡</p>
+      <h2>Feeling charitable?</h2>
+      <div className="about__crypto">
+        <span className="coin-type btc" title="Bitcoin" />
+        <span>
+          If you&apos;d like to contribute, send some bitcoin to
+          {' '}
+          <a
+            href="bitcoin:3CrCpsrzxaFyXUuLuokjatAXxTq3skxCzh"
+          >
+            3CrCpsrzxaFyXUuLuokjatAXxTq3skxCzh
+          </a>
+          .
+        </span>
+      </div>
+      <h2>Go chat!</h2>
+      <p>
+        Now,
+        {' '}
+        <Link to="/">get back</Link>
+        {' '}
+        to chatting!
+      </p>
+    </section>
+  </div>
+);
+
+export default About;

src/client/about.scss

@@ -0,0 +1,80 @@
+@import '~/client/scss/breakpoints.scss';
+@import '~/client/scss/colors.scss';
+
+.about {
+  height: 100%;
+  margin: auto;
+  max-width: calc(100% - 8em);
+  overflow: auto;
+  padding: 2em;
+  font-family: var(--thick-title-font-family);
+  text-align: center;
+}
+
+.about h2 {
+  color: #aaaaaa;
+  margin: 1.5em 0 0.5em;
+}
+
+.about small {
+  font-size: 0.5em;
+}
+
+.about a {
+  color: lighten($color-active, 20%);
+}
+
+.about p {
+  margin: auto;
+  width: 50%;
+}
+
+.about__explains {
+  margin: auto;
+  max-width: calc(100% - 10em);
+}
+
+.about__inner {
+  padding: 1em;
+  @include breakpoint(desktop) {
+    padding: 3em 1em 1em;
+  }
+  width: 100%;
+}
+
+.about__avatar {
+  margin-left: 0.5em;
+  max-height: 1em;
+}
+
+.about__title {
+  background-color: #171717;
+  display: flex;
+  font-family: var(--title-font-family);
+  font-size: 2em;
+  justify-content: space-around;
+  padding: 0.5em;
+  text-align: center;
+  @include breakpoint(tiny) {
+    font-size: 2.5em;
+    padding: 1em;
+  }
+  @include breakpoint(tablet) {
+    font-size: 4em;
+    padding: 1em;
+  }
+}
+
+.about__titleMessage {
+  display: flex;
+}
+
+.about__dont-be-a-dick {
+  display: flow-root;
+  margin: 1em 0;
+  text-decoration: underline;
+}
+
+.about__crypto {
+  margin: 1em 0;
+}

src/client/app.jsx

@@ -5,6 +5,7 @@ import {Route, Switch} from 'react-router-dom';
 
 import React from 'react';
 
+import About from './about';
 import Chat from './chat';
 import Home from './home';
 
@@ -16,6 +17,10 @@ const App = () => (
         exact
         path="/"
       />
+      <Route
+        component={About}
+        path="/about"
+      />
       <Route
         component={Chat}
         path="/chat"