Clean up HTML properly

whitep4nth3r · Mar 5, 2024 · de44ee9 · de44ee9
1 parent b7475a6
commit de44ee9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 46 deletions.
diff --git a/src/_components/webring.js b/src/_components/webring.js
@@ -1,34 +1,24 @@
 function Webring({ members, prevUrl, nextUrl }) {
   return /* html */ `
-  <div class="card">
-    <div class="card__imageContainer">
-      <img src="/img/theclaw_webring_logo.svg" class="tcwr__logo" alt="The panther moth with a tattoo style banner that reads The Claw" />
-    </div>
-   <div class="card__inner">
-     <div class="tcwr">
-       <h2 class="tcwr__title">The Claw <span>webring</span></h2>
-       <div class="tcwr__nav">
-         <a href=${prevUrl} class="tcwr__navItem">Previous</a>
-         <button class="tcwr__navItem--random" data-webring-random>Random</button>
-         <a href="${nextUrl}" class="tcwr__navItem">Next</a>
-       </div>
-       <ul class="tcwr__membersList">
-          ${members
-            .map(
-              (member) => `
-              <li class="tcwr__membersListItem">
-                <a href="${member.url}" class="tcwr__membersListItemLink">
-                  ${member.name}
-                </a>
-              </li>`,
-            )
-            .join("")}
-        </ul>
-        <a href="https://github.com/whitep4nth3r/the-claw-webring#join-the-claw-webring" class="tcwr__join">Join</a>
-        <span class="card__metaLabel">Webring</span>
-      </div>
-    </div>
+  <h2 class="tcwr__title">The Claw <span>webring</span></h2>
+  <div class="tcwr__nav">
+    <a href=${prevUrl} class="tcwr__navItem">Previous</a>
+    <button class="tcwr__navItem--random" data-webring-random>Random</button>
+    <a href="${nextUrl}" class="tcwr__navItem">Next</a>
   </div>
+  <ul class="tcwr__membersList">
+    ${members
+      .map(
+        (member) => `
+        <li class="tcwr__membersListItem">
+          <a href="${member.url}" class="tcwr__membersListItemLink">
+            ${member.name}
+          </a>
+        </li>`,
+      )
+      .join("")}
+  </ul>
+  <a href="https://github.com/whitep4nth3r/the-claw-webring#join-the-claw-webring" class="tcwr__join">Join</a>
   <script type="text/json" id="members">
     ${JSON.stringify(members)}
   </script>

diff --git a/src/_css/main.css b/src/_css/main.css
diff --git a/src/_css/main.css.map b/src/_css/main.css.map
diff --git a/src/_sass/_webring.scss b/src/_sass/_webring.scss
@@ -1,7 +1,3 @@
-.tcwr {
-  --gap-unit: 0.25rem;
-}
-
 .tcwr__title {
   @include font_bold;
   color: var(--color-link);
@@ -58,7 +54,7 @@
   color: var(--color-fg-copy);
   display: block;
   font-size: 1rem;
-  padding: var(--gap-unit);
+  padding: 0.25rem;
   border-radius: var(--border-radius-base);
 }
 

diff --git a/src/index.11ty.js b/src/index.11ty.js
@@ -64,13 +64,20 @@ exports.render = function (data) {
             <span class="card__metaLabel">Newsletter</span>
           </div>
         </div>
-        ${Webring({
-          members: webring.members,
-          prevUrl: webring.prevUrl,
-          nextUrl: webring.nextUrl,
-        })}
-      </div>
-      ${feedItems.map((item) => ActivityFeedItem({ item })).join("")}
+        <div class="card">
+          <div class="card__imageContainer">
+            <img src="/img/theclaw_webring_logo.svg" class="tcwr__logo" alt="The panther moth with a tattoo style banner that reads The Claw" />
+          </div>
+          <div class="card__inner">
+            ${Webring({
+              members: webring.members,
+              prevUrl: webring.prevUrl,
+              nextUrl: webring.nextUrl,
+            })}
+            <span class="card__metaLabel">Webring</span>
+          </div>
+        </div>
+        ${feedItems.map((item) => ActivityFeedItem({ item })).join("")}
       </div>
     </div>
   </section>