feat: minor fixes

components/Footer.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa'
+
+import styles from './styles.module.css'
+
+export const Footer: React.FC<{}> = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.copyright}>Copyright 2021 Travis Fischer</div>
+      <div className={styles.social}>
+        <a
+          className={styles.twitter}
+          href='https://twitter.com/transitive_bs'
+          title='Twitter @transitive_bs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <FaTwitter />
+        </a>
+
+        <a
+          className={styles.github}
+          href='https://github.com/transitive-bullshit'
+          title='GitHub @transitive-bullshit'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <FaGithub />
+        </a>
+
+        <a
+          className={styles.linkedin}
+          href='https://www.linkedin.com/in/fisch2'
+          title='LinkedIn Travis Fischer'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <FaLinkedin />
+        </a>
+      </div>
+    </footer>
+  )
+}

components/NotionPage.tsx

@@ -22,6 +22,7 @@ import { CustomHtml } from './CustomHtml'
 import { Loading } from './Loading'
 import { Page404 } from './Page404'
 import { PageHead } from './PageHead'
+import { Footer } from './Footer'
 
 import styles from './styles.module.css'
 
@@ -138,6 +139,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}
+        footer={<Footer />}
       />
 
       <CustomHtml site={site} />

components/styles.module.css

@@ -42,104 +42,47 @@
   width: 640px;
 }
 
-.notion {
-  padding-bottom: calc(max(10vh, 120px));
-}
-
-.demoFooter {
-  position: fixed;
-  z-index: 800;
-  bottom: 1em;
-  left: 10vw;
-  right: 10vw;
-  border-radius: 4px;
-  background: #eb625a;
-  padding: 16px 24px;
+.footer {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 8px;
 
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-
-  color: #fff;
 }
 
-.demoLhs a,
-.demoLhs a:visited,
-.demoLhs a:hover,
-.demoLhs a:active {
-  text-decoration: none;
-  color: #fff;
+.copyright {
+  font-size: 80%;
+  padding: 0.5em;
 }
 
-.demoLhs {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.social a {
+  font-size: 2em;
+  display: inline-block;
+  padding: 0.5em;
+  margin-right: 1vw;
+  transition: color 250ms ease-out;
 }
 
-.demoTitle {
-  font-size: 1.2em;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  padding-right: 0.5em;
-  margin-right: 0.5em;
-  border-right: 1px solid #fff;
-  white-space: nowrap;
+.social a:last-of-type {
+  margin-right: 0;
 }
 
-.demoTitle img {
-  height: 1.5em;
-  margin-right: 0.5em;
+.social a:hover {
+  transition: color 50ms ease-out;
 }
 
-.demoDesc {
-  font-size: 0.9em;
+.twitter:hover {
+  color: #2795e9;
 }
 
-.demoCta {
-  display: block;
-  margin-left: 0.5em;
-  font-size: 0.9em;
-  text-decoration: none;
-  color: #fff;
-  border-radius: 2px;
-  padding: 8px 12px;
-
-  background: transparent;
-  border: 1px solid #fff;
-  transition: all 300ms ease;
-  font-weight: 500;
-  white-space: nowrap;
-  transform: scale(1);
+.github:hover {
+  color: #c9510c;
 }
 
-.demoCta:hover {
-  background: #fff;
-  color: #eb625a;
-
-  transition: all 200ms ease;
-  transform: scale(1.05);
-}
-
-.demoCta:active {
-  transition: all 100ms ease;
-  transform: scale(1.03);
-}
-
-@media only screen and (max-width: 740px) {
-  .demoFooter {
-    left: 1em;
-    right: 1em;
-  }
-
-  .demoTitle {
-    border: 0 none;
-  }
-
-  .demoDesc {
-    display: none;
-  }
+.linkedin:hover {
+  color: #0077b5;
 }