chore: cleanup webmentions

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>

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}}">

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 %}

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 %}

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);

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));

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;
 }