forked from tanner/qotnews
Settle on serif font, add scroll to top component
This commit is contained in:
@@ -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."
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user