From 790b77b424382ef9122ddeddb5829d2b25b99ed7 Mon Sep 17 00:00:00 2001
From: Keith Daulton <kdaulton@d13design.com>
Date: Wed, 4 Dec 2024 00:27:43 -0500
Subject: [PATCH] Adds responsive sizing

---
 assets/styles/site.css             | 18 ++++++++--
 src/components/phone-hero/index.ts | 55 +++++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/assets/styles/site.css b/assets/styles/site.css
index c2f5946..2294d46 100644
--- a/assets/styles/site.css
+++ b/assets/styles/site.css
@@ -33,7 +33,7 @@
   --font-weight-bold: 700;
 
   /* modular scale tokens - https://docs.google.com/spreadsheets/d/1hX1n-Z9jlRxA6zbIf2z8VYe56AYGVC_M2xTw9SNGwyc/edit#gid=0 */
-  /* --size-scale: 1.333;
+  --size-scale: 1.2;
   --size--5: calc(pow(var(--size-scale), -5) * 1rem);
   --size--4: calc(pow(var(--size-scale), -4) * 1rem);
   --size--3: calc(pow(var(--size-scale), -3) * 1rem);
@@ -54,8 +54,9 @@
   --size-12: calc(pow(var(--size-scale), 12) * 1rem);
   --size-13: calc(pow(var(--size-scale), 13) * 1rem);
   --size-14: calc(pow(var(--size-scale), 14) * 1rem);
-  --size-15: calc(pow(var(--size-scale), 15) * 1rem); */
+  --size-15: calc(pow(var(--size-scale), 15) * 1rem);
 
+  /* pow() is finally baseline!
   --size--5: 0.24rem;
   --size--4: 0.32rem;
   --size--3: 0.42rem;
@@ -82,6 +83,7 @@
   --size-18: 176.58rem;
   --size-19: 235.38rem;
   --size-20: 313.76rem;
+  */
 
   /* spacing tokens */
   --spacing-xs: var(--size--5);
@@ -166,6 +168,18 @@
   --color-accent-08: #ffcc00;
 }
 
+@media (min-width: 640px) {
+  :root {
+    --size-scale: 1.26;
+  }
+}
+
+@media (min-width: 800px) {
+  :root {
+    --size-scale: 1.333;
+  }
+}
+
 /* semantic color tokens */
 :root[data-mode='auto'],
 :root[data-mode='light'] {
diff --git a/src/components/phone-hero/index.ts b/src/components/phone-hero/index.ts
index 9479e39..07f0b39 100644
--- a/src/components/phone-hero/index.ts
+++ b/src/components/phone-hero/index.ts
@@ -11,24 +11,36 @@ export class KdPhoneHero extends KdBaseElement {
       box-sizing: border-box;
     }
     :host {
-      --kd-phone-hero-block-offset: 12vh;
+      --kd-phone-hero-block-offset: 30vh;
       --kd-phone-hero-content-width: 80;
       --kd-phone-hero-content-gap: 20px;
       display: block;
       contain: content;
       height: 100%;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-      background-size: auto 100%;
-      background-position: left calc((var(--kd-phone-hero-content-width) * 1vw) + var(--kd-phone-hero-content-gap))
-        bottom calc(-1 * var(--kd-phone-hero-block-offset));
-      background-image: var(--kd-phone-hero-background-image, none);
-
-      animation-name: phone-home;
-      animation-duration: 0.65s;
+      background-image: none;
+
       will-change: contents;
     }
 
+    @media (max-width: 623px) {
+      :host::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        content: '';
+        display: block;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: 100% auto;
+        background-position: left 50% top 50vh;
+        background-image: var(--kd-phone-hero-background-image, none);
+        opacity: 0.3;
+        z-index: -1;
+      }
+    }
+
     @media (min-width: 480px) {
       :host {
         --kd-phone-hero-block-offset: 30vh;
@@ -39,6 +51,14 @@ export class KdPhoneHero extends KdBaseElement {
     @media (min-width: 624px) {
       :host {
         --kd-phone-hero-content-width: 60;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: auto 100%;
+        background-position: left calc((var(--kd-phone-hero-content-width) * 1vw) + var(--kd-phone-hero-content-gap))
+          bottom calc(-1 * var(--kd-phone-hero-block-offset));
+        background-image: var(--kd-phone-hero-background-image, none);
+        animation-name: phone-home;
+        animation-duration: 0.65s;
       }
     }
 
@@ -65,13 +85,24 @@ export class KdPhoneHero extends KdBaseElement {
       height: 100%;
       max-width: 900px;
       margin-inline: auto;
-      padding-block-start: var(--kd-phone-hero-block-offset);
+      padding-block-start: calc(0.4 * var(--kd-phone-hero-block-offset));
       padding-inline: var(--spacing-md);
     }
 
+    @media (min-width: 624px) {
+      .container {
+        padding-block-start: var(--kd-phone-hero-block-offset);
+      }
+    }
+
     .content {
       display: block;
-      max-inline-size: calc(var(--kd-phone-hero-content-width) * 1%);
+    }
+
+    @media (min-width: 624px) {
+      .content {
+        max-inline-size: calc(var(--kd-phone-hero-content-width) * 1%);
+      }
     }
   `;