Add fonts, fix styling issues

webclient/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode."
     />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
@@ -31,7 +31,7 @@
 				overflow-y: scroll;
 		}
 		body {
-			background: #202020;
+			background: #000;
 		}
 	</style>
   </head>

webclient/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import './Style-light.css';
 import './Style-dark.css';
+import './fonts/Fonts.css';
 import Feed from './Feed.js';
 import Article from './Article.js';
 import Comments from './Comments.js';
@@ -27,6 +28,7 @@ class App extends React.Component {
 
 	render() {
 		const theme = this.state.theme;
+		document.body.style.backgroundColor = theme === 'dark' ? '#000' : '#eeeeee';
 
 		return (
 			<div className={theme}>

webclient/src/Article.js

@@ -53,7 +53,7 @@ class Article extends React.Component {
 								{infoLine(story)}
 
 								{story.text ?
-									<div dangerouslySetInnerHTML={{ __html: story.text }} />
+									<div className='story-text' dangerouslySetInnerHTML={{ __html: story.text }} />
 								:
 									<p>Problem getting article :(</p>
 								}

webclient/src/Style-dark.css

@@ -1,13 +1,9 @@
 .dark {
-	background: #202020;
-	color: #eeeeee;
-	position: absolute; top: 0; left: 0; right: 0;
-	min-height: 100%;
-	padding: 0 8px;
+	color: #ddd;
 }
 
 .dark a {
-	color: #eeeeee;
+	color: #ddd;
 }
 
 .dark .item {
@@ -19,7 +15,7 @@
 }
 
 .dark .item a.link {
-	color: #eeeeee;
+	color: #ddd;
 }
 .dark .item a.link:visited {
 	color: #828282;
@@ -29,18 +25,28 @@
 	color: #cccccc;
 }
 
-.dark .article a {
-	color: #eeeeee;
+.dark .story-text a {
+	color: #ddd;
+}
+
+.dark .story-text a::after {
 	border-bottom: 1px solid #aaaaaa;
 }
 
+.dark .story-text img {
+	filter: brightness(50%);
+}
+
 .dark .article .info {
 	color: #828282;
 }
 
 .dark .article .info a {
 	color: #828282;
-	border-bottom: none;
+}
+
+.dark .comments a {
+	border-bottom: 1px solid #aaaaaa;
 }
 
 .dark .comment.lined {

webclient/src/Style-light.css

@@ -1,6 +1,6 @@
 body {
+	text-rendering: optimizeLegibility;
 	font: 1rem/1.3 sans-serif;
-	background: #eeeeee;
 	color: #000000;
 }
 
@@ -53,6 +53,9 @@ a {
 .item a.link:visited {
 	color: #828282;
 }
+.item a.link:hover {
+	text-decoration: none;
+}
 
 span.source {
 	margin-left: 0.4rem;
@@ -63,9 +66,8 @@ span.source {
 }
 
 .article-container {
-	font: 1.2rem/1.5 sans-serif;
 	margin: 1rem auto;
-	max-width: 44rem;
+	max-width: 38rem;
 }
 
 .article h1 {
@@ -96,28 +98,48 @@ span.source {
 	margin: 0;
 }
 
-.article a {
-	color: #000000;
-	text-decoration: none;
-	border-bottom: 1px solid #222222;
-}
-
 .article .info {
 	color: #828282;
 }
 
 .article .info a {
 	color: #828282;
-	border-bottom: none;
 }
 .article .info a:hover {
 	text-decoration: underline;
 }
 
+.story-text {
+	font: 1.2rem/1.5 'CharisSILW', sans-serif;
+	letter-spacing: 0.004rem;
+}
+
+.story-text a {
+	color: #000000;
+	text-decoration: none;
+	display: inline-block;
+	position: relative;
+}
+
+.story-text a::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	display: inline-block;
+	height: 1em;
+	width: 100%;
+	border-bottom: 1px solid #222222;
+	margin-top: 0.55rem;
+}
+
 .comments {
 	margin-left: -1rem;
 }
 
+.comments a {
+	border-bottom: 1px solid #222222;
+}
+
 .comment {
 	padding-left: 1rem;
 }

webclient/src/fonts/Fonts.css

@@ -0,0 +1,24 @@
+@font-face {
+	font-family: CharisSILW;
+	src: url(CharisSIL-R.woff);
+}
+
+@font-face {
+	font-family: CharisSILW;
+	font-style: italic;
+	src: url(CharisSIL-I.woff);
+}
+
+@font-face {
+	font-family: CharisSILW;
+	font-weight: bold;
+	src: url(CharisSIL-B.woff);
+}
+
+@font-face {
+	font-family: CharisSILW;
+	font-weight: bold;
+	font-style: italic;
+	src: url(CharisSIL-BI.woff);
+}
+