stop being lazy with css selectors

components/NoteMeta/NoteMeta.module.css

@@ -7,11 +7,7 @@
   color: var(--medium);
 }
 
-.meta a {
-  color: inherit;
-}
-
-.meta > div {
+.meta_item {
   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>
-      <span>
-        <DateIcon className={styles.icon} />
-      </span>
-      <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+    <div className={styles.meta_item}>
+      <Link
+        href={{
+          pathname: "/notes/[slug]/",
+          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>