Settle on serif font, add scroll to top component

5 years ago · 20a9d9d452
parent 23cdbc9292
commit 20a9d9d452
17 changed files with 42 additions and 52 deletions
--- a/webclient/public/index.html
+++ b/webclient/public/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <meta
      name="description"
      content="Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode."
--- a/webclient/src/App.js
+++ b/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>
 		);
--- a/webclient/src/Comments.js
+++ b/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>
--- a/webclient/src/Feed.js
+++ b/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);
--- a/webclient/src/ScrollToTop.js
+++ b/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);
--- a/webclient/src/Style-dark.css
+++ b/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;
 }
--- a/webclient/src/Style-light.css
+++ b/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;
--- a/webclient/src/fonts/AppSILB.ttf
+++ b/webclient/src/fonts/AppSILB.ttf
--- a/webclient/src/fonts/AppSILBI.ttf
+++ b/webclient/src/fonts/AppSILBI.ttf
--- a/webclient/src/fonts/AppSILI.ttf
+++ b/webclient/src/fonts/AppSILI.ttf
--- a/webclient/src/fonts/AppSILR.ttf
+++ b/webclient/src/fonts/AppSILR.ttf
--- a/webclient/src/fonts/CharisSIL-B.woff
+++ b/webclient/src/fonts/CharisSIL-B.woff
--- a/webclient/src/fonts/CharisSIL-BI.woff
+++ b/webclient/src/fonts/CharisSIL-BI.woff
--- a/webclient/src/fonts/CharisSIL-I.woff
+++ b/webclient/src/fonts/CharisSIL-I.woff
--- a/webclient/src/fonts/CharisSIL-R.woff
+++ b/webclient/src/fonts/CharisSIL-R.woff
--- a/webclient/src/fonts/Fonts.css
+++ b/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');
 }
-
--- a/webclient/src/utils.js
+++ b/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>