Settle on serif font, add scroll to top component

webclient/src/App.js

@@ -6,6 +6,7 @@ import './fonts/Fonts.css';
 import Feed from './Feed.js';
 import Article from './Article.js';
 import Comments from './Comments.js';
+import ScrollToTop from './ScrollToTop.js';
 
 class App extends React.Component {
 	constructor(props) {
@@ -44,6 +45,8 @@ class App extends React.Component {
 					<Route path='/' exact component={Feed} />
 					<Route path='/:id' exact component={Comments} />
 					<Route path='/:id/a' exact component={Article} />
+
+					<ScrollToTop />
 				</Router>
 			</div>
 		);

webclient/src/Comments.js

@@ -42,7 +42,7 @@ class Article extends React.Component {
 
 				<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
 
-				{level < 6 ?
+				{level < 5 ?
 					c.comments.map(i => this.displayComment(story, i, level + 1))
 				:
 					<div className='info'><p>[replies snipped]</p></div>

webclient/src/Feed.js

@@ -5,7 +5,6 @@ import { clearStorage } from './utils.js';
 
 const apiUrl = 'http://news-api.dns.t0.vc/';
 
-
 class Feed extends React.Component {
 	constructor(props) {
 		super(props);

webclient/src/ScrollToTop.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom';
+
+class ScrollToTop extends React.Component {
+	componentDidUpdate(prevProps) {
+		if (this.props.location.pathname !== prevProps.location.pathname) {
+			window.scrollTo(0, 0);
+		}
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default withRouter(ScrollToTop);

webclient/src/Style-dark.css

@@ -25,11 +25,7 @@
 	color: #cccccc;
 }
 
-.dark .story-text a {
-	color: #ddd;
-}
-
-.dark .story-text a::after {
+.dark .article a {
 	border-bottom: 1px solid #aaaaaa;
 }
 
@@ -42,13 +38,10 @@
 }
 
 .dark .article .info a {
+	border-bottom: none;
 	color: #828282;
 }
 
-.dark .comments a {
-	border-bottom: 1px solid #aaaaaa;
-}
-
 .dark .comment.lined {
 	border-left: 1px solid #444444;
 }

webclient/src/Style-light.css

@@ -74,6 +74,10 @@ span.source {
 	max-width: 38rem;
 }
 
+.article a {
+	border-bottom: 1px solid #222222;
+}
+
 .article h1 {
 	font-size: 1.6rem;
 }
@@ -107,6 +111,7 @@ span.source {
 }
 
 .article .info a {
+	border-bottom: none;
 	color: #828282;
 }
 .article .info a:hover {
@@ -114,38 +119,16 @@ span.source {
 }
 
 .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;
+	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
+	margin-top: 1em;
 }
 
 .comments {
-	margin-left: -1rem;
-}
-
-.comments a {
-	border-bottom: 1px solid #222222;
+	margin-left: -1.25rem;
 }
 
 .comment {
-	padding-left: 1rem;
+	padding-left: 1.25rem;
 }
 
 .comment.lined {
@@ -159,7 +142,7 @@ span.source {
 .toggleDot {
 	position: fixed;
 	bottom: 1rem;
-	right: 1rem;
+	left: 1rem;
 	height: 3rem;
 	width: 3rem;
 	background-color: #828282;

webclient/src/fonts/Fonts.css

@@ -1,24 +1,23 @@
 @font-face {
-	font-family: CharisSILW;
-	src: url(CharisSIL-R.woff);
+    font-family: 'Apparatus SIL';
+    src: url('AppSILR.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: CharisSILW;
+    font-family: 'Apparatus SIL';
 	font-style: italic;
-	src: url(CharisSIL-I.woff);
+    src: url('AppSILI.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: CharisSILW;
+    font-family: 'Apparatus SIL';
 	font-weight: bold;
-	src: url(CharisSIL-B.woff);
+    src: url('AppSILB.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: CharisSILW;
+    font-family: 'Apparatus SIL';
 	font-weight: bold;
 	font-style: italic;
-	src: url(CharisSIL-BI.woff);
+    src: url('AppSILBI.ttf') format('truetype');
 }
-

webclient/src/utils.js

@@ -30,16 +30,13 @@ export const clearStorage = () => {
 };
 
 export class ToggleDot extends React.Component {
-	scrollTop() {
-		window.scrollTo(0, 0);
-	}
 	render() {
 		const id = this.props.id;
 		const article = this.props.article;
 		return (
 			<div className='toggleDot'>
 				<div className='button'>
-					<Link to={'/' + id + (article ? '/a' : '')} onClick={this.scrollTop} replace>
+					<Link to={'/' + id + (article ? '/a' : '')}>
 						<img src={Switch} />
 					</Link>
 				</div>