changed my cv copy. New cvTypography component. More compact print st…

…yling.

components/header.js

@@ -62,6 +62,7 @@ export function Header({ children }) {
         }
 
         body {
+          font-family: 'Overpass Mono', sans-serif;
           padding: 0;
           margin: 0;
         }

components/lead.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+export const Lead = ({ children }) => (
+  <>
+    <p className="lead">{children}</p>
+
+    {/*language=SCSS*/}
+    <style jsx>
+      {`
+        .lead {
+          font-size: 18px;
+          margin-top: 0;
+          margin-bottom: 0.6em;
+        }
+
+        @media screen and (min-width: 500px) {
+          .lead {
+            font-size: 22px;
+          }
+        }
+
+        @media print {
+          .lead {
+            font-size: 16px;
+          }
+        }
+      `}
+    </style>
+  </>
+)

components/project.js

@@ -2,49 +2,64 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Tags } from './tags'
 
-export const Project = ({ from, to, role, title, children, tags }) => (
-  <article className="project">
-    <h3>
-      {title}
-      <span className="role">
-        {role ? `${role}, ` : ''}
-        {from} - {to}
-      </span>
-    </h3>
-    {children}
-    <Tags tags={tags} />
-    {/*language=SCSS*/}
-    <style jsx>
-      {`
-        .project {
-          display: block;
-        }
-
-        .role {
-          font-family: 'Overpass Mono';
-          display: block;
-          font-size: 16px;
-          line-height: 1.2em;
-          margin-top: 0.3em;
-          font-weight: 400;
-        }
-
-        h3 {
-          font-size: 16px;
-        }
-
-        @media screen and (min-width: 500px) {
-          h3 {
-            font-size: 20px;
+export const Project = ({ from, to, role, title, children, tags, hidden }) => {
+  if (hidden) return null
+
+  return (
+    <article className="project">
+      <h3>
+        {title}
+        <span className="role">
+          {role ? `${role}, ` : ''}
+          {from} - {to}
+        </span>
+      </h3>
+      {children}
+      <Tags tags={tags} />
+      {/*language=SCSS*/}
+      <style jsx>
+        {`
+          .project {
+            display: block;
           }
+
           .role {
-            font-size: 18px;
+            font-family: 'Overpass Mono';
+            display: block;
+            font-size: 16px;
+            line-height: 1.2em;
+            margin-top: 0.3em;
+            font-weight: 400;
           }
-        }
-      `}
-    </style>
-  </article>
-)
+
+          @media screen and (min-width: 500px) {
+            .role {
+              font-size: 18px;
+            }
+          }
+
+          @media print {
+            .project {
+              page-break-inside: avoid;
+            }
+
+            .role {
+              font-size: 12px;
+            }
+
+            html,
+            body {
+              height: 100vh; /* Use 100% here to support printing more than a single page*/
+              margin: 0 !important;
+              padding: 0 !important;
+              overflow: hidden;
+            }
+          }
+        `}
+      </style>
+    </article>
+  )
+}
 
 Project.propTypes = {
   from: PropTypes.string,

components/tags.js

@@ -1,64 +1,67 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-export const Tags = ({ tags }) => (
-  <>
-    <ul className="tags">
-      {tags.map((tag) => (
-        <li key={tag}>{tag}</li>
-      ))}
-    </ul>
-    {/*language=SCSS*/}
-    <style jsx>
-      {`
-        .tags {
-          list-style-type: none;
-          padding: 0;
-          display: flex;
-          flex-wrap: wrap;
-        }
-        .tags li {
-          background: #f5f5f5;
-          padding: 5px 10px;
-          margin-right: 10px;
-          margin-bottom: 5px;
-          font-weight: 600;
-          font-size: 12px;
-          text-transform: uppercase;
-        }
-
-        @media screen and (min-width: 500px) {
-          font-size: 14px;
-        }
-
-        @media print {
-          .tags li {
-            background: none;
+export const Tags = ({ tags }) => {
+  if (tags.length === 0) return null
+  return (
+    <>
+      <ul className="tags">
+        {tags.map((tag) => (
+          <li key={tag}>{tag}</li>
+        ))}
+      </ul>
+      {/*language=SCSS*/}
+      <style jsx>
+        {`
+          .tags {
+            list-style-type: none;
             padding: 0;
-            font-weight: normal;
-            padding: 0;
-            margin-right: 0;
-            margin-bottom: 0;
-            line-height: 1.6em;
+            display: flex;
+            flex-wrap: wrap;
+          }
+          .tags li {
+            background: #f5f5f5;
+            padding: 5px 10px;
+            margin-right: 10px;
+            margin-bottom: 5px;
             font-weight: 600;
             font-size: 12px;
             text-transform: uppercase;
+          }
 
-            &:after {
-              content: '|';
-              margin: 0 5px;
-              display: inline-block;
-            }
+          @media screen and (min-width: 500px) {
+            font-size: 14px;
+          }
 
-            &:last-child:after {
-              display: none;
+          @media print {
+            .tags li {
+              background: none;
+              padding: 0;
+              font-weight: normal;
+              padding: 0;
+              margin-right: 0;
+              margin-bottom: 0;
+              line-height: 1.6em;
+              font-weight: 600;
+              font-size: 9px;
+              text-transform: uppercase;
+
+              &:after {
+                content: '|';
+                margin: 0 5px;
+                display: inline-block;
+              }
+
+              &:last-child:after {
+                display: none;
+              }
             }
           }
-        }
-      `}
-    </style>
-  </>
-)
+        `}
+      </style>
+    </>
+  )
+}
 
 Tags.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.string),