Remove typography, apply normalize styles, use system fonts

Author: BrianMitchL

gatsby-config.js

@@ -12,12 +12,6 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
-    {
-      resolve: 'gatsby-plugin-typography',
-      options: {
-        pathToConfigModule: 'src/utils/typography',
-      },
-    },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {

package-lock.json

@@ -13,7 +13,6 @@
     "gatsby-plugin-react-helmet": "^3.0.1",
     "gatsby-plugin-sass": "^2.0.3",
     "gatsby-plugin-sharp": "^2.0.11",
-    "gatsby-plugin-typography": "^2.2.1",
     "gatsby-source-filesystem": "^2.0.7",
     "gatsby-transformer-sharp": "^2.1.7",
     "node-sass": "^4.9.4",
@@ -22,9 +21,6 @@
     "react-dom": "^16.6.0",
     "react-headroom": "^2.2.4",
     "react-helmet": "^5.2.0",
-    "react-typography": "^0.16.13",
-    "typography": "^0.16.17",
-    "typography-plugin-code": "^0.16.11",
     "whatwg-fetch": "^3.0.0"
   },
   "keywords": [

package.json

@@ -4,7 +4,6 @@ import format from 'date-fns/format'
 import 'whatwg-fetch'
 import { graphql, StaticQuery } from 'gatsby'
 
-
 const MeetupDescription = ({ name, time, venue }) => (
   <div className="next-event">
     <div className="next-event-tagline">
@@ -103,7 +102,8 @@ const WrappedMeetup = () => (
         }
       }
     `}
-    render={data => <Meetup apiRoot={data.site.siteMetadata.apiRoot}/>} />
+    render={data => <Meetup apiRoot={data.site.siteMetadata.apiRoot} />}
+  />
 )
 
 export default WrappedMeetup

src/components/Meetup.js

@@ -1,12 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TypographyStyle, GoogleFont } from 'react-typography'
 import Helmet from 'react-helmet'
 import { graphql, StaticQuery } from 'gatsby'
 import Header from './header'
 import Footer from './footer'
 import './main.scss'
-import typography from '../utils/typography'
 
 const Layout = ({ children }) => (
   <StaticQuery
@@ -31,8 +29,6 @@ const Layout = ({ children }) => (
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <TypographyStyle typography={typography} />
-          <GoogleFont typography={typography} />
         </Helmet>
         <Header />
         <min role="main" className="content-body">

src/components/layout.js

@@ -2,19 +2,40 @@
 
 html,
 body {
+  font: 112.5%/1.65em -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  word-wrap: break-word;
+  font-weight: normal;
+  color: hsla(0, 0%, 0%, 0.8);
   margin: 0;
   padding: 0;
   background: #f9f9f9;
 }
 
+* {
+  box-sizing: inherit;
+}
+
+main {
+  display: block;
+}
+
+p {
+  padding: 0;
+  margin: 0 0 1.65rem;
+}
+
 img {
   display: block;
   margin: 0;
+  padding: 0;
+  max-width: 100%;
 }
 
 a {
   color: #000;
   font-weight: bold;
+  -webkit-text-decoration-skip: objects;
 }
 
 .headroom {
@@ -145,7 +166,7 @@ a {
 }
 
 .event-name {
-  font-family: 'Didot', serif;
+  font-weight: 500;
   font-size: 1.4rem;
   padding: 15px;
   background: #fff;
@@ -318,7 +339,7 @@ a {
 .sponsored-by-title {
   font-style: oblique;
   margin-bottom: 15px;
-  font-family: 'Didot', serif;
+  font-weight: 500;
   font-size: 1.4rem;
 }
 
@@ -403,11 +424,11 @@ a {
   }
 
   @include break-at(md) {
-     .secondary-content-header {
-       top: -10px;
-       right: -35px;
-     }
-   }
+    .secondary-content-header {
+      top: -10px;
+      right: -35px;
+    }
+  }
 
   @include break-at(sm) {
     .secondary-content-blurb {
@@ -447,7 +468,7 @@ address {
   margin-top: 15px;
   font-weight: bold;
   font-size: 0.9rem;
-  font-family: 'Didot', serif;
+  margin-bottom: 1.65rem;
 }
 
 .footer {
@@ -519,7 +540,7 @@ address {
   h1,
   h2,
   h3 {
-    font-family: 'Didot', serif;
+    font-weight: 500;
   }
 
   p {
@@ -543,7 +564,6 @@ address {
 
 .tier-title {
   font-size: 1.45rem;
-  font-family: 'Didot', serif;
   font-style: oblique;
   opacity: 0.8;
   text-align: center;

src/components/main.scss

@@ -89,7 +89,10 @@ const IndexPage = () => (
           We are always open to new speakers, please see our questionnaire for
           more details.
         </div>
-        <Link className="outline-button small-button" to={withPrefix('/speak/')}>
+        <Link
+          className="outline-button small-button"
+          to={withPrefix('/speak/')}
+        >
           Learn More
         </Link>
       </div>

src/pages/index.js

@@ -12,7 +12,7 @@ import logoDaugherty from '../images/sponsors/logo-daugherty.png'
 const OurSponsors = () => (
   <Layout>
     <div className="interior-page sponsors-page tilt-left">
-      <h1 className="secondary-content-header">Current sponsors</h1>
+      <h1 className="secondary-content-header">Current Sponsors</h1>
 
       <div className="sponsor-tier platinum">
         <span className="tier-title">Host</span>

src/pages/our-sponsors.js

@@ -12,7 +12,8 @@ const SponsorshipOpportunities = () => (
         <li>Website: Link & Logo on front page (and sponsor page)</li>
         <li>
           Meetups: Stand alone slide with thanks and description of services by
-          host at the start of the meetup & website link on Meetup.com
+          host at the start of the meetup & website link on{' '}
+          <a href="https://www.meetup.com">Meetup.com</a>
         </li>
         <li>
           YouTube: 15 Second Video Intro with stand alone slide (including link