From e521bbddc89b3088849a6930362dba07763bb5ff Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Wed, 7 Mar 2018 15:29:32 -0700
Subject: [PATCH] Tweak formatting

---
 docs/modules.js                     | 16 ++++----
 docs/pages/docs/typography/scale.js |  6 +++
 docs/typography/scale.md            | 59 +++++++++++++++++++++++++++++
 docs/ui/Editor.js                   | 36 +++++++++---------
 docs/ui/FontSizes.js                | 46 ++++++++++++++++++++++
 docs/ui/Layout.js                   | 11 +++---
 docs/ui/ScaleHero.js                | 38 +++++++++++++++++++
 docs/ui/index.js                    | 25 ++++++++----
 docs/ui/withDocLayout.js            |  5 ++-
 9 files changed, 202 insertions(+), 40 deletions(-)
 create mode 100644 docs/pages/docs/typography/scale.js
 create mode 100644 docs/typography/scale.md
 create mode 100644 docs/ui/FontSizes.js
 create mode 100644 docs/ui/ScaleHero.js

diff --git a/docs/modules.js b/docs/modules.js
index e42d09606..e11466f55 100644
--- a/docs/modules.js
+++ b/docs/modules.js
@@ -4,8 +4,7 @@ const { readFileSync, writeFileSync } = require('fs')
 
 const { dependencies } = require('./package.json')
 
-const px = Object
-  .keys(dependencies)
+const px = Object.keys(dependencies)
   .filter(m => /^tachyons-/.test(m))
   .filter(m => !/^tachyons-(colors|generator|styles)/.test(m))
   .map(async m => {
@@ -36,10 +35,11 @@ const px = Object
     }
   })
 
-Promise
-  .all(px)
-  .then(modules => {
-    const reduced = modules.reduce((acc, m) => Object.assign(acc, { [m.name]: m }), {})
+Promise.all(px).then(modules => {
+  const reduced = modules.reduce(
+    (acc, m) => Object.assign(acc, { [m.name]: m }),
+    {}
+  )
 
-    writeFileSync('data.json', JSON.stringify({ modules: reduced }, null, 2))
-  })
+  writeFileSync('data.json', JSON.stringify({ modules: reduced }, null, 2))
+})
diff --git a/docs/pages/docs/typography/scale.js b/docs/pages/docs/typography/scale.js
new file mode 100644
index 000000000..27de98dea
--- /dev/null
+++ b/docs/pages/docs/typography/scale.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+import withDocLayout from '../../../ui/withDocLayout'
+import Scale from '../../../typography/scale.md'
+
+export default withDocLayout(Scale)
diff --git a/docs/typography/scale.md b/docs/typography/scale.md
new file mode 100644
index 000000000..8935feb04
--- /dev/null
+++ b/docs/typography/scale.md
@@ -0,0 +1,59 @@
+import { BigQuote } from '../ui'
+import ScaleHero from '../ui/ScaleHero'
+import FontSizes from '../ui/FontSizes'
+
+# Type Scale
+
+<ScaleHero />
+
+<BigQuote
+  quote='The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection… In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years… This is the typographic equivalent of the diatonic scale.'
+  author='Robert Bringhurst'
+  work='The Elements of Typographic Style'
+/>
+
+### Font sizes
+
+<FontSizes />
+
+## Examples
+
+```.html
+<h1 class="f-headline lh-solid measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f-subheadline lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f1 lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f2 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f3 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f4 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f5 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f6 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+```.html
+<h1 class="f7 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
+```
+
+## Reference
+
+- [MDN - Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
diff --git a/docs/ui/Editor.js b/docs/ui/Editor.js
index 104d5e5e3..8327e89c7 100644
--- a/docs/ui/Editor.js
+++ b/docs/ui/Editor.js
@@ -5,14 +5,14 @@ import he from 'he'
 const isDotHTML = (cx = '') => /language-\.html/.test(cx)
 
 class Editor extends Component {
-	constructor (props) {
-		super()
+  constructor(props) {
+    super()
 
-		this.state = {
+    this.state = {
       shouldLiveEdit: isDotHTML(props.className),
-			html: props.children[0] || ''
-		}
-	}
+      html: props.children[0] || ''
+    }
+  }
 
   handleChange = e => {
     this.setState({
@@ -20,28 +20,28 @@ class Editor extends Component {
     })
   }
 
-	render () {
-		if (!this.state.shouldLiveEdit) {
-			return <code {...this.props} />
-		}
+  render() {
+    if (!this.state.shouldLiveEdit) {
+      return <code {...this.props} />
+    }
 
-		return (
-			<div>
+    return (
+      <div>
         <textarea
           rows={1}
-          className='w-100 bn code black-70 ph0 mb2 input-reset'
+          className="w-100 bn code black-70 ph0 mb2 input-reset"
           value={this.state.html}
           onChange={this.handleChange}
         />
-				<div
-					className='sans-serif'
+        <div
+          className="sans-serif ws-normal"
           dangerouslySetInnerHTML={{
             __html: he.decode(this.state.html)
           }}
         />
-			</div>
-		)
-	}
+      </div>
+    )
+  }
 }
 
 export default Editor
diff --git a/docs/ui/FontSizes.js b/docs/ui/FontSizes.js
new file mode 100644
index 000000000..37904d446
--- /dev/null
+++ b/docs/ui/FontSizes.js
@@ -0,0 +1,46 @@
+import React from 'react'
+
+export default () => (
+  <div className="w-100 overflow-x-auto pb4">
+    <table>
+      <tbody>
+        <tr>
+          <td className="tc f-headline b br b--black-10 v-base">A</td>
+          <td className="tc ph2 br f-subheadline b br b--black-10 v-base">A</td>
+          <td className="tc f1 b br b--black-10 v-base">A</td>
+          <td className="tc f2 b br b--black-10 v-base">A</td>
+          <td className="tc f3 b br b--black-10 v-base">A</td>
+          <td className="tc f4 b br b--black-10 v-base">A</td>
+          <td className="tc f5 b br b--black-10 v-base">A</td>
+          <td className="tc f6 b b--black-10 v-base">A</td>
+        </tr>
+        <tr>
+          <td className="tc gray f6 fw2 pr2 bt br b--black-10 pt1">
+            6rem (96px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            5rem (80px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            3rem (48px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            2.25rem (36px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            1.5rem (24px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            1.25rem (20px)
+          </td>
+          <td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
+            1rem (16px)
+          </td>
+          <td className="tc gray f6 fw2 pl2 bt b--black-10 pt1">
+            .875rem (14px)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+)
diff --git a/docs/ui/Layout.js b/docs/ui/Layout.js
index c852a3f90..0c31433fc 100644
--- a/docs/ui/Layout.js
+++ b/docs/ui/Layout.js
@@ -4,7 +4,11 @@ import { version } from '../package.json'
 import Header from './Header'
 import Footer from './Footer'
 
-export default ({ title = 'TACHYONS - Css Toolkit', className = '', children }) => (
+export default ({
+  title = 'TACHYONS - Css Toolkit',
+  className = '',
+  children
+}) => (
   <div className="w-100 sans-serif">
     <title>{title}</title>
     <link
@@ -13,9 +17,6 @@ export default ({ title = 'TACHYONS - Css Toolkit', className = '', children })
     />
 
     <Header version={version} />
-    <main
-      className={className}
-      children={children}
-    />
+    <main className={className} children={children} />
   </div>
 )
diff --git a/docs/ui/ScaleHero.js b/docs/ui/ScaleHero.js
new file mode 100644
index 000000000..0611cab0a
--- /dev/null
+++ b/docs/ui/ScaleHero.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+export default () => (
+  <article className="cf">
+    <div className="fl w-100 w-50-l pr4-l">
+      <div className="outline black-10 mt3-ns">
+        <div className="aspect-ratio aspect-ratio--8x5">
+          <iframe
+            className="aspect-ratio--object"
+            src="https://player.vimeo.com/video/183819916"
+            frameBorder="0"
+            allowFullScreen=""
+          />
+        </div>
+      </div>
+    </div>
+    <div className="fl w-100 w-50-l pt4">
+      <p className="fl w-100 f5 f4-ns lh-copy mb3">
+        <span>
+          Often times, websites devote a non-trivial amount of css to setting
+          font-size
+        </span>. They declare an unnecessary amount of different font-sizes that
+        upon inspection, don’t come close to resembling a sane type scale.
+      </p>
+      <p className="fl w-100 w-50-ns v-top f5 f6-ns lh-copy pr2-ns">
+        To create and design an easily readable interface, you don’t need more
+        than 40 font-sizes. A simple ratio-based scale with 8 options should
+        suffice. Using the class extension namespaces you can set the font-size
+        for any particular breakpoint that you desire.
+      </p>
+      <p className="fl w-100 w-50-ns measure measure-narrow-ns v-top f5 f6-ns lh-copy pl2-ns">
+        Don’t spend time constantly overriding font-sizes in your css. If you
+        don’t like a default font-size for an element, use the utilities to
+        quickly make the text larger or smaller until it looks just right.
+      </p>
+    </div>
+  </article>
+)
diff --git a/docs/ui/index.js b/docs/ui/index.js
index 8be58454c..1b194c046 100644
--- a/docs/ui/index.js
+++ b/docs/ui/index.js
@@ -32,16 +32,27 @@ export const TitleLink = ({ href = '#!', subtext, text, ...props }) => (
   </Link>
 )
 
+export const BigQuote = ({ quote, author, work }) => (
+  <blockquote className="f5 f4-m f2-l black-70 lh-copy mh0 pv4 ph3 bt bb bw1 b--black-05 mv4 mv5-ns db">
+    <p className="baskerville fw1 measure center">“{quote}”</p>
+    <p className="dark-gray f5 f4-m f2-l center measure">
+      <span className="f6">
+        —{author}, <cite>{work}</cite>
+      </span>
+    </p>
+  </blockquote>
+)
+
 export const md = {
-  h1: props => <h1 className='f6 ttu tracked mt0' {...props} />,
-  h2: props => <h2 className='f5 mt4 pb2 bb' {...props} />,
-  h3: props => <h3 className='f5 mt4' {...props} />,
-  p: props => <p className='measure f5 lh-copy' {...props} />,
-  ul: props => <ul className='pl3' {...props} />,
-  li: props => <li className='lh-copy ml2' {...props} />,
+  h1: props => <h1 className="f6 ttu tracked mt0" {...props} />,
+  h2: props => <h2 className="f5 mt4 pb2 bb" {...props} />,
+  h3: props => <h3 className="f5 mt4" {...props} />,
+  p: props => <p className="measure f5 lh-copy" {...props} />,
+  ul: props => <ul className="pl3" {...props} />,
+  li: props => <li className="lh-copy ml2" {...props} />,
   a: ({ href, ...props }) => (
     <Link href={href}>
-      <a className='dim link blue' {...props} />
+      <a className="dim link blue" {...props} />
     </Link>
   ),
   code: Editor
diff --git a/docs/ui/withDocLayout.js b/docs/ui/withDocLayout.js
index 7bb7c50a2..40bcad177 100644
--- a/docs/ui/withDocLayout.js
+++ b/docs/ui/withDocLayout.js
@@ -4,14 +4,15 @@ import { ComponentsProvider } from '@compositor/markdown'
 import Layout from './Layout'
 import Container from './Container'
 import NavElements from './NavElements'
+import data from '../data.json'
 import { md } from './'
 
 export default Component => ({ title, ...props }) => (
   <ComponentsProvider components={md}>
     <Layout title={title}>
       <NavElements />
-      <Container padding={true} className='black-70'>
-        <Component {...props} />
+      <Container padding={true} className="black-70">
+        <Component data={data} {...props} />
       </Container>
     </Layout>
   </ComponentsProvider>