math and more icons

pages/about.mdx

@@ -1,8 +1,23 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+
 import Layout from "./LayoutPage";
 export default Layout;
 
-Developer currently living in New York City
+Developer living in New York City
 
-Email: [bradlee@speice.io](mailto:bradlee@speice.io)
-
-LinkedIn: [bradleespeice](https://www.linkedin.com/in/bradleespeice/)
+> <FontAwesomeIcon
+>   icon={faEnvelope}
+>   style={{ color: "var(--color-secondary)" }}
+> /> [bradlee@speice.io](mailto:bradlee@speice.io)
+>
+> <FontAwesomeIcon
+>   icon={faGithub}
+>   style={{ color: "var(--color-secondary)" }}
+> /> [bspeice](https://github.com/bspeice)
+>
+> <FontAwesomeIcon
+>   icon={faLinkedin}
+>   style={{ color: "var(--color-secondary)" }}
+> /> [bradleespeice](https://www.linkedin.com/in/bradleespeice/)

pages/index.tsx

@@ -1,12 +1,18 @@
 import Layout from "./LayoutPage";
 
+export const Page = () => (
+  <>
+    <p>Is this thing on?</p>
+    <p>
+      <a href="/2019/02/the-whole-world">Code</a>
+    </p>
+  </>
+);
+
 export default function () {
   return (
     <Layout>
-      <p>Is this thing on?</p>
-      <p>
-        <a href="/2019/02/the-whole-world">Code</a>
-      </p>
+      <Page />
     </Layout>
   );
 }

pages/style.css

@@ -2,8 +2,8 @@
 
 @import "@fontsource/lato";
 @import "@fontsource/jetbrains-mono";
-
 @import "highlight.js/styles/atom-one-dark.css";
+@import "katex/dist/katex.min.css";
 
 :root {
   --color-primary: #000;
@@ -109,7 +109,7 @@ a > code:hover {
 }
 
 .gridOffset > pre > code {
-  grid-column: main;
+  grid-column: main / full;
 }
 
 .navbar {
@@ -126,10 +126,5 @@ a > code:hover {
 }
 
 .icon {
-  vertical-align: middle;
   margin-right: 0.3em;
 }
-
-.icon-post {
-  vertical-align: text-top;
-}