Fix typeface imports, navigation for small screens (#2624)

gatsbyjs · Oct 25, 2017 · 1b17b58 · 1b17b58
1 parent b37b7b0
commit 1b17b58
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 37 deletions.
diff --git a/examples/using-gatsby-image/src/components/navigation.js b/examples/using-gatsby-image/src/components/navigation.js
@@ -4,11 +4,12 @@ import Link from "gatsby-link"
 import { rhythm, scale, options } from "../utils/typography"
 
 const Navigation = () => (
- <div css={{ display: `flex`, alignItems: `baseline` }}>
- <h1 css={{ marginBottom: 0 }}>
+ <div>
+ <h1 css={{ marginBottom: options.blockMarginBottom }}>
  <Link
  to="/"
  css={{
+ ...scale(3 / 4),
  backgroundImage: `none`,
  color: options.accentColor,
  }}
@@ -18,34 +19,35 @@ const Navigation = () => (
  </h1>
  <nav
  css={{
- ...scale(-4 / 5),
  fontFamily: options.headerFontFamily.join(`,`),
- textTransform: `uppercase`,
- margin: 0,
- marginLeft: `auto`,
  "& a": {
- color: options.accentColor,
+ color: options.bodyColor,
  opacity: 0.7,
+ textTransform: `uppercase`,
  backgroundImage: `none`,
+ fontWeight: `300`,
+ transition: `all 200ms ease-out`,
+ letterSpacing: `.005em`,
+ },
+ "& a:after": {
+ content: ` / `,
+ color: options.bodyColor,
+ opacity: 0.2,
+ padding: `0 ${rhythm(options.blockMarginBottom / 4)}`,
  },
- "& .nav-link-active": {
+ "& a:last-child:after": {
+ display: `none`,
+ },
+ "& .nav-link-active, & a:hover": {
  color: options.accentColor,
  opacity: 1,
  },
  }}
  >
- <Link
- to="/blur-up/"
- activeClassName="nav-link-active"
- css={{ marginLeft: `auto`, marginRight: `.5rem` }}
- >
+ <Link to="/blur-up/" activeClassName="nav-link-active">
  Blur Up
  </Link>
- <Link
- to="/background-color/"
- css={{ marginRight: `.5rem` }}
- activeClassName="nav-link-active"
- >
+ <Link to="/background-color/" activeClassName="nav-link-active">
  Background Color
  </Link>
  <Link to="/traced-svg/" activeClassName="nav-link-active">

diff --git a/examples/using-gatsby-image/src/layouts/index.js b/examples/using-gatsby-image/src/layouts/index.js
@@ -3,6 +3,9 @@ import Navigation from "../components/navigation"
 
 import { rhythm, scale, options } from "../utils/typography"
 
+import "typeface-pt-sans"
+import "typeface-oswald"
+
 const MainLayout = ({ children, location }) => (
  <div
  css={{
@@ -11,11 +14,7 @@ const MainLayout = ({ children, location }) => (
  padding: `${rhythm(1)} ${rhythm(3 / 4)}`,
  }}
  >
- {location.pathname !== `/` && (
- <div css={{ "& h1": { opacity: 0.5 } }}>
- <Navigation />
- </div>
- )}
+ {location.pathname !== `/` && <Navigation />}
  {children()}
  </div>
 )

diff --git a/examples/using-gatsby-image/src/pages/background-color.js b/examples/using-gatsby-image/src/pages/background-color.js
@@ -7,8 +7,7 @@ import { rhythm, options } from "../utils/typography"
 
 const BlurUp = ({ data }) => (
  <div>
- <h1>Background Color</h1>
- <h2>The machine that goes ping</h2>
+ <h2>Background color</h2>
  <Img
  backgroundColor
  style={{ display: `inherit` }}

diff --git a/examples/using-gatsby-image/src/pages/blur-up.js b/examples/using-gatsby-image/src/pages/blur-up.js
@@ -7,8 +7,7 @@ import { rhythm, options } from "../utils/typography"
 
 const BlurUp = ({ data }) => (
  <div>
- <h1>Blur Up</h1>
- <h2>The machine that goes ping</h2>
+ <h2>Blur Up</h2>
  <Img
  style={{ display: `inherit` }}
  css={{

diff --git a/examples/using-gatsby-image/src/pages/index.js b/examples/using-gatsby-image/src/pages/index.js
@@ -18,9 +18,9 @@ class IndexComponent extends React.Component {
  css={{
  background: `white`,
  zIndex: 1,
- padding: rhythm(1),
+ padding: rhythm(4 / 3),
  "@media screen and (min-width: 640px)": {
- padding: rhythm(2),
+ padding: rhythm(5 / 3),
  },
  borderRadius: rhythm(1 / 4),
  marginTop: `30vh`,
@@ -102,9 +102,7 @@ class IndexComponent extends React.Component {
  Lazy loads images which reduces bandwidth and speeds the initial
  load time
  </li>
- <li>
- Uses WebP images if browser supports the format
- </li>
+ <li>Uses WebP images if browser supports the format</li>
  </ul>
  <h2>Documentation</h2>
  <p>

diff --git a/examples/using-gatsby-image/src/pages/prefer-webp.js b/examples/using-gatsby-image/src/pages/prefer-webp.js
@@ -5,8 +5,7 @@ import { rhythm, options } from "../utils/typography"
 
 const PreferWebp = ({ data }) => (
  <div>
- <h1>Viribus quid</h1>
- <h2>Hippason sinu</h2>
+ <h2>Prefer WebP</h2>
  <Img
  style={{ display: `inherit` }}
  css={{

diff --git a/examples/using-gatsby-image/src/pages/traced-svg.js b/examples/using-gatsby-image/src/pages/traced-svg.js
@@ -100,8 +100,7 @@ class TracedSVG extends React.Component {
  const data = this.props.data
  return (
  <div>
- <h1>Traced SVG</h1>
- <h2>The machine that goes ping</h2>
+ <h2>Traced SVG Placeholders</h2>
  <Img
  style={{ display: `inherit` }}
  css={{

diff --git a/examples/using-gatsby-image/src/utils/typography.js b/examples/using-gatsby-image/src/utils/typography.js
@@ -7,7 +7,6 @@ elkGlenTheme.blockMarginBottom = 0.75
 elkGlenTheme.headerColor = `#253c28`
 elkGlenTheme.bodyColor = `#304f35`
 elkGlenTheme.accentColor = `#4c9e59`
-elkGlenTheme.scaleRatio = 1.35
 elkGlenTheme.monospaceFontFamily = [
  `Space Mono`,
  `SFMono-Regular`,
@@ -23,6 +22,7 @@ elkGlenTheme.overrideThemeStyles = ({ rhythm, scale }, options) => {
  return {
  "h1, h2, h3, h4, h5, h6": {
  textTransform: `uppercase`,
+ letterSpacing: `-.025em`,
  },
  h1: {
  ...scale(1),