From 99e8ef922a8471b0c360dfceda07777a5ed85cf1 Mon Sep 17 00:00:00 2001
From: john <me@johnbotr.is>
Date: Sun, 5 May 2024 13:42:06 +0200
Subject: [PATCH] shtyles

---
 cv.html          | 12 +++++++-----
 styles/style.css | 29 +++++++++++++++++------------
 2 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/cv.html b/cv.html
index 419fa06..b122ee5 100644
--- a/cv.html
+++ b/cv.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 <header>
-    <!--        <img class="pfp" alt="an image of john" src="assets/pfp.jpeg"/>-->
+    <img class="pfp" alt="an image of john" src="assets/pfp.jpeg"/>
     <div>
         <h1>John Morris</h1>
         <p>Software Developer</p>
@@ -166,7 +166,7 @@
     </li>
 </menu>
 <aside>
-    <dl id=details class="details">
+    <dl id=details class="icon-list">
         <dt>
             <img
                     class="icon"
@@ -189,7 +189,9 @@
 
         <dt><img class="icon" alt="email" aria-description="email address"
                  src="assets/icon-email.svg"/></dt>
-        <dd><a href="mailto:me@johnmorr.is">me@johnmorr.is</a></dd>
+        <dd>
+            <a href="mailto:me@johnmorr.is?subject=Re:+Your+application&body=Hey+John,%0A%0ANice+resume+%E2%98%BA%EF%B8%8F.%0AWe'd+love+to+hire+you!">me@johnmorr.is</a>
+        </dd>
     </dl>
 
     <section id="skills">
@@ -240,11 +242,11 @@
         const year = now.getFullYear()
         const month = now.getMonth() + 1
         const day = now.getDate()
-        document.title=`John Morris CV ${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+        document.title = `John Morris CV ${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
     });
 
     window.addEventListener("afterprint", (event) => {
-        document.title=originalTitle;
+        document.title = originalTitle;
     });
 </script>
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 0938a2c..581ead5 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,6 +1,7 @@
 :root {
     --primary: #000;
     --primary-light: #8a8a8a;
+    --primary-lightest: #eaeaea
 }
 
 html {
@@ -77,8 +78,21 @@ main > *:not(:last-child) {
 .pfp {
     border-radius: 50%;
 
-    width: 5rem;
-    height: 5rem;
+    width: 8rem;
+    height: 8rem;
+}
+
+div:has(> .pfp) {
+    border-radius: 50%;
+
+    width: 6rem;
+    height: 6rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 4px solid var(--primary-light);
 }
 
 menu.links {
@@ -107,16 +121,7 @@ aside {
     margin-bottom: 0.5rem;
 }
 
-dl.details {
-    display: grid;
-    grid-template-columns: auto auto;
-
-    justify-content: start;
-    column-gap: 1rem;
-    row-gap: 0.25rem;
-}
-
-#human-languages dl {
+dl {
     display: grid;
     grid-template-columns: auto auto;
 
