replace Tailwind in content + collection, remove shop Tailwind entirely (Phase 5c)
- Replace all Tailwind utilities in content.ex and collection.ex with semantic CSS classes (content body, contact form, cards, reviews, etc.) - Delete app-shop.css (Tailwind shop entry point) - Remove shop Tailwind config from config.exs, dev.exs, mix.exs - Remove shop Tailwind stylesheet link from shop_root.html.heex - Add collection filter bar, empty state, and select dropdown styles - Fix filter pill sizing (use theme font vars instead of hardcoded rem) - Fix active pill contrast (tinted accent background + dark accent text) - Fix --t-text-on-accent fallback for pill legibility - Add padding/font-size to .themed-select Shop pages now use zero Tailwind. Admin Tailwind remains for Phase 6. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
parent
04b6ee3f37
commit
f5f6374f7b
@ -66,7 +66,7 @@ Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [setup-wizard.md](doc
|
||||
| ~~34~~ | ~~Phase 2: Extract product inline styles~~ | 33 | 3h | done |
|
||||
| ~~35~~ | ~~Phase 3: Extract layout + cart inline styles~~ | 33 | 3h | done |
|
||||
| ~~36~~ | ~~Phase 4: Extract content + template inline styles~~ | 33 | 2.5h | done |
|
||||
| 37 | Phase 5: Remove Tailwind from shop | 34-36 | 3h | |
|
||||
| ~~37~~ | ~~Phase 5: Remove Tailwind from shop pages~~ | 34-36 | 3h | done |
|
||||
| 38 | Phase 6: Replace DaisyUI (admin) | 37 | 3h | |
|
||||
| 39 | Phase 7: Remove Tailwind entirely | 38 | 1.5h | |
|
||||
| 40 | Phase 8: Optimisation + modern enhancements | 39 | 2.5h | |
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/* Shop CSS - Tailwind without daisyUI
|
||||
This is the CSS bundle for public shop pages (localhost:4001).
|
||||
It excludes daisyUI which is only needed for admin pages.
|
||||
See app.css for the full admin version. */
|
||||
|
||||
@import "tailwindcss" source(none);
|
||||
@source "../css";
|
||||
@source "../js";
|
||||
/* Only scan shop-specific files, not admin pages */
|
||||
@source "../../lib/simpleshop_theme_web/live/shop";
|
||||
@source "../../lib/simpleshop_theme_web/components/shop_components.ex";
|
||||
@source "../../lib/simpleshop_theme_web/components/shop_components";
|
||||
@source "../../lib/simpleshop_theme_web/components/page_templates";
|
||||
@source "../../lib/simpleshop_theme_web/components/layouts/shop.html.heex";
|
||||
@source "../../lib/simpleshop_theme_web/components/layouts/shop_root.html.heex";
|
||||
|
||||
/* Heroicons plugin */
|
||||
@plugin "../vendor/heroicons";
|
||||
|
||||
/* NO daisyUI - shop pages use the custom .themed system instead */
|
||||
|
||||
/* Add variants based on LiveView classes */
|
||||
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
|
||||
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
|
||||
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
|
||||
|
||||
/* Make LiveView wrapper divs transparent for layout */
|
||||
[data-phx-session], [data-phx-teleported-src] { display: contents }
|
||||
|
||||
/* Theme CSS - Layer 1: Primitives (fixed CSS variables) */
|
||||
@import "./theme-primitives.css";
|
||||
|
||||
/* Theme CSS - Layer 2: Shared styles only (.themed selectors)
|
||||
Note: .preview-frame rules are still included but unused on shop pages.
|
||||
This is acceptable as it's only ~5KB and splitting adds complexity. */
|
||||
@import "./theme-layer2-attributes.css";
|
||||
|
||||
/* Theme CSS - Layer 3: Semantic aliases */
|
||||
@import "./theme-semantic.css";
|
||||
|
||||
/* Cart drawer open state styles */
|
||||
.cart-drawer.open {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.cart-drawer-overlay.open {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Product gallery thumbnail styles */
|
||||
.pdp-thumbnail {
|
||||
border: 2px solid var(--t-border-default);
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.pdp-thumbnail-active {
|
||||
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
/* Shop CSS — hand-written, zero-framework stylesheet.
|
||||
Layered cascade: later layers beat earlier ones, no !important needed.
|
||||
|
||||
This file runs alongside app-shop.css during migration (Phases 1-4).
|
||||
After Phase 5 it replaces app-shop.css entirely. */
|
||||
Layered cascade: later layers beat earlier ones, no !important needed. */
|
||||
|
||||
@layer reset, primitives, tokens, components, layout, utilities, overrides;
|
||||
|
||||
@import "./shop/reset.css";
|
||||
|
||||
/* Theme CSS stays in the existing files (loaded via app-shop.css).
|
||||
Primitives and tokens will be wrapped in @layer when
|
||||
app-shop.css is removed in Phase 5. */
|
||||
/* Theme CSS — unlayered so it overrides component layers (intentional).
|
||||
Primitives set CSS custom properties, layer2 sets theme-aware rules,
|
||||
semantic sets base styles on .themed containers. */
|
||||
@import "./theme-primitives.css";
|
||||
@import "./theme-layer2-attributes.css";
|
||||
@import "./theme-semantic.css";
|
||||
|
||||
@import "./shop/components.css";
|
||||
@import "./shop/layout.css";
|
||||
|
||||
@ -293,7 +293,7 @@
|
||||
|
||||
.category-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
max-width: 48rem;
|
||||
margin-inline: auto;
|
||||
@ -317,7 +317,8 @@
|
||||
|
||||
.category-image {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
max-width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 9999px;
|
||||
background-color: #e5e7eb;
|
||||
background-size: cover;
|
||||
@ -435,7 +436,7 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@ -445,6 +446,21 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* ── Collection empty state ── */
|
||||
|
||||
.collection-empty {
|
||||
text-align: center;
|
||||
padding-block: 4rem;
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.collection-empty-link {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
color: var(--t-text-accent, hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Breadcrumb ── */
|
||||
|
||||
.breadcrumb {
|
||||
@ -501,6 +517,10 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pdp-thumbnail-active {
|
||||
border: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
}
|
||||
|
||||
/* ── Variant selector ── */
|
||||
|
||||
.variant-selector {
|
||||
@ -827,6 +847,7 @@
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
color: var(--t-text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--t-radius-button);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@ -1124,6 +1145,7 @@
|
||||
|
||||
.footer-link {
|
||||
color: var(--t-text-secondary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
@ -1158,6 +1180,11 @@
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
|
||||
&.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-drawer {
|
||||
@ -1174,6 +1201,10 @@
|
||||
flex-direction: column;
|
||||
transition: right 0.3s ease;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-drawer-header {
|
||||
@ -1265,6 +1296,7 @@
|
||||
|
||||
.cart-item-image {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-radius: var(--t-radius-card);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@ -1589,6 +1621,12 @@
|
||||
margin-bottom: var(--space-lg);
|
||||
border-radius: var(--t-radius-image);
|
||||
overflow: hidden;
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
@ -1601,14 +1639,56 @@
|
||||
|
||||
/* ── Contact form ── */
|
||||
|
||||
.contact-form-card {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.contact-form-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-xl);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-form-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.contact-form-spacer {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contact-form-label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.contact-form .shop-input,
|
||||
.contact-form .shop-textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.contact-form-submit {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Accent email link ── */
|
||||
|
||||
.accent-email {
|
||||
@ -1617,20 +1697,61 @@
|
||||
|
||||
/* ── Card shared styles (info, tracking, newsletter, social cards) ── */
|
||||
|
||||
.card-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.card-text--spaced {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-inline-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
& .themed-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: var(--t-text-small);
|
||||
}
|
||||
|
||||
& .themed-button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: var(--t-text-small);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Info card ── */
|
||||
|
||||
.info-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.info-card-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-card-bullet {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
@ -1642,52 +1763,150 @@
|
||||
/* ── Contact info card ── */
|
||||
|
||||
.contact-info-email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
text-decoration: none;
|
||||
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Email input min-width ── */
|
||||
/* ── Newsletter card ── */
|
||||
|
||||
.email-input {
|
||||
min-width: 150px;
|
||||
.newsletter-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-xl);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Social links card ── */
|
||||
|
||||
.social-link-card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.social-link-card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: var(--t-text-small);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.social-link-card-icon {
|
||||
color: var(--t-text-secondary);
|
||||
|
||||
& svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Social links (footer) ── */
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s ease;
|
||||
color: var(--t-text-secondary);
|
||||
border-radius: var(--t-radius-button);
|
||||
|
||||
& svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Star rating ── */
|
||||
|
||||
.star-rating {
|
||||
display: flex;
|
||||
gap: 0.125rem;
|
||||
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&[data-size="md"] svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Trust badges ── */
|
||||
|
||||
.trust-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--t-surface-sunken);
|
||||
border-radius: var(--t-radius-card);
|
||||
}
|
||||
|
||||
.trust-badge-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.trust-badge-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
|
||||
& svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.trust-badge-title {
|
||||
font-weight: 600;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.trust-badge-text {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* ── Page title ── */
|
||||
|
||||
.page-title {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: var(--t-heading-weight);
|
||||
font-size: var(--t-heading-lg);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ── Reviews section ── */
|
||||
|
||||
.pdp-reviews {
|
||||
@ -1695,37 +1914,121 @@
|
||||
}
|
||||
|
||||
.reviews-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-block: 1.5rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
color: var(--t-text-primary);
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reviews-header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reviews-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-2xl);
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.reviews-rating-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reviews-count {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.reviews-chevron {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
details[open] > .reviews-summary .reviews-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.reviews-body {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.reviews-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.reviews-load-more {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
margin-inline: auto;
|
||||
padding: 0.5rem 1.5rem;
|
||||
font-size: var(--t-text-small);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Review card ── */
|
||||
|
||||
.review-card {
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--t-border-subtle);
|
||||
}
|
||||
|
||||
.review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.review-date {
|
||||
font-size: var(--t-text-caption);
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
.review-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.review-body {
|
||||
font-size: var(--t-text-small);
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--t-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.review-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.review-author {
|
||||
font-size: var(--t-text-small);
|
||||
font-weight: 500;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.review-verified {
|
||||
font-size: var(--t-text-caption);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
background-color: var(--t-surface-sunken);
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
@ -1737,10 +2040,13 @@
|
||||
}
|
||||
|
||||
.rich-text-lead {
|
||||
font-size: var(--t-text-large);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.rich-text-paragraph {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
@ -1749,17 +2055,54 @@
|
||||
font-weight: var(--t-heading-weight);
|
||||
font-size: var(--t-text-xl);
|
||||
color: var(--t-text-primary);
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.rich-text-closing {
|
||||
margin-top: 2rem;
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.rich-text-list {
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 1.5rem;
|
||||
list-style: disc;
|
||||
color: var(--t-text-secondary);
|
||||
|
||||
& li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Flash messages ── */
|
||||
|
||||
.shop-flash-group {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shop-flash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--t-radius-card);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 24rem;
|
||||
animation: flash-in 0.3s ease-out;
|
||||
background-color: var(--t-surface-raised, #fff);
|
||||
color: var(--t-text-primary);
|
||||
|
||||
& p {
|
||||
font-size: var(--t-text-small);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-flash--info {
|
||||
@ -1770,6 +2113,12 @@
|
||||
border: 1px solid hsl(0 70% 50% / 0.3);
|
||||
}
|
||||
|
||||
.shop-flash-icon {
|
||||
flex-shrink: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.shop-flash-icon--info {
|
||||
color: var(--t-accent);
|
||||
}
|
||||
@ -1778,6 +2127,16 @@
|
||||
color: hsl(0 70% 50%);
|
||||
}
|
||||
|
||||
@keyframes flash-in {
|
||||
from { opacity: 0; transform: translateX(1rem); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Transition classes for JS.hide flash dismiss */
|
||||
.fade-out { transition: opacity 200ms ease-out; }
|
||||
.fade-out-from { opacity: 1; }
|
||||
.fade-out-to { opacity: 0; }
|
||||
|
||||
/* ── Link buttons (make <a> links styled as buttons) ── */
|
||||
|
||||
.themed-button:where(a),
|
||||
@ -2067,20 +2426,6 @@
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── Screen reader only ── */
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* ── Responsive breakpoints ── */
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@ -2093,9 +2438,11 @@
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.hero-cta-group { flex-direction: row; }
|
||||
.reviews-header-left { flex-direction: row; align-items: center; gap: 1rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.page-title { font-size: var(--t-heading-xl); }
|
||||
.shop-container[data-bottom-nav] { padding-bottom: 0; }
|
||||
.shop-header { padding: 1rem 2rem; }
|
||||
.shop-nav { display: flex; gap: 1.5rem; }
|
||||
|
||||
@ -263,6 +263,9 @@
|
||||
color: var(--t-text-primary);
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius-input);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: var(--t-text-small);
|
||||
font-family: var(--t-font-body);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@ -293,8 +296,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Shop nav display - hidden on mobile, flex on md+ (via Tailwind classes in component) */
|
||||
/* Note: Removed explicit display:flex here as it overrides Tailwind's hidden class */
|
||||
/* Shop nav display - handled by components.css (hidden on mobile, flex on md+) */
|
||||
|
||||
/* =============================================
|
||||
STANDALONE COMPONENTS (Context-independent)
|
||||
|
||||
@ -210,23 +210,30 @@
|
||||
.collection-filter-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.collection-filter-pill {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--t-text-small);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s;
|
||||
background-color: var(--t-surface-raised);
|
||||
color: var(--t-text-primary);
|
||||
border: 1px solid var(--t-border-default);
|
||||
|
||||
&:hover:not(.active) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--t-accent);
|
||||
color: var(--t-text-on-accent);
|
||||
font-weight: 500;
|
||||
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.12);
|
||||
color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%));
|
||||
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.25);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,15 +255,6 @@
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.collection-filter-pills {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.collection-filter-pill {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Desktop always wraps — no scroll needed */
|
||||
.collection-filters.is-scrollable {
|
||||
overflow-x: visible;
|
||||
|
||||
@ -68,13 +68,6 @@ config :tailwind,
|
||||
--output=priv/static/assets/css/app.css
|
||||
),
|
||||
cd: Path.expand("..", __DIR__)
|
||||
],
|
||||
simpleshop_theme_shop: [
|
||||
args: ~w(
|
||||
--input=assets/css/app-shop.css
|
||||
--output=priv/static/assets/css/app-shop.css
|
||||
),
|
||||
cd: Path.expand("..", __DIR__)
|
||||
]
|
||||
|
||||
# Configures Elixir's Logger
|
||||
|
||||
@ -27,8 +27,7 @@ config :simpleshop_theme, SimpleshopThemeWeb.Endpoint,
|
||||
esbuild: {Esbuild, :install_and_run, [:simpleshop_theme, ~w(--sourcemap=inline --watch)]},
|
||||
esbuild_shop_css:
|
||||
{Esbuild, :install_and_run, [:simpleshop_theme_shop_css, ~w(--sourcemap=inline --watch)]},
|
||||
tailwind: {Tailwind, :install_and_run, [:simpleshop_theme, ~w(--watch)]},
|
||||
tailwind_shop: {Tailwind, :install_and_run, [:simpleshop_theme_shop, ~w(--watch)]}
|
||||
tailwind: {Tailwind, :install_and_run, [:simpleshop_theme, ~w(--watch)]}
|
||||
]
|
||||
|
||||
# ## SSL Support
|
||||
|
||||
@ -159,7 +159,6 @@ defmodule Mix.Tasks.Screenshots do
|
||||
Mix.shell().info("Building production assets...")
|
||||
|
||||
Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"])
|
||||
Mix.Task.run("tailwind", ["simpleshop_theme_shop", "--minify"])
|
||||
Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"])
|
||||
Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"])
|
||||
Mix.Task.run("phx.digest")
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
<style>
|
||||
@layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
|
||||
</style>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app-shop.css"} />
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
|
||||
<script defer phx-track-static src={~p"/assets/js/app.js"}>
|
||||
</script>
|
||||
|
||||
@ -46,7 +46,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
source_width={1200}
|
||||
alt={@image_alt}
|
||||
sizes="(max-width: 800px) 100vw, 800px"
|
||||
class="w-full h-[300px] object-cover"
|
||||
class="content-hero-image"
|
||||
/>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -78,19 +78,16 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def contact_form(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-8">
|
||||
<h2 class="t-heading text-xl font-bold mb-2">
|
||||
<.shop_card class="contact-form-card">
|
||||
<h2 class="contact-form-heading">
|
||||
{@title}
|
||||
</h2>
|
||||
<%= if @email || @response_time do %>
|
||||
<div class="contact-form-meta flex flex-col gap-1 mb-6 text-sm">
|
||||
<div class="contact-form-meta">
|
||||
<%= if @email do %>
|
||||
<p>
|
||||
Email me:
|
||||
<a
|
||||
href={"mailto:#{@email}"}
|
||||
class="accent-email"
|
||||
>
|
||||
<a href={"mailto:#{@email}"} class="accent-email">
|
||||
{@email}
|
||||
</a>
|
||||
</p>
|
||||
@ -100,39 +97,31 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="mb-4"></div>
|
||||
<div class="contact-form-spacer"></div>
|
||||
<% end %>
|
||||
|
||||
<form class="flex flex-col gap-4">
|
||||
<form class="contact-form">
|
||||
<div>
|
||||
<label class="contact-form-label block font-medium mb-2">
|
||||
Name
|
||||
</label>
|
||||
<.shop_input type="text" placeholder="Your name" class="w-full px-4 py-2" />
|
||||
<label class="contact-form-label">Name</label>
|
||||
<.shop_input type="text" placeholder="Your name" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="contact-form-label block font-medium mb-2">
|
||||
Email
|
||||
</label>
|
||||
<.shop_input type="email" placeholder="your@email.com" class="w-full px-4 py-2" />
|
||||
<label class="contact-form-label">Email</label>
|
||||
<.shop_input type="email" placeholder="your@email.com" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="contact-form-label block font-medium mb-2">
|
||||
Subject
|
||||
</label>
|
||||
<.shop_input type="text" placeholder="How can I help?" class="w-full px-4 py-2" />
|
||||
<label class="contact-form-label">Subject</label>
|
||||
<.shop_input type="text" placeholder="How can I help?" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="contact-form-label block font-medium mb-2">
|
||||
Message
|
||||
</label>
|
||||
<.shop_textarea rows="5" placeholder="Your message..." class="w-full px-4 py-2" />
|
||||
<label class="contact-form-label">Message</label>
|
||||
<.shop_textarea rows="5" placeholder="Your message..." />
|
||||
</div>
|
||||
|
||||
<.shop_button type="submit" class="w-full px-6 py-3 font-semibold transition-all">
|
||||
<.shop_button type="submit" class="contact-form-submit">
|
||||
Send Message
|
||||
</.shop_button>
|
||||
</form>
|
||||
@ -149,20 +138,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
"""
|
||||
def order_tracking_card(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-6">
|
||||
<h3 class="card-heading font-bold mb-3">Track your order</h3>
|
||||
<p class="card-text text-sm mb-3">
|
||||
<.shop_card class="card-section">
|
||||
<h3 class="card-heading">Track your order</h3>
|
||||
<p class="card-text card-text--spaced">
|
||||
Enter your email and I'll send you a link to check your order status.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<.shop_input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="email-input flex-1 min-w-0 px-3 py-2 text-sm"
|
||||
/>
|
||||
<.shop_button class="px-4 py-2 text-sm font-medium whitespace-nowrap">
|
||||
Send
|
||||
</.shop_button>
|
||||
<div class="card-inline-form">
|
||||
<.shop_input type="email" placeholder="your@email.com" class="email-input" />
|
||||
<.shop_button>Send</.shop_button>
|
||||
</div>
|
||||
</.shop_card>
|
||||
"""
|
||||
@ -188,11 +171,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def info_card(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-6">
|
||||
<h3 class="card-heading font-bold mb-3">{@title}</h3>
|
||||
<ul class="info-card-list flex flex-col gap-2 text-sm">
|
||||
<.shop_card class="card-section">
|
||||
<h3 class="card-heading">{@title}</h3>
|
||||
<ul class="info-card-list">
|
||||
<%= for item <- @items do %>
|
||||
<li class="flex items-start gap-2">
|
||||
<li class="info-card-item">
|
||||
<span class="info-card-bullet">•</span>
|
||||
<span>
|
||||
<strong class="info-card-label">{item.label}:</strong> {item.value}
|
||||
@ -223,20 +206,10 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def contact_info_card(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-6">
|
||||
<h3 class="card-heading font-bold mb-3">{@title}</h3>
|
||||
<a
|
||||
href={"mailto:#{@email}"}
|
||||
class="contact-info-email flex items-center gap-2 mb-2"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<.shop_card class="card-section">
|
||||
<h3 class="card-heading">{@title}</h3>
|
||||
<a href={"mailto:#{@email}"} class="contact-info-email">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
@ -246,7 +219,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
</svg>
|
||||
{@email}
|
||||
</a>
|
||||
<p class="card-text text-sm">
|
||||
<p class="card-text">
|
||||
{@response_text}
|
||||
</p>
|
||||
</.shop_card>
|
||||
@ -280,21 +253,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
def newsletter_card(%{variant: :inline} = assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h3 class="t-heading text-xl font-bold mb-2">
|
||||
<h3 class="newsletter-heading">
|
||||
{@title}
|
||||
</h3>
|
||||
<p class="card-text text-sm mb-4">
|
||||
<p class="card-text card-text--spaced">
|
||||
{@description}
|
||||
</p>
|
||||
<form class="flex flex-wrap gap-2">
|
||||
<.shop_input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="email-input flex-1 min-w-0 px-4 py-2 text-sm"
|
||||
/>
|
||||
<.shop_button type="submit" class="px-6 py-2 text-sm font-medium whitespace-nowrap">
|
||||
{@button_text}
|
||||
</.shop_button>
|
||||
<form class="card-inline-form">
|
||||
<.shop_input type="email" placeholder="your@email.com" class="email-input" />
|
||||
<.shop_button type="submit">{@button_text}</.shop_button>
|
||||
</form>
|
||||
</div>
|
||||
"""
|
||||
@ -302,20 +269,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def newsletter_card(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-6">
|
||||
<h3 class="card-heading font-bold mb-2">{@title}</h3>
|
||||
<p class="card-text text-sm mb-4">
|
||||
<.shop_card class="card-section">
|
||||
<h3 class="card-heading">{@title}</h3>
|
||||
<p class="card-text card-text--spaced">
|
||||
{@description}
|
||||
</p>
|
||||
<form class="flex flex-wrap gap-2">
|
||||
<.shop_input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="email-input flex-1 min-w-0 px-3 py-2 text-sm"
|
||||
/>
|
||||
<.shop_button type="submit" class="px-4 py-2 text-sm font-medium whitespace-nowrap">
|
||||
{@button_text}
|
||||
</.shop_button>
|
||||
<form class="card-inline-form">
|
||||
<.shop_input type="email" placeholder="your@email.com" class="email-input" />
|
||||
<.shop_button type="submit">{@button_text}</.shop_button>
|
||||
</form>
|
||||
</.shop_card>
|
||||
"""
|
||||
@ -341,15 +302,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def social_links_card(assigns) do
|
||||
~H"""
|
||||
<.shop_card class="p-6">
|
||||
<h3 class="card-heading font-bold mb-4">{@title}</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<.shop_card class="card-section">
|
||||
<h3 class="card-heading">{@title}</h3>
|
||||
<div class="social-link-card-list">
|
||||
<%= for link <- @links do %>
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link-card-item themed-button-outline flex items-center gap-2 px-3 py-2 text-sm transition-all hover:opacity-80"
|
||||
class="social-link-card-item themed-button-outline"
|
||||
>
|
||||
<span class="social-link-card-icon">
|
||||
<.social_icon platform={link.platform} />
|
||||
@ -379,13 +340,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def social_links(assigns) do
|
||||
~H"""
|
||||
<div class="flex gap-4 justify-center">
|
||||
<div class="social-links">
|
||||
<%= for link <- @links do %>
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link w-9 h-9 flex items-center justify-center transition-all"
|
||||
class="social-link"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<.social_icon platform={link.platform} />
|
||||
@ -420,7 +381,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Commercial/Creative platforms
|
||||
defp social_icon(%{platform: :instagram} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
|
||||
</svg>
|
||||
"""
|
||||
@ -428,7 +389,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :pinterest} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -436,7 +397,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :tiktok} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -444,7 +405,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :facebook} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -452,7 +413,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :twitter} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -460,7 +421,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :youtube} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -468,7 +429,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :patreon} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003" />
|
||||
</svg>
|
||||
"""
|
||||
@ -476,7 +437,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :kofi} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -484,7 +445,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :etsy} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.559 1.067c0-.263.128-.435.349-.442 1.074-.034 2.15-.066 3.225-.1.058-.002.22-.012.282.099.014.026.026.061.026.12 0 0 .006 2.548.006 3.85 0 .163.147.28.322.28h4.64c.239 0 .505.209.505.447 0 0-.002.818-.005 1.76-.003.88-.064 1.668-.064 1.668-.025.235-.229.418-.462.418h-4.551c-.244 0-.383.155-.383.398v8.34c0 2.1 1.32 2.581 2.429 2.581.867 0 2.028-.323 2.428-.521.112-.056.251-.06.315.053.024.043.05.089.074.144.305.697.628 1.391.929 2.088.073.163.038.335-.143.454-1.008.665-2.691 1.229-4.577 1.229-2.606 0-5.811-1.032-5.811-6.049V9.692c0-.266-.137-.394-.36-.394H5.62c-.227 0-.372-.14-.372-.37V7.321c0-.175.067-.285.23-.391 2.23-1.441 2.992-4.102 3.08-5.6.006-.099.001-.198.001-.263z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -492,7 +453,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :gumroad} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.152 16.053c-.752.822-1.882 1.37-3.449 1.37-3.071 0-5.3-2.037-5.3-5.442 0-3.238 2.062-5.47 5.135-5.47 1.498 0 2.598.465 3.378 1.198l-.978 1.483c-.588-.466-1.206-.74-2.14-.74-1.935 0-3.058 1.418-3.058 3.475 0 2.119 1.205 3.502 3.14 3.502.85 0 1.578-.3 2.004-.63v-1.507h-2.309v-1.835h4.576v4.596z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -500,7 +461,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :bandcamp} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -509,7 +470,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Open Web/Federated platforms
|
||||
defp social_icon(%{platform: :mastodon} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -517,7 +478,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :pixelfed} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm5.696 14.943c-.156 1.015-.776 1.885-1.681 2.351-.598.307-1.263.44-1.967.44H8.34c-.63 0-1.235-.123-1.79-.368-.588-.26-1.105-.63-1.536-1.1a4.347 4.347 0 0 1-.953-1.6c-.189-.588-.26-1.207-.199-1.855.093-.996.497-1.855 1.199-2.569.732-.746 1.623-1.19 2.66-1.33.147-.02.298-.033.445-.045h5.682c.88.08 1.651.39 2.312.953.729.62 1.182 1.392 1.354 2.321a4.09 4.09 0 0 1-.018 1.802zM12.186 9.592H9.109c-.517.054-.976.238-1.373.553-.57.452-.907 1.034-.997 1.737-.059.465.003.91.196 1.33.258.564.66.992 1.21 1.275.383.196.795.283 1.235.26h3.108c.518-.054.977-.238 1.374-.553.57-.452.907-1.033.996-1.737.06-.465-.002-.91-.196-1.33a2.345 2.345 0 0 0-1.209-1.274 2.48 2.48 0 0 0-1.267-.261z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -525,7 +486,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :bluesky} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -533,7 +494,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :peertube} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0 1.608 6v12L12 24l10.392-6V6zm-1.476 2.94 8.64 4.98v2.401L9.6 4.86l.924-1.92zm-1.848 3.839 8.64 4.98v2.4l-8.64-4.98V6.78zm0 4.078 8.64 4.98v2.401l-8.64-4.98v-2.401z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -541,7 +502,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :lemmy} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm-.5 4.5a2.5 2.5 0 0 1 1 4.793V15.5a.5.5 0 0 1-1 0V9.293A2.5 2.5 0 0 1 11.5 4.5zm-5 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -549,7 +510,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :matrix} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.56-.18.946v5.058H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -558,7 +519,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Developer/Hacker platforms
|
||||
defp social_icon(%{platform: :github} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>
|
||||
"""
|
||||
@ -566,7 +527,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :gitlab} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.874.874 0 0 0-.994.066.873.873 0 0 0-.29.441L16.47 7.674H7.53L5.32 1.082a.857.857 0 0 0-.29-.441.874.874 0 0 0-.994-.067.852.852 0 0 0-.336.406L.433 9.507.4 9.593a6.062 6.062 0 0 0 2.012 7.01l.01.008.028.02 4.984 3.73 2.466 1.865 1.502 1.135a1.009 1.009 0 0 0 1.22 0l1.502-1.135 2.466-1.866 5.012-3.75.013-.01a6.063 6.063 0 0 0 2.005-7.007z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -574,7 +535,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :codeberg} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -582,7 +543,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :sourcehut} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 21.677c-5.335 0-9.677-4.342-9.677-9.677S6.665 2.323 12 2.323 21.677 6.665 21.677 12 17.335 21.677 12 21.677z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -591,7 +552,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Communication platforms
|
||||
defp social_icon(%{platform: :discord} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -599,7 +560,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :telegram} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -607,7 +568,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :signal} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9.237 1.805a9.72 9.72 0 0 1 5.527 0l.558-1.343A11.14 11.14 0 0 0 8.678.462l.559 1.343Zm-3.91 1.95A9.678 9.678 0 0 0 1.805 9.24l1.448.295a8.261 8.261 0 0 1 3.003-4.672l-.93-1.108Zm13.346 0-.929 1.108a8.261 8.261 0 0 1 3.003 4.672l1.449-.295a9.678 9.678 0 0 0-3.523-5.485ZM1.463 10.723A9.81 9.81 0 0 0 1.5 12c0 .893.12 1.758.344 2.58l1.41-.393A8.315 8.315 0 0 1 3 12c0-.373.024-.742.073-1.104l-1.61-.173Zm20.59 1.104.073 1.104c0 .373-.024.742-.073 1.104l1.61.173a9.81 9.81 0 0 0-.037-2.381h-1.573Zm-19.699 4.43a9.723 9.723 0 0 0 2.973 4.047l.929-1.108a8.222 8.222 0 0 1-2.513-3.42l-1.39.48Zm17.291 0-1.389-.48a8.221 8.221 0 0 1-2.513 3.42l.929 1.108a9.723 9.723 0 0 0 2.973-4.048Zm-13.17 5.052a9.72 9.72 0 0 0 5.526 0l-.559-1.343a8.262 8.262 0 0 1-4.41 0l-.558 1.343ZM12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6ZM2.7 12a9.3 9.3 0 1 1 18.6 0 9.3 9.3 0 0 1-18.6 0Z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -616,7 +577,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Other platforms
|
||||
defp social_icon(%{platform: :substack} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -624,7 +585,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :rss} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -632,7 +593,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp social_icon(%{platform: :website} = assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 2.047A10.003 10.003 0 0 1 21.95 11.5h-4.4a15.93 15.93 0 0 0-1.55-6.33 10.05 10.05 0 0 1 1.45-.93A9.933 9.933 0 0 0 11.5 2.047zm-.5 0v4.4c-1.55-.09-3.03-.4-4.4-.93a15.93 15.93 0 0 1 4.4-3.47zm0 5.4v4.06H6.44c.08-1.47.33-2.87.73-4.17a16.93 16.93 0 0 0 4.33.91v-.8zm1 0v.8c1.5-.08 2.96-.39 4.33-.91.4 1.3.65 2.7.73 4.17H12.5V7.447zM11 12.5H6.44c.08 1.47.33 2.87.73 4.17a16.93 16.93 0 0 0 4.33-.91V12.5h-.5zm1 0v3.26c1.5.08 2.96.39 4.33.91.4-1.3.65-2.7.73-4.17H12.5H12zm-1 4.25c-1.55.09-3.03.4-4.4.93a15.93 15.93 0 0 1 4.4 3.47v-4.4zm1 0v4.4a15.93 15.93 0 0 1 4.4-3.47c-1.37-.53-2.85-.84-4.4-.93z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -641,7 +602,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
# Fallback for unknown platforms
|
||||
defp social_icon(assigns) do
|
||||
~H"""
|
||||
<svg class="w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
|
||||
</svg>
|
||||
"""
|
||||
@ -668,14 +629,10 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
attr :color, :string, default: "#f59e0b"
|
||||
|
||||
def star_rating(assigns) do
|
||||
size_class = if assigns.size == :md, do: "w-5 h-5", else: "w-4 h-4"
|
||||
assigns = assign(assigns, :size_class, size_class)
|
||||
|
||||
~H"""
|
||||
<div class="flex gap-0.5">
|
||||
<div class="star-rating" data-size={@size}>
|
||||
<%= for i <- 1..@max do %>
|
||||
<svg
|
||||
class={@size_class}
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 20 20"
|
||||
@ -714,18 +671,28 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def trust_badges(assigns) do
|
||||
~H"""
|
||||
<div class="trust-badges flex flex-col gap-3 p-4">
|
||||
<div class="trust-badges">
|
||||
<%= for item <- @items do %>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="trust-badge-item">
|
||||
<span class="trust-badge-icon">
|
||||
<SimpleshopThemeWeb.CoreComponents.icon
|
||||
name="hero-check-circle"
|
||||
class="size-5 mt-0.5 shrink-0"
|
||||
/>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="trust-badge-title font-semibold">{item.title}</p>
|
||||
<p class="trust-badge-text text-sm">{item.description}</p>
|
||||
<p class="trust-badge-title">{item.title}</p>
|
||||
<p class="trust-badge-text">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -765,22 +732,19 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
end)
|
||||
|
||||
~H"""
|
||||
<details
|
||||
open={@open}
|
||||
class="pdp-reviews group"
|
||||
>
|
||||
<summary class="reviews-summary flex justify-between items-center py-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
|
||||
<h2 class="t-heading text-2xl font-bold">
|
||||
<details open={@open} class="pdp-reviews">
|
||||
<summary class="reviews-summary">
|
||||
<div class="reviews-header-left">
|
||||
<h2 class="reviews-heading">
|
||||
Customer reviews
|
||||
</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="reviews-rating-group">
|
||||
<.star_rating rating={@average_rating} />
|
||||
<span class="reviews-count text-sm">({@display_count})</span>
|
||||
<span class="reviews-count">({@display_count})</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
class="w-5 h-5 transition-transform duration-200 group-open:rotate-180 flex-shrink-0"
|
||||
class="reviews-chevron"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
@ -791,14 +755,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
</svg>
|
||||
</summary>
|
||||
|
||||
<div class="pb-8">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="reviews-body">
|
||||
<div class="reviews-list">
|
||||
<%= for review <- @reviews do %>
|
||||
<.review_card review={review} />
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<.shop_button_outline class="mt-6 px-6 py-2 text-sm font-medium transition-all mx-auto block">
|
||||
<.shop_button_outline class="reviews-load-more">
|
||||
Load more reviews
|
||||
</.shop_button_outline>
|
||||
</div>
|
||||
@ -821,21 +785,21 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def review_card(assigns) do
|
||||
~H"""
|
||||
<article class="review-card pb-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<.star_rating rating={@review.rating} />
|
||||
<span class="review-date text-xs">{@review.date}</span>
|
||||
<span class="review-date">{@review.date}</span>
|
||||
</div>
|
||||
<h3 class="review-title font-semibold mb-1">{@review.title}</h3>
|
||||
<p class="review-body text-sm mb-3">
|
||||
<h3 class="review-title">{@review.title}</h3>
|
||||
<p class="review-body">
|
||||
{@review.body}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="review-author text-sm font-medium">
|
||||
<div class="review-footer">
|
||||
<span class="review-author">
|
||||
{@review.author}
|
||||
</span>
|
||||
<%= if @review.verified do %>
|
||||
<span class="review-verified text-xs px-2 py-0.5 rounded">
|
||||
<span class="review-verified">
|
||||
Verified purchase
|
||||
</span>
|
||||
<% end %>
|
||||
@ -858,11 +822,10 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
<.page_title text="Order History" class="mb-4" />
|
||||
"""
|
||||
attr :text, :string, required: true
|
||||
attr :class, :string, default: "mb-8"
|
||||
|
||||
def page_title(assigns) do
|
||||
~H"""
|
||||
<h1 class={"t-heading text-3xl md:text-4xl font-bold #{@class}"}>
|
||||
<h1 class="page-title">
|
||||
{@text}
|
||||
</h1>
|
||||
"""
|
||||
@ -906,7 +869,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(%{block: %{type: :lead}} = assigns) do
|
||||
~H"""
|
||||
<p class="rich-text-lead lead-text text-lg mb-4">
|
||||
<p class="rich-text-lead">
|
||||
{@block.text}
|
||||
</p>
|
||||
"""
|
||||
@ -914,7 +877,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(%{block: %{type: :paragraph}} = assigns) do
|
||||
~H"""
|
||||
<p class="rich-text-paragraph mb-4">
|
||||
<p class="rich-text-paragraph">
|
||||
{@block.text}
|
||||
</p>
|
||||
"""
|
||||
@ -922,7 +885,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(%{block: %{type: :heading}} = assigns) do
|
||||
~H"""
|
||||
<h2 class="rich-text-heading mt-8 mb-3">
|
||||
<h2 class="rich-text-heading">
|
||||
{@block.text}
|
||||
</h2>
|
||||
"""
|
||||
@ -930,7 +893,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(%{block: %{type: :closing}} = assigns) do
|
||||
~H"""
|
||||
<p class="rich-text-paragraph mt-8">
|
||||
<p class="rich-text-closing">
|
||||
{@block.text}
|
||||
</p>
|
||||
"""
|
||||
@ -938,9 +901,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(%{block: %{type: :list}} = assigns) do
|
||||
~H"""
|
||||
<ul class="rich-text-list mb-4 ml-6 list-disc">
|
||||
<ul class="rich-text-list">
|
||||
<%= for item <- @block.items do %>
|
||||
<li class="mb-1">{item}</li>
|
||||
<li>{item}</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
"""
|
||||
@ -948,7 +911,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
defp rich_text_block(assigns) do
|
||||
~H"""
|
||||
<p class="rich-text-paragraph mb-4">
|
||||
<p class="rich-text-paragraph">
|
||||
{@block.text}
|
||||
</p>
|
||||
"""
|
||||
@ -1049,26 +1012,22 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
|
||||
def shop_flash_group(assigns) do
|
||||
~H"""
|
||||
<div
|
||||
id="shop-flash-group"
|
||||
aria-live="polite"
|
||||
class="fixed top-4 right-4 z-[200] flex flex-col gap-2"
|
||||
>
|
||||
<div id="shop-flash-group" aria-live="polite" class="shop-flash-group">
|
||||
<%= if msg = Phoenix.Flash.get(@flash, :info) do %>
|
||||
<div
|
||||
id="shop-flash-info"
|
||||
class="shop-flash shop-flash--info flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg max-w-sm animate-in"
|
||||
class="shop-flash shop-flash--info"
|
||||
role="alert"
|
||||
phx-click={
|
||||
Phoenix.LiveView.JS.push("lv:clear-flash", value: %{key: :info})
|
||||
|> Phoenix.LiveView.JS.hide(
|
||||
to: "#shop-flash-info",
|
||||
transition: {"ease-out duration-200", "opacity-100", "opacity-0"}
|
||||
transition: {"fade-out", "fade-out-from", "fade-out-to"}
|
||||
)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
class="shop-flash-icon--info w-5 h-5 shrink-0"
|
||||
class="shop-flash-icon shop-flash-icon--info"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
@ -1078,24 +1037,24 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
<p class="text-sm">{msg}</p>
|
||||
<p>{msg}</p>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if msg = Phoenix.Flash.get(@flash, :error) do %>
|
||||
<div
|
||||
id="shop-flash-error"
|
||||
class="shop-flash shop-flash--error flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg max-w-sm animate-in"
|
||||
class="shop-flash shop-flash--error"
|
||||
role="alert"
|
||||
phx-click={
|
||||
Phoenix.LiveView.JS.push("lv:clear-flash", value: %{key: :error})
|
||||
|> Phoenix.LiveView.JS.hide(
|
||||
to: "#shop-flash-error",
|
||||
transition: {"ease-out duration-200", "opacity-100", "opacity-0"}
|
||||
transition: {"fade-out", "fade-out-from", "fade-out-to"}
|
||||
)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
class="shop-flash-icon--error w-5 h-5 shrink-0"
|
||||
class="shop-flash-icon shop-flash-icon--error"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
@ -1109,7 +1068,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do
|
||||
d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-sm">{msg}</p>
|
||||
<p>{msg}</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@ -88,7 +88,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
product_count={length(@products)}
|
||||
/>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="page-container collection-body">
|
||||
<.collection_filter_bar
|
||||
categories={@categories}
|
||||
current_slug={
|
||||
@ -115,13 +115,9 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
</.product_grid>
|
||||
|
||||
<%= if @products == [] do %>
|
||||
<div class="text-center py-16" style="color: var(--t-text-secondary);">
|
||||
<p class="text-lg">No products found in this collection.</p>
|
||||
<.link
|
||||
navigate={~p"/collections/all"}
|
||||
class="mt-4 inline-block underline"
|
||||
style="color: var(--t-text-accent);"
|
||||
>
|
||||
<div class="collection-empty">
|
||||
<p>No products found in this collection.</p>
|
||||
<.link navigate={~p"/collections/all"} class="collection-empty-link">
|
||||
View all products
|
||||
</.link>
|
||||
</div>
|
||||
@ -134,7 +130,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
|
||||
defp collection_filter_bar(assigns) do
|
||||
~H"""
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
|
||||
<div class="filter-bar">
|
||||
<nav
|
||||
aria-label="Collection filters"
|
||||
id="collection-filters"
|
||||
@ -146,10 +142,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
<.link
|
||||
navigate={collection_path("all", @current_sort)}
|
||||
aria-current={@current_slug == nil && "page"}
|
||||
class={[
|
||||
"collection-filter-pill",
|
||||
if(@current_slug == nil, do: "active", else: "hover:opacity-80")
|
||||
]}
|
||||
class={["collection-filter-pill", @current_slug == nil && "active"]}
|
||||
>
|
||||
All
|
||||
</.link>
|
||||
@ -158,10 +151,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
<.link
|
||||
navigate={collection_path("sale", @current_sort)}
|
||||
aria-current={@current_slug == "sale" && "page"}
|
||||
class={[
|
||||
"collection-filter-pill",
|
||||
if(@current_slug == "sale", do: "active", else: "hover:opacity-80")
|
||||
]}
|
||||
class={["collection-filter-pill", @current_slug == "sale" && "active"]}
|
||||
>
|
||||
Sale
|
||||
</.link>
|
||||
@ -171,10 +161,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
<.link
|
||||
navigate={collection_path(category.slug, @current_sort)}
|
||||
aria-current={@current_slug == category.slug && "page"}
|
||||
class={[
|
||||
"collection-filter-pill",
|
||||
if(@current_slug == category.slug, do: "active", else: "hover:opacity-80")
|
||||
]}
|
||||
class={["collection-filter-pill", @current_slug == category.slug && "active"]}
|
||||
>
|
||||
{category.name}
|
||||
</.link>
|
||||
@ -188,7 +175,6 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
name="sort"
|
||||
options={@sort_options}
|
||||
selected={@current_sort}
|
||||
class="px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm"
|
||||
aria-label="Sort products"
|
||||
/>
|
||||
</form>
|
||||
|
||||
2
mix.exs
2
mix.exs
@ -99,13 +99,11 @@ defmodule SimpleshopTheme.MixProject do
|
||||
"assets.build": [
|
||||
"compile",
|
||||
"tailwind simpleshop_theme",
|
||||
"tailwind simpleshop_theme_shop",
|
||||
"esbuild simpleshop_theme",
|
||||
"esbuild simpleshop_theme_shop_css"
|
||||
],
|
||||
"assets.deploy": [
|
||||
"tailwind simpleshop_theme --minify",
|
||||
"tailwind simpleshop_theme_shop --minify",
|
||||
"esbuild simpleshop_theme --minify",
|
||||
"esbuild simpleshop_theme_shop_css --minify",
|
||||
"phx.digest"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user