From e45bfe2e8d8427d7282e76f2ee7374e75fa52ef9 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 6 Jan 2024 08:17:05 -0800
Subject: [PATCH] chore: cleanup webmentions

---
 .../partials/now/albumReleases.liquid         |  2 +-
 src/_includes/partials/now/links.liquid       |  2 +-
 .../partials/webmentions/interaction.liquid   | 18 +++++++----------
 .../partials/webmentions/links.liquid         | 20 +++++++++----------
 src/assets/styles/index.css                   | 11 +++++-----
 src/assets/styles/widgets/media-grid.css      |  5 -----
 src/assets/styles/widgets/webmentions.css     | 11 ++++++----
 7 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/_includes/partials/now/albumReleases.liquid b/src/_includes/partials/now/albumReleases.liquid
index 781cd35f..40d74f8b 100644
--- a/src/_includes/partials/now/albumReleases.liquid
+++ b/src/_includes/partials/now/albumReleases.liquid
@@ -3,7 +3,7 @@
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>
-  <ul class="media__links">
+  <ul class="link__list">
     {% for album in albumReleases %}
       <li>
         <strong>{{ album.date | readableDate }}: </strong>
diff --git a/src/_includes/partials/now/links.liquid b/src/_includes/partials/now/links.liquid
index 4ff7cf09..d6f131ce 100644
--- a/src/_includes/partials/now/links.liquid
+++ b/src/_includes/partials/now/links.liquid
@@ -3,7 +3,7 @@
     {% tablericon "link" "Links" %}
     Links
   </h2>
-  <ul class="media__links">
+  <ul class="link__list">
     {% for link in links limit: 5 %}
       <li>
         <a class="no-underline" href="{{link.url}}" title="{{link.title | escape}}">
diff --git a/src/_includes/partials/webmentions/interaction.liquid b/src/_includes/partials/webmentions/interaction.liquid
index 80daf799..12d7a833 100644
--- a/src/_includes/partials/webmentions/interaction.liquid
+++ b/src/_includes/partials/webmentions/interaction.liquid
@@ -8,16 +8,12 @@
 {% if mentions[type].size > 0 %}
   <h2>{{ title }}</h2>
   <div class="interaction flex--centered">
-    <ul>
-      {% for mention in mentions[type] %}
-        <li>
-          <a href={{mention.url}}>
-            <div class="avatar__wrapper flex--centered">
-              {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
-            </div>
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
+    {% for mention in mentions[type] %}
+    <a href={{mention.url}}>
+      <div class="avatar__wrapper flex--centered">
+        {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
+      </div>
+    </a>
+    {% endfor %}
   </div>
 {% endif %}
\ No newline at end of file
diff --git a/src/_includes/partials/webmentions/links.liquid b/src/_includes/partials/webmentions/links.liquid
index 0ef8d943..6a7cbd78 100644
--- a/src/_includes/partials/webmentions/links.liquid
+++ b/src/_includes/partials/webmentions/links.liquid
@@ -1,14 +1,12 @@
 {% if mentions['link-to'].size > 0 %}
   <h2>Links</h2>
-  <div class="interaction">
-    <ul>
-      {% for mention in mentions['link-to'] %}
-        <li>
-          <a href="{{ mention.url }}">
-            {{ mention.name }}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
+  <ul class="link__list">
+    {% for mention in mentions['link-to'] %}
+      <li>
+        <a href="{{ mention.url }}">
+          {{ mention.name }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
 {% endif %}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 28482aa7..e64b93f7 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -120,7 +120,7 @@ nav ul {
   list-style: none;
 }
 
-nav ul li {
+nav ul li:not(:last-child) {
   margin-right: 1rem;
 }
 
@@ -135,10 +135,6 @@ nav svg:focus {
   stroke-width: var(--stroke-width-bold);
 }
 
-nav ul li:last-child {
-  margin-right: 0;
-}
-
 .active,
 .active svg {
   cursor: not-allowed;
@@ -313,6 +309,11 @@ li {
   margin-bottom: .5rem;
 }
 
+.link__list,
+.link__list li:last-child {
+  margin-bottom: 0;
+}
+
 /* images */
 .image__banner {
   border: 1px solid var(--blue-600);
diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
index ffc86ef3..44d792d7 100644
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@@ -70,11 +70,6 @@
   height: 100%;
 }
 
-.media__links,
-.media__links li:last-child {
-  margin-bottom: 0;
-}
-
 @media screen and (min-width: 768px) {
   .media__grid.square {
     grid-template-columns: repeat(4,minmax(0,1fr));
diff --git a/src/assets/styles/widgets/webmentions.css b/src/assets/styles/widgets/webmentions.css
index 7bc7014c..d8f593fa 100644
--- a/src/assets/styles/widgets/webmentions.css
+++ b/src/assets/styles/widgets/webmentions.css
@@ -4,7 +4,11 @@
   margin-top: 1.5rem;
   margin-bottom: 3.25rem;
   padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-bottom: 2.5rem;
+}
+
+.webmentions h2:not(:first-child) {
+  margin-top: 2rem;
 }
 
 .webmentions .interaction.comments {
@@ -57,16 +61,15 @@
   margin-top: .25rem;
 }
 
-.webmentions .interaction ul {
+.webmentions .interaction {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0 0 0 .75rem;
   padding: 0;
-  list-style: none;
 }
 
-.webmentions .interaction li {
+.webmentions .interaction > a {
   margin-left: -.75rem;
   height: 3.5rem;
 }