From 40930e1d8e2bf7461da614d5fbbb917c70482561 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sat, 19 Jul 2025 21:12:43 +0200
Subject: [PATCH] feat: :lipstick: update style of trait card component

Takes less space, less code and has a more subtle effect
---
 src/components/trait-card.webc | 50 ++++++++++++----------------------
 1 file changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/components/trait-card.webc b/src/components/trait-card.webc
index 72925e7..85ec14d 100644
--- a/src/components/trait-card.webc
+++ b/src/components/trait-card.webc
@@ -1,7 +1,4 @@
 <div webc:root="override">
-  <div class="icon-box">
-    <icon :icon="icon"></icon>
-  </div>
   <div class="content">
     <h3 class="title">
       <slot name="title"></slot>
@@ -9,18 +6,20 @@
     <p>
       <slot></slot>
     </p>
+    <icon :icon="icon"></icon>
   </div>
 </div>
 
 <style webc:scoped="trait-card">
   :host {
     --spacing-inline: 0.75em;
+
     position: relative;
     display: grid;
     font-size: 0.875em;
 
     border-radius: 1em;
-    padding-block: 2em 1em;
+    padding-block: 1em;
     margin-inline: var(--spacing-inline);
 
     @media (min-width: 40em) {
@@ -28,34 +27,6 @@
     }
   }
 
-  :host .icon-box {
-    position: absolute;
-    top: 0.5em;
-    left: 2.75em;
-
-    width: 3em;
-    height: 3em;
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
-    );
-    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
-    border-radius: 0.5em;
-    overflow: hidden;
-    z-index: 1;
-  }
-
-  :host .icon-box > * {
-    margin: var(--border-thin);
-    background-color: var(--clr-box-background);
-    border-radius: inherit;
-  }
-
-  :host svg {
-    padding: 0.625em;
-  }
-
   :host .content {
     --gradient-dir: to bottom right;
     --gradient-start: var(--clr-box-gradient-start);
@@ -75,6 +46,8 @@
     box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
 
     z-index: 0;
+
+    overflow: clip;
   }
 
   :host .content::before {
@@ -98,6 +71,17 @@
 
   :host .title {
     font-size: 1.75em;
-    margin-block-start: 0.5em;
+  }
+
+  :host .icon {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    width: 18em;
+    height: 18em;
+
+    opacity: 0.15;
+    transform: translate(1.75em, 5em);
   }
 </style>