From ada5880d19638a5264f9a1b167ce0f590d98eb07 Mon Sep 17 00:00:00 2001
From: Rowan Hogan <rowan.hogan@gmail.com>
Date: Wed, 2 Oct 2019 17:34:03 +1000
Subject: [PATCH] Style fixes Format js files with standard Bump lodash from
 4.17.10 to 4.17.13

---
 .eslintrc                        |  2 +-
 package.json                     |  2 +-
 src/components/footer/index.js   |  6 +--
 src/components/header/index.js   | 14 +++----
 src/components/loading/index.js  |  4 +-
 src/components/modal/index.js    | 47 ++++++++++++------------
 src/components/page/index.js     | 18 ++++-----
 src/components/search/index.js   | 34 ++++++++---------
 src/components/sections/index.js | 12 +++---
 src/components/settings/index.js | 52 +++++++++++++-------------
 src/components/toggle/index.js   | 10 ++---
 src/images/github.svg            |  1 +
 src/index.js                     | 32 ++++++++--------
 src/lib/api/index.js             |  2 +-
 src/lib/favicon/index.js         | 24 ++++++------
 src/registerServiceWorker.js     | 58 ++++++++++++++---------------
 src/routes/app/index.js          | 30 +++++++--------
 src/routes/home/index.js         | 19 ++++++----
 src/routes/index.js              |  8 ++--
 src/routes/media/index.js        | 18 ++++-----
 src/routes/not-found/index.js    |  2 +-
 src/store/settings/index.js      | 30 ++++++++-------
 src/styles/_home.scss            | 32 +++++++++++++++-
 src/styles/_layout.scss          | 27 +++++++-------
 src/styles/_settings.scss        |  8 ++--
 src/styles/styles.css            | 63 +++++++++++++++++++++++---------
 yarn.lock                        | 10 ++---
 27 files changed, 318 insertions(+), 247 deletions(-)
 create mode 100644 src/images/github.svg

diff --git a/.eslintrc b/.eslintrc
index 5e603ec..e3578aa 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": "react-app"
+  "extends": "standard"
 }
diff --git a/package.json b/package.json
index 7f5178b..a61b112 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "gh-pages": "^1.1.0",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.13",
     "node-sass-chokidar": "^1.3.0",
     "npm-run-all": "^4.1.3",
     "react": "^16.4.0",
diff --git a/src/components/footer/index.js b/src/components/footer/index.js
index 07d9987..3362c26 100644
--- a/src/components/footer/index.js
+++ b/src/components/footer/index.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
 class Footer extends Component {
-  render() {
+  render () {
     return window === window.top ? (
-      <footer className="footer">
-        <Link className="logo" to="/">
+      <footer className='footer'>
+        <Link className='logo' to='/'>
           Wikipadia
         </Link>
       </footer>
diff --git a/src/components/header/index.js b/src/components/header/index.js
index e5fb897..2e087ed 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -5,7 +5,7 @@ import Settings from '../settings'
 import { Link } from 'react-router-dom'
 
 class Header extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.handleScroll = this.handleScroll.bind(this)
     this.state = {
@@ -14,15 +14,15 @@ class Header extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     document.addEventListener('scroll', this.handleScroll)
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     document.removeEventListener('scroll', this.handleScroll)
   }
 
-  handleScroll() {
+  handleScroll () {
     const { scrollY } = window
     const { scroll } = this.state
     const searchOpen = this.refs.header.querySelector('.search-results')
@@ -35,16 +35,16 @@ class Header extends Component {
     this.setState({ scroll: Math.max(scrollY, 20), hidden })
   }
 
-  render() {
+  render () {
     const { hidden, scroll } = this.state
 
     return window === window.top ? (
       <header
-        ref="header"
+        ref='header'
         className={['header', hidden && 'hidden', scroll > 20 && 'scrolled']
           .filter(Boolean)
           .join(' ')}>
-        <Link className="logo" to="/">
+        <Link className='logo' to='/'>
           Home
         </Link>
         <Search />
diff --git a/src/components/loading/index.js b/src/components/loading/index.js
index e92f5a1..21941f3 100644
--- a/src/components/loading/index.js
+++ b/src/components/loading/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default ({ title = '' }) => (
-  <div className="loading">
-    <h1 className="page-title">{title.replace(/_/g, ' ')}</h1>
+  <div className='loading'>
+    <h1 className='page-title'>{title.replace(/_/g, ' ')}</h1>
   </div>
 )
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index 2f9b105..141d5da 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -1,54 +1,53 @@
-import React, { Component } from "react";
-import { createPortal } from "react-dom";
-import withClickOutside from "react-click-outside";
+import React, { Component } from 'react'
+import { createPortal } from 'react-dom'
+import withClickOutside from 'react-click-outside'
 
 class Modal extends Component {
-  constructor() {
-    super();
-    this.el = null;
+  constructor () {
+    super()
+    this.el = null
   }
 
-  componentDidMount() {
-    this.el = document.createElement("div");
-    document.querySelector(".settings-wrapper").appendChild(this.el);
+  componentDidMount () {
+    this.el = document.createElement('div')
+    document.querySelector('.settings-wrapper').appendChild(this.el)
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     if (this.el) {
-      this.el.remove();
+      this.el.remove()
     }
   }
 
-  handleClickOutside(event) {
-    const { closeOnOutsideClick, handleClose } = this.props;
+  handleClickOutside (event) {
+    const { closeOnOutsideClick, handleClose } = this.props
 
     if (closeOnOutsideClick) {
-      event.preventDefault();
-      return handleClose();
+      return handleClose()
     }
   }
 
-  render() {
-    const { children, handleClose, isOpen, title } = this.props;
+  render () {
+    const { children, handleClose, isOpen, title } = this.props
 
-    if (!isOpen) return null;
+    if (!isOpen) return null
 
     return createPortal(
-      <div className="modal">
-        {title && <h3 className="modal-title">{title}</h3>}
+      <div className='modal'>
+        {title && <h3 className='modal-title'>{title}</h3>}
         {children}
-        <button className="close" onClick={handleClose}>
+        <button className='close' onClick={handleClose}>
           Close
         </button>
       </div>,
       this.el
-    );
+    )
   }
 }
 
 Modal.defaultProps = {
   closeOnOutsideClick: true,
   isOpen: false
-};
+}
 
-export default withClickOutside(Modal);
+export default withClickOutside(Modal)
diff --git a/src/components/page/index.js b/src/components/page/index.js
index 978bd40..58b29e9 100644
--- a/src/components/page/index.js
+++ b/src/components/page/index.js
@@ -6,9 +6,9 @@ import Loading from '../loading'
 import Sections from '../sections'
 
 class Page extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
-
+    this.fetchPage = this.fetchPage.bind(this)
     this.state = {
       loading: false,
       title: '',
@@ -17,12 +17,12 @@ class Page extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     const { title } = this.props
     return this.fetchPage(title)
   }
 
-  fetchPage = title => {
+  fetchPage (title) {
     this.setState({ loading: true })
 
     return fetchPage(title)
@@ -53,24 +53,24 @@ class Page extends Component {
       )
   }
 
-  render() {
+  render () {
     const { content, error, loading, sections, title } = this.state
 
     return (
-      <div className="container">
+      <div className='container'>
         {sections.length ? <Sections sections={sections} /> : null}
         {loading && <Loading {...this.props} />}
         {content ? (
-          <div className="page">
+          <div className='page'>
             <h1
-              className="page-title"
+              className='page-title'
               dangerouslySetInnerHTML={{ __html: title }}
             />
             <div dangerouslySetInnerHTML={{ __html: content }} />
           </div>
         ) : error ? (
           <div>
-            <h1 className="page-title">Error</h1>
+            <h1 className='page-title'>Error</h1>
             <div>{error}</div>
           </div>
         ) : null}
diff --git a/src/components/search/index.js b/src/components/search/index.js
index 50f9a92..c208e82 100644
--- a/src/components/search/index.js
+++ b/src/components/search/index.js
@@ -4,7 +4,7 @@ import withClickOutside from 'react-click-outside'
 import { fetchPages } from '../../lib/api'
 
 class Search extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.fetchPages = this.fetchPages.bind(this)
     this.handleClose = this.handleClose.bind(this)
@@ -18,7 +18,7 @@ class Search extends Component {
     }
   }
 
-  handleSelection(event) {
+  handleSelection (event) {
     const key = event.which
     const { results, selected } = this.state
 
@@ -43,7 +43,7 @@ class Search extends Component {
     }
   }
 
-  handleClose() {
+  handleClose () {
     this.setState({
       error: null,
       open: false,
@@ -54,7 +54,7 @@ class Search extends Component {
     this.refs.input.value = ''
   }
 
-  fetchPages(key) {
+  fetchPages (key) {
     const query = this.refs.input.value
 
     if (!query) {
@@ -78,31 +78,31 @@ class Search extends Component {
       .catch(() => this.setState({ error: true, loading: false }))
   }
 
-  handleClickOutside(event) {
+  handleClickOutside (event) {
     if (this.state.open) {
       event.preventDefault()
       this.handleClose()
     }
   }
 
-  render() {
+  render () {
     const { error, loading, open, results, selected } = this.state
 
     return (
-      <div className="search">
-        <form className="search-form" onSubmit={e => e.preventDefault()}>
+      <div className='search'>
+        <form className='search-form' onSubmit={e => e.preventDefault()}>
           <input
-            ref="input"
-            type="search"
-            placeholder="Search..."
+            ref='input'
+            type='search'
+            placeholder='Search...'
             onKeyDown={this.handleSelection}
             onKeyUp={e => this.handleSearch(e.which)}
           />
         </form>
         {open && (
-          <div className="search-results">
-            {loading && <div className="spinner">Loading&hellip;</div>}
-            {error && <div className="search-error">No results found</div>}
+          <div className='search-results'>
+            {loading && <div className='spinner'>Loading&hellip;</div>}
+            {error && <div className='search-error'>No results found</div>}
             {results.map((result, index) => (
               <a
                 href={result.link}
@@ -111,12 +111,12 @@ class Search extends Component {
                   selected === index ? 'active' : undefined
                 ].join(' ')}
                 key={index}>
-                <h3 className="search-result-title">{result.title}</h3>
-                <p className="search-result-description">
+                <h3 className='search-result-title'>{result.title}</h3>
+                <p className='search-result-description'>
                   {result.description}
                 </p>
                 <div
-                  className="search-result-thumb"
+                  className='search-result-thumb'
                   style={{ backgroundImage: `url(${result.thumb})` }}
                 />
               </a>
diff --git a/src/components/sections/index.js b/src/components/sections/index.js
index bb6ed40..5a3ea95 100644
--- a/src/components/sections/index.js
+++ b/src/components/sections/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import withClickOutside from 'react-click-outside'
 
 class Sections extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
@@ -10,26 +10,26 @@ class Sections extends Component {
     }
   }
 
-  handleClickOutside(event) {
+  handleClickOutside (event) {
     if (this.state.open) {
       event.preventDefault()
       this.setState({ open: false })
     }
   }
 
-  render() {
+  render () {
     const { sections } = this.props
     const { open } = this.state
 
     return (
       <div className={['page-sections', open ? 'active' : undefined].join(' ')}>
         <button
-          className="page-sections-button"
+          className='page-sections-button'
           onClick={() => this.setState({ open: !open })}>
           Table of contents
         </button>
         {open && (
-          <nav className="page-sections-nav">
+          <nav className='page-sections-nav'>
             {sections.map((section, index) => (
               <a
                 key={index}
@@ -42,7 +42,7 @@ class Sections extends Component {
                   {section.number}.
                 </span>
                 <span
-                  className="section-label"
+                  className='section-label'
                   dangerouslySetInnerHTML={{ __html: section.line }}
                 />
               </a>
diff --git a/src/components/settings/index.js b/src/components/settings/index.js
index 2297236..6afd05f 100644
--- a/src/components/settings/index.js
+++ b/src/components/settings/index.js
@@ -1,71 +1,71 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
-import { updateSetting } from "../../store/settings";
+import React, { Component, Fragment } from 'react'
+import { connect } from 'react-redux'
+import { updateSetting } from '../../store/settings'
 
-import Modal from "../modal";
-import Toggle from "../toggle";
+import Modal from '../modal'
+import Toggle from '../toggle'
 
 class Settings extends Component {
-  constructor() {
-    super();
+  constructor () {
+    super()
     this.state = {
       open: false
-    };
+    }
   }
 
-  handleClickOutside(event) {
+  handleClickOutside (event) {
     if (this.state.open) {
-      event.preventDefault();
-      this.setState({ open: false });
+      event.preventDefault()
+      this.setState({ open: false })
     }
   }
 
-  render() {
-    const { settings } = this.props;
-    const { open } = this.state;
+  render () {
+    const { settings } = this.props
+    const { open } = this.state
 
     return (
       <Fragment>
         <button
-          className="settings-button"
+          className='settings-button'
           onClick={() => this.setState({ open: true })}
         >
           Settings
         </button>
         <Modal
           isOpen={open}
-          title="Settings"
+          title='Settings'
           handleClose={() => this.setState({ open: false })}
         >
           <Toggle
-            label="Dark Mode"
-            name="darkMode"
+            label='Dark Mode'
+            name='darkMode'
             checked={settings.darkMode}
             onChange={this.props.updateSetting}
           />
-          <p className="settings-hint">
+          <p className='settings-hint'>
             Light text on dark background (defaults to OS preference)
           </p>
 
           <Toggle
-            label="Low contrast"
-            name="lowContrast"
+            label='Low contrast'
+            name='lowContrast'
             checked={settings.lowContrast}
             onChange={this.props.updateSetting}
           />
-          <p className="settings-hint">
+          <p className='settings-hint'>
             Reduce eye strain for low-light reading.
           </p>
         </Modal>
       </Fragment>
-    );
+    )
   }
 }
 
-const mapStateToProps = ({ settings }) => ({ settings });
-const mapDispatchToProps = { updateSetting };
+const mapStateToProps = ({ settings }) => ({ settings })
+const mapDispatchToProps = { updateSetting }
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Settings);
+)(Settings)
diff --git a/src/components/toggle/index.js b/src/components/toggle/index.js
index 23ace7d..2d18fe0 100644
--- a/src/components/toggle/index.js
+++ b/src/components/toggle/index.js
@@ -1,18 +1,18 @@
 import React from 'react'
 
 const Toggle = ({ label, name, checked, onChange }) => (
-  <label className="toggle-label" htmlFor={name}>
+  <label className='toggle-label' htmlFor={name}>
     <span>{label}</span>
-    <div className="toggle">
+    <div className='toggle'>
       <input
         id={name}
-        className="toggle-input"
-        type="checkbox"
+        className='toggle-input'
+        type='checkbox'
         name={name}
         checked={checked}
         onChange={({ target: { checked } }) => onChange(name, checked)}
       />
-      <span className="toggle-ui" />
+      <span className='toggle-ui' />
     </div>
   </label>
 )
diff --git a/src/images/github.svg b/src/images/github.svg
new file mode 100644
index 0000000..aa05db9
--- /dev/null
+++ b/src/images/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5df4859..6e491b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,20 @@
-import React from "react";
-import { BrowserRouter } from "react-router-dom";
-import { Provider } from "react-redux";
-import ReactDOM from "react-dom";
-import configureStore from "./store";
-import initReactFastclick from "react-fastclick";
-import registerServiceWorker from "./registerServiceWorker";
-import "./styles/styles.css";
-import "./lib/favicon";
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import ReactDOM from 'react-dom'
+import configureStore from './store'
+import initReactFastclick from 'react-fastclick'
+import registerServiceWorker from './registerServiceWorker'
+import './styles/styles.css'
+// import './lib/favicon'
 
-import App from "./routes";
+import App from './routes'
 
-if ("ontouchstart" in document.documentElement) {
-  document.body.style.cursor = "pointer";
+if ('ontouchstart' in document.documentElement) {
+  document.body.style.cursor = 'pointer'
 }
 
-initReactFastclick();
+initReactFastclick()
 
 ReactDOM.render(
   <Provider store={configureStore()}>
@@ -22,6 +22,6 @@ ReactDOM.render(
       <App />
     </BrowserRouter>
   </Provider>,
-  document.getElementById("root")
-);
-registerServiceWorker();
+  document.getElementById('root')
+)
+registerServiceWorker()
diff --git a/src/lib/api/index.js b/src/lib/api/index.js
index 24f7f12..ee8434b 100644
--- a/src/lib/api/index.js
+++ b/src/lib/api/index.js
@@ -122,7 +122,7 @@ export const fetchPage = title =>
 
 export const formatHtml = (html, stripStyles) => {
   const formatted = html
-    .replace(/href="\/wiki\//g, `href="/`)
+    .replace(/href="\/wiki\//g, 'href="/')
     .replace(/width="[^"]*"/g, '')
     .replace(/height="[^"]*"/g, '')
 
diff --git a/src/lib/favicon/index.js b/src/lib/favicon/index.js
index 4b49478..d14b71b 100644
--- a/src/lib/favicon/index.js
+++ b/src/lib/favicon/index.js
@@ -1,28 +1,28 @@
-function applyIcon(type) {
-  const link = document.querySelector("link[rel*='icon']");
+function applyIcon (type) {
+  const link = document.querySelector("link[rel*='icon']")
 
-  if (type === "dark") {
+  if (type === 'dark') {
     link.href =
-      "data:image/png;base64,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";
+      'data:image/png;base64,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'
   } else {
     link.href =
-      "data:image/png;base64,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";
+      'data:image/png;base64,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'
   }
 }
 
-var dmQuery = window.matchMedia("(prefers-color-scheme: dark)");
-var lmQuery = window.matchMedia("(prefers-color-scheme: light)");
+var dmQuery = window.matchMedia('(prefers-color-scheme: dark)')
+var lmQuery = window.matchMedia('(prefers-color-scheme: light)')
 
 // Check on initial load if dark mode is already there. Apply the dark
 // mode favicon if true.
 if (dmQuery.matches) {
-  applyIcon("dark");
+  applyIcon('dark')
 }
 
-lmQuery.addListener(function() {
+lmQuery.addListener(function () {
   if (lmQuery.matches) {
-    applyIcon("light");
+    applyIcon('light')
   } else if (dmQuery.matches) {
-    applyIcon("dark");
+    applyIcon('dark')
   }
-});
+})
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index a3e6c0c..1edab1c 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -16,25 +16,25 @@ const isLocalhost = Boolean(
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
-);
+)
 
-export default function register() {
+export default function register () {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
+        checkValidServiceWorker(swUrl)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
@@ -42,22 +42,22 @@ export default function register() {
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://goo.gl/SC7cgQ'
-          );
-        });
+          )
+        })
       } else {
         // Is not local host. Just register service worker
-        registerValidSW(swUrl);
+        registerValidSW(swUrl)
       }
-    });
+    })
   }
 }
 
-function registerValidSW(swUrl) {
+function registerValidSW (swUrl) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
@@ -65,25 +65,25 @@ function registerValidSW(swUrl) {
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
+              console.log('New content is available; please refresh.')
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
             }
           }
-        };
-      };
+        }
+      }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+      console.error('Error during service worker registration:', error)
+    })
 }
 
-function checkValidServiceWorker(swUrl) {
+function checkValidServiceWorker (swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
+  window.fetch(swUrl)
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
@@ -93,25 +93,25 @@ function checkValidServiceWorker(swUrl) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+        registerValidSW(swUrl)
       }
     })
     .catch(() => {
       console.log(
         'No internet connection found. App is running in offline mode.'
-      );
-    });
+      )
+    })
 }
 
-export function unregister() {
+export function unregister () {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+      registration.unregister()
+    })
   }
 }
diff --git a/src/routes/app/index.js b/src/routes/app/index.js
index c764429..876b94e 100644
--- a/src/routes/app/index.js
+++ b/src/routes/app/index.js
@@ -1,40 +1,40 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
-import Header from "../../components/header";
-import Footer from "../../components/footer";
+import Header from '../../components/header'
+import Footer from '../../components/footer'
 
 class App extends Component {
-  componentDidMount() {
+  componentDidMount () {
     if (this.props.darkMode) {
-      document.documentElement.style.backgroundColor = "black";
+      document.documentElement.style.backgroundColor = 'black'
     }
   }
 
-  componentDidUpdate({ darkMode }) {
+  componentDidUpdate ({ darkMode }) {
     if (this.props.darkMode !== darkMode) {
       document.documentElement.style.backgroundColor = this.props.darkMode
-        ? "black"
-        : "transparent";
+        ? 'black'
+        : 'transparent'
     }
   }
 
-  render() {
-    const { children, classNames } = this.props;
+  render () {
+    const { children, classNames } = this.props
 
     return (
-      <div className={`settings-wrapper ${classNames.join(" ")}`}>
+      <div className={`settings-wrapper ${classNames.join(' ')}`}>
         <Header />
         {children}
         <Footer />
       </div>
-    );
+    )
   }
 }
 
 const mapStateToProps = ({ settings }) => ({
   darkMode: settings.darkMode,
   classNames: Object.keys(settings).filter(setting => settings[setting])
-});
+})
 
-export default connect(mapStateToProps)(App);
+export default connect(mapStateToProps)(App)
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 90703f0..317a3cc 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -2,21 +2,26 @@ import React from 'react'
 import Page from '../../components/page'
 
 export default () => (
-  <div className="home-page">
-    <div className="container">
-      <h1 className="page-title">Wikipadia</h1>
-      <div className="blurb">
+  <div className='home-page'>
+    <div className='container'>
+      <h1 className='page-title'>Wikipadia</h1>
+      <div className='blurb'>
         <p>
           <em>Wikipadia</em> is a beautiful, minimal{' '}
-          <a href="http://www.wikipedia.org">Wikipedia</a> reader. It was
+          <a href='http://www.wikipedia.org'>Wikipedia</a> reader. It was
           specifically built for leisurely reading on an iPad.
         </p>
         <p>
-          <a href="https://github.com/rowanhogan/wikipadia">Source code</a>
+          <a
+            className='github-link'
+            href='https://github.com/rowanhogan/wikipadia'
+          >
+            Source code
+          </a>
         </p>
       </div>
     </div>
 
-    <Page title="Main_page" />
+    <Page title='Main_page' />
   </div>
 )
diff --git a/src/routes/index.js b/src/routes/index.js
index 932a4a6..329b919 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -10,10 +10,10 @@ import PageNotFound from './not-found'
 export default () => (
   <App>
     <Switch>
-      <Route exact path="/" component={Home} />
-      <Route exact path="/Main_page" render={() => <Redirect to="/" />} />
-      <Route path="/File::title" component={Media} />
-      <Route path="/:title" component={Page} />
+      <Route exact path='/' component={Home} />
+      <Route exact path='/Main_page' render={() => <Redirect to='/' />} />
+      <Route path='/File::title' component={Media} />
+      <Route path='/:title' component={Page} />
       <Route component={PageNotFound} />
     </Switch>
   </App>
diff --git a/src/routes/media/index.js b/src/routes/media/index.js
index f2535ea..14a5103 100644
--- a/src/routes/media/index.js
+++ b/src/routes/media/index.js
@@ -5,7 +5,7 @@ import { fetchMedia } from '../../lib/api'
 import Loading from '../../components/loading'
 
 export default class extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     const { match: { params: { title } } } = props
 
@@ -15,11 +15,11 @@ export default class extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     return this.fetchPage(this.state.title)
   }
 
-  fetchPage(title) {
+  fetchPage (title) {
     this.setState({ loading: true })
 
     return fetchMedia(`File:${decodeURIComponent(title)}`)
@@ -40,20 +40,20 @@ export default class extends Component {
       )
   }
 
-  render() {
+  render () {
     const { loading, title, content, error } = this.state
 
     return (
-      <div className="media container">
+      <div className='media container'>
         {loading ? (
           <Loading title={`File:${title}`} />
         ) : content ? (
           <div>
-            <h1 className="page-title">{title}</h1>
-            <a href={content.descriptionshorturl} target="_blank">
+            <h1 className='page-title'>{title}</h1>
+            <a href={content.descriptionshorturl}>
               <img src={content.url} alt={title} />
             </a>
-            <dl className="media-list">
+            <dl className='media-list'>
               {keys(content.extmetadata).map(key => {
                 return (
                   <div key={key}>
@@ -67,7 +67,7 @@ export default class extends Component {
                 )
               })}
             </dl>
-            <a href={content.descriptionshorturl} target="_blank">
+            <a href={content.descriptionshorturl}>
               View more
             </a>
           </div>
diff --git a/src/routes/not-found/index.js b/src/routes/not-found/index.js
index 7f669d2..a408e3b 100644
--- a/src/routes/not-found/index.js
+++ b/src/routes/not-found/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const PageNotFound = () => (
   <div>
-    <span role="img" aria-label="Sad face">
+    <span role='img' aria-label='Sad face'>
       😢
     </span>
     Not Found
diff --git a/src/store/settings/index.js b/src/store/settings/index.js
index a393564..05f06a5 100644
--- a/src/store/settings/index.js
+++ b/src/store/settings/index.js
@@ -1,31 +1,35 @@
+const { localStorage } = window
+
 export const updateSetting = (name, value) => dispatch =>
   Promise.resolve()
     .then(() => localStorage.setItem(name, value))
     .then(() =>
       dispatch({
-        type: "SETTINGS/UPDATE",
+        type: 'SETTINGS/UPDATE',
         payload: { name, value }
       })
-    );
+    )
 
-const getBooleanValue = key => localStorage.getItem(key) === "true";
+const getBooleanValue = key => localStorage.getItem(key) === 'true'
 
 const initialState = {
-  darkMode: localStorage.getItem("darkMode")
-    ? getBooleanValue("darkMode")
-    : window.matchMedia("(prefers-color-scheme: dark)").matches,
-  lowContrast: getBooleanValue("lowContrast")
-};
+  darkMode: localStorage.getItem('darkMode')
+    ? getBooleanValue('darkMode')
+    : window.matchMedia('(prefers-color-scheme: dark)').matches,
+  lowContrast: getBooleanValue('lowContrast')
+}
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case "SETTINGS/UPDATE":
-      const { name, value } = action.payload;
+    case 'SETTINGS/UPDATE': {
+      const { name, value } = action.payload
+
       return {
         ...state,
         [name]: value
-      };
+      }
+    }
     default:
-      return state;
+      return state
   }
-};
+}
diff --git a/src/styles/_home.scss b/src/styles/_home.scss
index d53ff69..77ae105 100644
--- a/src/styles/_home.scss
+++ b/src/styles/_home.scss
@@ -1,16 +1,42 @@
+.github-link {
+  display: block;
+  margin: auto;
+  width: 2rem;
+  height: 2rem;
+  text-align: left;
+  text-indent: -9999px;
+  cursor: pointer;
+  background: url(../images/github.svg) no-repeat center;
+  background-size: 1.25rem;
+}
+
 .home-page {
   .blurb {
     text-align: center;
   }
 
+  .page-title {
+    margin-bottom: 0;
+  }
+
   .container + .container {
     padding-top: 0;
+    margin-top: -1rem;
 
     .page-title {
       display: none;
     }
   }
 
+  .root h2 .mw-headline {
+    margin: 0;
+    font-size: 1.25rem;
+
+    &:after {
+      display: none;
+    }
+  }
+
   .loading {
     &:before,
     &:after {
@@ -24,6 +50,10 @@
     }
   }
 
+  table img {
+    width: 100%;
+  }
+
   #mp-topbanner {
     > div {
       display: none;
@@ -35,7 +65,7 @@
       text-align: center;
 
       &:before {
-        content: 'Categories';
+        content: "Categories";
         display: block;
         font-family: $title-stack;
         margin-bottom: 1rem;
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index ee5b96c..1d9b3c4 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -9,7 +9,7 @@
   }
 }
 
-.logo {
+.header .logo {
   display: block;
   position: relative;
   width: $header-height;
@@ -17,6 +17,7 @@
   text-indent: -9999px;
   overflow: hidden;
   color: currentColor !important;
+  border-right: thin solid rgba(gray, 0.25);
   margin: auto;
 
   &:visited {
@@ -60,18 +61,6 @@
   > div {
     flex: 1;
   }
-
-  .logo {
-    &:after {
-      content: "";
-      position: absolute;
-      top: $header-height / 4;
-      right: 0;
-      border-right: thin solid;
-      height: $header-height / 2;
-      opacity: 0.175;
-    }
-  }
 }
 
 .search-form {
@@ -296,6 +285,8 @@ $bar-height: 0.166rem;
   max-height: calc(100vh - 2rem);
   overflow: auto;
   text-align: left;
+  animation: modal 300ms ease forwards;
+  opacity: 0;
 
   h3 {
     margin-top: 0;
@@ -303,6 +294,16 @@ $bar-height: 0.166rem;
   }
 }
 
+@keyframes modal {
+  from {
+    transform: translate(-50%, -75%);
+    opacity: 0;
+  } to {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+}
+
 .close {
   position: absolute;
   top: 0;
diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss
index 835dff0..f72bc54 100644
--- a/src/styles/_settings.scss
+++ b/src/styles/_settings.scss
@@ -6,7 +6,7 @@
   }
 
   img {
-    opacity: 0.75;
+    opacity: 0.666;
   }
 }
 
@@ -22,7 +22,8 @@
   }
 
   .toggle-ui:before,
-  .search-results {
+  .search-results,
+  .page-sections-nav {
     background: black;
   }
 
@@ -31,7 +32,8 @@
       linear-gradient(90deg, rgba(black, 0), rgba(black, 0.5));
   }
 
-  .settings-button {
+  .settings-button,
+  .github-link {
     filter: invert(0.9);
   }
 
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 92fbdef..c7da44f 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -84,7 +84,7 @@ table {
     .container {
       padding: 3rem; } }
 
-.logo {
+.header .logo {
   display: block;
   position: relative;
   width: 3.25rem;
@@ -92,10 +92,11 @@ table {
   text-indent: -9999px;
   overflow: hidden;
   color: currentColor !important;
+  border-right: thin solid rgba(128, 128, 128, 0.25);
   margin: auto; }
-  .logo:visited {
+  .header .logo:visited {
     color: currentColor !important; }
-  .logo:before {
+  .header .logo:before {
     content: "W";
     position: absolute;
     top: 50%;
@@ -124,14 +125,6 @@ table {
     transform: translateY(-100%); }
   .header > div {
     flex: 1; }
-  .header .logo:after {
-    content: "";
-    position: absolute;
-    top: 0.8125rem;
-    right: 0;
-    border-right: thin solid;
-    height: 1.625rem;
-    opacity: 0.175; }
 
 .search-form {
   position: relative; }
@@ -298,11 +291,21 @@ table {
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
   overflow: auto;
-  text-align: left; }
+  text-align: left;
+  animation: modal 300ms ease forwards;
+  opacity: 0; }
   .modal h3 {
     margin-top: 0;
     margin-bottom: 2rem; }
 
+@keyframes modal {
+  from {
+    transform: translate(-50%, -75%);
+    opacity: 0; }
+  to {
+    transform: translate(-50%, -50%);
+    opacity: 1; } }
+
 .close {
   position: absolute;
   top: 0;
@@ -407,20 +410,44 @@ table {
     border-radius: 50%;
     transition: all 200ms ease; }
 
+.github-link {
+  display: block;
+  margin: auto;
+  width: 2rem;
+  height: 2rem;
+  text-align: left;
+  text-indent: -9999px;
+  cursor: pointer;
+  background: url(../images/github.svg) no-repeat center;
+  background-size: 1.25rem; }
+
 .home-page .blurb {
   text-align: center; }
 
+.home-page .page-title {
+  margin-bottom: 0; }
+
 .home-page .container + .container {
-  padding-top: 0; }
+  padding-top: 0;
+  margin-top: -1rem; }
   .home-page .container + .container .page-title {
     display: none; }
 
+.home-page .root h2 .mw-headline {
+  margin: 0;
+  font-size: 1.25rem; }
+  .home-page .root h2 .mw-headline:after {
+    display: none; }
+
 .home-page .loading:before, .home-page .loading:after {
   top: 0; }
 
 .home-page .page h2 .mw-headline:before {
   display: none; }
 
+.home-page table img {
+  width: 100%; }
+
 .home-page #mp-topbanner > div {
   display: none; }
 
@@ -429,7 +456,7 @@ table {
   padding: 0;
   text-align: center; }
   .home-page #mp-topbanner ul:before {
-    content: 'Categories';
+    content: "Categories";
     display: block;
     font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif;
     margin-bottom: 1rem;
@@ -851,7 +878,7 @@ pre {
   color: #444; }
 
 .lowContrast img {
-  opacity: 0.75; }
+  opacity: 0.666; }
 
 .darkMode,
 .darkMode .header {
@@ -862,13 +889,15 @@ pre {
   color: #aaa; }
 
 .darkMode .toggle-ui:before,
-.darkMode .search-results {
+.darkMode .search-results,
+.darkMode .page-sections-nav {
   background: black; }
 
 .darkMode .loading:after {
   background: linear-gradient(rgba(0, 0, 0, 0), black), linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }
 
-.darkMode .settings-button {
+.darkMode .settings-button,
+.darkMode .github-link {
   filter: invert(0.9); }
 
 .darkMode .modal {
diff --git a/yarn.lock b/yarn.lock
index 85a0538..18cd2a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1608,7 +1608,7 @@ compressible@~2.0.13:
 
 compression@^1.5.2:
   version "1.7.2"
-  resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
+  resolved "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
   dependencies:
     accepts "~1.3.4"
     bytes "3.0.0"
@@ -2539,7 +2539,7 @@ event-emitter@~0.3.5:
 
 event-stream@~3.3.0:
   version "3.3.4"
-  resolved "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
+  resolved "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
   dependencies:
     duplexer "~0.1.1"
     from "~0"
@@ -4519,9 +4519,9 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
-  version "4.17.10"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
+  version "4.17.13"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93"
 
 loglevel@^1.4.1:
   version "1.6.1"