responsive style adjustments

components/home/Home.module.scss

@@ -1,6 +1,4 @@
 .home {
-  font-size: 1em;
-
   h1 {
     margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.8em;
@@ -35,10 +33,10 @@
     }
   }
 
-  sup {
-    letter-spacing: normal;
-    position: relative;
-    margin-left: 0.2em;
+  .pgp_key {
+    margin: 0 0.15em;
+    font-size: 0.65em;
+    word-spacing: -0.3em;
 
     a {
       background: none;
@@ -46,13 +44,7 @@
     }
   }
 
-  .pgp {
-    font-size: 0.875em;
-    word-spacing: -0.3em;
-    margin-right: 0.075em;
-  }
-
-  .light {
+  .quiet {
     color: var(--medium-light);
   }
 

components/home/Home.tsx

@@ -133,7 +133,7 @@ export default function Home() {
         >
           the Tooth Fairy
         </Link>
-        . <span className={styles.light}>I've improved a bit since then, I think...</span>
+        . <span className={styles.quiet}>I've improved a bit since then, I think...</span>
       </p>
 
       <p>
@@ -220,11 +220,9 @@ export default function Home() {
         <Link href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
           email
         </Link>{" "}
-        <sup className="monospace">
+        <sup className={`monospace ${styles.pgp_key}`}>
           <Link href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external={true}>
-            <span className={styles.pgp}>
-              <LockIcon alt="PGP Key" /> 2B0C 9CF2 51E6 9A39
-            </span>
+            <LockIcon className="icon" /> 2B0C 9CF2 51E6 9A39
           </Link>
         </sup>
         ,{" "}