From ddba6e11f1562183eddaee5c1515ecbc8ea52767 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Wed, 12 Sep 2018 00:04:26 +1000 Subject: [PATCH] Add settings handler (and redux) --- package.json | 6 +- src/components/footer/index.js | 18 ++ src/components/sections/index.js | 4 +- src/components/settings/index.js | 66 +++++ src/components/toggle/index.js | 20 ++ src/index.js | 17 +- src/routes/app/app.test.js | 9 - src/routes/app/index.js | 34 +-- src/routes/index.js | 20 ++ src/routes/media/index.js | 2 - src/routes/not-found/index.js | 12 + src/store/index.js | 16 ++ src/store/settings/index.js | 28 ++ src/styles/_home.scss | 2 +- src/styles/_layout.scss | 188 ++++++++++++-- src/styles/_loading.scss | 1 + src/styles/_page.scss | 20 +- src/styles/_settings.scss | 7 + src/styles/_themes.scss | 0 src/styles/_typography.scss | 21 ++ src/styles/styles.css | 427 ++++++++++++++++++++----------- src/styles/styles.scss | 6 +- yarn.lock | 46 +++- 23 files changed, 746 insertions(+), 224 deletions(-) create mode 100644 src/components/footer/index.js create mode 100644 src/components/settings/index.js create mode 100644 src/components/toggle/index.js delete mode 100644 src/routes/app/app.test.js create mode 100644 src/routes/index.js create mode 100644 src/routes/not-found/index.js create mode 100644 src/store/index.js create mode 100644 src/store/settings/index.js create mode 100644 src/styles/_settings.scss delete mode 100644 src/styles/_themes.scss diff --git a/package.json b/package.json index 1bcb5a4..7f5178b 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,12 @@ "react-click-outside": "^3.0.1", "react-dom": "^16.4.0", "react-fastclick": "^3.0.2", + "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", - "react-scripts": "1.1.4" + "react-scripts": "1.1.4", + "redux": "^4.0.0", + "redux-logger": "^3.0.6", + "redux-thunk": "^2.3.0" }, "scripts": { "start": "npm-run-all -p watch-css start-js", diff --git a/src/components/footer/index.js b/src/components/footer/index.js new file mode 100644 index 0000000..25bae25 --- /dev/null +++ b/src/components/footer/index.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import Settings from '../settings' + +class Footer extends Component { + render() { + return window === window.top ? ( + + ) : null + } +} + +export default Footer diff --git a/src/components/sections/index.js b/src/components/sections/index.js index 96e4ebb..bb6ed40 100644 --- a/src/components/sections/index.js +++ b/src/components/sections/index.js @@ -34,7 +34,9 @@ class Sections extends Component { this.setState({ open: false })}> + onClick={() => + setTimeout(() => this.setState({ open: false }), 100) + }> {section.number}. diff --git a/src/components/settings/index.js b/src/components/settings/index.js new file mode 100644 index 0000000..df3cb1b --- /dev/null +++ b/src/components/settings/index.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react' +import { compose } from 'redux' +import { connect } from 'react-redux' +import { updateSetting } from '../../store/settings' +import withClickOutside from 'react-click-outside' + +import Toggle from '../toggle' + +class Settings extends Component { + constructor() { + super() + this.state = { + open: false + } + } + + handleClickOutside(event) { + if (this.state.open) { + event.preventDefault() + this.setState({ open: false }) + } + } + + render() { + const { settings } = this.props + const { open } = this.state + + return ( +
+ + {open && ( +
+ +

Settings

+ + +

+ Reduce eye strain for low-light reading. +

+
+ )} +
+ ) + } +} + +const mapStateToProps = ({ settings }) => ({ settings }) +const mapDispatchToProps = { updateSetting } + +export default compose( + connect(mapStateToProps, mapDispatchToProps), + withClickOutside +)(Settings) diff --git a/src/components/toggle/index.js b/src/components/toggle/index.js new file mode 100644 index 0000000..23ace7d --- /dev/null +++ b/src/components/toggle/index.js @@ -0,0 +1,20 @@ +import React from 'react' + +const Toggle = ({ label, name, checked, onChange }) => ( + +) + +export default Toggle diff --git a/src/index.js b/src/index.js index eeb1a27..ce53501 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,13 @@ import React from 'react' -import ReactDOM from 'react-dom' 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 App from './routes/app' import './styles/styles.css' -import initReactFastclick from 'react-fastclick' + +import App from './routes' if ('ontouchstart' in document.documentElement) { document.body.style.cursor = 'pointer' @@ -13,9 +16,11 @@ if ('ontouchstart' in document.documentElement) { initReactFastclick() ReactDOM.render( - - - , + + + + + , document.getElementById('root') ) registerServiceWorker() diff --git a/src/routes/app/app.test.js b/src/routes/app/app.test.js deleted file mode 100644 index efb0f3b..0000000 --- a/src/routes/app/app.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import App from '.' - -it('renders without crashing', () => { - const div = document.createElement('div') - ReactDOM.render(, div) - ReactDOM.unmountComponentAtNode(div) -}) diff --git a/src/routes/app/index.js b/src/routes/app/index.js index ecece99..b53d0ea 100644 --- a/src/routes/app/index.js +++ b/src/routes/app/index.js @@ -1,29 +1,19 @@ import React from 'react' -import { Switch, Redirect, Route } from 'react-router-dom' +import { connect } from 'react-redux' -import Home from '../home' -import Page from '../page' -import Media from '../media' import Header from '../../components/header' +import Footer from '../../components/footer' -const PageNotFound = () => ( -
- - 😢 - - Not Found -
-) - -export default () => ( -
+const App = ({ classNames, children }) => ( +
- - - } /> - - - - + {children} +
) + +const mapStateToProps = ({ settings }) => ({ + classNames: Object.keys(settings).filter(setting => settings[setting]) +}) + +export default connect(mapStateToProps)(App) diff --git a/src/routes/index.js b/src/routes/index.js new file mode 100644 index 0000000..932a4a6 --- /dev/null +++ b/src/routes/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { Switch, Redirect, Route } from 'react-router-dom' + +import App from './app' +import Home from './home' +import Page from './page' +import Media from './media' +import PageNotFound from './not-found' + +export default () => ( + + + + } /> + + + + + +) diff --git a/src/routes/media/index.js b/src/routes/media/index.js index 94bf2fc..f2535ea 100644 --- a/src/routes/media/index.js +++ b/src/routes/media/index.js @@ -43,8 +43,6 @@ export default class extends Component { render() { const { loading, title, content, error } = this.state - console.log(content) - return (
{loading ? ( diff --git a/src/routes/not-found/index.js b/src/routes/not-found/index.js new file mode 100644 index 0000000..7f669d2 --- /dev/null +++ b/src/routes/not-found/index.js @@ -0,0 +1,12 @@ +import React from 'react' + +const PageNotFound = () => ( +
+ + 😢 + + Not Found +
+) + +export default PageNotFound diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..5b94545 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,16 @@ +import { combineReducers, createStore, applyMiddleware } from 'redux' +import thunk from 'redux-thunk' +import createLogger from 'redux-logger' + +import settings from './settings' + +const initialState = {} + +export default () => + createStore( + combineReducers({ + settings + }), + initialState, + applyMiddleware(thunk, createLogger) + ) diff --git a/src/store/settings/index.js b/src/store/settings/index.js new file mode 100644 index 0000000..9d0ade7 --- /dev/null +++ b/src/store/settings/index.js @@ -0,0 +1,28 @@ +export const updateSetting = (name, value) => dispatch => + Promise.resolve() + .then(() => localStorage.setItem(name, value)) + .then(() => + dispatch({ + type: 'SETTINGS/UPDATE', + payload: { name, value } + }) + ) + +const getBooleanValue = key => localStorage.getItem(key) === 'true' + +const initialState = { + lowContrast: getBooleanValue('lowContrast') +} + +export default (state = initialState, action) => { + switch (action.type) { + case 'SETTINGS/UPDATE': + const { name, value } = action.payload + return { + ...state, + [name]: value + } + default: + return state + } +} diff --git a/src/styles/_home.scss b/src/styles/_home.scss index c973e54..d53ff69 100644 --- a/src/styles/_home.scss +++ b/src/styles/_home.scss @@ -19,7 +19,7 @@ } .page { - .root h2 .mw-headline:before { + h2 .mw-headline:before { display: none; } } diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 17b0ab9..0d94df4 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -9,6 +9,32 @@ } } +.logo { + display: block; + position: relative; + width: $header-height; + height: $header-height; + text-indent: -9999px; + overflow: hidden; + color: currentColor; + margin: auto; + + &:visited { + color: currentColor; + } + + &:before { + content: 'W'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: $title-stack; + text-indent: 0; + font-size: 1.333rem; + } +} + .header { position: sticky; top: 0; @@ -36,25 +62,6 @@ } .logo { - display: block; - position: relative; - width: $header-height; - height: $header-height; - text-indent: -9999px; - overflow: hidden; - color: currentColor; - - &:before { - content: 'W'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: $title-stack; - text-indent: 0; - font-size: 1.333rem; - } - &:after { content: ''; position: absolute; @@ -270,15 +277,146 @@ $bar-height: 0.166rem; } } -.media { +.footer { + padding: 1rem; text-align: center; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 1.5rem 2rem; + background: white; + border-radius: 0.25rem; + box-shadow: 0 0 0 100vh rgba(black, 0.75); + z-index: 1000; + max-width: calc(100vw - 2rem); + max-height: calc(100vh - 2rem); + overflow: auto; + text-align: left; +} + +.close { + position: absolute; + top: -0.25rem; + right: -0.25rem; + width: $header-height; + height: $header-height; + text-indent: -9999px; + text-align: left; + overflow: hidden; + outline: 0; + opacity: 0.75; + cursor: pointer; + color: currentColor; + transform: scale(0.75); + + &:before, + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: $header-height / 2.5; + height: $bar-height; + background: currentColor; + border-radius: 1rem; + transition: all 100ms ease; + } - .page-title { - font-size: 1.5rem; + &:before { + transform: translate(-50%, -50%) rotate(-45deg); } - img { - display: block; - margin: auto; + &:after { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +.settings-button { + padding: 0.5rem 1rem; + border: thin solid rgba(black, 0.25); + border-radius: 0.25rem; + margin-bottom: 0.5rem; +} + +.settings { + h3 { + margin-top: 0; + border-bottom: thin solid rgba(black, 0.25); + padding-bottom: 0.75rem; + } +} + +.settings-hint { + opacity: 0.75; + font-size: 90%; +} + +.toggle-label { + display: flex; + margin: 0 0 1rem; + justify-content: space-between; + align-items: center; + font-weight: bold; +} + +.toggle { + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: 1rem; + width: 3rem; + height: 1.75rem; + border-radius: 2rem; + overflow: hidden; +} + +.toggle-input, +.toggle-ui { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.toggle-input { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + + &:checked + .toggle-ui { + background: currentColor; + + &:before { + transform: translateX(1.25rem) translateY(-50%); + } + } +} + +.toggle-ui { + background: rgba(black, 0.25); + transition: all 200ms ease; + pointer-events: none; + + &:before { + content: ''; + position: absolute; + top: 50%; + left: 0; + margin-left: 0.125rem; + transform: translateY(-50%); + width: 1.5rem; + height: 1.5rem; + bottom: 0; + background: white; + border-radius: 50%; + transition: all 200ms ease; } } diff --git a/src/styles/_loading.scss b/src/styles/_loading.scss index c47f575..4acc560 100644 --- a/src/styles/_loading.scss +++ b/src/styles/_loading.scss @@ -1,5 +1,6 @@ .loading { position: relative; + height: calc(100vh - #{$header-height}); .page-title { animation: loading 1.5s linear infinite; diff --git a/src/styles/_page.scss b/src/styles/_page.scss index d6a9024..40315c5 100644 --- a/src/styles/_page.scss +++ b/src/styles/_page.scss @@ -71,8 +71,6 @@ $sidebar-width: 20rem; .sans-stack { font-family: $sans-stack; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } h1, @@ -111,11 +109,6 @@ div.hatnote { } table { - margin: 1.5rem auto; - table-layout: fixed; - border-spacing: 0; - border-collapse: collapse; - &.infobox { font-size: 90%; border: 0; @@ -331,3 +324,16 @@ pre { column-count: 2; } } + +.media { + text-align: center; + + .page-title { + font-size: 1.5rem; + } + + img { + display: block; + margin: auto; + } +} diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss new file mode 100644 index 0000000..6c2ce10 --- /dev/null +++ b/src/styles/_settings.scss @@ -0,0 +1,7 @@ +.lowContrast { + opacity: 0.75; + + img { + opacity: 0.75; + } +} diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index f7233f8..b5e536f 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -13,6 +13,10 @@ } } +* { + box-sizing: border-box; +} + body { margin: 0; padding: 0; @@ -27,12 +31,21 @@ a { } &:focus, + &:hover, &:active { color: hsl(210, 90%, 20%); outline: 0; } } +button { + background: transparent; + font-size: 100%; + border: 0; + padding: 0.5rem; + cursor: pointer; +} + img { max-width: 100%; } @@ -75,3 +88,11 @@ sup.reference { abbr { cursor: help; } + +table { + width: 100%; + margin: 1.5rem auto; + border-spacing: 0; + border-collapse: collapse; + table-layout: fixed; +} diff --git a/src/styles/styles.css b/src/styles/styles.css index 44d4cd2..f1a13f1 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -1,3 +1,82 @@ +:root { + color: #222; + font-family: "PT Serif", "Lora", Georgia, serif; + font-size: 110%; + line-height: 1.666; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + @media (min-width: 36rem) { + :root { + font-size: 120%; } } + +* { + box-sizing: border-box; } + +body { + margin: 0; + padding: 0; } + +a { + color: #0a66c2; + -webkit-tap-highlight-color: rgba(10, 102, 194, 0.25); } + a:visited { + color: #290ac2; } + a:focus, a:hover, a:active { + color: #053361; + outline: 0; } + +button { + background: transparent; + font-size: 100%; + border: 0; + padding: 0.5rem; + cursor: pointer; } + +img { + max-width: 100%; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; + margin: 2em 0 1em; + position: relative; + line-height: 1.333; + clear: both; } + +h1, +h2, +.center { + text-align: center; } + +dt, +dd { + display: block; + padding: 0; + margin: 1rem 0; } + +dt { + font-weight: bold; + font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; } + +sup.reference { + font-size: x-small; } + +abbr { + cursor: help; } + +table { + width: 100%; + margin: 1.5rem auto; + border-spacing: 0; + border-collapse: collapse; + table-layout: fixed; } + .container { max-width: 48rem; margin: auto; @@ -7,6 +86,27 @@ .container { padding: 3rem; } } +.logo { + display: block; + position: relative; + width: 3.25rem; + height: 3.25rem; + text-indent: -9999px; + overflow: hidden; + color: currentColor; + margin: auto; } + .logo:visited { + color: currentColor; } + .logo:before { + content: 'W'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; + text-indent: 0; + font-size: 1.333rem; } + .header { position: sticky; top: 0; @@ -26,31 +126,14 @@ transform: translateY(-100%); } .header div { flex: 1; } - .header .logo { - display: block; - position: relative; - width: 3.25rem; - height: 3.25rem; - text-indent: -9999px; - overflow: hidden; - color: currentColor; } - .header .logo:before { - content: 'W'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; - text-indent: 0; - font-size: 1.333rem; } - .header .logo:after { - content: ''; - position: absolute; - top: 0.8125rem; - right: 0; - border-right: thin solid; - height: 1.625rem; - opacity: 0.175; } + .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; } @@ -199,75 +282,123 @@ font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; margin-left: 0.5rem; } -.media { +.footer { + padding: 1rem; text-align: center; } - .media .page-title { - font-size: 1.5rem; } - .media img { - display: block; - margin: auto; } - -:root { - color: #222; - font-family: "PT Serif", "Lora", Georgia, serif; - font-size: 110%; - line-height: 1.666; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - @media (min-width: 36rem) { - :root { - font-size: 120%; } } -body { - margin: 0; - padding: 0; } +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 1.5rem 2rem; + background: white; + border-radius: 0.25rem; + box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.75); + z-index: 1000; + max-width: calc(100vw - 2rem); + max-height: calc(100vh - 2rem); + overflow: auto; + text-align: left; } -a { - color: #0a66c2; - -webkit-tap-highlight-color: rgba(10, 102, 194, 0.25); } - a:visited { - color: #290ac2; } - a:focus, a:active { - color: #053361; - outline: 0; } +.close { + position: absolute; + top: -0.25rem; + right: -0.25rem; + width: 3.25rem; + height: 3.25rem; + text-indent: -9999px; + text-align: left; + overflow: hidden; + outline: 0; + opacity: 0.75; + cursor: pointer; + color: currentColor; + transform: scale(0.75); } + .close:before, .close:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 1.3rem; + height: 0.166rem; + background: currentColor; + border-radius: 1rem; + transition: all 100ms ease; } + .close:before { + transform: translate(-50%, -50%) rotate(-45deg); } + .close:after { + transform: translate(-50%, -50%) rotate(45deg); } + +.settings-button { + padding: 0.5rem 1rem; + border: thin solid rgba(0, 0, 0, 0.25); + border-radius: 0.25rem; + margin-bottom: 0.5rem; } + +.settings h3 { + margin-top: 0; + border-bottom: thin solid rgba(0, 0, 0, 0.25); + padding-bottom: 0.75rem; } + +.settings-hint { + opacity: 0.75; + font-size: 90%; } -img { - max-width: 100%; } +.toggle-label { + display: flex; + margin: 0 0 1rem; + justify-content: space-between; + align-items: center; + font-weight: bold; } -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; - margin: 2em 0 1em; +.toggle { position: relative; - line-height: 1.333; - clear: both; } + display: inline-block; + vertical-align: middle; + margin-left: 1rem; + width: 3rem; + height: 1.75rem; + border-radius: 2rem; + overflow: hidden; } -h1, -h2, -.center { - text-align: center; } +.toggle-input, +.toggle-ui { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } -dt, -dd { - display: block; +.toggle-input { + margin: 0; padding: 0; - margin: 1rem 0; } - -dt { - font-weight: bold; - font-family: "Playfair Display", "PT Serif", "Lora", Georgia, serif; } - -sup.reference { - font-size: x-small; } - -abbr { - cursor: help; } + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; } + .toggle-input:checked + .toggle-ui { + background: currentColor; } + .toggle-input:checked + .toggle-ui:before { + transform: translateX(1.25rem) translateY(-50%); } + +.toggle-ui { + background: rgba(0, 0, 0, 0.25); + transition: all 200ms ease; + pointer-events: none; } + .toggle-ui:before { + content: ''; + position: absolute; + top: 50%; + left: 0; + margin-left: 0.125rem; + transform: translateY(-50%); + width: 1.5rem; + height: 1.5rem; + bottom: 0; + background: white; + border-radius: 50%; + transition: all 200ms ease; } .home-page .blurb { text-align: center; } @@ -280,7 +411,7 @@ abbr { .home-page .loading:before, .home-page .loading:after { top: 0; } -.home-page .page .root h2 .mw-headline:before { +.home-page .page h2 .mw-headline:before { display: none; } .home-page #mp-topbanner > div { @@ -438,9 +569,7 @@ abbr { font-family: "PT Serif", "Lora", Georgia, serif; } .sans-stack { - font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } h1, h2, @@ -472,59 +601,57 @@ div.hatnote { padding: 0; line-height: 1.5em; } -table { - margin: 1.5rem auto; - table-layout: fixed; - border-spacing: 0; - border-collapse: collapse; } - table.infobox { - font-size: 90%; - border: 0; } - table.infobox.geography, table.infobox.vcard, table.infobox.active { - max-width: 100%; } - table.infobox th[colspan='2'], - table.infobox .adr, - table.infobox .fn { - font-weight: bold; - text-align: center; - padding: 1rem; } - table.infobox td[colspan='2'] { - text-align: center; } - table.infobox th[scope='row'] { - text-align: right; - padding-right: 1.5rem; } - table.infobox th, - table.infobox td { - padding: 0.25rem; } - table.infobox th:first-child, - table.infobox td:first-child { - padding-left: 0; } - table.infobox th:last-child, - table.infobox td:last-child { - padding-right: 0; } - table.vertical-navbox { - margin: 1em auto; - float: none; - border: 0; - background-color: transparent; - padding: 0; } - table.vertical-navbox th { - background-color: transparent; } - table.navbox { - border: 0; - padding: 0; } - table.navbox th { - background-color: transparent; } - table.wikitable { - font-size: 90%; } - table.wikitable caption { - margin: 0 0 0.5em; } - table.wikitable th, - table.wikitable td { - padding: 0.25em 0.5em; - border: thin solid #ddd; } - table.wikitable img { - background-color: white; } +table.infobox { + font-size: 90%; + border: 0; } + table.infobox.geography, table.infobox.vcard, table.infobox.active { + max-width: 100%; } + table.infobox th[colspan='2'], + table.infobox .adr, + table.infobox .fn { + font-weight: bold; + text-align: center; + padding: 1rem; } + table.infobox td[colspan='2'] { + text-align: center; } + table.infobox th[scope='row'] { + text-align: right; + padding-right: 1.5rem; } + table.infobox th, + table.infobox td { + padding: 0.25rem; } + table.infobox th:first-child, + table.infobox td:first-child { + padding-left: 0; } + table.infobox th:last-child, + table.infobox td:last-child { + padding-right: 0; } + +table.vertical-navbox { + margin: 1em auto; + float: none; + border: 0; + background-color: transparent; + padding: 0; } + table.vertical-navbox th { + background-color: transparent; } + +table.navbox { + border: 0; + padding: 0; } + table.navbox th { + background-color: transparent; } + +table.wikitable { + font-size: 90%; } + table.wikitable caption { + margin: 0 0 0.5em; } + table.wikitable th, + table.wikitable td { + padding: 0.25em 0.5em; + border: thin solid #ddd; } + table.wikitable img { + background-color: white; } table.wikitable, table.navbox { @@ -624,8 +751,17 @@ pre { .reflist { column-count: 2; } } +.media { + text-align: center; } + .media .page-title { + font-size: 1.5rem; } + .media img { + display: block; + margin: auto; } + .loading { - position: relative; } + position: relative; + height: calc(100vh - 3.25rem); } .loading .page-title { animation: loading 1.5s linear infinite; } .loading:before, .loading:after { @@ -683,3 +819,8 @@ pre { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } + +.lowContrast { + opacity: 0.75; } + .lowContrast img { + opacity: 0.75; } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 9101296..4541b94 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -2,14 +2,12 @@ $serif-stack: 'PT Serif', 'Lora', Georgia, serif; $sans-stack: 'Roboto', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; $title-stack: 'Playfair Display', $serif-stack; - $color-dark: #222; - $header-height: 3.25rem; -@import 'layout'; @import 'typography'; +@import 'layout'; @import 'home'; @import 'page'; -@import 'themes'; @import 'loading'; +@import 'settings'; diff --git a/yarn.lock b/yarn.lock index 7e79b23..85a0538 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1949,6 +1949,10 @@ decode-uri-component@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" +deep-diff@^0.3.5: + version "0.3.8" + resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84" + deep-equal@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -3332,7 +3336,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^2.1.1: +hoist-non-react-statics@^2.1.1, hoist-non-react-statics@^2.5.0: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" @@ -3590,7 +3594,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.2.1, invariant@^2.2.2: +invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -4462,6 +4466,10 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" +lodash-es@^4.17.5: + version "4.17.10" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05" + lodash._reinterpolate@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -4511,7 +4519,7 @@ 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.3.0, lodash@~4.17.10: +"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" @@ -5950,6 +5958,17 @@ react-fastclick@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/react-fastclick/-/react-fastclick-3.0.2.tgz#2994c60088cda90b0b2cbfac4b6e7c6bc73d6a3a" +react-redux@^5.0.7: + version "5.0.7" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8" + dependencies: + hoist-non-react-statics "^2.5.0" + invariant "^2.0.0" + lodash "^4.17.5" + lodash-es "^4.17.5" + loose-envify "^1.1.0" + prop-types "^15.6.0" + react-router-dom@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" @@ -6122,6 +6141,23 @@ reduce-function-call@^1.0.1: dependencies: balanced-match "^0.4.2" +redux-logger@^3.0.6: + version "3.0.6" + resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf" + dependencies: + deep-diff "^0.3.5" + +redux-thunk@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" + +redux@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03" + dependencies: + loose-envify "^1.1.0" + symbol-observable "^1.2.0" + regenerate@^1.2.1: version "1.4.0" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" @@ -6986,6 +7022,10 @@ sw-toolbox@^3.4.0: path-to-regexp "^1.0.1" serviceworker-cache-polyfill "^4.0.0" +symbol-observable@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + symbol-tree@^3.2.1: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"