From 0157f20ae95b8afa25dad35360f8204c0d621398 Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Sat, 17 Jan 2026 16:22:11 +0000 Subject: [PATCH] fix: update shop layout and CSS selectors for shop-root - Fix asset paths in shop layout (css/app.css, js/app.js) - Add Google Fonts preconnect and stylesheet link - Update theme-layer2-attributes.css to target both .preview-frame and .shop-root so theme styles apply to real shop pages - Properly duplicate attribute selectors (e.g., [data-mood="warm"]) for both .preview-frame and .shop-root Co-Authored-By: Claude Opus 4.5 --- assets/css/theme-layer2-attributes.css | 192 ++++++++++++------ .../components/layouts/shop.html.heex | 10 +- 2 files changed, 141 insertions(+), 61 deletions(-) diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css index 3839e0e..9953e5f 100644 --- a/assets/css/theme-layer2-attributes.css +++ b/assets/css/theme-layer2-attributes.css @@ -3,7 +3,8 @@ ======================================== */ /* Mood - Default (Neutral) */ -.preview-frame { +.preview-frame, +.shop-root { --t-surface-base: #ffffff; --t-surface-raised: #ffffff; --t-surface-sunken: #f5f5f5; @@ -16,7 +17,8 @@ --t-border-subtle: #f0f0f0; } -.preview-frame[data-mood="warm"] { +.preview-frame[data-mood="warm"], +.shop-root[data-mood="warm"] { --t-surface-base: #fdf8f3; --t-surface-raised: #fffcf8; --t-surface-sunken: #f5ebe0; @@ -27,7 +29,8 @@ --t-border-subtle: #f0ebe4; } -.preview-frame[data-mood="cool"] { +.preview-frame[data-mood="cool"], +.shop-root[data-mood="cool"] { --t-surface-base: #f4f7fb; --t-surface-raised: #f8fafc; --t-surface-sunken: #e8eff7; @@ -38,7 +41,8 @@ --t-border-subtle: #e8eff5; } -.preview-frame[data-mood="dark"] { +.preview-frame[data-mood="dark"], +.shop-root[data-mood="dark"] { --t-surface-base: #0a0a0a; --t-surface-raised: #171717; --t-surface-sunken: #000000; @@ -55,7 +59,8 @@ /* Typography Presets - Curated font pairings based on e-commerce research */ /* Default (Clean) - Minimal & Modern: Manrope + Inter */ -.preview-frame { +.preview-frame, +.shop-root { --t-font-heading: var(--p-font-manrope); --t-font-body: var(--p-font-inter); --t-heading-weight: 600; @@ -64,7 +69,8 @@ /* Editorial - Bold & Editorial: Playfair Display + Raleway */ /* Best for: fashion, lifestyle brands */ -.preview-frame[data-typography="editorial"] { +.preview-frame[data-typography="editorial"], +.shop-root[data-typography="editorial"] { --t-font-heading: var(--p-font-playfair); --t-font-body: var(--p-font-raleway); --t-heading-weight: 500; @@ -73,7 +79,8 @@ /* Modern - Tech & Futuristic: Space Grotesk + Inter */ /* Best for: tech products, gadget accessories */ -.preview-frame[data-typography="modern"] { +.preview-frame[data-typography="modern"], +.shop-root[data-typography="modern"] { --t-font-heading: var(--p-font-space); --t-font-body: var(--p-font-inter); --t-heading-weight: 500; @@ -82,7 +89,8 @@ /* Classic - Luxury & Elegant: Cormorant Garamond + Source Serif 4 */ /* Best for: high-end goods, premium products */ -.preview-frame[data-typography="classic"] { +.preview-frame[data-typography="classic"], +.shop-root[data-typography="classic"] { --t-font-heading: var(--p-font-cormorant); --t-font-body: var(--p-font-source-serif); --t-heading-weight: 500; @@ -91,7 +99,8 @@ /* Friendly - Playful & Quirky: Fraunces + Work Sans */ /* Best for: creative products, novelty gifts */ -.preview-frame[data-typography="friendly"] { +.preview-frame[data-typography="friendly"], +.shop-root[data-typography="friendly"] { --t-font-heading: var(--p-font-fraunces); --t-font-body: var(--p-font-work-sans); --t-heading-weight: 600; @@ -100,7 +109,8 @@ /* Minimal - Modern Sans-Serif: DM Sans + Source Serif 4 */ /* Best for: design-forward, contemporary homeware */ -.preview-frame[data-typography="minimal"] { +.preview-frame[data-typography="minimal"], +.shop-root[data-typography="minimal"] { --t-font-heading: var(--p-font-dm-sans); --t-font-body: var(--p-font-source-serif); --t-heading-weight: 500; @@ -109,7 +119,8 @@ /* Impulse - Light & Airy: Raleway + Inter */ /* Best for: wellness, beauty, sustainable goods */ -.preview-frame[data-typography="impulse"] { +.preview-frame[data-typography="impulse"], +.shop-root[data-typography="impulse"] { --t-font-heading: var(--p-font-raleway); --t-font-body: var(--p-font-inter); --t-heading-weight: 300; @@ -117,7 +128,8 @@ } /* Shape - Default (Soft) */ -.preview-frame { +.preview-frame, +.shop-root { --t-radius-sm: var(--p-radius-sm); --t-radius-md: var(--p-radius-md); --t-radius-lg: var(--p-radius-lg); @@ -127,7 +139,8 @@ --t-radius-image: var(--p-radius-md); } -.preview-frame[data-shape="sharp"] { +.preview-frame[data-shape="sharp"], +.shop-root[data-shape="sharp"] { --t-radius-sm: 0; --t-radius-md: 0; --t-radius-lg: 0; @@ -137,7 +150,8 @@ --t-radius-image: 0; } -.preview-frame[data-shape="round"] { +.preview-frame[data-shape="round"], +.shop-root[data-shape="round"] { --t-radius-sm: var(--p-radius-md); --t-radius-md: var(--p-radius-lg); --t-radius-lg: var(--p-radius-xl); @@ -147,7 +161,8 @@ --t-radius-image: var(--p-radius-lg); } -.preview-frame[data-shape="pill"] { +.preview-frame[data-shape="pill"], +.shop-root[data-shape="pill"] { --t-radius-sm: var(--p-radius-full); --t-radius-md: var(--p-radius-full); --t-radius-lg: var(--p-radius-xl); @@ -158,20 +173,24 @@ } /* Density - Default (Balanced) */ -.preview-frame { +.preview-frame, +.shop-root { --t-density: 1; } -.preview-frame[data-density="spacious"] { +.preview-frame[data-density="spacious"], +.shop-root[data-density="spacious"] { --t-density: 1.25; } -.preview-frame[data-density="compact"] { +.preview-frame[data-density="compact"], +.shop-root[data-density="compact"] { --t-density: 0.85; } /* Density-aware spacing variables */ -.preview-frame { +.preview-frame, +.shop-root { --space-xs: calc(var(--p-space-2) * var(--t-density)); --space-sm: calc(var(--p-space-3) * var(--t-density)); --space-md: calc(var(--p-space-4) * var(--t-density)); @@ -186,12 +205,14 @@ } /* Standard header - logo left, nav center, cart right */ -.preview-frame[data-header="standard"] .shop-header { +.preview-frame[data-header="standard"] .shop-header, +.shop-root[data-header="standard"] .shop-header { justify-content: space-between; } /* Centered header - logo on top, nav and cart on same row below */ -.preview-frame[data-header="centered"] .shop-header { +.preview-frame[data-header="centered"] .shop-header, +.shop-root[data-header="centered"] .shop-header { flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; @@ -199,47 +220,56 @@ padding-bottom: 1.5rem; } -.preview-frame[data-header="centered"] .shop-logo { +.preview-frame[data-header="centered"] .shop-logo, +.shop-root[data-header="centered"] .shop-logo { width: 100%; justify-content: center; text-align: center; } -.preview-frame[data-header="centered"] .shop-nav { +.preview-frame[data-header="centered"] .shop-nav, +.shop-root[data-header="centered"] .shop-nav { justify-content: center; } -.preview-frame[data-header="centered"] .shop-cart { +.preview-frame[data-header="centered"] .shop-cart, +.shop-root[data-header="centered"] .shop-cart { /* Cart flows inline with nav, no absolute positioning */ } /* Left header - logo and nav grouped left, cart right */ -.preview-frame[data-header="left"] .shop-header { +.preview-frame[data-header="left"] .shop-header, +.shop-root[data-header="left"] .shop-header { justify-content: flex-start; gap: 2rem; } -.preview-frame[data-header="left"] .shop-cart { +.preview-frame[data-header="left"] .shop-cart, +.shop-root[data-header="left"] .shop-cart { margin-left: auto; } /* Sticky header */ -.preview-frame[data-sticky="true"] .shop-header { +.preview-frame[data-sticky="true"] .shop-header, +.shop-root[data-sticky="true"] .shop-header { position: sticky; top: 0; z-index: 50; } /* Layout Width */ -.preview-frame[data-layout="contained"] .max-w-7xl { +.preview-frame[data-layout="contained"] .max-w-7xl, +.shop-root[data-layout="contained"] .max-w-7xl { max-width: 1024px; } -.preview-frame[data-layout="wide"] .max-w-7xl { +.preview-frame[data-layout="wide"] .max-w-7xl, +.shop-root[data-layout="wide"] .max-w-7xl { max-width: 1280px; } -.preview-frame[data-layout="full"] .max-w-7xl { +.preview-frame[data-layout="full"] .max-w-7xl, +.shop-root[data-layout="full"] .max-w-7xl { max-width: 100%; padding-left: 2rem; padding-right: 2rem; @@ -247,22 +277,30 @@ /* Card Shadow */ .preview-frame[data-shadow="none"] .product-card, -.preview-frame[data-shadow="none"] .category-card { +.shop-root[data-shadow="none"] .product-card, +.preview-frame[data-shadow="none"] .category-card, +.shop-root[data-shadow="none"] .category-card { box-shadow: none; } .preview-frame[data-shadow="sm"] .product-card, -.preview-frame[data-shadow="sm"] .category-card { +.shop-root[data-shadow="sm"] .product-card, +.preview-frame[data-shadow="sm"] .category-card, +.shop-root[data-shadow="sm"] .category-card { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .preview-frame[data-shadow="md"] .product-card, -.preview-frame[data-shadow="md"] .category-card { +.shop-root[data-shadow="md"] .product-card, +.preview-frame[data-shadow="md"] .category-card, +.shop-root[data-shadow="md"] .category-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .preview-frame[data-shadow="lg"] .product-card, -.preview-frame[data-shadow="lg"] .category-card { +.shop-root[data-shadow="lg"] .product-card, +.preview-frame[data-shadow="lg"] .category-card, +.shop-root[data-shadow="lg"] .category-card { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } @@ -271,79 +309,99 @@ ============================================= */ /* Density - apply to product grids */ -.preview-frame .product-grid { +.preview-frame .product-grid, +.shop-root .product-grid { gap: var(--space-lg, 1.5rem); } -.preview-frame[data-density="spacious"] .product-grid { +.preview-frame[data-density="spacious"] .product-grid, +.shop-root[data-density="spacious"] .product-grid { gap: calc(var(--space-lg, 1.5rem) * 1.25); } -.preview-frame[data-density="compact"] .product-grid { +.preview-frame[data-density="compact"] .product-grid, +.shop-root[data-density="compact"] .product-grid { gap: calc(var(--space-lg, 1.5rem) * 0.75); } /* Density also affects card padding */ -.preview-frame .product-card > div:last-child { +.preview-frame .product-card > div:last-child, +.shop-root .product-card > div:last-child { padding: var(--space-md, 1rem); } -.preview-frame[data-density="spacious"] .product-card > div:last-child { +.preview-frame[data-density="spacious"] .product-card > div:last-child, +.shop-root[data-density="spacious"] .product-card > div:last-child { padding: calc(var(--space-md, 1rem) * 1.25); } -.preview-frame[data-density="compact"] .product-card > div:last-child { +.preview-frame[data-density="compact"] .product-card > div:last-child, +.shop-root[data-density="compact"] .product-card > div:last-child { padding: calc(var(--space-md, 1rem) * 0.75); } /* Product Text Alignment - targets the product info area inside cards */ -.preview-frame .product-card > div:last-child { +.preview-frame .product-card > div:last-child, +.shop-root .product-card > div:last-child { text-align: var(--t-product-text-align, left); } /* Image Aspect Ratio - targets the image container inside product cards */ -.preview-frame .product-card .product-image-container { +.preview-frame .product-card .product-image-container, +.shop-root .product-card .product-image-container { aspect-ratio: var(--t-image-aspect-ratio, 1 / 1); } /* Font Size Scale - applied to base font (16px is accessible minimum) */ -.preview-frame { +.preview-frame, +.shop-root { font-size: calc(16px * var(--t-font-size-scale, 1)); } /* Heading Weight Override - takes precedence over typography preset */ .preview-frame h1, +.shop-root h1, .preview-frame h2, +.shop-root h2, .preview-frame h3, +.shop-root h3, .preview-frame h4, +.shop-root h4, .preview-frame h5, -.preview-frame h6 { +.shop-root h5, +.preview-frame h6, +.shop-root h6 { font-weight: var(--t-heading-weight-override, var(--t-heading-weight, 600)) !important; } /* Layout Max Width - applied via data attribute for better specificity */ -.preview-frame[data-layout="contained"] .max-w-7xl { +.preview-frame[data-layout="contained"] .max-w-7xl, +.shop-root[data-layout="contained"] .max-w-7xl { max-width: var(--t-layout-max-width, 1100px); } -.preview-frame[data-layout="wide"] .max-w-7xl { +.preview-frame[data-layout="wide"] .max-w-7xl, +.shop-root[data-layout="wide"] .max-w-7xl { max-width: var(--t-layout-max-width, 1400px); } -.preview-frame[data-layout="full"] .max-w-7xl { +.preview-frame[data-layout="full"] .max-w-7xl, +.shop-root[data-layout="full"] .max-w-7xl { max-width: var(--t-layout-max-width, 100%); } /* Button Style - using data attribute approach */ /* Outline button style */ -.preview-frame[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"] { +.preview-frame[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"], +.shop-root[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"] { background-color: transparent !important; color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important; border: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important; } /* Soft button style */ -.preview-frame[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"] { +.preview-frame[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"], +.shop-root[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"] { background-color: hsl(var(--t-accent-h) var(--t-accent-s) 90%) !important; color: hsl(var(--t-accent-h) var(--t-accent-s) 30%) !important; border: 2px solid transparent !important; @@ -403,24 +461,30 @@ /* Applied to interactive elements on hover for visual feedback */ /* Links in body text */ -.preview-frame a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover { +.preview-frame a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover, +.shop-root a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover { color: var(--t-secondary-accent, var(--t-text-primary)); } /* Product card hover effect - subtle accent border */ -.preview-frame .product-card:hover { +.preview-frame .product-card:hover, +.shop-root .product-card:hover { border-color: var(--t-secondary-accent, var(--t-border-default)) !important; } /* Button hover states - darken or use secondary accent */ .preview-frame button:hover, -.preview-frame [role="button"]:hover { +.shop-root button:hover, +.preview-frame [role="button"]:hover, +.shop-root [role="button"]:hover { filter: brightness(0.95); } /* Nav links hover */ .preview-frame .nav-link:hover, -.preview-frame nav a:hover { +.shop-root .nav-link:hover, +.preview-frame nav a:hover, +.shop-root nav a:hover { color: var(--t-secondary-accent, var(--t-text-primary)); } @@ -621,25 +685,32 @@ .preview-frame .text-3xl { font-size: var(--t-heading-lg) !important; } .preview-frame .text-4xl { font-size: var(--t-heading-xl) !important; } .preview-frame .text-5xl, +.shop-root .text-5xl, .preview-frame .text-6xl, +.shop-root .text-6xl, .preview-frame .text-7xl, +.shop-root .text-7xl, .preview-frame .text-8xl, +.shop-root .text-8xl, .preview-frame .text-9xl { font-size: var(--t-heading-display) !important; } /* ============================================= Filter Pills (Collection Page) ============================================= */ -.preview-frame .filter-pills-container { +.preview-frame .filter-pills-container, +.shop-root .filter-pills-container { scrollbar-width: none; -webkit-overflow-scrolling: touch; } -.preview-frame .filter-pills-container::-webkit-scrollbar { +.preview-frame .filter-pills-container::-webkit-scrollbar, +.shop-root .filter-pills-container::-webkit-scrollbar { display: none; } -.preview-frame .filter-pill { +.preview-frame .filter-pill, +.shop-root .filter-pill { flex-shrink: 0; padding: 0.5rem 1rem; font-size: var(--t-text-small); @@ -653,18 +724,21 @@ white-space: nowrap; } -.preview-frame .filter-pill:hover { +.preview-frame .filter-pill:hover, +.shop-root .filter-pill:hover { background-color: var(--t-surface-sunken); color: var(--t-text-primary); } -.preview-frame .filter-pill-active { +.preview-frame .filter-pill-active, +.shop-root .filter-pill-active { background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-color: transparent; } -.preview-frame .filter-pill-active:hover { +.preview-frame .filter-pill-active:hover, +.shop-root .filter-pill-active:hover { background-color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 5%)); color: var(--t-text-inverse); } diff --git a/lib/simpleshop_theme_web/components/layouts/shop.html.heex b/lib/simpleshop_theme_web/components/layouts/shop.html.heex index 3091f49..e8a3990 100644 --- a/lib/simpleshop_theme_web/components/layouts/shop.html.heex +++ b/lib/simpleshop_theme_web/components/layouts/shop.html.heex @@ -5,8 +5,14 @@ <.live_title><%= assigns[:page_title] || @theme_settings.site_name %> - -