move more junk out of index.css and into components

components/Content/Content.module.css

@@ -3,6 +3,28 @@
   line-height: 1.7;
 }
 
+.content a {
+  color: var(--link);
+  background-image: linear-gradient(var(--link-underline), var(--link-underline));
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% var(--link-underline-size);
+  padding-bottom: var(--link-underline-size);
+  /* background-size is for hover animation, color & border are for theme fading: */
+  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
+}
+
+.content a:hover {
+  background-size: 100% var(--link-underline-size);
+}
+
+/* set an anchor's class to `no-underline` to disable all of the above */
+.content :global(a.no-underline) {
+  background: none;
+  padding-bottom: 0;
+  transition: none;
+}
+
 @media screen and (max-width: 768px) {
   .content {
     font-size: 0.925em;

components/Content/Content.tsx

@@ -1,11 +1,13 @@
+import classNames from "classnames";
 import type { ReactNode } from "react";
 
 import styles from "./Content.module.css";
 
 type Props = {
   children: ReactNode;
+  className?: string;
 };
 
-const Content = (props: Props) => <div className={styles.content} {...props} />;
+const Content = ({ className, ...rest }: Props) => <div className={classNames(styles.content, className)} {...rest} />;
 
 export default Content;

components/Footer/Footer.module.css

@@ -8,9 +8,7 @@
 }
 
 .footer a {
-  color: var(--medium-dark);
+  color: inherit;
-  background: none;
-  padding-bottom: 0;
 }
 
 .row {
@@ -24,7 +22,7 @@
 }
 
 .view_source {
-  padding-bottom: 2px !important;
+  padding-bottom: 2px;
   border-bottom: 1px solid;
   border-color: var(--light);
 }

components/Heading/Heading.module.css

@@ -22,17 +22,15 @@
 .anchor {
   margin: 0 0.25em;
   padding: 0 0.25em;
-  color: var(--medium-light);
+  color: var(--medium-light) !important;
   font-weight: 300;
-  background: none;
-  transition: none;
   opacity: 0; /* overridden on hover */
 }
 .anchor::before {
   content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
 }
 .anchor:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }
 /* make anchor `#` link show up on hover over the corresponding heading */
 .heading:hover .anchor {

components/Heading/Heading.tsx

@@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
       {id && (Component === "h2" || Component === "h3") && (
-        <a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
+        <a className={classNames("no-underline", styles.anchor)} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
       )}
     </Component>
   );

components/Menu/Menu.module.css

@@ -14,13 +14,10 @@
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
 }
 
 .menu li .link:hover {
   color: var(--link);
-  transition: none;
 }
 
 .menu li .icon {

components/Name/Name.module.css

@@ -2,13 +2,10 @@
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
 }
 
 .link:hover {
   color: var(--link);
-  transition: none;
 }
 
 .selfie {

components/NoteMeta/NoteMeta.module.css

@@ -8,9 +8,7 @@
 }
 
 .meta a {
-  color: var(--medium);
+  color: inherit;
-  background: none;
-  padding-bottom: 0;
 }
 
 .meta > div {

components/NoteTitle/NoteTitle.module.css

@@ -6,9 +6,7 @@
 }
 
 .title a {
-  background: none;
+  color: inherit;
-  padding-bottom: 0;
-  color: var(--text);
 }
 
 .title code {

components/NotesList/NotesList.module.css

@@ -1,4 +1,6 @@
 .section {
+  font-size: 1.1em;
+  line-height: 1.1;
   margin: 2.4em 0;
 }
 

components/OctocatLink/OctocatLink.module.css

@@ -1,10 +1,8 @@
 .link {
   margin: 0 0.4em;
-  color: var(--text);
+  color: var(--text) !important;
-  background: none !important;
-  padding-bottom: 0;
 }
 
 .link:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }

components/OctocatLink/OctocatLink.tsx

@@ -9,7 +9,12 @@ type Props = {
 };
 
 const OctocatLink = ({ repo, className }: Props) => (
-  <a className={styles.link} href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer">
+  <a
+    className={classNames("no-underline", styles.link)}
+    href={`https://github.com/${repo}`}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
     <OctocatOcticon fill="currentColor" className={classNames("icon", className)} />
   </a>
 );

components/PageTitle/PageTitle.module.css

@@ -6,9 +6,7 @@
 }
 
 .title a {
-  background: none;
+  color: inherit;
-  padding-bottom: 0;
-  color: var(--text);
 }
 
 @media screen and (max-width: 768px) {

components/RepositoryCard/RepositoryCard.module.css

@@ -34,13 +34,11 @@
 }
 
 .meta_item a {
-  background: none;
+  color: inherit !important;
-  padding-bottom: 0;
-  color: var(--medium);
 }
 
 .meta_item a:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }
 
 .octicon,

components/RepositoryCard/RepositoryCard.tsx

@@ -28,6 +28,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
       {stars > 0 && (
         <div className={styles.meta_item}>
           <a
+            className="no-underline"
             href={`${url}/stargazers`}
             title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
             target="_blank"
@@ -42,6 +43,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
       {forks > 0 && (
         <div className={styles.meta_item}>
           <a
+            className="no-underline"
             href={`${url}/network/members`}
             title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
             target="_blank"

pages/index.tsx

@@ -1,8 +1,11 @@
 import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
+import Content from "../components/Content/Content";
 import { WaveIcon, LockIcon } from "../components/Icons";
 
 const Index = () => (
   <>
+    <Content>
+      <div className="home">
         <h1>
           Hi there! I'm Jake.{" "}
           <span className="wave">
@@ -258,7 +261,14 @@ const Index = () => (
             email
           </ColorfulLink>{" "}
           <sup className="monospace pgp_key">
-        <ColorfulLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external>
+            <ColorfulLink
+              className="no-underline"
+              href="/pubkey.asc"
+              title="My Public Key"
+              lightColor="#757575"
+              darkColor="#959595"
+              external
+            >
               <LockIcon /> 2B0C 9CF2 51E6 9A39
             </ColorfulLink>
           </sup>
@@ -283,30 +293,36 @@ const Index = () => (
           </ColorfulLink>{" "}
           as well!
         </p>
+      </div>
+    </Content>
 
     <style jsx>{`
-      h1 {
+      .home {
+        font-size: 1.1em;
+        line-height: 1;
+      }
+      .home h1 {
         margin: 0 0 0.5em -0.03em;
         font-size: 1.8em;
         font-weight: 500;
         letter-spacing: -0.01em;
       }
-      h2 {
+      .home h2 {
         margin: 0.5em 0 0.5em -0.03em;
         font-size: 1.35em;
         font-weight: 400;
         letter-spacing: -0.016em;
         line-height: 1.4;
       }
-      p {
+      .home p {
         margin: 0.85em 0;
         letter-spacing: -0.004em;
         line-height: 1.7;
       }
-      p:last-of-type {
+      .home p:last-of-type {
         margin-bottom: 0;
       }
-      .wave {
+      .home .wave {
         display: inline-block;
         margin-left: 0.1em;
         animation: wave 5s infinite;
@@ -314,19 +330,18 @@ const Index = () => (
         transform-origin: 65% 80%;
         will-change: transform;
       }
-      .pgp_key {
+      .home .pgp_key {
         margin: 0 0.15em;
         font-size: 0.65em;
         word-spacing: -0.3em;
       }
-      .pgp_key :global(a) {
+      .home .pgp_key :global(a) {
         background: none !important;
-        padding-bottom: 0;
       }
-      .quiet {
+      .home .quiet {
         color: var(--medium-light);
       }
-      .birthday :global(a:hover) {
+      .home .birthday :global(a:hover) {
         /* magic wand cursor easter egg */
         cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-18, 5)'>🪄</text></svg>")
             16 0,
@@ -334,14 +349,14 @@ const Index = () => (
       }
 
       @media screen and (max-width: 768px) {
-        h1 {
+        .home h1 {
           font-size: 1.5em;
         }
-        h2 {
+        .home h2 {
           font-size: 1.2em;
         }
-        p {
+        .home p {
-          font-size: 0.95em;
+          font-size: 0.925em;
         }
       }
 

pages/notes/index.tsx

@@ -1,5 +1,6 @@
 import { NextSeo } from "next-seo";
 import { format } from "date-fns";
+import Content from "../../components/Content/Content";
 import NotesList from "../../components/NotesList/NotesList";
 import { getAllNotes } from "../../lib/parse-notes";
 import type { GetStaticProps } from "next";
@@ -14,7 +15,9 @@ const Notes = ({ notesByYear }) => (
       }}
     />
 
+    <Content>
       <NotesList notesByYear={notesByYear} />
+    </Content>
   </>
 );
 

pages/projects.tsx

@@ -5,6 +5,7 @@ import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
 import { ProjectsIcon } from "../components/Icons";
 import type { GetStaticProps } from "next";
 import { RepoType } from "../types";
+import Content from "../components/Content/Content";
 
 type Props = {
   repos: RepoType[];
@@ -23,6 +24,7 @@ const Projects = ({ repos }: Props) => (
       <ProjectsIcon /> Projects
     </PageTitle>
 
+    <Content>
       <div className="wrapper">
         {repos.map((repo: RepoType) => (
           <div key={repo.name} className="card">
@@ -36,6 +38,7 @@ const Projects = ({ repos }: Props) => (
           View more on GitHub...
         </a>
       </p>
+    </Content>
 
     <style jsx>{`
       .wrapper {
@@ -44,6 +47,8 @@ const Projects = ({ repos }: Props) => (
         justify-content: space-between;
         align-items: flex-start;
         width: 100%;
+        font-size: 1.1em;
+        line-height: 1.1;
       }
 
       .card {

styles/index.css

@@ -9,24 +9,7 @@ body {
 }
 
 a {
-  color: var(--link);
   text-decoration: none;
-  background-position: 0% 100%;
-  background-repeat: no-repeat;
-  background-size: 0% var(--link-underline-size);
-  padding-bottom: var(--link-underline-size);
-  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
-  background-image: linear-gradient(var(--link-underline), var(--link-underline));
-}
-
-a:hover {
-  background-size: 100% var(--link-underline-size);
-}
-
-/* set an anchor's class to `no-underline` to disable all of the above */
-a.no-underline {
-  background: none !important;
-  padding-bottom: 0;
 }
 
 /* make SVG icons relative in size/position to surrounding text */