feat: about page

This commit is contained in:
cha0s 2020-07-26 18:39:50 -05:00
parent 324c2b342e
commit 70acd0209d
3 changed files with 166 additions and 0 deletions

81
src/client/about.jsx Normal file
View File

@ -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;

80
src/client/about.scss Normal file
View File

@ -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;
}

View File

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