Adds responsive sizing

d13 · Dec 4, 2024 · 790b77b · 790b77b
1 parent a6959b1
commit 790b77b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 14 deletions.
diff --git 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
@@ -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%);
+      }
     }
   `;