6af6950f23
Layout / whitespace:
- Root-cause blank hero: seed passed hero styled-text (eyebrow/headline/
subheadline) as bare strings, but the hero template does field.text|default:field
and the ninjatpl engine throws a hard error on attribute-access-on-string, so the
whole hero (and the builtin fallback) errored and rendered as an empty ~160px band.
Seed now passes {text:...} objects (the builtin-sample / admin-editor format).
- tech_spec table: value + unit were both right-aligned, leaving a cavernous mid-gap;
label column now absorbs slack and value+unit group together on the right. Box
narrowed (34rem) with tighter padding so the HUD corners frame a deliberate panel.
- Tightened section rhythm (sc-section 4->3.5rem, sc-section-tight 2.5->2.75rem) and
hero bottom padding to remove oversized inter-section gaps.
- Defined sc-article-measure (was referenced but undefined -> unbounded line length).
Empty-media graceful state (seed ships no images):
- rich-section and hero (split) rendered an empty aspect-ratio muted box when media
was absent; media frame is now guarded and the grid collapses to one column.
Mobile responsiveness (explicit sc-* classes + @media, not JIT-scanned Tailwind):
- sc-form-grid (global + contact-form scoped) collapses to 1 column <=640px.
- gallery dropped inline grid-template-columns that overrode its responsive classes,
so 3/4-col galleries now collapse on small screens.
- nav toggle tap target bumped to 42x42px.
Motion robustness:
- Added a safety-net full-reveal timeout to the scroll-reveal script so below-fold
[data-sc-reveal] content is guaranteed visible on no-scroll screenshot captures and
IntersectionObserver edge cases. Reduced-motion / no-JS already render fully.
Semantic tokens only; check-safety 32 checks 19 ok 13 skip -> OK; codeless build OK.
No version bump.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
3.3 KiB
Plaintext
76 lines
3.3 KiB
Plaintext
<!doctype html>
|
|
<html lang="en">
|
|
{{ head_html|safe }}
|
|
<body class="sc-body" style="margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: hsl(var(--background)); color: hsl(var(--foreground));">
|
|
{{ admin_banner_html|safe }}
|
|
<header class="sc-hairline-bottom" style="width: 100%;">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
{% if slots.aside %}<aside class="sc-hairline-top" style="margin-top: 3rem; padding-top: 2rem;">{{ slots.aside|safe }}</aside>{% endif %}
|
|
</main>
|
|
<footer style="width: 100%; margin-top: auto;">{{ slots.footer|safe }}</footer>
|
|
<script>
|
|
/* Sci-Fi Clean MID motion: scroll-reveal, line-draw schematics, ticking
|
|
counters. Dependency-free. prefers-reduced-motion => everything static
|
|
and counters keep their final text. No JS => nothing runs, all visible. */
|
|
(function(){
|
|
var root = document.documentElement;
|
|
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (reduce) return;
|
|
root.classList.add('sc-js');
|
|
var revealSel = '[data-sc-reveal], .sc-schematic';
|
|
var items = [].slice.call(document.querySelectorAll(revealSel));
|
|
if ('IntersectionObserver' in window) {
|
|
var io = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){
|
|
if (e.isIntersecting) { e.target.classList.add('sc-in'); io.unobserve(e.target); }
|
|
});
|
|
}, { rootMargin: '0px 0px -8% 0px' });
|
|
items.forEach(function(el){ io.observe(el); });
|
|
/* Safety net: guarantee full reveal for no-scroll captures / IO gaps. */
|
|
setTimeout(function(){ items.forEach(function(el){ el.classList.add("sc-in"); }); }, 1600);
|
|
} else {
|
|
items.forEach(function(el){ el.classList.add('sc-in'); });
|
|
}
|
|
var counters = [].slice.call(document.querySelectorAll('[data-sc-count]'));
|
|
function animate(el){
|
|
var raw = String(el.getAttribute('data-sc-count') || '');
|
|
var m = raw.match(/-?[0-9]+(\.[0-9]+)?/);
|
|
if (!m) return;
|
|
var target = parseFloat(m[0]);
|
|
var decimals = (m[0].split('.')[1] || '').length;
|
|
var prefix = raw.slice(0, m.index);
|
|
var suffix = raw.slice(m.index + m[0].length);
|
|
var start = null, dur = 1100;
|
|
function step(ts){
|
|
if (start === null) start = ts;
|
|
var p = Math.min((ts - start) / dur, 1);
|
|
var eased = 1 - Math.pow(1 - p, 3);
|
|
el.textContent = prefix + (target * eased).toFixed(decimals) + suffix;
|
|
if (p < 1) requestAnimationFrame(step);
|
|
else el.textContent = raw;
|
|
}
|
|
requestAnimationFrame(step);
|
|
}
|
|
if ('IntersectionObserver' in window) {
|
|
var co = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){
|
|
if (e.isIntersecting) { animate(e.target); co.unobserve(e.target); }
|
|
});
|
|
}, { threshold: 0.4 });
|
|
counters.forEach(function(el){ co.observe(el); });
|
|
} else {
|
|
counters.forEach(animate);
|
|
}
|
|
})();
|
|
</script>
|
|
{{ body_end_html|safe }}
|
|
</body>
|
|
</html>
|