From c3f031a229c7b4a84fddce06fbd47905daa24d83 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cory.dransfeldt@gmail.com>
Date: Thu, 28 Dec 2023 09:17:33 -0800
Subject: [PATCH] fix: a few more styles

---
 package.json                |  2 +-
 src/assets/styles/index.css | 32 ++++++++++++++++++--------------
 src/pages/about.md          |  2 +-
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 8b1e66d6..ab1da5ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 72e6174b..50c0bd6b 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -602,7 +602,7 @@ ol li {
   margin-bottom: 1.5rem;
 }
 
-.avatar {
+.avatar__wrapper .avatar__wrapper--interior {
   width: 16rem;
   height: 16rem;
   border: 1px solid var(--blue-600);
@@ -614,7 +614,7 @@ ol li {
   overflow: hidden;
 }
 
-.avatar > * {
+.avatar__wrapper .avatar__wrapper--interior > * {
   width: 100%;
   height: 100%;
 }
@@ -767,6 +767,7 @@ ol li {
 }
 
 .webmentions__wrapper .interaction__wrapper {
+  cursor: pointer;
   margin-top: 1rem;
   margin-bottom: 1.5rem;
 }
@@ -784,6 +785,11 @@ ol li {
   padding-bottom: 0;
 }
 
+.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover,
+.webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper {
+  border-color: var(--blue-800);
+}
+
 .webmentions__wrapper .interaction__wrapper .comment__wrapper--interior {
   justify-content: space-between;
 }
@@ -833,10 +839,6 @@ ol li {
   border: 4px solid var(--white);
 }
 
-.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover {
-  border-color: var(--blue-800);
-}
-
 .webmentions__wrapper .interaction__wrapper .avatar__wrapper .avatar__wrapper-image > * {
   width: 100%;
   height: 100%;
@@ -863,19 +865,20 @@ ol li {
   margin-bottom: 1rem;
 }
 
-.author__wrapper > .avatar__wrapper .avatar__wrapper--interior {
+.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior {
   border: 1px solid var(--blue-600);
   border-radius: var(--rounded-full);
   overflow: hidden;
   margin-bottom: 1rem;
   margin-right: 0;
+  padding: .25rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.author__wrapper > .avatar__wrapper .avatar__wrapper--interior,
-.author__wrapper > .avatar__wrapper .avatar__wrapper--interior .author-avatar > * {
+.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior,
+.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior > .author-avatar > * {
   width: 5rem;
   height: 5rem;
 }
@@ -1025,7 +1028,7 @@ textarea {
     line-height: var(--line-height-2xl);
   }
 
-  .avatar {
+  .avatar__wrapper .avatar__wrapper--interior {
     width: 24rem;
     height: 24rem;
   }
@@ -1280,15 +1283,16 @@ textarea {
     border-color: var(--gray-900);
   }
 
+  .webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover,
+  .webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper {
+    border-color: var(--blue-200);
+  }
+
   .webmentions__wrapper .interaction__wrapper .avatar__wrapper {
     background-color: var(--white);
     border-color: var(--black);
   }
 
-  .webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover {
-    border-color: var(--blue-200);
-  }
-
   .webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment a {
     color: var(--white);
   }
diff --git a/src/pages/about.md b/src/pages/about.md
index fa55a89f..08a831ea 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -4,7 +4,7 @@ layout: default
 permalink: /about.html
 ---
 <div class="avatar__wrapper">
-  <div class="avatar">
+  <div class="avatar__wrapper--interior">
     {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
     {% image './src/assets/img/avatar.webp', about_alt %}
   </div>