more preparation for styled components

components/Name/Name.module.css

@@ -1,4 +1,4 @@
-.name {
+.link {
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
@@ -6,27 +6,27 @@
   padding-bottom: 0;
 }
 
-.name .selfie {
+.link:hover {
+  color: var(--link);
+}
+
+.selfie {
   width: 50px;
   height: 50px;
   line-height: 0;
   padding: 0;
 }
 
-.name .selfie img {
+.selfie img {
   border: 1px solid var(--light) !important;
   border-radius: 50%;
 }
 
-.name:hover {
-  color: var(--link);
-}
-
-.name:hover .selfie {
+.link:hover .selfie {
   opacity: 0.9;
 }
 
-.name span:last-of-type {
+.name {
   margin: 0 0.6em;
   font-size: 1.2em;
   font-weight: 500;
@@ -34,12 +34,12 @@
 }
 
 @media screen and (max-width: 768px) {
-  .name .selfie {
+  .selfie {
     width: 70px;
     height: 70px;
   }
 
-  .name span:last-of-type {
+  .name {
     display: none;
   }
 }

components/Name/Name.tsx

@@ -8,11 +8,11 @@ import meJpg from "../../public/static/images/me.jpg";
 
 const Name = () => (
   <Link href="/">
-    <a className={styles.name}>
+    <a className={styles.link}>
       <div className={styles.selfie}>
         <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
       </div>
-      <span>Jake Jarvis</span>
+      <span className={styles.name}>Jake Jarvis</span>
     </a>
   </Link>
 );