style: refactor DialogCard component styles for responsive design

UXCorpRangel · Sep 8, 2024 · 6e5b05f · 6e5b05f
1 parent 4961ffa
commit 6e5b05f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 60 deletions.
diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro
@@ -10,29 +10,18 @@ import { Icon } from 'astro-icon/components';
 
 const BASE_URL = import.meta.env.BASE_URL;
 
-type CardSize = 'small' | 'large';
+type Props = AnaCard;
+const { id, name, description, image, category, level = 1 } = Astro.props;
 
-interface Props extends AnaCard {
-  size?: CardSize;
-}
-const { id, name, description, image, category, level = 1, size = 'small' } = Astro.props;
-
-function getStyledCard(cat: CardCategory, size: CardSize) {
-  return {
-    '--category-color': cardCategoryColors[cat],
-    '--size': `${size === 'large' ? '25vw' : '12vw'};`
-  };
+function getStyledCard(cat: CardCategory) {
+  return { '--category-color': cardCategoryColors[cat] };
 }
 ---
 
 <div class={`atropos card-${id}`}>
   <div class="atropos-scale">
     <div class="atropos-rotate">
-      <div
-        class="atropos-inner card-wrapper"
-        style={getStyledCard(category, size)}
-        data-card-id={id}
-      >
+      <div class="atropos-inner card-wrapper" style={getStyledCard(category)} data-card-id={id}>
         <div class="card" data-card-id={id} data-card-level={level}>
           <div class="card-front" data-card-id={id} data-card-level={level}>
             <h1 class="card-title">{name}</h1>
@@ -66,40 +55,58 @@ function getStyledCard(cat: CardCategory, size: CardSize) {
 </div>
 
 <style>
-  .card {
-    --bgcolor: var(--card-bgcolor-1);
-    --border-color: var(--card-border-color);
-    --border-size: calc(var(--size) / 43);
-    --border-radius: calc(var(--size) / 18);
-
-    cursor: pointer;
-    position: relative;
-    aspect-ratio: 15 / 23;
-    width: var(--size);
-    container: card / inline-size;
-    transition: transform 0.6s ease-in-out;
-
-    & .card-front {
-      aspect-ratio: 15 / 23;
-      width: var(--size);
-      box-sizing: border-box;
-      content-visibility: auto;
+  .card-wrapper {
+    --size: 27vw;
+
+    @media (width <= 1024px) {
+      --size: 45vw;
+    }
+    @media (width <= 768px) {
+      --size: 60vw;
+    }
 
-      position: absolute;
-      inset: 0;
+    @media (width <= 640px) {
+      --size: 66vw;
+    }
 
-      display: flex;
-      overflow: hidden;
-      user-select: none;
-      pointer-events: none;
-      flex-direction: column;
+    border-radius: calc(var(--size, 12vw) / 18);
+    animation: card-shadow-current 1.5s infinite alternate;
 
-      color: var(--text-color);
-      background-color: var(--bgcolor);
+    .card {
+      --bgcolor: var(--card-bgcolor-1);
+      --border-color: var(--card-border-color);
+      --border-size: calc(var(--size) / 43);
+      --border-radius: calc(var(--size) / 18);
 
-      border-radius: var(--border-radius);
-      border: var(--border-size) solid var(--border-color);
-      box-shadow: 0 0 1.5rem 0.1rem rgb(from var(--category-color) r g b / 0.4);
+      cursor: zoom-out;
+      position: relative;
+      aspect-ratio: 15 / 23;
+      width: var(--size);
+      container: card / inline-size;
+      transition: transform 0.6s ease-in-out;
+
+      & .card-front {
+        aspect-ratio: 15 / 23;
+        width: var(--size);
+        box-sizing: border-box;
+        content-visibility: auto;
+
+        position: absolute;
+        inset: 0;
+
+        display: flex;
+        overflow: hidden;
+        user-select: none;
+        pointer-events: none;
+        flex-direction: column;
+
+        color: var(--text-color);
+        background-color: var(--bgcolor);
+
+        border-radius: var(--border-radius);
+        border: var(--border-size) solid var(--border-color);
+        box-shadow: 0 0 1.5rem 0.1rem rgb(from var(--category-color) r g b / 0.4);
+      }
     }
   }
 
@@ -109,10 +116,5 @@ function getStyledCard(cat: CardCategory, size: CardSize) {
     &.hidden-atropos {
       scale: 0;
     }
-
-    & .atropos-inner {
-      border-radius: calc(var(--size, 12vw) / 18);
-      animation: card-shadow-current 1.5s infinite alternate;
-    }
   }
 </style>
diff --git a/src/components/Cards/DialogCard.astro b/src/components/Cards/DialogCard.astro
@@ -13,7 +13,6 @@ import DialogMenu from './DialogMenu.astro';
   .dialog-card {
     border: none;
     outline: none;
-    padding: 9cqb;
     overflow: visible;
     background-color: transparent;
     z-index: var(--z-index-modal);
@@ -108,7 +107,6 @@ import DialogMenu from './DialogMenu.astro';
     const anaCard = document.querySelector<AnaCard>(cardSelector);
 
     cardWrapper?.setAttribute('style', anaCard?.getAttribute('style') ?? '');
-    cardWrapper?.style.setProperty('--size', '25vw');
 
     if (anaCard && titleEl && imageEl && contentEl && footerEl && categoryEl && levelEl) {
       const {

diff --git a/src/components/Cards/DialogMenu.astro b/src/components/Cards/DialogMenu.astro
@@ -26,12 +26,15 @@ const buttons = [
     --placement: 1.5rem;
 
     position: absolute;
-    inset-inline-end: calc(var(--placement) * -1);
-    inset-block-start: calc(var(--placement) * 6);
+    inset-inline: var(--placement);
+    inset-block: auto calc(var(--placement) * -3);
+    padding-inline: var(--placement);
 
-    @media (width <= 576px) {
-      inset-inline: 0;
-      inset-block-start: calc(var(--placement) * -6);
+    @media (width >= 640px) {
+      padding-inline: 0;
+
+      inset-block: calc(var(--placement) * 6) auto;
+      inset-inline: auto calc(var(--placement) * -3);
     }
 
     & .menu {
@@ -40,7 +43,7 @@ const buttons = [
       positi: relative;
       flex-direction: column;
 
-      @media (width <= 576px) {
+      @media (width <= 640px) {
         gap: 1.75rem;
         align-items: center;
         flex-direction: row-reverse;
@@ -77,7 +80,7 @@ const buttons = [
           box-shadow var(--transition),
           background-image var(--transition);
 
-        @media (width <= 576px) {
+        @media (width <= 640px) {
           &::before {
             display: none;
           }