style: normalize link hover behavior

links previously only wrapped the text they were applied to instead of
expanding to fill the parent container. This led to some weird and
unintuitive behavior on hover. This fix normalizes this behavior.

components/blogPostList.js

@@ -5,10 +5,12 @@ import utilStyles from "../styles/utils.module.css";
 const BlogPost = ({ id, date, title }) => {
   return (
     <li className={`${utilStyles.listItem} ${utilStyles.flex}`} key={id}>
-      <Link href={`/blog/${id}`}>{title}</Link>
-      <small className={utilStyles.lightText}>
-        <Date dateString={date} />
-      </small>
+      <Link href={`/blog/${id}`}>
+        <p>{title}</p>
+        <small className={utilStyles.lightText}>
+          <Date dateString={date} />
+        </small>
+      </Link>
     </li>
   );
 };

components/layout/layout.module.css

@@ -15,6 +15,10 @@
 }
 
 .header::before {
+  /* This is used to create the blur effect on the header.
+   These styles aren't on the header element itself for more 
+   specific control over size and positioning without affecting 
+   the header content */
   content: "";
   position: absolute;
   top: 0;
@@ -42,9 +46,6 @@
 }
 
 .header a {
-  display: block;
-  height: 100%;
-  width: 100%;
   color: black;
 }
 
@@ -73,3 +74,9 @@
   text-decoration: underline;
   text-decoration-style: wavy;
 }
+
+.nav a {
+  display: block;
+  height: 100%;
+  width: 100%;
+}

styles/globals.css

@@ -19,11 +19,6 @@ a {
   text-decoration: none;
 }
 
-a:hover {
-  text-decoration: underline;
-  font-style: italic;
-}
-
 img {
   max-width: 100%;
   display: block;

styles/utils.module.css

@@ -22,13 +22,28 @@
 
 .listItem {
   margin: 0 0 1.25rem;
+  display: block;
+}
+
+.listItem:hover p {
+  text-decoration: underline;
+  font-style: italic;
+}
+
+.listItem p {
+  margin: 0;
+}
+
+.listItem a {
+  width: 100%;
+  height: 100%;
 }
 
 .lightText {
   color: #666;
 }
 
- .flex {
+.flex {
   display: flex;
   flex-direction: column;
 }