.

2026-09-13 16:43:38 +03:30
parent d02c27fef4
commit d4e63d4643
58 changed files with 275 additions and 71 deletions
@@ -84,7 +84,7 @@ function metaLine(card: (typeof gallery.value)[number]) {
 <template>
  <div class="page calite-hub">
    <header class="calite-hub__nav">
-      <button type="button" class="icon-btn" aria-label="بازگشت" @click="goBack">
+      <button type="button" class="icon-btn mobile-only" aria-label="بازگشت" @click="goBack">
        <IconChevronBack :size="20" />
      </button>
      <h1>کالیته‌ها</h1>
@@ -408,4 +408,86 @@ html.dark .calite-card__copy small {
 html.dark .calite-card__copy small {
  color: #c5d0de;
 }
+
+@media (min-width: 768px) {
+  .calite-hub {
+    padding: 0;
+    max-width: none;
+    margin: 0;
+    overflow: visible;
+    min-height: auto;
+    background: #f4f0ed;
+  }
+
+  .calite-hub__scroll {
+    padding: 8px 28px 40px;
+    max-width: 1120px;
+    margin-inline: auto;
+    width: 100%;
+    gap: 16px;
+  }
+
+  .calite-hub__nav {
+    grid-template-columns: 1fr auto;
+    max-width: 1120px;
+    width: 100%;
+    margin-inline: auto;
+    padding: 28px 28px 0;
+  }
+
+  .calite-hub__nav h1 {
+    text-align: start;
+    font-size: 1.5rem;
+  }
+
+  .calite-hub__lead {
+    font-size: 0.9375rem;
+    text-align: start;
+  }
+
+  .calite-hub__chips {
+    flex-wrap: wrap;
+  }
+
+  .calite-chip {
+    height: 40px;
+    padding: 0 18px;
+    font-size: 0.8125rem;
+  }
+
+  .calite-hub__list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .calite-card,
+  .calite-card__copy {
+    min-height: 176px;
+  }
+
+  .calite-card__copy {
+    padding: 20px 20px 20px 38%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .calite-hub__nav,
+  .calite-hub__scroll {
+    padding-inline: 40px;
+  }
+
+  .calite-hub__scroll {
+    padding-bottom: 48px;
+  }
+
+  .calite-hub__list {
+    gap: 20px;
+  }
+
+  .calite-card,
+  .calite-card__copy {
+    min-height: 200px;
+  }
+}
 </style>