2019 in review

components/header.js

@@ -17,7 +17,9 @@ export default ({ active = null }) => (
     <nav>
       <ul>
         <li className={active === WRITINGS ? "active" : ""}>
-          <a href="/">Writings</a>
+          <Link href="/">
+            <a href="/">Writings</a>
+          </Link>
         </li>
         <li className={active === ABOUT ? "active" : ""}>
           <a href="mailto:rauchg@gmail.com">Email</a>

components/layouts/main.js

@@ -33,6 +33,9 @@ export default ({ children, headerActive }) => {
 
       <style jsx>{`
         main {
+          padding: 10px;
+        }
+        @media (max-width: 600px) {
           padding: 20px;
         }
       `}</style>

components/post/bullets-list.js

@@ -1,6 +1,6 @@
 export default ({ children }) => (
   <ul>
-    { children }
+    {children}
     <style jsx>{`
       ul {
         margin: 0 0 20px 0;
@@ -9,26 +9,26 @@ export default ({ children }) => (
       }
     `}</style>
   </ul>
-)
+);
 
 const LI = ({ children }) => (
   <li>
-    { children }
+    {children}
     <style jsx>{`
       li {
-        margin-bottom: 5px;
+        margin-bottom: 15px;
         padding-left: 20px;
-        line-height: 24px;
+        line-height: 1.5;
       }
 
       li:before {
-        content: '-';
-        color: #ABABAB;
+        content: "-";
+        color: #ababab;
         position: absolute;
         margin-left: -20px;
       }
     `}</style>
   </li>
-)
+);
 
-export { LI }
+export { LI };

components/post/code.js

@@ -3,8 +3,13 @@ export default ({ children }) => (
     {children}
     <style jsx>{`
       code {
-        color: #BE00FF;
+        color: #be00ff;
         font-family: Menlo, monospace;
+        font-size: 0.95em;
+      }
+
+      code :global(> a) {
+        color: #be00ff;
       }
     `}</style>
   </code>

components/post/figure.js

@@ -1,67 +1,107 @@
-export default ({ desc, href, children, wide  }) => (
-  <div className={ wide && 'wide' }>
-    { href
-        ? <a href={ href } target="_blank">{ children }</a>
-        : children }
-    {
-      desc && <p>
-        { desc }
-      </p>
-    }
+const Figure = ({ desc, href, children, wide, height, width }) => {
+  const content =
+    height && width ? (
+      <div
+        style={{
+          position: "relative",
+          display: "inline-block",
+          maxWidth: "100%",
+          overflow: "hidden"
+        }}
+      >
+        <div
+          style={{
+            width,
+            paddingBottom: (height / width) * 100 + "%"
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            margin: "auto",
+            height: "auto",
+            maxWidth: "100%"
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    ) : (
+      children
+    );
+  return (
+    <div className={wide && "wide"}>
+      {href ? (
+        <a href={href} target="_blank">
+          {content}
+        </a>
+      ) : (
+        content
+      )}
+      {desc && <p>{desc}</p>}
+      <style jsx>{`
+        div {
+          text-align: center;
+        }
+        p {
+          font-size: 13px;
+          color: #999;
+          text-align: center;
+          display: block;
+          margin-top: 10px;
+        }
+        .wide {
+          background: #f2f2f2;
+          position: relative;
+        }
+        .wide::before {
+          width: 10000%;
+          content: "";
+          left: -1000px;
+          height: 100%;
+          position: absolute;
+          background: #f2f2f2;
+          z-index: -1;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+const Image = ({ style, width, src }) => (
+  <div style={style}>
+    <img
+      async
+      loading="lazy"
+      decoding="async"
+      importance="low"
+      width={width}
+      src={src}
+    />
     <style jsx>{`
       div {
-        text-align: center;
-        margin-bottom: 20px;
-      }
-
-      p {
-        font-size: 13px;
-        color: #999;
-        text-align: center;
-        font-style: oblique;
-        display: block;
-      }
-
-      .wide {
-        background: #F2F2F2;
-        position: relative;
-      }
-
-      .wide::before {
-        width: 10000%;
-        content: '';
-        left: -1000px;
-        height: 100%;
-        position: absolute;
-        background: #F2F2F2;
-        z-index: -1;
+        margin: auto;
       }
-    `}</style>
-  </div>
-)
-
-const Image = ({ width, src }) => (
-  <div>
-    <img width={width} src={src} />
-    <style jsx>{`
       img {
         max-width: 100%;
-        margin: 15px 0;
       }
     `}</style>
   </div>
-)
+);
 
 const Video = ({ src }) => (
   <div>
     <video autoPlay loop src={src} />
     <style jsx>{`
       video {
         max-width: 100%;
-        margin: 15px 0;
       }
     `}</style>
   </div>
-)
+);
 
-export { Image, Video }
+export default Figure;
+export { Image, Video };

components/post/footnotes.js

@@ -4,6 +4,10 @@ export const FootNotes = ({ children }) => (
   <div>
     {children}
     <style jsx>{`
+      div {
+        font-size: 16px;
+      }
+
       div::before {
         width: 200px;
         content: " ";

components/post/heading.js

@@ -13,7 +13,7 @@ const H = ({ id, level = 2, fontSize = 20, children }) => (
 
     <style jsx>{`
       div {
-        margin: 25px 0;
+        margin: 50px 0 25px;
         font-family: Helvetica Neue, Helvetica, Arial, "Lucida Grande",
           sans-serif;
       }

components/post/numbers-list.js

@@ -1,6 +1,6 @@
 export default ({ children }) => (
   <ul>
-    { children }
+    {children}
     <style jsx>{`
       ul {
         margin: 0 0 20px 0;
@@ -9,19 +9,18 @@ export default ({ children }) => (
       }
     `}</style>
   </ul>
-)
+);
 
 const LI = ({ children }) => (
   <li>
-    { children }
+    {children}
     <style jsx>{`
       li {
         margin-bottom: 5px;
-        line-height: 24px;
+        line-height: 1.5;
       }
     `}</style>
   </li>
-)
-
-export { LI }
+);
 
+export { LI };

components/post/paragraph.js

@@ -4,8 +4,7 @@ export default ({ children }) => (
     <style jsx>{`
       p {
         margin: 20px 0;
-        line-height: 25px;
-        font-weight: 500;
+        line-height: 1.5;
       }
     `}</style>
   </p>

components/post/snippet.js

@@ -1,17 +1,39 @@
-export default ({ children }) => (
-  <pre>
-    <code>{children}</code>
+export default ({ children, caption = null }) => (
+  <div>
+    <pre>
+      <code>{children}</code>
+    </pre>
+
+    {caption != null ? <p>{caption}</p> : null}
+
     <style jsx>{`
       pre {
         line-height: 24px;
-        margin-bottom: 20px;
         background: #000;
         padding: 20px;
+        margin: 0 0 10px;
+        overflow-x: auto;
+      }
+
+      div {
+        margin-bottom: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #999;
+        text-align: center;
+        margin: 0;
+        padding: 0;
+      }
+
+      p :global(code) {
+        color: #333;
       }
 
       code {
         color: #fff;
       }
     `}</style>
-  </pre>
+  </div>
 );

components/post/tweet.js

@@ -0,0 +1,40 @@
+import { TwitterTweetEmbed } from "react-twitter-embed";
+
+export default function Tweet({ id, caption }) {
+  return (
+    <main>
+      <div>
+        <TwitterTweetEmbed tweetId={id} />
+      </div>
+      {caption != null ? <p>{caption}</p> : null}
+
+      <style jsx>{`
+        main {
+          margin: 30px 0;
+        }
+
+        p {
+          font-size: 14px;
+          color: #999;
+          text-align: center;
+          margin: 0;
+          margin-top: 10px;
+          padding: 0;
+        }
+
+        main :global(.twitter-tweet) {
+          margin: auto !important;
+        }
+
+        @media (max-width: 600px) {
+          main :global(.twitter-tweet) {
+            max-width: 300px !important;
+            width: 300px !important;
+            position: relative;
+            left: 0 !important;
+          }
+        }
+      `}</style>
+    </main>
+  );
+}

css/typography.js

@@ -3,6 +3,7 @@ import css from "styled-jsx/css";
 const style = css.global`
   body {
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    -webkit-font-smoothing: antialiased;
   }
 
   a[href] {