Updates styles

Author: d13

assets/bundle.js

@@ -96,6 +96,13 @@
   --elevation-modal: 1300;
   --elevation-popover: 1400;
 
+  /* roundness tokens */
+  --roundness-none: 0;
+  --roundness-sm: var(--size--5);
+  --roundness-md: var(--size--2);
+  --roundness-lg: var(--size-0);
+  --roundness-xl: var(--size-20);
+
   /* raw color tokens */
   --color-raw-blue-05: rgb(2, 17, 38);
   --color-raw-blue-10: rgb(4, 28, 56);
@@ -143,6 +150,11 @@
   --color-link-hover-foreground: var(--color-raw-blue-40);
   --color-link-visited-foreground: color-mix(in srgb, var(--color-raw-blue-50) 65%, var(--color-raw-red-50));
 
+  --color-action-foreground: var(--color-raw-blue-50);
+  --color-action-background: var(--color-raw-blue-10);
+  --color-action-hover-foreground: var(--color-raw-blue-50);
+  --color-action-hover-background: var(--color-raw-blue-20);
+
   --color-secondary-foreground: var(--color-raw-neutral-10);
   --color-secondary-background: var(--color-raw-neutral-90);
 
@@ -168,7 +180,7 @@
     --color-link-visited-foreground: color-mix(in srgb, var(--color-raw-blue-50) 65%, var(--color-raw-red-50));
 
     --color-secondary-foreground: var(--color-raw-neutral-90);
-    --color-secondary-background: var(--color-raw-neutral-20);
+    --color-secondary-background: var(--color-raw-neutral-05);
 
     --color-footer-foreground: var(--color-raw-neutral-70);
     --color-footer-background: #000;
@@ -407,6 +419,7 @@ kbd kbd {
   gap: var(--spacing-sm);
   padding-inline: var(--spacing-md);
   padding-block: var(--spacing-sm);
+  -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
 }
 .header--pinned {
@@ -440,7 +453,7 @@ kbd kbd {
   align-items: flex-start;
   gap: var(--spacing-md);
   padding-inline: var(--spacing-md);
-  padding-block: var(--spacing-sm);
+  padding-block: var(--spacing-xl);
   background-color: var(--color-footer-background);
   color: var(--color-footer-foreground);
 }

assets/styles/site.css

@@ -336,8 +336,11 @@ <h3 slot="title">Cruise Microsite</h3>
       </section>
       <section id="contact" class="contact">
         <div class="container">
-          <h2>Contact</h2>
-          <p>Drop me a line</p>
+          <h2 class="h-type-tight">
+            Contact
+            <small class="h-block">Let me know what I can do for you</small>
+          </h2>
+
           <nav>
             <kd-link-button href="tel:19548052603">Call</kd-link-button>
             <kd-link-button href="mailto:[email protected]">Email</kd-link-button>

index.html

@@ -4,7 +4,7 @@ import esbuildPluginTsc from 'esbuild-plugin-tsc';
 export function createBuildSettings(options) {
   const plugins = [
     esbuildPluginTsc({
-      force: true,
+      force: false,
     }),
   ];
 

scripts/settings.js

@@ -6,7 +6,24 @@ export const buttonBase = css`
   }
 
   .button {
+    box-sizing: border-box;
     appearance: none;
     display: inline-block;
+    padding: var(--spacing-xs) var(--spacing-md);
+    color: var(--color-action-foreground);
+    background-color: var(--color-action-background);
+    border: 1px solid transparent;
+    transition: background-color 0.2s ease;
+    text-align: center;
+  }
+
+  .button:hover {
+    color: var(--color-action-hover-foreground);
+    background-color: var(--color-action-hover-background);
+  }
+
+  .button:focus {
+    outline: 1px solid var(--color-focus-foreground);
+    outline-offset: 1px;
   }
 `;

src/components/button/button.css.ts

@@ -97,21 +97,74 @@ export class KdLifeEvent extends KdBaseElement {
 
       .event {
         flex: 1;
+        min-width: 0;
         display: flex;
         flex-direction: column;
         gap: var(--spacing-lg);
       }
 
+      @media (min-width: 800px) {
+        .event {
+          display: grid;
+          grid-template-columns: 3fr 4fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+            'summary media'
+            'meta meta';
+          gap: var(--spacing-lg) var(--spacing-xl);
+        }
+      }
+
       .date-range {
         line-height: 1;
       }
 
+      .media-zone {
+        grid-area: media;
+      }
+
+      .media-container {
+        position: relative;
+        overflow: hidden;
+      }
+
       .media {
         max-inline-size: 100%;
         block-size: auto;
+        vertical-align: middle;
+      }
+
+      @media (min-width: 800px) {
+        .media {
+          width: 100%;
+          aspect-ratio: 16 / 9;
+          /* height: 100%; */
+          object-fit: contain;
+          object-position: center;
+        }
+      }
+
+      .media-cover {
+        position: absolute;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        /* height: 100%; */
+        object-fit: cover;
+        object-position: center;
+        z-index: var(--elevation-behind);
+        filter: blur(16px) saturate(50%);
+        opacity: 0.2;
+      }
+
+      @media (max-width: 799px) {
+        .media-cover {
+          display: none;
+        }
       }
 
       .summary {
+        grid-area: summary;
+        display: block;
       }
 
       .title {
@@ -124,6 +177,7 @@ export class KdLifeEvent extends KdBaseElement {
       }
 
       .meta {
+        grid-area: meta;
         display: block;
       }
 
@@ -180,14 +234,24 @@ export class KdLifeEvent extends KdBaseElement {
     </div>`;
   }
 
+  private renderMedia() {
+    if (this.asset === undefined) return nothing;
+    return html`<div class="media-zone">
+      <div class="media-container">
+        <img class="media-cover" src="${this.asset}" alt="" />
+        <img class="media" src="${this.asset}" alt="" />
+      </div>
+    </div>`;
+  }
+
   override render() {
     return html`
       <div class="timeline-zone">
         <span class="year2">${this.endingDate?.getFullYear()}</span>
         <span class="event-tag"></span>
       </div>
       <article class="event">
-        ${this.asset ? html`<img class="media" src="${this.asset}" alt="" />` : nothing}
+        ${this.renderMedia()}
         <div class="summary">
           ${this.renderDateRange()}
           <slot name="title" class="title"></slot>

src/components/life-events/life-event.ts

@@ -48,7 +48,7 @@ export class KdLifeEvents extends KdBaseElement {
       .events {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-xl);
+        gap: var(--size-5);
       }
     `,
   ];

src/components/life-events/life-events.ts

@@ -5,6 +5,11 @@ import { KdBaseElement } from '../base/base-element';
 @customElement('kd-phone-hero')
 export class KdPhoneHero extends KdBaseElement {
   static override styles = css`
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
     :host {
       --kd-phone-hero-block-offset: 12vh;
       --kd-phone-hero-content-width: 80;