From 7bd24405562e16af53fb87aa619fd4e61b4410c2 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 9 Apr 2025 19:05:09 +0200
Subject: [PATCH] refactor: :recycle: use more appropriate elements for
 semantics

---
 src/components/colors.webc   |  9 +++++----
 src/components/timeline.webc | 11 +++++++----
 src/components/traits.webc   | 12 ++++++------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/colors.webc b/src/components/colors.webc
index bd22f18..094e32f 100644
--- a/src/components/colors.webc
+++ b/src/components/colors.webc
@@ -1,12 +1,12 @@
-<div class="character-colors">
-  <div class="color" webc:for="color of colors">
+<ul class="character-colors">
+  <li class="color" webc:for="color of colors">
     <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
     <div class="content">
       <p class="heading" @text="color.name"></p>
       <p class="text" @text="color.value"></p>
     </div>
-  </div>
-</div>
+  </li>
+</ul>
 
 <style>
   .character-colors {
@@ -17,6 +17,7 @@
     gap: 1em;
 
     margin-block: 2em;
+    padding: 0;
 
     & .color {
       display: grid;
diff --git a/src/components/timeline.webc b/src/components/timeline.webc
index c1542e6..59dfe39 100644
--- a/src/components/timeline.webc
+++ b/src/components/timeline.webc
@@ -1,10 +1,10 @@
-<div class="timeline">
-  <div class="job" webc:for="job of jobs">
+<ul class="timeline">
+  <li class="job" webc:for="job of jobs">
     <icon class="icon" :icon="job.icon"></icon>
     <p class="title" @text="job.title"></p>
     <p class="text" @text="job.desc"></p>
-  </div>
-</div>
+  </li>
+</ul>
 
 <style>
   .timeline {
@@ -13,6 +13,9 @@
     --timeline-stroke-color: var(--clr-timeline-stroke);
     --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
+    margin-block: 1em;
+    padding: 0;
+
     @media (min-width: 32em) {
       --timeline-circle-size: 4rem;
     }
diff --git a/src/components/traits.webc b/src/components/traits.webc
index d76d76b..4d91aee 100644
--- a/src/components/traits.webc
+++ b/src/components/traits.webc
@@ -1,10 +1,10 @@
-<div class="trait-list">
-  <div class="trait" webc:for="trait of traits">
+<ul class="trait-list">
+  <li class="trait" webc:for="trait of traits">
     <div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
     <p class="type" @text="trait.type"></p>
     <p class="text" @text="trait.text"></p>
-  </div>
-</div>
+  </li>
+</ul>
 
 <style>
   .trait-list {
@@ -12,8 +12,8 @@
     grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
     gap: 0.75em;
 
-    margin-block: 0;
-    margin-inline: 0;
+    margin: 0;
+    padding: 0;
   }
 
   .trait {