move more junk out of index.css and into components

2026-01-11 03:22:57 -05:00 · 2022-01-22 18:52:29 -05:00
parent f62c057f5d
commit 0343aa9be4
19 changed files with 371 additions and 352 deletions
--- a/components/Content/Content.module.css
+++ b/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;
--- a/components/Content/Content.tsx
+++ b/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;
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -8,9 +8,7 @@
 }

 .footer a {
-  color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
+  color: inherit;
 }

 .row {
@@ -24,7 +22,7 @@
 }

 .view_source {
-  padding-bottom: 2px !important;
+  padding-bottom: 2px;
  border-bottom: 1px solid;
  border-color: var(--light);
 }
--- a/components/Heading/Heading.module.css
+++ b/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 {
--- a/components/Heading/Heading.tsx
+++ b/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>
  );
--- a/components/Menu/Menu.module.css
+++ b/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 {
--- a/components/Name/Name.module.css
+++ b/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 {
--- a/components/NoteMeta/NoteMeta.module.css
+++ b/components/NoteMeta/NoteMeta.module.css
@@ -8,9 +8,7 @@
 }

 .meta a {
-  color: var(--medium);
-  background: none;
-  padding-bottom: 0;
+  color: inherit;
 }

 .meta > div {
--- a/components/NoteTitle/NoteTitle.module.css
+++ b/components/NoteTitle/NoteTitle.module.css
@@ -6,9 +6,7 @@
 }

 .title a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--text);
+  color: inherit;
 }

 .title code {
--- a/components/NotesList/NotesList.module.css
+++ b/components/NotesList/NotesList.module.css
@@ -1,4 +1,6 @@
 .section {
+  font-size: 1.1em;
+  line-height: 1.1;
  margin: 2.4em 0;
 }

--- a/components/OctocatLink/OctocatLink.module.css
+++ b/components/OctocatLink/OctocatLink.module.css
@@ -1,10 +1,8 @@
 .link {
  margin: 0 0.4em;
-  color: var(--text);
-  background: none !important;
-  padding-bottom: 0;
+  color: var(--text) !important;
 }

 .link:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }
--- a/components/OctocatLink/OctocatLink.tsx
+++ b/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>
 );
--- a/components/PageTitle/PageTitle.module.css
+++ b/components/PageTitle/PageTitle.module.css
@@ -6,9 +6,7 @@
 }

 .title a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--text);
+  color: inherit;
 }

@media screen and (max-width: 768px) {
--- a/components/RepositoryCard/RepositoryCard.module.css
+++ b/components/RepositoryCard/RepositoryCard.module.css
@@ -34,13 +34,11 @@
 }

 .meta_item a {
-  background: none;
-  padding-bottom: 0;
-  color: var(--medium);
+  color: inherit !important;
 }

 .meta_item a:hover {
-  color: var(--link);
+  color: var(--link) !important;
 }

 .octicon,
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/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"
--- a/pages/index.tsx
+++ b/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 {
-          font-size: 0.95em;
+        .home p {
+          font-size: 0.925em;
        }
      }

--- a/pages/notes/index.tsx
+++ b/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>
  </>
 );

--- a/pages/projects.tsx
+++ b/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 {
--- a/styles/index.css
+++ b/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 */