fix: 🩹 adjust character data

Takes less space, less code and has a more subtle effect

src/components/job.webc

@@ -1,5 +1,5 @@
 <section webc:root="override">
-  <div class="icon"><icon :@icon="icon"></icon></div>
+  <div class="icon-box"><icon :@icon="icon"></icon></div>
   <p class="title" @text="title"></p>
   <p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
     <slot></slot>
@@ -8,16 +8,15 @@
 
 <style webc:scoped="job">
   :host {
-    --timeline-circle-size: 3rem;
+    --icon-size: 3rem;
-    --timeline-circle-background: var(--clr-box-background);
+    --stroke-color: var(--clr-timeline-stroke);
-    --timeline-stroke-color: var(--clr-timeline-stroke);
+    --line-width: 0.25rem;
-    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
     margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
-      --timeline-circle-size: 4rem;
+      --icon-size: 3.5rem;
     }
   }
 
@@ -36,15 +35,20 @@
     grid-column: line;
     justify-self: center;
 
-    width: var(--timeline-stroke-thickness);
+    width: var(--line-width);
     height: 100%;
 
-    background-color: var(--timeline-stroke-color);
+    background-color: var(--stroke-color);
+    background: linear-gradient(
+      to top,
+      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+    );
   }
 
   :host:first-of-type::before {
     align-self: end;
-    height: calc(100% - var(--timeline-circle-size));
+    height: calc(100% - var(--icon-size));
   }
 
   :host:last-of-type::before {
@@ -53,18 +57,45 @@
     height: 50%;
   }
 
-  :host > .icon {
+  :host .icon-box {
+    --border-radius: 0.75em;
+
+    position: relative;
     grid-area: icon;
-    align-self: center;
 
-    width: var(--timeline-circle-size);
+    width: var(--icon-size);
-    height: var(--timeline-circle-size);
+    height: var(--icon-size);
 
-    background-color: var(--timeline-circle-background);
+    background: linear-gradient(
+      to bottom right,
+      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+    );
 
-    border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+    border-radius: var(--border-radius);
-    border-radius: 100%;
+    padding: calc(var(--icon-size) / 4);
-    padding: calc(var(--timeline-circle-size) * 0.2);
+
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  :host .icon-box::before {
+    --gradient-dir: ellipse at bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-end);
+    --gradient-end: var(--clr-quick-info-gradient-start);
+
+    content: '';
+    position: absolute;
+    inset: var(--line-width);
+
+    background: radial-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 70%,
+      var(--gradient-end) 100%
+    );
+
+    border-radius: calc(var(--border-radius) - 1em * 0.125);
+    z-index: -1;
   }
 
   :host .title {
@@ -72,10 +103,10 @@
     align-self: center;
 
     font-family: var(--font-family-headings);
-    font-size: calc(var(--timeline-circle-size) / 2);
+    font-size: calc(var(--icon-size) / 2);
     font-weight: bold;
     text-align: start;
-    margin-block: calc(var(--timeline-circle-size) / 4);
+    margin-block: 0;
   }
 
   :host .text {
@@ -85,5 +116,7 @@
     margin-block: 0;
     line-height: 1.5;
     text-align: justify;
+
+    margin-block: calc(var(--icon-size) / 4);
   }
 </style>

src/components/profile.webc

@@ -72,9 +72,13 @@
 
   :host .avatar {
     grid-area: avatar;
-    justify-self: center;
+    display: grid;
+    grid-template-columns: subgrid;
+    justify-items: center;
+    align-items: center;
 
-    & img {
+    & :where(picture, img) {
+      display: block;
       width: var(--sidebar-avatar-size);
       height: var(--sidebar-avatar-size);
       aspect-ratio: 1/1;
@@ -99,7 +103,6 @@
   :host .species {
     grid-area: species;
     align-self: start;
-    font-size: 0.75em;
     margin: 0;
   }
 

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>

src/sebin/sebin.11tydata.js

@@ -21,7 +21,7 @@ const firstName = 'Sebin',
   orientation = 'gay',
   position = 'vers, prefers top',
   height = 210, // cm
-  weight = 124, // kg
+  weight = 174, // kg
   tailLength = 154, // cm
   wingspan = 417, // cm
   colors = [

src/viktor/viktor.11tydata.js

@@ -9,8 +9,8 @@ const firstName = 'Viktor',
   pronouns = 'he/him',
   orientation = 'gay',
   role = 'bottom',
-  height = 227, // cm
+  height = 192, // cm
-  weight = 175, // kg
+  weight = 164, // kg
   colors = [
     { name: 'Front', value: '#e7c7b1' },
     { name: 'Arms, legs', value: '#493428' },