feat: ✨ add character traits component

src/components/traits.webc

@@ -0,0 +1,88 @@
+<div class="trait-list">
+  <div class="trait" webc:for="trait of traits">
+    <div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
+    <div>
+      <p class="type" @text="trait.type"></p>
+      <p class="text" @text="trait.text"></p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .trait-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    gap: 0.75em;
+
+    margin-block: 0;
+    margin-inline: 0;
+  }
+
+  .trait {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.75em;
+
+    & > * {
+      flex: 1 0 0;
+    }
+
+    & .icon-box {
+      --icon-size: 2em;
+
+      position: relative;
+      flex: 0 1 auto;
+
+      width: var(--icon-size);
+      height: var(--icon-size);
+
+      background: linear-gradient(
+        to bottom right,
+        oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
+        oklch(from var(--clr-box-background) l c h) 50%
+      );
+
+      box-shadow: 0.0625em 0.0625em 0.3em oklch(from var(--clr-box-background) calc(l + 0.1) c h);
+      border-radius: 0.5em;
+      overflow: hidden;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: var(--border-thin);
+        background-color: var(--clr-box-background);
+        border-radius: inherit;
+        z-index: -1;
+      }
+    }
+
+    & svg {
+      width: 100%;
+      height: 100%;
+      padding: 0.625em;
+    }
+
+    & p {
+      margin-block: 0;
+
+      & + p {
+        margin-block: 0.75em 0;
+      }
+    }
+
+    & .type {
+      font-size: 0.625em;
+      color: var(--clr-heading-data);
+      text-transform: uppercase;
+    }
+
+    & .text {
+      font-size: 0.75em;
+      margin-block: 0;
+      margin-inline: 0;
+      color: var(--clr-text);
+    }
+  }
+</style>