refactor: replace hand-rolled utility CSS with Tailwind classes (host build now scans theme templates)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow
parent
6af6950f23
commit
2aa1b0f506
@ -1 +1 @@
|
||||
<section data-block="scifi-clean:benchmark_table" class="sc-section-tight {{ class }}"><div class="sc-content-well"><div style="max-width: 44rem;">{% if heading %}<p class="sc-eyebrow">{{ eyebrow|default:"Benchmarks" }}</p><h2 class="sc-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 1.5rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}{% if rows %}{% for row in rows %}<div class="sc-bench-row" data-sc-reveal><span class="sc-bench-name">{{ row.label }}</span><span class="sc-bench-value">{{ row.value }}{% if row.unit %} <span class="sc-telemetry-unit">{{ row.unit }}</span>{% endif %}</span><span class="sc-bench-track"><span class="sc-bench-fill{% if row.highlight %} sc-bench-fill--accent{% endif %}" style="width: {{ row.bar|default:0 }}%;"></span></span></div>{% endfor %}{% else %}<p class="sc-text" style="color: hsl(var(--muted-foreground));">No benchmark rows yet.</p>{% endif %}{% if note %}<p class="sc-form-note" style="margin-top: 1rem;">{{ note }}</p>{% endif %}</div></div></section>
|
||||
<section data-block="scifi-clean:benchmark_table" class="sc-section-tight {{ class }}"><div class="sc-content-well"><div style="max-width: 44rem;">{% if heading %}<p class="sc-eyebrow">{{ eyebrow|default:"Benchmarks" }}</p><h2 class="sc-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 1.5rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}{% if rows %}{% for row in rows %}<div class="grid grid-cols-[1fr_auto] gap-x-4 gap-y-1.5 items-baseline mb-4" data-sc-reveal><span class="sc-bench-name">{{ row.label }}</span><span class="sc-bench-value">{{ row.value }}{% if row.unit %} <span class="sc-telemetry-unit">{{ row.unit }}</span>{% endif %}</span><span class="sc-bench-track"><span class="sc-bench-fill{% if row.highlight %} sc-bench-fill--accent{% endif %}" style="width: {{ row.bar|default:0 }}%;"></span></span></div>{% endfor %}{% else %}<p class="sc-text" style="color: hsl(var(--muted-foreground));">No benchmark rows yet.</p>{% endif %}{% if note %}<p class="sc-form-note" style="margin-top: 1rem;">{{ note }}</p>{% endif %}</div></div></section>
|
||||
|
||||
@ -141,7 +141,6 @@ css:
|
||||
.sc-content-well { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
|
||||
.sc-measure { max-width: 70ch; }
|
||||
.sc-article-measure { max-width: 72ch; }
|
||||
.sc-swiss-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.5rem; }
|
||||
.sc-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
|
||||
.sc-section-tight { padding-top: 2.75rem; padding-bottom: 2.75rem; }
|
||||
.sc-hairline { border: 1px solid hsl(var(--border)); }
|
||||
@ -203,15 +202,6 @@ css:
|
||||
.sc-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
.sc-img-empty { display: block; width: 100%; aspect-ratio: 4 / 3; background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
|
||||
|
||||
/* --- Responsive grids --- */
|
||||
.sc-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
@media (min-width: 640px) { .sc-grid-2, .sc-grid-3, .sc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1024px) { .sc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||||
.sc-leadership-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
@media (min-width: 640px) { .sc-leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1024px) { .sc-leadership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1280px) { .sc-leadership-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||||
|
||||
/* --- Chrome: navbar --- */
|
||||
.sc-navbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; }
|
||||
.sc-brand { font-family: var(--font-heading, "Inter", system-ui, sans-serif); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: hsl(var(--foreground)); text-decoration: none; display: inline-flex; align-items: center; gap: 0.625rem; }
|
||||
@ -243,9 +233,6 @@ css:
|
||||
|
||||
/* --- Chrome: footer --- */
|
||||
.sc-footer { background-color: hsl(var(--background)); color: hsl(var(--foreground)); border-top: 2px solid hsl(var(--accent)); padding: 3.5rem 0 2.5rem; }
|
||||
.sc-footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
@media (min-width: 640px) { .sc-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1024px) { .sc-footer-cols { grid-template-columns: 2fr repeat(3, 1fr); } }
|
||||
.sc-footer-head { font-family: var(--font-heading, "Inter", system-ui, sans-serif); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); margin: 0 0 0.875rem; }
|
||||
.sc-footer-link { display: block; font-size: 0.9375rem; color: hsl(var(--foreground)); text-decoration: none; padding: 0.25rem 0; }
|
||||
.sc-footer-link:hover { color: hsl(var(--accent)); }
|
||||
@ -255,8 +242,6 @@ css:
|
||||
.sc-hero { padding: 5rem 0; }
|
||||
.sc-hero-headline { font-family: var(--font-heading, "Inter", system-ui, sans-serif); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2.5rem, 6vw, 4.5rem); color: hsl(var(--foreground)); margin: 0; }
|
||||
.sc-hero-sub { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; color: hsl(var(--muted-foreground)); margin: 1.25rem 0 0; }
|
||||
.sc-hero-split { display: grid; gap: 3rem; grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: center; }
|
||||
@media (min-width: 1024px) { .sc-hero-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
|
||||
/* --- Marketing: logo strip --- */
|
||||
.sc-logo { filter: grayscale(1); opacity: 0.65; transition: filter 200ms ease, opacity 200ms ease; }
|
||||
@ -347,9 +332,6 @@ css:
|
||||
.sc-post-title:hover { color: hsl(var(--accent)); }
|
||||
.sc-post-meta { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
|
||||
.sc-post-excerpt { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.6; }
|
||||
.sc-post-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
@media (min-width: 640px) { .sc-post-grid-2, .sc-post-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1024px) { .sc-post-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
.sc-tag { display: inline-block; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.04em; padding: 0.1875rem 0.5rem; border: 1px solid hsl(var(--border)); border-radius: 3px; color: hsl(var(--muted-foreground)); text-decoration: none; }
|
||||
.sc-tag:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
|
||||
.sc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
|
||||
@ -456,7 +438,6 @@ css:
|
||||
.sc-spec-value { text-align: right; white-space: nowrap; padding: 0.625rem 0.375rem 0.625rem 1rem; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; font-weight: 500; }
|
||||
.sc-spec-unit { text-align: left; white-space: nowrap; width: 1%; padding: 0.625rem 0.5rem 0.625rem 0; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
|
||||
|
||||
.sc-bench-row { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1rem; align-items: baseline; margin-bottom: 1rem; }
|
||||
.sc-bench-name { font-family: var(--font-body, "Inter", system-ui, sans-serif); font-size: 0.9375rem; color: hsl(var(--foreground)); }
|
||||
.sc-bench-value { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 500; color: hsl(var(--foreground)); }
|
||||
.sc-bench-track { grid-column: 1 / -1; height: 6px; background-color: hsl(var(--muted)); border-radius: 2px; overflow: hidden; }
|
||||
|
||||
@ -1 +1 @@
|
||||
<section class="sc-section {{ class }}" data-block="scifi-clean:blog-hero"><div class="sc-content-well"><div class="sc-stack">{% if title %}<h1 class="sc-heading" style="font-size: clamp(2rem, 4vw, 3rem); margin: 0;"><span class="sc-heading-h2-accent">{{ title }}</span></h1>{% endif %}{% if subtitle %}<p class="sc-lede" style="max-width: 60ch; margin: 0.75rem 0 0 0;">{{ subtitle }}</p>{% endif %}</div>{% if posts %}<div class="sc-post-grid sc-post-grid-3" style="margin-top: 2.5rem;">{% for post in posts %}<article class="sc-post-card{% if forloop.First %} sc-card-accent{% endif %}">{% if post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h2 class="sc-post-title"{% if forloop.First %} style="font-size: 1.5rem;"{% endif %}><a href="{{ post.url }}">{{ post.title }}</a></h2>{% if showExcerpt and post.excerpt %}<p class="sc-post-excerpt">{{ post.excerpt }}</p>{% endif %}<div class="sc-post-meta">{% if post.author_name %}<span>{{ post.author_name }}</span>{% endif %}{% if post.published_at %}<span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span>{% endif %}</div></article>{% endfor %}</div>{% endif %}</div></section>
|
||||
<section class="sc-section {{ class }}" data-block="scifi-clean:blog-hero"><div class="sc-content-well"><div class="sc-stack">{% if title %}<h1 class="sc-heading" style="font-size: clamp(2rem, 4vw, 3rem); margin: 0;"><span class="sc-heading-h2-accent">{{ title }}</span></h1>{% endif %}{% if subtitle %}<p class="sc-lede" style="max-width: 60ch; margin: 0.75rem 0 0 0;">{{ subtitle }}</p>{% endif %}</div>{% if posts %}<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3" style="margin-top: 2.5rem;">{% for post in posts %}<article class="sc-post-card{% if forloop.First %} sc-card-accent{% endif %}">{% if post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h2 class="sc-post-title"{% if forloop.First %} style="font-size: 1.5rem;"{% endif %}><a href="{{ post.url }}">{{ post.title }}</a></h2>{% if showExcerpt and post.excerpt %}<p class="sc-post-excerpt">{{ post.excerpt }}</p>{% endif %}<div class="sc-post-meta">{% if post.author_name %}<span>{{ post.author_name }}</span>{% endif %}{% if post.published_at %}<span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span>{% endif %}</div></article>{% endfor %}</div>{% endif %}</div></section>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if description %}<p class="sc-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ description }}</p>{% endif %}
|
||||
<div class="sc-grid {% if columns == 3 %}sc-grid-3{% elif columns == 1 %}{% else %}sc-grid-2{% endif %}" style="display:grid;gap:1rem;{% if columns == 3 %}grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));{% elif columns == 1 %}grid-template-columns:1fr;{% else %}grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));{% endif %}">
|
||||
<div style="display:grid;gap:1rem;{% if columns == 3 %}grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));{% elif columns == 1 %}grid-template-columns:1fr;{% else %}grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));{% endif %}">
|
||||
{% for channel in channels %}<div class="sc-channel sc-card" style="display:flex;align-items:flex-start;gap:1rem;">
|
||||
{% if channel.icon %}<span class="sc-channel-mark" style="display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:0 0 auto;border:1px solid hsl(var(--border));border-radius:4px;color:hsl(var(--accent));">::{{ channel.icon }}:sm::</span>{% endif %}
|
||||
<div style="min-width:0;">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if layout == "cards" %}
|
||||
<div class="sc-grid sc-grid-3" style="margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;">
|
||||
<div style="margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;">
|
||||
{% for event in events %}{% if not (hidePast and event.past) %}<article class="sc-card" style="display:flex;flex-direction:column;padding:0;overflow:hidden;{% if event.past %}opacity:0.6;{% endif %}">
|
||||
{% if event.media %}<div class="sc-media-frame" style="aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid hsl(var(--border));">{% img event.media alt=event.title|default:"" class="sc-event-media" %}</div>{% endif %}
|
||||
<div style="display:flex;flex-direction:column;gap:0.5rem;padding:1.25rem;flex:1;">
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
{% if eyebrow %}<p class="sc-eyebrow">{{ eyebrow }}</p>{% endif %}
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if items %}<div class="sc-grid {% if columns == 2 %}sc-grid-2{% elif columns == 4 %}sc-grid-4{% else %}sc-grid-3{% endif %}">{% for item in items %}<div class="sc-feature">{% if item.icon %}<span class="sc-mark sc-mark-square" aria-hidden="true">::{{ item.icon }}:sm::</span>{% else %}<span class="sc-mark sc-mark-square" aria-hidden="true"></span>{% endif %}{% if item.title %}<h3 class="sc-feature-title">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" style="color: inherit; text-decoration: none;">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>{% endif %}{% if item.text %}<p class="sc-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ item.text }}</p>{% endif %}{% if item.linkUrl and item.linkLabel %}<a class="sc-btn-ghost" href="{{ item.linkUrl }}" style="margin-top: 0.75rem;">{{ item.linkLabel }}::lucide:arrow-right:sm::</a>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
{% if items %}<div class="grid grid-cols-1 gap-6 {% if columns == 2 %}sm:grid-cols-2{% elif columns == 4 %}sm:grid-cols-2 lg:grid-cols-4{% else %}sm:grid-cols-2 lg:grid-cols-3{% endif %}">{% for item in items %}<div class="sc-feature">{% if item.icon %}<span class="sc-mark sc-mark-square" aria-hidden="true">::{{ item.icon }}:sm::</span>{% else %}<span class="sc-mark sc-mark-square" aria-hidden="true"></span>{% endif %}{% if item.title %}<h3 class="sc-feature-title">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" style="color: inherit; text-decoration: none;">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>{% endif %}{% if item.text %}<p class="sc-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ item.text }}</p>{% endif %}{% if item.linkUrl and item.linkLabel %}<a class="sc-btn-ghost" href="{{ item.linkUrl }}" style="margin-top: 0.75rem;">{{ item.linkLabel }}::lucide:arrow-right:sm::</a>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
</div></section>
|
||||
|
||||
@ -1 +1 @@
|
||||
<section class="sc-section {{ class }}" data-block="scifi-clean:featured-posts"><div class="sc-content-well">{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 2rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}<div class="sc-post-grid {% if columns == 2 %}sc-post-grid-2{% else %}sc-post-grid-3{% endif %}">{% for post in posts %}<article class="sc-post-card">{% if showFeaturedImage and post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h3 class="sc-post-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>{% if showExcerpt and post.excerpt %}<p class="sc-post-excerpt">{{ post.excerpt }}</p>{% endif %}<div class="sc-post-meta">{% if showAuthor and post.author_name %}<span>{{ post.author_name }}</span>{% endif %}{% if showDate and post.published_at %}<span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span>{% endif %}{% if post.reading_time %}<span class="sc-mono numeric-tabular">{{ post.reading_time }} min</span>{% endif %}</div></article>{% endfor %}</div></div></section>
|
||||
<section class="sc-section {{ class }}" data-block="scifi-clean:featured-posts"><div class="sc-content-well">{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 2rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}<div class="grid grid-cols-1 gap-10 {% if columns == 2 %}sm:grid-cols-2{% else %}sm:grid-cols-2 lg:grid-cols-3{% endif %}">{% for post in posts %}<article class="sc-post-card">{% if showFeaturedImage and post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h3 class="sc-post-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>{% if showExcerpt and post.excerpt %}<p class="sc-post-excerpt">{{ post.excerpt }}</p>{% endif %}<div class="sc-post-meta">{% if showAuthor and post.author_name %}<span>{{ post.author_name }}</span>{% endif %}{% if showDate and post.published_at %}<span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span>{% endif %}{% if post.reading_time %}<span class="sc-mono numeric-tabular">{{ post.reading_time }} min</span>{% endif %}</div></article>{% endfor %}</div></div></section>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{# footer override — schematic-grid footer chrome from CONTENT fields (brand, contact, newsletter, legal); menu columns / social / legal rows render from the footer providers (empty today, forward-correct). #}
|
||||
<footer class="sc-footer {{ class }}"><div class="sc-content-well">
|
||||
<div class="sc-footer-cols" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;align-items:start;">
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;align-items:start;">
|
||||
<div class="sc-stack" style="grid-column:span 2;min-width:220px;display:flex;flex-direction:column;gap:1rem;">
|
||||
<a href="/" style="display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;color:hsl(var(--foreground));">{% if logo %}{% img logo alt=companyName|default:"Home" class="sc-footer-logo" %}{% else %}<span class="sc-mark sc-mark-square" aria-hidden="true"></span><span class="sc-display" style="font-size:1.125rem;">{{ companyName|default:context.site.title|default:"Studio" }}</span>{% endif %}</a>
|
||||
{% if tagline %}<p class="sc-text" style="font-size:0.9375rem;max-width:34ch;margin:0;color:hsl(var(--muted-foreground));">{{ tagline }}</p>{% endif %}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
{% if trustLogos %}<div class="sc-hairline-top" style="margin-top: 3rem; padding-top: 1.5rem;"><p class="sc-kicker sc-eyebrow" style="margin-bottom: 1rem; color: hsl(var(--muted-foreground));">Trusted by</p><div class="sc-logo-row" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;">{% for logo in trustLogos %}{% if logo.url %}<a href="{{ logo.url }}">{% img logo.image alt=logo.alt class="sc-logo" %}</a>{% else %}{% img logo.image alt=logo.alt class="sc-logo" %}{% endif %}{% endfor %}</div></div>{% endif %}
|
||||
{% endmacro %}
|
||||
{% if variant == "split" %}
|
||||
<section class="sc-hero sc-hero-split {{ class }}" style="padding-top: 4rem; padding-bottom: 4rem;"><div class="sc-content-well"><div class="sc-grid {% if backgroundImage %}sc-grid-2{% endif %}" style="align-items: center;"><div>{{ herobody() }}</div>{% if backgroundImage %}<div class="sc-media-frame" style="aspect-ratio: 4 / 3; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow: hidden; {% if mediaPosition == "left" %}order: -1;{% endif %}">{% img backgroundImage alt=headlineText class="sc-hero-media" %}</div>{% endif %}</div></div></section>
|
||||
<section class="sc-hero grid grid-cols-1 gap-12 lg:grid-cols-2 items-center {{ class }}" style="padding-top: 4rem; padding-bottom: 4rem;"><div class="sc-content-well"><div class="grid grid-cols-1 gap-6 {% if backgroundImage %}sm:grid-cols-2{% endif %} items-center"><div>{{ herobody() }}</div>{% if backgroundImage %}<div class="sc-media-frame" style="aspect-ratio: 4 / 3; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow: hidden; {% if mediaPosition == "left" %}order: -1;{% endif %}">{% img backgroundImage alt=headlineText class="sc-hero-media" %}</div>{% endif %}</div></div></section>
|
||||
{% else %}
|
||||
<section class="sc-hero {{ class }}" style="padding-top: 4.5rem; padding-bottom: 3.5rem; {% if variant == "left-aligned" %}text-align: left;{% else %}text-align: center;{% endif %}"><div class="sc-content-well" style="{% if variant != "left-aligned" %}display: flex; flex-direction: column; align-items: center;{% endif %}"><div style="max-width: 60ch; width: 100%;">{{ herobody() }}</div></div></section>
|
||||
{% endif %}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{# hours-location override — hairline hours table + address; click-to-load map preserves the builtin data-map-src / onclick wiring. #}
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
<div class="sc-grid sc-grid-2" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:2.5rem;margin-top:2.5rem;">
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:2.5rem;margin-top:2.5rem;">
|
||||
<div>
|
||||
{% if hours %}<table style="width:100%;border-collapse:collapse;font-size:0.9375rem;"><tbody>{% for row in hours %}<tr class="sc-hours-row sc-hairline-bottom"><th scope="row" style="text-align:left;padding:0.5rem 1rem 0.5rem 0;font-weight:500;">{{ row.day }}</th><td class="numeric-tabular" style="text-align:right;padding:0.5rem 0;color:{% if row.closed %}hsl(var(--muted-foreground)){% else %}hsl(var(--foreground)){% endif %};">{% if row.closed %}Closed{% else %}{{ row.hours }}{% endif %}</td></tr>{% endfor %}</tbody></table>{% endif %}
|
||||
{% if specialHoursNote %}<p class="sc-surface-muted" style="margin-top:1rem;border:1px solid hsl(var(--border));background:hsl(var(--muted));padding:0.5rem 0.75rem;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ specialHoursNote }}</p>{% endif %}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
<div class="sc-grid {% if columns == 2 %}sc-grid-2{% endif %}" style="display:grid;gap:2.5rem 3rem;{% if columns == 2 %}grid-template-columns:repeat(2, minmax(0, 1fr));{% endif %}">
|
||||
<div style="display:grid;gap:2.5rem 3rem;{% if columns == 2 %}grid-template-columns:repeat(2, minmax(0, 1fr));{% endif %}">
|
||||
{% for section in sections %}<div class="sc-menu-section" style="break-inside:avoid;">
|
||||
{% if section.title %}<h3 class="sc-display" style="font-size:1.25rem;border-bottom:1px solid hsl(var(--border));padding-bottom:0.5rem;margin:0 0 1rem 0;">{{ section.title }}</h3>{% endif %}
|
||||
{% if section.note %}<p style="margin:0 0 1rem 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ section.note }}</p>{% endif %}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if tiers %}<div class="sc-grid sc-grid-3">{% for tier in tiers %}<div class="sc-card sc-price-tier {% if tier.highlighted %}sc-price-tier--featured sc-card-accent{% endif %}" style="display: flex; flex-direction: column;">
|
||||
{% if tiers %}<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{% for tier in tiers %}<div class="sc-card sc-price-tier {% if tier.highlighted %}sc-price-tier--featured sc-card-accent{% endif %}" style="display: flex; flex-direction: column;">
|
||||
{% if tier.badge %}<span class="sc-badge" style="display: inline-block; align-self: flex-start; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.5rem; border-radius: 4px; margin-bottom: 0.75rem;">{{ tier.badge }}</span>{% endif %}
|
||||
{% if tier.name %}<h3 class="sc-feature-title" style="margin: 0;">{{ tier.name }}</h3>{% endif %}
|
||||
<p style="display: flex; align-items: baseline; gap: 0.25rem; margin: 1rem 0 0 0;"><span class="sc-price numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));">{% if currency %}{{ currency }}{% else %}${% endif %}{{ tier.price }}</span>{% if tier.period %}<span class="sc-price-period sc-stat-label" style="margin-top: 0;">{{ tier.period }}</span>{% endif %}</p>
|
||||
|
||||
@ -1 +1 @@
|
||||
<section class="sc-section sc-hairline-top {{ class }}" data-block="scifi-clean:related-posts"><div class="sc-content-well"><h2 class="sc-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 2rem 0;"><span class="sc-heading-h2-accent">{{ heading|default:"Related posts" }}</span></h2><div class="sc-post-grid {% if columns == 2 %}sc-post-grid-2{% else %}sc-post-grid-3{% endif %}">{% for post in posts %}<article class="sc-post-card">{% if post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h3 class="sc-post-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>{% if post.published_at %}<div class="sc-post-meta"><span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span></div>{% endif %}</article>{% endfor %}</div></div></section>
|
||||
<section class="sc-section sc-hairline-top {{ class }}" data-block="scifi-clean:related-posts"><div class="sc-content-well"><h2 class="sc-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 2rem 0;"><span class="sc-heading-h2-accent">{{ heading|default:"Related posts" }}</span></h2><div class="grid grid-cols-1 gap-10 {% if columns == 2 %}sm:grid-cols-2{% else %}sm:grid-cols-2 lg:grid-cols-3{% endif %}">{% for post in posts %}<article class="sc-post-card">{% if post.featured_image_url %}<a href="{{ post.url }}" class="sc-post-thumb sc-media-frame" style="display: block; aspect-ratio: 16 / 9;"><img src="{{ post.featured_image_url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;"></a>{% endif %}<h3 class="sc-post-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>{% if post.published_at %}<div class="sc-post-meta"><span class="sc-mono numeric-tabular">{{ post.published_at|date:"M j, Y" }}</span></div>{% endif %}</article>{% endfor %}</div></div></section>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{# rich-section override — two-column media + rich text, hairline surface options. #}
|
||||
<section class="sc-section {% if background == "muted" %}sc-surface-muted{% elif background == "card" %}sc-surface-card{% endif %} {{ class }}"><div class="sc-content-well"><div class="sc-grid {% if media %}sc-grid-2{% endif %}" style="align-items: center;">
|
||||
<section class="sc-section {% if background == "muted" %}sc-surface-muted{% elif background == "card" %}sc-surface-card{% endif %} {{ class }}"><div class="sc-content-well"><div class="grid grid-cols-1 gap-6 {% if media %}sm:grid-cols-2{% endif %} items-center">
|
||||
<div>
|
||||
{% if eyebrow %}<p class="sc-eyebrow">{{ eyebrow }}</p>{% endif %}
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if items %}<div class="sc-grid {% if columns == 2 %}sc-grid-2{% elif columns == 3 %}sc-grid-3{% else %}sc-grid-4{% endif %}">{% for item in items %}<div class="sc-hairline-top" style="padding-top: 1.25rem;"><div class="sc-stat-figure numeric-tabular" style="font-size: clamp(2.5rem, 5vw, 3.5rem);">{% if item.prefix %}{{ item.prefix }}{% endif %}{{ item.value }}{% if item.suffix %}{{ item.suffix }}{% endif %}</div>{% if item.label %}<div class="sc-stat-label">{{ item.label }}</div>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
{% if items %}<div class="grid grid-cols-1 gap-6 {% if columns == 2 %}sm:grid-cols-2{% elif columns == 3 %}sm:grid-cols-2 lg:grid-cols-3{% else %}sm:grid-cols-2 lg:grid-cols-4{% endif %}">{% for item in items %}<div class="sc-hairline-top" style="padding-top: 1.25rem;"><div class="sc-stat-figure numeric-tabular" style="font-size: clamp(2.5rem, 5vw, 3.5rem);">{% if item.prefix %}{{ item.prefix }}{% endif %}{{ item.value }}{% if item.suffix %}{{ item.suffix }}{% endif %}</div>{% if item.label %}<div class="sc-stat-label">{{ item.label }}</div>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
</div></section>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if members %}<div class="{% if layout == "list" %}sc-stack{% elif layout == "single" %}sc-measure{% else %}sc-leadership-grid{% endif %}">{% for member in members %}<div class="sc-feature">
|
||||
{% if members %}<div class="{% if layout == "list" %}sc-stack{% elif layout == "single" %}sc-measure{% else %}grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4{% endif %}">{% for member in members %}<div class="sc-feature">
|
||||
{% if member.photo %}<div class="sc-media-frame" style="aspect-ratio: 1 / 1; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow: hidden; margin-bottom: 1rem;">{% img member.photo alt=member.name class="sc-team-photo" %}</div>{% endif %}
|
||||
{% if member.name %}<h3 class="sc-feature-title" style="margin: 0;">{{ member.name }}</h3>{% endif %}
|
||||
{% if member.role %}<div class="sc-stat-label" style="margin-top: 0.25rem;">{{ member.role }}</div>{% endif %}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{# testimonial override — accent-ruled pull quotes, optional 5-star scale. #}
|
||||
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
||||
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 2.5rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
<div class="{% if layout == "single" %}sc-measure{% else %}sc-grid sc-grid-3{% endif %}">{% for q in quotes %}<figure class="sc-quote-block sc-card" style="margin: 0; display: flex; flex-direction: column;">
|
||||
<div class="{% if layout == "single" %}sc-measure{% else %}grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3{% endif %}">{% for q in quotes %}<figure class="sc-quote-block sc-card" style="margin: 0; display: flex; flex-direction: column;">
|
||||
{% if q.rating %}<div class="sc-rating" aria-label="Rated {{ q.rating }} out of 5" style="display: flex; gap: 0.125rem; margin-bottom: 0.75rem;"><span style="color: {% if q.rating >= 1 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 2 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 3 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 4 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 5 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span></div>{% endif %}
|
||||
{% if q.quote %}<blockquote class="sc-pull-quote" style="flex: 1; margin: 0;">{{ q.quote }}</blockquote>{% endif %}
|
||||
<figcaption class="sc-quote-cite" style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem;">{% if q.avatar %}<span class="sc-avatar" style="width: 2.75rem; height: 2.75rem; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted)); display: inline-flex; flex: none;">{% img q.avatar alt=q.name class="sc-avatar-img" %}</span>{% endif %}<span>{% if q.name %}<span class="sc-feature-title" style="display: block; font-size: 0.9375rem;">{{ q.name }}</span>{% endif %}{% if q.role %}<span class="sc-stat-label" style="margin-top: 0;">{{ q.role }}</span>{% endif %}</span></figcaption>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="sc-content-well">{{ slots.header|safe }}</div>
|
||||
</header>
|
||||
<main class="sc-content-well" style="flex: 1 1 auto; padding-top: 3rem; padding-bottom: 3rem;" data-content-well>
|
||||
<div class="sc-swiss-12" data-grid="swiss-12">
|
||||
<div class="grid grid-cols-12 gap-6" data-grid="swiss-12">
|
||||
<article class="sc-article-measure" style="grid-column: span 12 / span 12;">
|
||||
{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No article content yet.</p>{% endif %}
|
||||
</article>
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
<main style="flex: 1 1 auto; width: 100%;" data-content-well>
|
||||
<div class="sc-content-well sc-section">
|
||||
{% if slots.aside %}
|
||||
<div class="sc-swiss-12">
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<div style="grid-column: span 12 / span 12;" class="sc-contact-main">{{ slots.main|safe }}</div>
|
||||
<aside style="grid-column: span 12 / span 12;" class="sc-hairline-top sc-contact-aside">{{ slots.aside|safe }}</aside>
|
||||
</div>
|
||||
<style>@media (min-width: 1024px){.sc-contact-main{grid-column: span 7 / span 7 !important;} .sc-contact-aside{grid-column: 9 / span 4 !important; border-top: 0 !important; padding-left: 2rem; border-left: 1px solid hsl(var(--border));}}</style>
|
||||
{% else %}
|
||||
<div class="sc-swiss-12"><div style="grid-column: span 12 / span 12;" class="sc-measure">{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No content blocks assigned to this page.</p>{% endif %}</div></div>
|
||||
<div class="grid grid-cols-12 gap-6"><div style="grid-column: span 12 / span 12;" class="sc-measure">{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No content blocks assigned to this page.</p>{% endif %}</div></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="sc-content-well">{{ slots.header|safe }}</div>
|
||||
</header>
|
||||
<main class="sc-content-well" style="flex: 1 1 auto; padding-top: 3rem; padding-bottom: 3rem;" data-content-well>
|
||||
<div class="sc-swiss-12" data-grid="swiss-12">
|
||||
<div class="grid grid-cols-12 gap-6" data-grid="swiss-12">
|
||||
<div style="grid-column: span 12 / span 12;">
|
||||
{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No content blocks assigned to this page.</p>{% endif %}
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</header>
|
||||
<section style="width: 100%;">{{ slots.hero|safe }}</section>
|
||||
<main style="flex: 1 1 auto;" data-content-well>
|
||||
{% if slots.main %}<div class="sc-content-well"><div class="sc-swiss-12" data-grid="swiss-12" style="padding-top: 3rem; padding-bottom: 3rem;"><div style="grid-column: span 12 / span 12;">{{ slots.main|safe }}</div></div></div>{% endif %}
|
||||
{% if slots.main %}<div class="sc-content-well"><div class="grid grid-cols-12 gap-6" data-grid="swiss-12" style="padding-top: 3rem; padding-bottom: 3rem;"><div style="grid-column: span 12 / span 12;">{{ slots.main|safe }}</div></div></div>{% endif %}
|
||||
</main>
|
||||
<section style="width: 100%;">{{ slots.cta|safe }}</section>
|
||||
<footer style="width: 100%; margin-top: auto;">{{ slots.footer|safe }}</footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user