Resp design + Final changes

.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
   extends: ['standard', 'plugin:prettier/recommended'],
-}
+};

.prettierrc.cjs

@@ -1,6 +1,8 @@
 module.exports = {
   singleQuote: true,
-  semi: false,
+  trailingComma: 'all',
+  jsxSingleQuote: true,
+  semi: true,
   printWidth: 80,
   bracketSpacing: true,
   plugins: [
@@ -17,4 +19,4 @@ module.exports = {
       },
     },
   ],
-}
+};

README.md

@@ -1,18 +1,25 @@
 # X.oti.X Designs
+
 - Ecommerce store for X.oti.X Designs
 - Theme development and customization
 - V2 added rendering with React
+
 ### 🚀 LIVE [ Development store ] 🌎 https://xotix-designs-devtest.myshopify.com/
-### 🔑 STORE PASSWORD 🔑 *naimay*
+
+### 🔑 STORE PASSWORD 🔑 _naimay_
+
 <br />
 
 ## 📺 DEMO
+
 ![](https://github.com/Philight/xotix-designs-v2/blob/main/preview/preview.gif)
 
 ## 🖋️ SKETCH
+
 - Figma: <a href="https://www.figma.com/file/BPrAzyBKzY6vQ8bv0hhBvF/XotiX-Designs?type=design&node-id=0%3A1&mode=design&t=Q011aPoRlkkX582r-1" target="_blank">Design doc</a>
 
 ## 🧰 BUILT WITH
+
 - Shopify
 - HTML [ *Liquid.js* ]
 - CSS [ *TailwindCSS* ]
@@ -23,6 +30,7 @@
 - react-scroll-parallax
 
 #### BUILD & DEPLOYMENT
+
 - vite
 - Shopify CLI
 
@@ -32,7 +40,7 @@
 
 <code>[environments.env1]
 store = "my-store.myshopify.com"
-password  = "DEVELOPMENT_KEY"
+password = "DEVELOPMENT_KEY"
 theme = "THEME_ID"
 path = "."
 allow-live = true
@@ -43,7 +51,11 @@ allow-live = true
 In the project directory, you can run:
 
 ### `npm run dev`
+
 ### `npm run build`
+
 ### `npm run deploy`
+
 ### `npm run download`
-### `npm run format`
+
+### `npm run format`

assets/manifest.json

@@ -298,17 +298,17 @@
       "pinterest-4f0a1b55.svg",
       "wolt-70002b4b.svg"
     ],
-    "file": "index-192ab370.js",
+    "file": "index-18768012.js",
     "isEntry": true,
     "src": "frontend/entrypoints/index.jsx"
   },
   "frontend/entrypoints/react.css": {
-    "file": "react-1a683d25.css",
+    "file": "react-2cfb4f43.css",
     "isEntry": true,
     "src": "frontend/entrypoints/react.css"
   },
   "frontend/entrypoints/theme.css": {
-    "file": "theme-4f3b28ae.css",
+    "file": "theme-fdd33d9b.css",
     "isEntry": true,
     "src": "frontend/entrypoints/theme.css"
   }

frontend/assets/css/base.css

@@ -92,3 +92,29 @@ input[type='number'] {
 a {
   @apply cursor-pointer;
 }
+
+.article {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-heading text-white;
+  }
+  p,
+  ul,
+  li {
+    @apply mb-4 text-lg;
+  }
+  img {
+    @apply md:-mx-8 lg:-mx-16;
+
+    @media (min-width: 48em) {
+      width: calc(100% + 4rem);
+      max-width: 100vw;
+    }
+    @media (min-width: 64em) {
+      width: calc(100% + 8rem);
+    }
+  }
+}

frontend/assets/css/classes.css

@@ -1,24 +1,5 @@
-.prose {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
 .page-max-w {
   @apply mx-auto max-w-custom px-page-outer;
-  /*
-  padding: 0 var(--space-outer);
-  max-width: var(--max-width);
-  margin-left: auto;
-  margin-right: auto;
-*/
 }
 
 .section-spacing {
@@ -54,42 +35,52 @@
 .heading {
   @apply font-heading;
 }
-
 .heading--lg {
-  @apply text-5xl tracking-2;
+  @apply text-2xl tab-lg:text-3xl desk-md:text-5xl-minus;
+  @apply tracking-2;
 }
 .heading--md {
-  @apply text-2xl tracking-2;
+  @apply text-lg tab-lg:text-xl desk-md:text-2xl;
+  @apply tracking-2;
 }
 .heading--sm {
-  @apply text-sm tracking-4;
+  @apply text-3xs tab-lg:text-2xs desk-md:text-sm;
+  @apply tracking-4;
 }
 
 .body {
   @apply font-body;
 }
-
 .body--lg {
-  @apply font-body text-2xl tracking-2;
+  @apply text-lg tab-lg:text-xl desk-md:text-2xl;
+  @apply tracking-2;
 }
 .body--md {
-  @apply font-body text-base-plus tracking-2;
+  @apply text-base desk-md:text-base-plus;
+  @apply tracking-2;
 }
 .body--sm {
-  @apply font-body text-sm font-light tracking-2;
+  @apply text-3xs tab-lg:text-xs desk-md:text-sm;
+  @apply font-light;
+  @apply tracking-3 desk-md:tracking-2;
 }
 
 .btn-text {
   @apply font-btn;
 }
 .btn-text--sm {
-  @apply font-btn text-xs font-semibold tracking-2;
+  @apply text-xs;
+  @apply font-semibold;
+  @apply tracking-2;
 }
 .btn-text--lg {
-  @apply font-btn text-3xl font-semibold tracking-2;
+  @apply text-xl tab-lg:text-2xl desk-md:text-3xl;
+  @apply font-semibold;
+  @apply tracking-2;
 }
 
 /* BUTTON VARIANTS */
+
 .btn {
   @apply cursor-pointer rounded-sm;
 }
@@ -106,11 +97,21 @@
 .btn--primary {
   @apply btn-text btn-text--sm;
   @apply bg-tertiary;
+
+  transition: background-color 0.5s ease-in-out, color 0.4s ease-in-out;
+  &:hover {
+    @apply bg-tertiary-dark text-white-primary;
+  }
 }
 
 .btn--primary-outline {
   @apply btn-text btn-text--sm;
   @apply border-2 border-tertiary-dark bg-transparent text-tertiary;
+
+  transition: background-color 0.5s ease-in-out, color 0.4s ease-in-out;
+  &:hover {
+    @apply bg-tertiary text-black-primary;
+  }
 }
 
 .btn--outline {
@@ -128,7 +129,8 @@
 }
 
 .btn--large {
-  @apply h-10 min-h-0 p-0 px-8 pt-px;
+  @apply min-h-0 p-0 pt-px;
+  @apply h-8 px-6 desk-md:h-10 desk-md:px-8;
 }
 
 /* FLEX & GRID */
@@ -146,13 +148,16 @@
 
 .carousel-item,
 .carousel-group {
-  @apply shrink-0 grow-0 basis-full;
   transition: transform 0.5s ease-out;
   will-change: transform;
 }
+.carousel-group {
+  @apply shrink-0 grow-0 basis-full;
+  @apply w-full;
+}
 
 .carousel-item {
-  @apply basis-full xl:basis-1/4;
+  @apply shrink-0 grow-0 basis-full xl:basis-1/4;
 }
 
 .carousel-nav {
@@ -164,3 +169,40 @@
     @apply right-0;
   }
 }
+
+.f-grid {
+  --f-grid-gap: theme(space.2); /* gap-2 */
+
+  .f-grid-group {
+    @apply flex shrink-0 grow-0 basis-full flex-wrap;
+    @apply mr-[var(--f-grid-gap)];
+  }
+
+  .f-grid-row {
+    @apply flex shrink-0 grow-0 basis-full;
+  }
+
+  .f-grid-item {
+    @apply shrink-0 grow-0;
+    @apply pr-[var(--f-grid-gap)];
+  }
+
+  &.cols-1 .f-grid-item {
+    @apply basis-[calc((100%+var(--f-grid-gap))/1)];
+  }
+  &.cols-2 .f-grid-item {
+    @apply basis-[calc((100%+var(--f-grid-gap))/2)];
+  }
+  &.cols-3 .f-grid-item {
+    @apply basis-[calc((100%+var(--f-grid-gap))/3)];
+  }
+  &.cols-4 .f-grid-item {
+    @apply basis-[calc((100%+var(--f-grid-gap))/4)];
+  }
+
+  &:not(.rows-1) {
+    .f-grid-row:nth-child(n + 2) .f-grid-item {
+      @apply pt-[var(--f-grid-gap)];
+    }
+  }
+}