Move away from typekit and save money/load speed

benmccormick · Apr 25, 2018 · 8c64b8e · 8c64b8e
1 parent 92709ee
commit 8c64b8e
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 115 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,2 +0,0 @@
-<script src="https://use.typekit.net/msd6bqv.js"></script>
-<script>try{ Typekit.load(); } catch(e){ }</script>

diff --git a/src/components/CategoryIcon.js b/src/components/CategoryIcon.js
@@ -17,6 +17,7 @@ import get from 'lodash/get';
 import find from 'lodash/find';
 import { css } from 'glamor';
 import Icon from './Icon.js';
+import { sansFontStack } from '../utils/typography';
 
 let icons = {
   beaker,
@@ -32,8 +33,8 @@ let icons = {
 };
 
 const iconWrapper = css({
-  fontFamily: 'brandon-grotesque, Helvetica, sans-serif',
-  fontSize: '18px',
+  fontFamily: sansFontStack,
+  fontSize: '14px',
   color: 'rgba(87, 163, 232, 0.5)',
 });
 

diff --git a/src/components/EmailSubscribe.js b/src/components/EmailSubscribe.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { scale } from '../utils/typography';
+import typography from '../utils/typography';
 import { SubscribeBlock } from './SubscribeBlock';
 import glamorous from 'glamorous';
 
 const SubscribeHeader = glamorous.h6({
   margin: 0,
-  fontSize: scale(-0.5).fontSize,
-  lineHeight: scale(-0.5).lineHeight,
+  fontSize: typography.scale(-0.5).fontSize,
+  lineHeight: typography.scale(-0.5).lineHeight,
   letterSpacing: -0.25,
 });
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -4,10 +4,11 @@ import Link from 'gatsby-link';
 import '../css/header.css';
 import glamorous from 'glamorous';
 import { css } from 'glamor';
+import { sansFontStack } from '../utils/typography';
 
 const HeaderWrapper = glamorous.div({
   display: 'flex',
-  paddingBottom: '1rem',
+  paddingBottom: '2rem',
   flexDirection: 'row',
   justifyContent: 'space-between',
   flexWrap: 'wrap',
@@ -27,6 +28,9 @@ const Logo = glamorous.h3({
     boxShadow: 'none',
     textDecoration: 'none',
     color: 'inherit',
+    ':hover': {
+      textDecoration: 'none',
+    },
   },
 });
 
@@ -36,7 +40,8 @@ const LinksWrapper = glamorous.div({
 
 const headerLink = css({
   color: 'rgba(100,100,100, 0.7)',
-  fontFamily: 'brandon-grotesque, Helvetica, sans-serif',
+  fontSize: '16px',
+  fontFamily: sansFontStack,
   ':hover': {
     color: '#E2777A',
   },
@@ -80,4 +85,4 @@ export class Header extends React.Component {
 
 Header.propTypes = {
   blogTitle: PropTypes.string.isRequired,
-};
+};
diff --git a/src/components/HomeMenu.js b/src/components/HomeMenu.js
@@ -8,10 +8,11 @@ import parse from 'date-fns/parse';
 import PropTypes from 'prop-types';
 import LinkBox from './LinkBox';
 import LinkList from './LinkList';
+import { sansFontStack } from '../utils/typography';
 
 let bottomLink = css({
   boxShadow: 'none',
-  fontFamily: 'brandon-grotesque, Helvetica, sans-serif',
+  fontFamily: sansFontStack,
   textDecoration: 'none',
 });
 
@@ -61,31 +62,31 @@ export class HomeMenu extends React.Component {
     let firstLinkPost = weeklyLinks[0];
     return (
       <div>
-        <h1> The Latest </h1>
+        <h2> The Latest </h2>
         <Section>
           <LinkBox
             page={firstPost}
-            titleFn={page =>
+            titleFn={page => (
               <span>
-                <Bold>
-                  {get(page, 'data.title') || page.path}
-                </Bold>
-              </span>}
+                <Bold>{get(page, 'data.title') || page.path}</Bold>
+              </span>
+            )}
           />
         </Section>
         <Section>
           <LinkBox
             page={firstLinkPost}
-            titleFn={page =>
+            titleFn={page => (
               <span>
                 <Bold>
                   Weekly Links: {format(parse(page.data.date), 'MMMM Do')}{' '}
                 </Bold>
-              </span>}
+              </span>
+            )}
           />
         </Section>
         <Spacer />
-        <h1> More From The Blog </h1>
+        <h2> More From The Blog </h2>
         <Section>
           <div>
             <LayoutContainer>

diff --git a/src/components/LinkBox.js b/src/components/LinkBox.js
@@ -2,23 +2,24 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'gatsby-link';
 import get from 'lodash/get';
-import { rhythm } from '../utils/typography';
+import typography from '../utils/typography';
 import format from 'date-fns/format';
 import parse from 'date-fns/parse';
 import glamorous from 'glamorous';
 import star from '../svg/star.svgi';
 import flame from '../svg/flame.svgi';
 import Icon from './Icon';
 import { css } from 'glamor';
+import { sansFontStack, serifFontStack } from '../utils/typography';
 
 export const TrendingIcon = () => <Icon color="#E55934" icon={flame} />;
 export const FavoriteIcon = () => <Icon color="#D7AF70" icon={star} />;
 
 const boxClass = css({
-  fontFamily: 'brandon-grotesque, Helvetica, sans-serif',
+  fontFamily: sansFontStack,
   fontSize: '120%',
   // 1px margin on the size in order to fix border on Safari
-  margin: `0 1px ${rhythm(1 / 2)} 1px`,
+  margin: `0 1px ${typography.rhythm(1 / 2)} 1px`,
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -43,9 +44,9 @@ const PageWrapper = glamorous.div({
 });
 
 const PageDescription = glamorous.p({
-  fontFamily: 'ff-tisa-web-pro, serif',
+  fontFamily: serifFontStack,
   // fontStyle: 'italic',
-  fontSize: '16px',
+  fontSize: '18px',
   margin: 0,
 });
 
@@ -70,19 +71,15 @@ class LinkBox extends React.Component {
       <Link className={boxClass} to={page.path}>
         <PageWrapper>
           <div>
-            <TitleRow>
-              {_title}
-            </TitleRow>
-            <PageDescription>
-              {page.data.description}
-            </PageDescription>
+            <TitleRow>{_title}</TitleRow>
+            <PageDescription>{page.data.description}</PageDescription>
           </div>
         </PageWrapper>
-        {showDate
-          ? <DateContainer className="no-mobile">
-              {format(parse(page.data.date), 'MMM Do YYYY')}
-            </DateContainer>
-          : null}
+        {showDate ? (
+          <DateContainer className="no-mobile">
+            {format(parse(page.data.date), 'MMM Do YYYY')}
+          </DateContainer>
+        ) : null}
       </Link>
     );
   }

diff --git a/src/components/LinkList.js b/src/components/LinkList.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import LinkBox from './LinkBox';
 import PageLink from './PageLink';
 
-const ListTitle = glamorous.h2({
+const ListTitle = glamorous.h3({
   color: 'inherit',
 });
 
@@ -33,30 +33,26 @@ class LinkList extends React.Component {
     } = this.props;
     let pageLinks = pages.map(
       page =>
-        useBox
-          ? <LinkBox page={page} showDate={showDate} titleFn={titleFn} />
-          : <PageLink
-              page={page}
-              showCategory={showCategory}
-              key={page.path}
-              showDate={showDate}
-              showDescription={showDescriptions}
-              showPopular={showPopular}
-              showTrending={showTrending}
-              titleFn={titleFn}
-            />
+        useBox ? (
+          <LinkBox page={page} showDate={showDate} titleFn={titleFn} />
+        ) : (
+          <PageLink
+            page={page}
+            showCategory={showCategory}
+            key={page.path}
+            showDate={showDate}
+            showDescription={showDescriptions}
+            showPopular={showPopular}
+            showTrending={showTrending}
+            titleFn={titleFn}
+          />
+        )
     );
     return (
       <div className={className}>
-        {title
-          ? <ListTitle>
-              {title}
-            </ListTitle>
-          : null}
+        {title ? <ListTitle>{title}</ListTitle> : null}
         {description || null}
-        <List>
-          {pageLinks}
-        </List>
+        <List>{pageLinks}</List>
       </div>
     );
   }

diff --git a/src/components/PageLink.js b/src/components/PageLink.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'gatsby-link';
-import { rhythm } from '../utils/typography';
+import typography from '../utils/typography';
 import CategoryIcon from './CategoryIcon';
 import format from 'date-fns/format';
 import parse from 'date-fns/parse';
@@ -10,12 +10,13 @@ import star from '../svg/star.svgi';
 import flame from '../svg/flame.svgi';
 import Icon from './Icon';
 import { css } from 'glamor';
+import { sansFontStack, serifFontStack } from '../utils/typography';
 
 export const TrendingIcon = () => <Icon color="#E55934" icon={flame} />;
 export const FavoriteIcon = () => <Icon color="#D7AF70" icon={star} />;
 
 const ListItem = glamorous.li({
-  marginBottom: rhythm(1 / 2),
+  marginBottom: typography.rhythm(1 / 2),
   listStyle: 'none',
   display: 'flex',
   justifyContent: 'space-between',
@@ -33,21 +34,21 @@ const PageWrapper = glamorous.div({
 
 const linkClass = css({
   boxShadow: 'none',
-  fontSize: '20px',
-  fontFamily: 'brandon-grotesque, Helvetica, sans-serif',
+  fontSize: '16px',
+  fontFamily: sansFontStack,
   textDecoration: 'none',
 });
 
 const PageDescription = glamorous.p({
-  fontFamily: 'ff-tisa-web-pro, serif',
+  fontFamily: serifFontStack,
   // fontStyle: 'italic',
   fontSize: '16px',
   margin: 0,
   color: 'rgba(100,100,100, 0.7)',
 });
 
 const DateContainer = glamorous.span({
-  fontFamily: 'ff-tisa-web-pro, serif',
+  fontFamily: serifFontStack,
   whiteSpace: 'nowrap',
   fontSize: '18px',
   color: 'rgba(100,100,100, 0.7)',
@@ -84,21 +85,19 @@ class PageLink extends React.Component {
               {showTrending && page.data.isTrending ? <TrendingIcon /> : null}
               {showPopular && page.data.isPopular ? <FavoriteIcon /> : null}
             </TitleRow>
-            {showDescription
-              ? <PageDescription>
-                  {page.data.description}
-                </PageDescription>
-              : null}
-            {showCategory
-              ? <CategoryIcon category={page.data.category} />
-              : null}
+            {showDescription ? (
+              <PageDescription>{page.data.description}</PageDescription>
+            ) : null}
+            {showCategory ? (
+              <CategoryIcon category={page.data.category} />
+            ) : null}
           </div>
         </PageWrapper>
-        {showDate
-          ? <DateContainer className="no-mobile">
-              {format(parse(page.data.date), 'MMM Do YYYY')}
-            </DateContainer>
-          : null}
+        {showDate ? (
+          <DateContainer className="no-mobile">
+            {format(parse(page.data.date), 'MMM Do YYYY')}
+          </DateContainer>
+        ) : null}
       </ListItem>
     );
   }
@@ -120,4 +119,4 @@ PageLink.defaultProps = {
   showDescription: true,
 };
 
-export default PageLink;
+export default PageLink;
diff --git a/src/components/Subscribe.js b/src/components/Subscribe.js
@@ -3,12 +3,14 @@ import React from 'react';
 import Link from 'gatsby-link';
 import find from 'lodash/find';
 import get from 'lodash/get';
-import { rhythm, scale } from '../utils/typography';
+import typography from '../utils/typography';
 import categoryHash from '../pages/categories.json';
 import InlineSVG from 'svg-inline-react';
 import rss from '../pages/rss.svgi';
 import { SubscribeBlock } from './SubscribeBlock';
 
+let { rhythm, scale } = typography;
+
 class Subscribe extends React.Component {
   render() {
     const { post } = this.props;
@@ -168,4 +170,4 @@ Subscribe.propTypes = {
   post: PropTypes.object.isRequired,
 };
 
-export default Subscribe;
+export default Subscribe;
diff --git a/src/components/WelcomeBox.js b/src/components/WelcomeBox.js
@@ -3,7 +3,6 @@ import Link from 'gatsby-link';
 import glamorous from 'glamorous';
 
 let Wrapper = glamorous.div({
-  marginTop: '2rem',
   display: 'grid',
   gridTemplateColumns: '80% 20%',
   gridColumnGap: '1rem',

diff --git a/src/css/mailchimp.css b/src/css/mailchimp.css
@@ -22,7 +22,7 @@
 }
 
 .subscribe-button-large {
-  font-family: brandon-grotesque, Helvetica, sans-serif;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: white;
   background: #57A3E8;
   border-radius: 4px;