8238bcce0e
- Reveal: in-viewport [data-sc-reveal]/schematic elements now reveal on the
first animation frame (getBoundingClientRect pass) and the safety-net timer
drops 1600ms -> 400ms (under the 1500ms capture settle). Fixes the ~10%
opacity above-the-fold KPI row + benchmark table and the washed-out About
"Recent releases" console, in both modes and for no-JS/no-scroll.
- Fonts: @font-face for Space Grotesk / Inter / JetBrains Mono against the
served /templates/scifi-clean/fonts/*.woff2 paths + typography refs in all
four presets (bundled_fonts is CMS dead code). --font-heading now resolves
to Space Grotesk live.
- Lexer trap: contact-form CSS `){#` -> `){ #` (was failing whole-theme
registration: "Newline not permitted in a single-line comment").
- Seed: set `title` so the navbar/site title shows "Halcyon Robotics" (was
leaking the gallery instance name); expanded the control-loop article to
~10 paragraphs to kill the footer dead space.
- SVG guard: explicit width/height on the <use> icon SVGs.
- Wave B gallery screenshots (home/about/article x light+dark), preview
= light home (light-canonical).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
86 lines
4.2 KiB
Plaintext
86 lines
4.2 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 }}
|
|
{% if slots.header %}<header class="sc-hairline-bottom" style="width: 100%;"><div class="sc-content-well">{{ slots.header|safe }}</div></header>{% endif %}
|
|
<main style="flex: 1 1 auto; width: 100%;" data-content-well>
|
|
<div class="sc-content-well sc-section">
|
|
{% if slots.aside %}
|
|
<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="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>
|
|
{% if slots.footer %}<footer style="width: 100%; margin-top: auto;">{{ slots.footer|safe }}</footer>{% endif %}
|
|
<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); });
|
|
/* Reveal anything already on screen now: first-screen readouts must not
|
|
wait on the async observer or a scroll (fixes ghosted above-the-fold
|
|
content in no-scroll captures / IO gaps). */
|
|
requestAnimationFrame(function(){
|
|
var vh = window.innerHeight || document.documentElement.clientHeight;
|
|
items.forEach(function(el){ if (el.getBoundingClientRect().top < vh) { el.classList.add("sc-in"); io.unobserve(el); } });
|
|
});
|
|
/* Safety net: guarantee full reveal for no-scroll captures / IO gaps. */
|
|
setTimeout(function(){ items.forEach(function(el){ el.classList.add("sc-in"); }); }, 400);
|
|
} 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>
|