src/components/job.webc

@@ -1,5 +1,5 @@
 <section webc:root="override">
-  <div class="icon-box"><icon :@icon="icon"></icon></div>
+  <div class="icon"><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,15 +8,16 @@
 
 <style webc:scoped="job">
   :host {
-    --icon-size: 3rem;
-    --stroke-color: var(--clr-timeline-stroke);
-    --line-width: 0.25rem;
+    --timeline-circle-size: 3rem;
+    --timeline-circle-background: var(--clr-box-background);
+    --timeline-stroke-color: var(--clr-timeline-stroke);
+    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
     margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
-      --icon-size: 3.5rem;
+      --timeline-circle-size: 4rem;
     }
   }
 
@@ -35,20 +36,15 @@
     grid-column: line;
     justify-self: center;
 
-    width: var(--line-width);
+    width: var(--timeline-stroke-thickness);
     height: 100%;
 
-    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)
-    );
+    background-color: var(--timeline-stroke-color);
   }
 
   :host:first-of-type::before {
     align-self: end;
-    height: calc(100% - var(--icon-size));
+    height: calc(100% - var(--timeline-circle-size));
   }
 
   :host:last-of-type::before {
@@ -57,45 +53,18 @@
     height: 50%;
   }
 
-  :host .icon-box {
-    --border-radius: 0.75em;
-
-    position: relative;
+  :host > .icon {
     grid-area: icon;
+    align-self: center;
 
-    width: var(--icon-size);
-    height: var(--icon-size);
+    width: var(--timeline-circle-size);
+    height: var(--timeline-circle-size);
 
-    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)
-    );
+    background-color: var(--timeline-circle-background);
 
-    border-radius: var(--border-radius);
-    padding: calc(var(--icon-size) / 4);
-
-    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;
+    border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+    border-radius: 100%;
+    padding: calc(var(--timeline-circle-size) * 0.2);
   }
 
   :host .title {
@@ -103,10 +72,10 @@
     align-self: center;
 
     font-family: var(--font-family-headings);
-    font-size: calc(var(--icon-size) / 2);
+    font-size: calc(var(--timeline-circle-size) / 2);
     font-weight: bold;
     text-align: start;
-    margin-block: 0;
+    margin-block: calc(var(--timeline-circle-size) / 4);
   }
 
   :host .text {
@@ -116,7 +85,5 @@
     margin-block: 0;
     line-height: 1.5;
     text-align: justify;
-
-    margin-block: calc(var(--icon-size) / 4);
   }
 </style>

src/components/profile.webc

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

src/components/trait-card.webc

@@ -1,4 +1,7 @@
 <div webc:root="override">
+  <div class="icon-box">
+    <icon :icon="icon"></icon>
+  </div>
   <div class="content">
     <h3 class="title">
       <slot name="title"></slot>
@@ -6,20 +9,18 @@
     <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: 1em;
+    padding-block: 2em 1em;
     margin-inline: var(--spacing-inline);
 
     @media (min-width: 40em) {
@@ -27,6 +28,34 @@
     }
   }
 
+  :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);
@@ -46,8 +75,6 @@
     box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
 
     z-index: 0;
-
-    overflow: clip;
   }
 
   :host .content::before {
@@ -71,17 +98,6 @@
 
   :host .title {
     font-size: 1.75em;
-  }
-
-  :host .icon {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    width: 18em;
-    height: 18em;
-
-    opacity: 0.15;
-    transform: translate(1.75em, 5em);
+    margin-block-start: 0.5em;
   }
 </style>

src/sebin/sebin.11tydata.js

@@ -21,7 +21,7 @@ const firstName = 'Sebin',
   orientation = 'gay',
   position = 'vers, prefers top',
   height = 210, // cm
-  weight = 174, // kg
+  weight = 124, // 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 = 192, // cm
-  weight = 164, // kg
+  height = 227, // cm
+  weight = 175, // kg
   colors = [
     { name: 'Front', value: '#e7c7b1' },
     { name: 'Arms, legs', value: '#493428' },