stop being lazy with css selectors

components/Footer/Footer.module.css

@@ -7,7 +7,7 @@
   transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }
 
-.footer a {
+.link {
   color: inherit;
 }
 

components/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import Link from "next/link";
+import classNames from "classnames";
 import { HeartIcon, NextjsLogo } from "../Icons";
 import * as config from "../../lib/config";
 
@@ -11,11 +12,15 @@ const Footer = () => (
       <div className={styles.license}>
         Content{" "}
         <Link href="/license/" prefetch={false}>
-          <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
+          <a className={styles.link} title="Creative Commons Attribution 4.0 International">
+            licensed under CC-BY-4.0
+          </a>
         </Link>
         ,{" "}
         <Link href="/previously/" prefetch={false}>
-          <a title="Previously on...">2001</a>
+          <a className={styles.link} title="Previously on...">
+            2001
+          </a>
         </Link>{" "}
         – {new Date().getFullYear()}.
       </div>
@@ -26,7 +31,7 @@ const Footer = () => (
         </span>{" "}
         and{" "}
         <a
-          className={styles.nextjs}
+          className={classNames(styles.link, styles.nextjs)}
           href="https://nextjs.org/"
           title="Powered by Next.js"
           aria-label="Next.js"
@@ -37,7 +42,7 @@ const Footer = () => (
         </a>
         .{" "}
         <a
-          className={styles.view_source}
+          className={classNames(styles.link, styles.view_source)}
           href={`https://github.com/${config.githubRepo}`}
           title="View Source on GitHub"
           target="_blank"

components/Heading/Heading.module.css

@@ -20,7 +20,7 @@
 .anchor {
   margin: 0 0.25em;
   padding: 0 0.25em;
-  color: var(--medium-light) !important;
+  color: var(--medium-light);
   font-weight: 300;
   opacity: 0; /* overridden on hover below (except on small screens) */
 }
@@ -28,7 +28,7 @@
   content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
 }
 .anchor:hover {
-  color: var(--link) !important;
+  color: var(--link);
 }
 /* make anchor link show up on hover over its 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={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden={true} />
       )}
     </Component>
   );

components/Image/Image.module.css

@@ -6,6 +6,6 @@
   text-align: center;
 }
 
-.wrapper img {
+.image {
   border-radius: var(--rounded-edge-radius);
 }

components/Image/Image.tsx

@@ -42,7 +42,7 @@ const CustomImage = ({
   return (
     <div className={classNames(styles.wrapper, className)}>
       {/* @ts-ignore */}
-      <NextImage {...imageProps} {...rest} />
+      <NextImage className={styles.image} {...imageProps} {...rest} />
     </div>
   );
 };

components/Menu/Menu.tsx

@@ -13,22 +13,22 @@ type Props = {
 
 const links = [
   {
-    icon: <HomeIcon className={styles.icon} aria-hidden={true} />,
+    icon: <HomeIcon className={styles.icon} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon className={styles.icon} aria-hidden={true} />,
+    icon: <NotesIcon className={styles.icon} />,
     text: "Notes",
     href: "/notes",
   },
   {
-    icon: <ProjectsIcon className={styles.icon} aria-hidden={true} />,
+    icon: <ProjectsIcon className={styles.icon} />,
     text: "Projects",
     href: "/projects",
   },
   {
-    icon: <ContactIcon className={styles.icon} aria-hidden={true} />,
+    icon: <ContactIcon className={styles.icon} />,
     text: "Contact",
     href: "/contact",
   },

components/NoteMeta/NoteMeta.module.css

@@ -7,11 +7,7 @@
   color: var(--medium);
 }
 
-.meta a {
+.meta_item {
-  color: inherit;
-}
-
-.meta > div {
   display: inline-flex;
   margin-right: 1.6em;
   white-space: nowrap;
@@ -46,6 +42,11 @@
   margin-right: 0;
 }
 
+.date_link,
+.edit_link {
+  color: inherit;
+}
+
 .views {
   /* fix potential layout shift when number of hits loads */
   min-width: 7em;

components/NoteMeta/NoteMeta.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { format } from "date-fns";
 import HitCounter from "../HitCounter/HitCounter";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
@@ -5,20 +6,30 @@ import * as config from "../../lib/config";
 import type { NoteMetaType } from "../../types";
 
 import styles from "./NoteMeta.module.css";
+import Link from "next/link";
 
 type Props = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;
 
 const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
   <div className={styles.meta}>
-    <div>
+    <div className={styles.meta_item}>
-      <span>
+      <Link
-        <DateIcon className={styles.icon} />
+        href={{
-      </span>
+          pathname: "/notes/[slug]/",
-      <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+          query: { slug: slug },
+        }}
+      >
+        <a className={styles.date_link}>
+          <span>
+            <DateIcon className={styles.icon} />
+          </span>
+          <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+        </a>
+      </Link>
     </div>
 
     {tags.length > 0 && (
-      <div className={styles.tags}>
+      <div className={classNames(styles.meta_item, styles.tags)}>
         <span>
           <TagIcon className={styles.icon} />
         </span>
@@ -30,8 +41,9 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
       </div>
     )}
 
-    <div>
+    <div className={styles.meta_item}>
       <a
+        className={styles.edit_link}
         href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
         target="_blank"
         rel="noopener noreferrer"
@@ -44,7 +56,7 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
       </a>
     </div>
 
-    <div className={styles.views}>
+    <div className={classNames(styles.meta_item, styles.views)}>
       <span>
         <ViewsIcon className={styles.icon} />
       </span>

components/NoteTitle/NoteTitle.module.css

@@ -5,16 +5,12 @@
   font-weight: 700;
 }
 
-.title a {
+.title code {
-  color: inherit;
+  margin: 0 0.075em;
 }
 
-.title code {
+.link {
-  font-size: 1em;
+  color: inherit;
-  background: none !important;
-  border: 0 !important;
-  margin: 0 0.075em !important;
-  padding: 0 !important;
 }
 
 @media screen and (max-width: 768px) {

components/NoteTitle/NoteTitle.tsx

@@ -1,19 +1,20 @@
 import Link from "next/link";
+import classNames from "classnames";
 import type { NoteMetaType } from "../../types";
 
 import styles from "./NoteTitle.module.css";
 
-type Props = Pick<NoteMetaType, "slug" | "htmlTitle">;
+type Props = Pick<NoteMetaType, "slug" | "htmlTitle"> & { className?: string };
 
-const NoteTitle = ({ slug, htmlTitle, ...rest }: Props) => (
+const NoteTitle = ({ slug, htmlTitle, className, ...rest }: Props) => (
-  <h1 className={styles.title}>
+  <h1 className={classNames(styles.title, className)}>
     <Link
       href={{
         pathname: "/notes/[slug]/",
         query: { slug: slug },
       }}
     >
-      <a dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
+      <a className={styles.link} dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
     </Link>
   </h1>
 );

components/OctocatLink/OctocatLink.module.css

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

components/PageTitle/PageTitle.module.css

@@ -5,7 +5,7 @@
   text-align: center;
 }
 
-.title a {
+.link {
   color: inherit;
 }
 

components/PageTitle/PageTitle.tsx

@@ -17,7 +17,7 @@ const PageTitle = ({ className, ...rest }: Props) => {
   return (
     <h1 className={classNames(styles.title, className)}>
       <Link href={canonical}>
-        <a {...rest} />
+        <a className={styles.link} {...rest} />
       </Link>
     </h1>
   );

components/RepositoryCard/RepositoryCard.module.css

@@ -1,6 +1,6 @@
 .card {
   width: 100%;
-  padding: 1.2em 1.2em 0.8em;
+  padding: 1.2em 1.2em 0.8em 1.2em;
   border: 1px solid;
   border-radius: var(--rounded-edge-radius);
   font-size: 0.85em;
@@ -16,7 +16,8 @@
 }
 
 .description {
-  margin: 0.7em 0 0.5em;
+  margin-top: 0.7em;
+  margin-bottom: 0.5em;
   line-height: 1.7;
 }
 
@@ -33,12 +34,12 @@
   color: var(--medium);
 }
 
-.meta_item a {
+.meta_link {
-  color: inherit !important;
+  color: inherit;
 }
 
-.meta_item a:hover {
+.meta_link:hover {
-  color: var(--link) !important;
+  color: var(--link);
 }
 
 .octicon,

components/RepositoryCard/RepositoryCard.tsx

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

pages/cli.tsx

@@ -6,6 +6,7 @@ import Image from "../components/Image/Image";
 import Blockquote from "../components/Blockquote/Blockquote";
 import CodeBlock from "../components/CodeBlock/CodeBlock";
 import { H2 } from "../components/Heading/Heading";
+import { UnorderedList, ListItem } from "../components/List/List";
 
 import cliImg from "../public/static/images/cli/screenshot.png";
 
@@ -37,24 +38,24 @@ const CLI = () => (
       <CodeBlock className="code-highlight">npx @jakejarvis/cli</CodeBlock>
 
       <H2>Inspired by</H2>
-      <ul>
+      <UnorderedList>
-        <li>
+        <ListItem>
           <Link href="https://github.com/sindresorhus/sindresorhus-cli">@sindresorhus/sindresorhus-cli</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://github.com/yg/ygcodes">@yg/ygcodes</Link>
-        </li>
+        </ListItem>
-      </ul>
+      </UnorderedList>
 
       <H2>Built with</H2>
-      <ul>
+      <UnorderedList>
-        <li>
+        <ListItem>
           <Link href="https://github.com/vadimdemedes/ink">ink</Link> - React for interactive command-line apps
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://github.com/sindresorhus/meow">meow</Link> - CLI helper
-        </li>
+        </ListItem>
-      </ul>
+      </UnorderedList>
       <p>
         <Link href="https://github.com/jakejarvis/jakejarvis/tree/main/cli" target="_blank" rel="noreferrer">
           View source on GitHub.
@@ -63,7 +64,7 @@ const CLI = () => (
 
       <H2>License</H2>
       <p>
-        MIT © <Link href="https://jarv.is/">Jake Jarvis</Link>,{" "}
+        MIT &copy; <Link href="https://jarv.is/">Jake Jarvis</Link>,{" "}
         <Link href="https://sindresorhus.com">Sindre Sorhus</Link>
       </p>
     </Content>

pages/hillary.tsx

@@ -47,7 +47,7 @@ const Hillary = () => (
         text-align: center;
         font-size: 0.9em;
         line-height: 1.8;
-        margin: 1.25em 1em 0.5em;
+        margin: 1.25em 1em 0 1em;
         color: var(--medium-light);
       }
     `}</style>

pages/leo.tsx

@@ -44,7 +44,7 @@ const Leo = () => (
         text-align: center;
         font-size: 0.9em;
         line-height: 1.8;
-        margin: 1.25em 1em 0.5em;
+        margin: 1.25em 1em 0 1em;
         color: var(--medium-light);
       }
     `}</style>

pages/license.tsx

@@ -5,6 +5,7 @@ import Link from "../components/Link/Link";
 import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
 import Blockquote from "../components/Blockquote/Blockquote";
 import { H2, H3 } from "../components/Heading/Heading";
+import { UnorderedList, OrderedList, ListItem } from "../components/List/List";
 
 const License = () => (
   <>
@@ -84,8 +85,8 @@ const License = () => (
         rights specified in the public license below. The following considerations are for informational purposes only,
         are not exhaustive, and do not form part of our licenses.
       </p>
-      <ul>
+      <UnorderedList>
-        <li>
+        <ListItem>
           <p>
             <strong>Considerations for licensors:</strong> Our public licenses are intended for use by those authorized
             to give the public permission to use material in ways otherwise restricted by copyright and certain other
@@ -99,8 +100,8 @@ const License = () => (
             </Link>
             .
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>Considerations for the public:</strong> By using one of our public licenses, a licensor grants the
             public permission to use the licensed material under specified terms and conditions. If the licensor's
@@ -115,8 +116,8 @@ const License = () => (
             </Link>
             .
           </p>
-        </li>
+        </ListItem>
-      </ul>
+      </UnorderedList>
 
       <H3>Licensed Rights</H3>
 
@@ -193,8 +194,8 @@ const License = () => (
           <strong>License grant.</strong>
         </em>
       </p>
-      <ol>
+      <OrderedList>
-        <li>
+        <ListItem>
           <p>
             Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide,
             royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the
@@ -202,20 +203,20 @@ const License = () => (
           </p>
           <p>A. reproduce and Share the Licensed Material, in whole or in part; and</p>
           <p>B. produce, reproduce, and Share Adapted Material.</p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>Exceptions and Limitations.</strong> For the avoidance of doubt, where Exceptions and Limitations
             apply to Your use, this Public License does not apply, and You do not need to comply with its terms and
             conditions.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>Term.</strong> The term of this Public License is specified in Section 6(a).
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>Media and formats; technical modifications allowed.</strong> The Licensor authorizes You to exercise
             the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical
@@ -225,8 +226,8 @@ const License = () => (
             Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted
             Material.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>Downstream recipients.</strong>
           </p>
@@ -240,43 +241,43 @@ const License = () => (
             terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so
             restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             <strong>No endorsement.</strong> Nothing in this Public License constitutes or may be construed as
             permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or
             sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution
             as provided in Section 3(a)(1)(A)(i).
           </p>
-        </li>
+        </ListItem>
-      </ol>
+      </OrderedList>
       <p>
         b.{" "}
         <em>
           <strong>Other rights.</strong>
         </em>
       </p>
-      <ol>
+      <OrderedList>
-        <li>
+        <ListItem>
           <p>
             Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity,
             privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives
             and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow
             You to exercise the Licensed Rights, but not otherwise.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>Patent and trademark rights are not licensed under this Public License.</p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the
             Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory
             or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such
             royalties.
           </p>
-        </li>
+        </ListItem>
-      </ol>
+      </OrderedList>
 
       <H3>Section 3 – License Conditions.</H3>
 
@@ -287,8 +288,8 @@ const License = () => (
           <strong>Attribution.</strong>
         </em>
       </p>
-      <ol>
+      <OrderedList>
-        <li>
+        <ListItem>
           <p>If You Share the Licensed Material (including in modified form), You must:</p>
           <p>A. retain the following if it is supplied by the Licensor with the Licensed Material:</p>
           <p>
@@ -307,27 +308,27 @@ const License = () => (
             C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI
             or hyperlink to, this Public License.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and
             context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the
             conditions by providing a URI or hyperlink to a resource that includes the required information.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the
             extent reasonably practicable.
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>
             If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of
             the Adapted Material from complying with this Public License.
           </p>
-        </li>
+        </ListItem>
-      </ol>
+      </OrderedList>
 
       <H3>Section 4 – Sui Generis Database Rights.</H3>
 
@@ -388,17 +389,17 @@ const License = () => (
         fail to comply with this Public License, then Your rights under this Public License terminate automatically.
       </p>
       <p>b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:</p>
-      <ol>
+      <OrderedList>
-        <li>
+        <ListItem>
           <p>
             automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery
             of the violation; or
           </p>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <p>upon express reinstatement by the Licensor.</p>
-        </li>
+        </ListItem>
-      </ol>
+      </OrderedList>
       <p>
         For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies
         for Your violations of this Public License.

pages/previously.tsx

@@ -155,7 +155,7 @@ const Previously = () => (
     {/* a complete sh*tshow of overrides, mainly to compensate for font change */}
     <style jsx global>{`
       body {
-        font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
+        font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", var(--font-family-sans-variable);
         font-weight: 600 !important;
       }
       /* left header */

pages/privacy.tsx

@@ -4,8 +4,9 @@ import PageTitle from "../components/PageTitle/PageTitle";
 import Link from "../components/Link/Link";
 import Image from "../components/Image/Image";
 import IFrame from "../components/IFrame/IFrame";
-import { H2 } from "../components/Heading/Heading";
 import Blockquote from "../components/Blockquote/Blockquote";
+import { H2 } from "../components/Heading/Heading";
+import { UnorderedList, ListItem } from "../components/List/List";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
 
@@ -91,29 +92,29 @@ const Privacy = () => (
         code that is outside of my control. Please refer to their privacy policies for more information:
       </p>
 
-      <ul>
+      <UnorderedList>
-        <li>
+        <ListItem>
           <Link href="https://blog.codepen.io/documentation/privacy/">CodePen</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://www.facebook.com/policy.php">Facebook</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://docs.github.com/en/github/site-policy/github-privacy-statement">GitHub</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://soundcloud.com/pages/privacy">SoundCloud</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://twitter.com/en/privacy">Twitter</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://vimeo.com/privacy">Vimeo</Link>
-        </li>
+        </ListItem>
-        <li>
+        <ListItem>
           <Link href="https://policies.google.com/privacy">YouTube</Link>
-        </li>
+        </ListItem>
-      </ul>
+      </UnorderedList>
 
       <H2 id="hcaptcha">Fighting Spam</H2>
 

pages/projects.tsx

@@ -4,6 +4,7 @@ import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
 import Link from "../components/Link/Link";
 import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
+import { OctocatOcticon } from "../components/Icons";
 import type { GetStaticProps } from "next";
 import type { RepoType } from "../types";
 
@@ -32,7 +33,20 @@ const Projects = ({ repos }: Props) => (
       </div>
 
       <p className="view_more">
-        <Link href="https://github.com/jakejarvis?tab=repositories">View more on GitHub...</Link>
+        <Link href="https://github.com/jakejarvis?tab=repositories">
+          View more on{" "}
+          <OctocatOcticon
+            fill="currentColor"
+            style={{
+              color: "var(--text)",
+              width: "1.2em",
+              height: "1.2em",
+              verticalAlign: "-0.2em",
+              margin: "0 0.15em",
+            }}
+          />{" "}
+          GitHub...
+        </Link>
       </p>
     </Content>