npm - @janga/norna - Versions diffs - 0.7.8 → 0.7.10 - Mend

@janga/norna 0.7.8 → 0.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/examples/dog-gallery/dist/images/generated/golden-dogs/toller-puppy-a2a8fbc0-2576.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/golden-dogs/toller-puppy-a2a8fbc0-480.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/golden-dogs/toller-puppy-a2a8fbc0-768.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-cute-dog-077a0689-1080.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-cute-dog-077a0689-1277.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-cute-dog-077a0689-480.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-cute-dog-077a0689-768.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1080.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1440.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1536.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-480.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-768.webp ADDED Viewed

Binary file

package/examples/dog-gallery/dist/index.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html><html lang="en" style="scroll-behavior: smooth; --font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif; --page-width: 2048px; --content-gutter-desktop: clamp(1.25rem, 4vw, 3rem); --content-gutter-mobile: 16px; --space-nav-to-first-section-desktop: clamp(1.25rem, 2.5vw, 2rem); --space-nav-to-first-section-mobile: 1rem; --space-section-body-to-gallery-desktop: 1.25rem; --space-section-body-to-gallery-mobile: 1rem; --space-gallery-item-desktop: clamp(1.25rem, 2.8vw, 2rem); --space-gallery-item-mobile: 1.8rem; --space-section-to-section-desktop: clamp(1.8rem, 3vw, 2.75rem); --space-section-to-section-mobile: 1.65rem; --space-final-section-bottom-desktop: clamp(1.8rem, 3vw, 2.75rem); --space-final-section-bottom-mobile: 1.65rem; --gallery-width: 55vw; --gallery-max-available-width-desktop: 100%; --gallery-max-available-width-mobile: 100%; --gallery-max-image-height-desktop: 74svh; --gallery-max-image-height-mobile: 68svh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="description" content="A small norna example with free dog images."><meta name="theme-color" content="#000000"><link rel="canonical" href="http://localhost:4321/"><meta name="generator" content="Astro v7.1.3"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><title>Local Dog Example</title><link rel="stylesheet" href="/_astro/SitePage.DicGh_5N.css"></head><body><a class="skip-link" href="#main-content">Skip to content</a><header class="site-top site-top-has-site-nav" data-smooth-scroll="{&quot;durationPerPixelMs&quot;:0.22,&quot;enabled&quot;:true,&quot;maximumDurationMs&quot;:4000,&quot;minimumDurationMs&quot;:2000}" style="--site-top-background-color: #550000; --site-top-text-color: #ffffff"><div class="site-nav-row"><a class="site-brand" href="/"><img class="site-brand-logo" src="/dog-shelter-logo.svg" alt="Dog Site"></a><nav class="site-nav" aria-label="Pages"><ul><li class="site-nav-item site-nav-item-has-sections"><a href="/" aria-current="page">Snoopy´s dog shelter!</a><div class="site-nav-submenu"><nav aria-label="Snoopy´s dog shelter! On this page"><ul><li><a href="/#black-dogs">Black Dogs</a></li><li><a href="/#summer-dogs">Summer Dogs</a></li><li><a href="/#brown-dogs">Brown Dogs</a></li><li><a href="/#golden-dogs">Golden Dogs</a></li><li><a href="/#white-dogs">White Dogs</a></li><li><a href="/#sources">Sources</a></li></ul></nav></div></li><li class="site-nav-item site-nav-item-has-sections"><a href="/dog-care/">Dog care</a><div class="site-nav-submenu"><nav aria-label="Dog care On this page"><ul><li><a href="/dog-care/#daily-rhythm">Daily rhythm</a></li><li><a href="/dog-care/#calm-training">Calm training</a></li><li><a href="/dog-care/#media-notes">Media notes</a></li></ul></nav></div></li></ul></nav><details class="mobile-nav-menu"><summary><span>Snoopy´s dog shelter!</span></summary><div class="mobile-nav-panel"><nav class="mobile-site-nav" aria-label="Pages"><h2>Pages</h2><ul><li><a href="/" aria-current="page">Snoopy´s dog shelter!</a></li><li><a href="/dog-care/">Dog care</a></li></ul></nav><nav class="mobile-page-nav" aria-label="On this page"><h2>On this page</h2><ul><li><a href="/#black-dogs" aria-current="true">Black Dogs</a></li><li><a href="/#summer-dogs">Summer Dogs</a></li><li><a href="/#brown-dogs">Brown Dogs</a></li><li><a href="/#golden-dogs">Golden Dogs</a></li><li><a href="/#white-dogs">White Dogs</a></li><li><a href="/#sources">Sources</a></li></ul></nav></div></details></div></header><script type="module">var e=document.querySelector(`.site-top`),t=Array.from(document.querySelectorAll(`.site-section`)),n=Array.from(document.querySelectorAll(`.site-nav-submenu a, .mobile-page-nav a`)),r=document.querySelector(`.mobile-nav-menu`),i=JSON.parse(e?.getAttribute(`data-smooth-scroll`)??`{}`),a=0,o=[120,320,700,1e3,2e3],s=window.matchMedia(`(prefers-reduced-motion: reduce)`),c=i.minimumDurationMs,l=i.maximumDurationMs,u=i.durationPerPixelMs,d=[`wheel`,`touchstart`],f=new Set([`ArrowDown`,`ArrowUp`,`End`,`Home`,`PageDown`,`PageUp`,` `]),p=null,m=null,h=0;`scrollRestoration`in history&&(history.scrollRestoration=`manual`);var g=()=>{if(!(e instanceof HTMLElement))return;let t=Math.ceil(e.getBoundingClientRect().height+a);return document.documentElement.style.setProperty(`--site-top-anchor-offset`,`${t}px`),t},_=e=>{let n=e.replace(/^#/,``);return t.find(e=>e.id===n)},v=e=>e?.querySelector(`h1, h2`),y=()=>{p&&=(p.cancel(),null)},b=e=>{e&&m!==e.id&&(m=e.id,n.forEach(t=>{let n=new URL(t.href,window.location.href);n.pathname===window.location.pathname&&n.hash===`#${e.id}`?t.setAttribute(`aria-current`,`true`):t.removeAttribute(`aria-current`)}))},x=()=>_(window.location.hash),S=e=>{window.location.hash!==e&&history.pushState(null,``,e)},C=()=>{r instanceof HTMLDetailsElement&&(r.open=!1)},w=e=>{if(!(e instanceof HTMLElement))return;let t=v(e);if(!(t instanceof HTMLElement))return;let n=g();if(n)return Math.max(0,t.getBoundingClientRect().top+window.scrollY-n)},T=e=>{y();let t=document.documentElement,n=t.style.scrollBehavior;t.style.scrollBehavior=`auto`,window.scrollTo(0,e),t.style.scrollBehavior=n},E=e=>{let t=Math.abs(e);return!i.enabled||s.matches||t<=a?0:Math.min(l,Math.max(c,t*u))},D=e=>e<.5?4*e*e*e:1-(-2*e+2)**3/2,O=(e,{duration:t,onComplete:n}={})=>{y();let r=typeof e==`function`?e:()=>e,i=r();if(i===void 0)return 0;let a=window.scrollY,o=i-a,s=t??E(o);if(s<=0){let e=r();return e===void 0?0:(T(e),n?.(),0)}let c=document.documentElement,l=c.style.scrollBehavior,u=performance.now(),m=0,h={cancel:()=>{}},g=()=>{d.forEach(e=>{window.removeEventListener(e,v)}),window.removeEventListener(`keydown`,b),c.style.scrollBehavior=l,p===h&&(p=null)},_=()=>{m&&cancelAnimationFrame(m),g()},v=()=>_(),b=e=>{f.has(e.key)&&v()},x=e=>{let t=e-u,o=Math.min(1,t/s),c=r();c!==void 0&&(i=c);let l=a+(i-a)*D(o);if(window.scrollTo(0,l),o>=1){window.scrollTo(0,i),g(),n?.();return}m=requestAnimationFrame(x)};return h.cancel=_,p=h,c.style.scrollBehavior=`auto`,d.forEach(e=>{window.addEventListener(e,v,{passive:!0})}),window.addEventListener(`keydown`,b),m=requestAnimationFrame(x),s},k=(e,{behavior:t=`smooth`,duration:n,onComplete:r}={})=>{let i=w(e);if(i===void 0)return 0;let a=t===`smooth`?O(()=>w(e),{duration:n,onComplete:r}):(T(i),r?.(),0);return b(e),a},A=()=>{g()},j=()=>{if(p)return;let e=x();e instanceof HTMLElement&&k(e,{behavior:`auto`})},M=()=>{if(!window.location.hash)return;h+=1;let e=h;o.forEach(t=>{window.setTimeout(()=>{e===h&&requestAnimationFrame(j)},t)})},N=({behavior:e=`auto`,scrollHashlessTop:n=!1}={})=>{let r=x();if(r instanceof HTMLElement){k(r,{behavior:e}),M();return}n&&T(0),b(t[0])};n.forEach(e=>{e.addEventListener(`click`,t=>{let n=new URL(e.href,window.location.href);if(n.pathname!==window.location.pathname)return;let r=_(n.hash);if(!(r instanceof HTMLElement))return;let i=w(r);if(i===void 0)return;t.preventDefault();let a=n.hash,o=E(i-window.scrollY);S(a),b(r),C(),k(r,{behavior:`smooth`,duration:o,onComplete:M})})}),A(),requestAnimationFrame(()=>N({behavior:`auto`})),e instanceof HTMLElement&&`ResizeObserver`in window&&new ResizeObserver(A).observe(e),window.addEventListener(`resize`,A),window.addEventListener(`load`,M),window.addEventListener(`hashchange`,()=>N({behavior:`auto`,scrollHashlessTop:!0})),window.addEventListener(`popstate`,()=>N({behavior:`auto`,scrollHashlessTop:!0})),window.visualViewport&&window.visualViewport.addEventListener(`resize`,A);</script><main id="main-content" class="site-content"><section id="black-dogs" class="site-section" data-section-title="Black Dogs" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h1>Black Dogs</h1></header><div class="section-body section-body-has-gallery"><div class="section-markdown"><p>Black-coated dogs from the local norna development collection. This sentence
+contains <span class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d">yellow highlighted text</span> for inline style inspection.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+ante venenatis dapibus posuere velit aliquet.</p>
+<h3 id="coat-notes">Coat notes</h3>
+<p>This <code>###</code> heading should follow <code>typography.headings.h3</code>.</p>
+<h4 id="small-detail">Small detail</h4>
+<p>This <code>####</code> heading should follow <code>typography.headings.h4</code>.</p>
+<p>Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget
+metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+</div><div class="gallery" aria-label="Images: Black Dogs"><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-960.webp" srcset="/images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-480.webp 480w, /images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-768.webp 768w, /images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-960.webp 960w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 960 / 1600;" width="960" height="1600" class="gallery-image" alt="A black dog sitting outdoors and looking at the camera." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>Photo of a dog. ContaDeletada2906, CC0 1.0, via Wikimedia Commons.</span></div></figcaption></figure><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/black-dogs/black-puppy-meadow-7255e3d9-1440.webp" srcset="/images/generated/black-dogs/black-puppy-meadow-7255e3d9-480.webp 480w, /images/generated/black-dogs/black-puppy-meadow-7255e3d9-768.webp 768w, /images/generated/black-dogs/black-puppy-meadow-7255e3d9-1080.webp 1080w, /images/generated/black-dogs/black-puppy-meadow-7255e3d9-1440.webp 1440w, /images/generated/black-dogs/black-puppy-meadow-7255e3d9-1536.webp 1536w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 1536 / 1024;" width="1536" height="1024" class="gallery-image gallery-image-landscape" alt="A black puppy standing in a grassy meadow and looking at the camera." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>AI-generated image.</span></div></figcaption></figure></div><script type="module" src="/_astro/GalleryGrid.astro_astro_type_script_index_0_lang.B0kxDyGz.js"></script></div></div></section><section id="summer-dogs" class="site-section" data-section-title="Summer Dogs" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h2>Summer Dogs</h2></header><div class="section-body section-body-text-only"><div class="section-markdown"><p>This temporary section is visible during August 2026. It is here to demonstrate
+date-controlled sections and <span class="inline-style inline-style-alert" style="--inline-style-color: #ff9a3d">warm alert text</span> in the local dog example.</p>
+<p>Lorem ipsum dolor sit amet.</p>
+<p>Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis
+interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p></div></div></div></section><section id="brown-dogs" class="site-section" data-section-title="Brown Dogs" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h2>Brown Dogs</h2></header><div class="section-body section-body-has-gallery"><div class="section-markdown"><p>Brown dogs provide a second image section for local navigation checks.</p>
+<p>Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac
+cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
+amet risus.</p>
+<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus,
+porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at
+lobortis.</p>
+</div><div class="gallery" aria-label="Images: Brown Dogs"><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/brown-dogs/brown-dog-50ef114e-1440.webp" srcset="/images/generated/brown-dogs/brown-dog-50ef114e-480.webp 480w, /images/generated/brown-dogs/brown-dog-50ef114e-768.webp 768w, /images/generated/brown-dogs/brown-dog-50ef114e-1080.webp 1080w, /images/generated/brown-dogs/brown-dog-50ef114e-1440.webp 1440w, /images/generated/brown-dogs/brown-dog-50ef114e-1920.webp 1920w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 3939 / 2626;" width="3939" height="2626" class="gallery-image gallery-image-landscape" alt="A brown dog looking directly at the camera." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>DogBrown. Frank-3, CC0 1.0, via Wikimedia Commons.</span></div></figcaption></figure><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1440.webp" srcset="/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-480.webp 480w, /images/generated/brown-dogs/dog-accompanies-master-7ef804d5-768.webp 768w, /images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1080.webp 1080w, /images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1440.webp 1440w, /images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1920.webp 1920w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 2400 / 1800;" width="2400" height="1800" class="gallery-image gallery-image-landscape" alt="A man walks outdoors with a dog at his side." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>Dog accompanies his master. Steve Hillebrand, U.S. Fish and Wildlife Service, public domain.</span></div></figcaption></figure></div></div></div></section><section id="golden-dogs" class="site-section" data-section-title="Golden Dogs" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h2>Golden Dogs</h2></header><div class="section-body section-body-has-gallery"><div class="section-markdown"><p>Golden-coated retrievers add a third image section and more scrolling depth.</p>
+<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+<h3 id="training-note">Training note</h3>
+<p>This <code>###</code> heading follows the site-wide <code>headings.h3</code> style.</p>
+<p>Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis
+dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem
+lacinia quam venenatis vestibulum.</p>
+</div><div class="gallery" aria-label="Images: Golden Dogs"><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/golden-dogs/golden-retriever-f797fd88-1440.webp" srcset="/images/generated/golden-dogs/golden-retriever-f797fd88-480.webp 480w, /images/generated/golden-dogs/golden-retriever-f797fd88-768.webp 768w, /images/generated/golden-dogs/golden-retriever-f797fd88-1080.webp 1080w, /images/generated/golden-dogs/golden-retriever-f797fd88-1440.webp 1440w, /images/generated/golden-dogs/golden-retriever-f797fd88-1600.webp 1600w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 1600 / 1200;" width="1600" height="1200" class="gallery-image gallery-image-landscape" alt="A golden retriever standing outdoors." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>Golden Retriever. Ribo, public domain, via Wikimedia Commons.</span></div></figcaption></figure><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/golden-dogs/toller-puppy-a2a8fbc0-1440.webp" srcset="/images/generated/golden-dogs/toller-puppy-a2a8fbc0-480.webp 480w, /images/generated/golden-dogs/toller-puppy-a2a8fbc0-768.webp 768w, /images/generated/golden-dogs/toller-puppy-a2a8fbc0-1080.webp 1080w, /images/generated/golden-dogs/toller-puppy-a2a8fbc0-1440.webp 1440w, /images/generated/golden-dogs/toller-puppy-a2a8fbc0-1920.webp 1920w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 2576 / 1932;" width="2576" height="1932" class="gallery-image gallery-image-landscape" alt="A young Nova Scotia Duck Tolling Retriever puppy sitting on grass." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>Nova Scotia Duck Tolling Retriever puppy. RM, public domain, via Wikimedia Commons.</span></div></figcaption></figure></div></div></div></section><section id="white-dogs" class="site-section" data-section-title="White Dogs" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h2>White Dogs</h2></header><div class="section-body section-body-has-gallery"><div class="section-markdown"><p>A white dog completes the colour-based image sequence.</p>
+<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta
+gravida at eget metus.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum
+dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vestibulum id
+ligula porta felis euismod semper.</p>
+</div><div class="gallery" aria-label="Images: White Dogs"><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/white-dogs/white-cute-dog-077a0689-1277.webp" srcset="/images/generated/white-dogs/white-cute-dog-077a0689-480.webp 480w, /images/generated/white-dogs/white-cute-dog-077a0689-768.webp 768w, /images/generated/white-dogs/white-cute-dog-077a0689-1080.webp 1080w, /images/generated/white-dogs/white-cute-dog-077a0689-1277.webp 1277w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 1277 / 1060;" width="1277" height="1060" class="gallery-image gallery-image-landscape" alt="A white dog looking toward the camera." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>White cute dog. Neal Ziring, public domain, via Wikimedia Commons.</span></div></figcaption></figure><figure class="gallery-item"><div class="gallery-image-frame"><img src="/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1440.webp" srcset="/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-480.webp 480w, /images/generated/white-dogs/white-puppy-garden-d3ab2ca0-768.webp 768w, /images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1080.webp 1080w, /images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1440.webp 1440w, /images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1536.webp 1536w" sizes="(max-width: 700px) 100vw, 100vw" style="aspect-ratio: 1536 / 1024;" width="1536" height="1024" class="gallery-image gallery-image-landscape" alt="A fluffy white puppy standing on grass in a garden." decoding="async" fetchpriority="low" loading="lazy"></div><figcaption class="gallery-meta"><div class="gallery-details"><span>AI-generated image.</span></div></figcaption></figure></div></div></div></section><section id="sources" class="site-section" data-section-title="Sources" style="--section-background-color: #550000; --section-text-color: #ffffff; --section-heading-align-desktop: left; --section-heading-align-mobile: left; --section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); --section-heading-font-size-mobile: clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem); --section-heading-line-height: 1.08; --section-heading-spacing-after: 0.45em; --section-heading-width-desktop: var(--gallery-layout-width); --section-heading-width-mobile: var(--gallery-layout-width); --section-markdown-h3-align-desktop: left; --section-markdown-h3-align-mobile: left; --section-markdown-h3-font-size-desktop: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem); --section-markdown-h3-font-size-mobile: clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem); --section-markdown-h3-line-height: 1.35; --section-markdown-h3-spacing-before: 1.2em; --section-markdown-h3-spacing-after: 0.45em; --section-markdown-h4-align-desktop: left; --section-markdown-h4-align-mobile: left; --section-markdown-h4-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-markdown-h4-line-height: 1.5; --section-markdown-h4-spacing-before: 0.9em; --section-markdown-h4-spacing-after: 0.35em; --section-body-align-desktop: left; --section-body-align-mobile: left; --section-body-font-size-desktop: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-font-size-mobile: clamp(0.96rem, 0.94rem + 0.08vw, 1rem); --section-body-line-height: 1.5; --section-body-paragraph-spacing: 0.65em; --section-body-width-desktop: var(--gallery-layout-width); --section-body-width-mobile: var(--gallery-layout-width); --section-caption-align-desktop: center; --section-caption-align-mobile: center; --section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-font-size-mobile: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem); --section-caption-line-height: 1.35; --section-caption-spacing-before: 0.35em; --section-caption-justify-desktop: center; --section-caption-justify-mobile: center"><div class="section-card"><header class="section-header"><h2>Sources</h2></header><div class="section-body section-body-text-only"><div class="section-markdown"><p>Most images are sourced from Wikimedia Commons pages that list CC0 or
+public-domain licensing:</p>
+<ul>
+<li><a href="https://commons.wikimedia.org/wiki/File:Photo_of_a_dog.jpg">Photo of a dog</a></li>
+<li><a href="https://commons.wikimedia.org/wiki/File:DogBrown.jpg">DogBrown</a></li>
+<li><a href="https://commons.wikimedia.org/wiki/File:Dog_accompanies_his_master.jpg">Dog accompanies his master</a></li>
+<li><a href="https://commons.wikimedia.org/wiki/File:Golden_Retriever.jpg">Golden Retriever</a></li>
+<li><a href="https://commons.wikimedia.org/wiki/File:Toller_pup7wks2.JPG">Toller pup7wks2</a></li>
+<li><a href="https://commons.wikimedia.org/wiki/File:White_cute_dog.jpg">White cute dog</a></li>
+</ul>
+<p>The black and white puppy images are AI-generated.</p></div></div></div></section></main><footer class="site-footer" style="--site-footer-background-color: #550000; --site-footer-text-color: #ffffff"><p>Dog images from Wikimedia Commons; see image captions for license details.<span>Built 17/08/2026, 15:17</span></p></footer></body></html>

package/examples/dog-gallery/dist/robots.txt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ User-agent: *
2	+ Allow: /

package/examples/dog-gallery/node_modules/.vite/deps/_metadata.json CHANGED Viewed

@@ -1,31 +1,31 @@
 {
-  "hash": "18953098",
-  "configHash": "df6ba470",
+  "hash": "9288c44d",
+  "configHash": "157af100",
   "lockfileHash": "808f2e8e",
-  "browserHash": "54286dfc",
+  "browserHash": "a00be533",
   "optimized": {
     "astro > aria-query": {
       "src": "../../../../../node_modules/aria-query/lib/index.js",
       "file": "astro_n_aria-query.js",
-      "fileHash": "dc2a8aee",
+      "fileHash": "9b91d854",
       "needsInterop": true
     },
     "astro > axobject-query": {
       "src": "../../../../../node_modules/axobject-query/lib/index.js",
       "file": "astro_n_axobject-query.js",
-      "fileHash": "3acd67c7",
+      "fileHash": "5a1ed64b",
       "needsInterop": true
     },
     "astro > html-escaper": {
       "src": "../../../../../node_modules/html-escaper/esm/index.js",
       "file": "astro_n_html-escaper.js",
-      "fileHash": "9967a3db",
+      "fileHash": "6d948667",
       "needsInterop": false
     },
     "astro/runtime/client/dev-toolbar/entrypoint.js": {
       "src": "../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js",
       "file": "astro_runtime_client_dev-toolbar_entrypoint__js.js",
-      "fileHash": "98dc9563",
+      "fileHash": "deee87d7",
       "needsInterop": false
     }
   },

package/examples/dog-gallery/site/.norna/generated-images.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "black-puppy-meadow.png": {
+  "images/black-dogs/black-puppy-meadow.png": {
     "outputVersion": 2,
     "sourceHash": "7255e3d9148c1ded01ae6ae6809b9a8261b553a1516d3f8f4de0554bc321f652",
     "width": 1536,
@@ -27,7 +27,7 @@
       }
     ]
   },
-  "photo-of-a-black-dog.jpg": {
+  "images/black-dogs/photo-of-a-black-dog.jpg": {
     "outputVersion": 2,
     "sourceHash": "5cf614d2863ca8f86b6162c7b477fd2690adbc101816206c9e675bf36d9962d0",
     "width": 960,
@@ -47,7 +47,7 @@
       }
     ]
   },
-  "brown-dog.jpg": {
+  "images/brown-dogs/brown-dog.jpg": {
     "outputVersion": 2,
     "sourceHash": "50ef114e49ae48491c015157b4a25f4f1fd69140170fe6d4202c551858c3e03d",
     "width": 3939,
@@ -79,7 +79,7 @@
       }
     ]
   },
-  "dog-accompanies-master.jpg": {
+  "images/brown-dogs/dog-accompanies-master.jpg": {
     "outputVersion": 2,
     "sourceHash": "7ef804d5ebe27724409f4ffa94389c7b1102c2c8bb9c1dae29ecbd4c56e61af9",
     "width": 2400,
@@ -111,7 +111,7 @@
       }
     ]
   },
-  "golden-retriever.jpg": {
+  "images/golden-dogs/golden-retriever.jpg": {
     "outputVersion": 2,
     "sourceHash": "f797fd880d6c3b112ceb3408f468fbeaf442efc792f935fd6c9954b812fdc838",
     "width": 1600,
@@ -139,7 +139,7 @@
       }
     ]
   },
-  "toller-puppy.jpg": {
+  "images/golden-dogs/toller-puppy.jpg": {
     "outputVersion": 2,
     "sourceHash": "a2a8fbc0d599deb019d45f7b11de98bcbcb4f1fd609e931073161dcb88cbf63f",
     "width": 2576,
@@ -171,7 +171,7 @@
       }
     ]
   },
-  "white-cute-dog.jpg": {
+  "images/white-dogs/white-cute-dog.jpg": {
     "outputVersion": 2,
     "sourceHash": "077a06891d97eafb4593cfcaa5c9b04fdb1e3a6206d56acd4ebd3eadb83356bf",
     "width": 1277,
@@ -195,7 +195,7 @@
       }
     ]
   },
-  "white-puppy-garden.png": {
+  "images/white-dogs/white-puppy-garden.png": {
     "outputVersion": 2,
     "sourceHash": "d3ab2ca04fb37dfbf010e7f9f3adf2ba8401553bd1946e3b388cb662eac58ee9",
     "width": 1536,

package/examples/dog-gallery/site/config.mjs CHANGED Viewed

@@ -30,26 +30,6 @@ export default {
 			gallery: 'Images',
 		},
 	},
-	footer: {
-		// Omit this value to hide the copyright sentence.
-		copyrightMessage: 'Dog images from Wikimedia Commons; see image captions for license details.',
-		// Set enabled to false to hide the build timestamp while keeping its config.
-		buildInfo: {
-			enabled: true,
-			// Text shown before the formatted build timestamp.
-			text: 'Built',
-			// Standard Intl.DateTimeFormat options for the build timestamp.
-			dateTimeFormat: {
-				locale: 'en-GB',
-				timeZone: 'UTC',
-				dateStyle: 'short',
-				timeStyle: 'short',
-			},
-		},
-	},
 	github: {
 		// Example repository and workflow details used by deploy scripts.
 		repo: 'owner/example-site',

package/examples/dog-gallery/site/content.md CHANGED Viewed

@@ -2,7 +2,7 @@
 title: Local Dog Example
 description: A small norna example with free dog images.
 navigation:
-  label: Dog site!
+  label: Snoopy´s dog shelter!
 sections:
   summer-dogs:
     visible:
@@ -12,9 +12,8 @@ sections:
 ## Black Dogs {#black-dogs}
-Black-coated dogs from the local norna development collection. This
-sentence contains [yellow highlighted text]{.highlight} for inline style
-inspection.
+Black-coated dogs from the local norna development collection. This sentence
+contains **highlighted text** for inline emphasis inspection.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
 ante venenatis dapibus posuere velit aliquet.
@@ -42,7 +41,7 @@ metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
 ## Summer Dogs {#summer-dogs}
 This temporary section is visible during August 2026. It is here to demonstrate
-date-controlled sections and [warm alert text]{.alert} in the local dog example.
+date-controlled sections and **warm alert text** in the local dog example.
 Lorem ipsum dolor sit amet.

package/examples/dog-gallery/site/public/logo.svg ADDED Viewed

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 104" role="img" aria-labelledby="title desc">
+  <title id="title">Dog Shelter</title>
+  <desc id="desc">A line-art dog house, food bowl and dog beside the words Dog Shelter.</desc>
+  <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
+    <path d="M8 48 39 19l31 29M16 42v43h46V42M30 85V58h18v27"/>
+    <path d="M80 69h42l-6 17H86zM78 69c0-6 46-6 46 0"/>
+    <path d="M159 42c-3-8-2-17 2-24 6 2 12 6 16 11 5-4 11-7 17-8 3 8 1 16-4 22"/>
+    <path d="M158 41c-1 14 7 24 19 24s20-10 19-24M163 66c-5 8-7 15-6 20M191 66c5 8 7 15 6 20"/>
+    <circle cx="166" cy="43" r="2" fill="#fff" stroke="none"/>
+    <circle cx="186" cy="43" r="2" fill="#fff" stroke="none"/>
+    <path d="M177 50c2 2 6 2 8 0M181 47v3"/>
+  </g>
+  <text x="232" y="63" fill="#fff" font-family="Arial, Helvetica, sans-serif" font-size="29" font-weight="700" letter-spacing="2">DOG SHELTER</text>
+</svg>

package/examples/dog-gallery/site/sitewide-content.md ADDED Viewed

@@ -0,0 +1,16 @@
+---
+navigation:
+  logo:
+    alt: Dog Shelter
+    height: 2.6rem
+footer:
+  copyrightMessage: Dog images from Wikimedia Commons; see image captions for license details.
+  buildInfo:
+    enabled: true
+    text: Built
+    dateTimeFormat:
+      locale: en-GB
+      timeZone: UTC
+      dateStyle: short
+      timeStyle: short
+---

package/examples/dog-gallery/site/theme.md CHANGED Viewed

@@ -4,8 +4,6 @@
 # Active values below are ordinary YAML; this marked comment block is only help text.
 #
 # Available structure:
-# navigation:
-#   brand: site-wide brand/home text; defaults to the homepage title
 # layout:
 #   density: compact | normal | airy
 #   pageWidth: CSS length, e.g. 2048px
@@ -44,16 +42,10 @@
 #         spacingBefore: CSS length, e.g. 0.9em
 #         spacingAfter: CSS length, e.g. 0.35em
 # presentation:
-#   backgroundColor: quoted hex color, e.g. "#000000"
-#   textColor: quoted hex color, e.g. "#f7f4ee"
-#   inlineStyles:
-#     style-name:
-#       color: quoted hex color
-# frame:
-#   colors: presentation | theme
-#   colors:
-#     backgroundColor: quoted hex color
-#     textColor: quoted hex color
+#   palette: dark  # Alternatives: light, paper
+#   sectionSurfaces:
+#     mode: none | cycle
+#     sequence: [base, soft, emphasis]
 # norna:end theme-help
 layout:
   density: compact
@@ -71,9 +63,12 @@ layout:
     finalSectionBottom:
       desktop: clamp(1.8rem, 3vw, 2.75rem)
       mobile: 1.65rem
-    bodyToImages:
-      desktop: 1.25rem
-      mobile: 1rem
+    headingToBlock:
+      desktop: 0.65em
+      mobile: 0.6em
+    blockGap:
+      desktop: 1.25em
+      mobile: 1.1em
     imageGap:
       desktop: clamp(1.25rem, 2.8vw, 2rem)
       mobile: 1.8rem
@@ -100,13 +95,7 @@ typography:
         spacingBefore: 0.9em
         spacingAfter: 0.35em
 presentation:
-  backgroundColor: "#550000"
-  textColor: "#ffffff"
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
-    alert:
-      color: "#ff9a3d"
-frame:
-  colors: presentation
+  palette: dark  # Alternatives: light, paper
+  sectionSurfaces:
+    mode: cycle
 ---

package/examples/presentation/README.md ADDED Viewed

@@ -0,0 +1,15 @@
+# Norna visual model example
+This example is a visual test bench for Norna's presentation features.
+It shows established typography presets and managed media blocks alongside the
+palette and section-surface model. The SVG files are hand-authored local assets
+so the example does not depend on external images.
+Run it from the repository root with:
+```sh
+node bin/norna.mjs --site-dir examples/presentation/site dev:local
+```
+The site has a home page plus routes for presets, media blocks and surfaces.

package/examples/presentation/site/.norna/generated-images.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "routes/020-media/images/cards/card-carousel.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "1447ec44c3cfe2f9041237dfd8aff42a21b82bc6762b840ab2c22d17b0454f8b",
+    "src": "/images/original/routes/020-media/images/cards/card-carousel-1447ec44.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/cards/card-stack.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "00e6c2d553b7cb23cc8a13d0fbca72d25a046a76db828faa5de8ccb6b2e4b2ae",
+    "src": "/images/original/routes/020-media/images/cards/card-stack-00e6c2d5.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/cards/card-surfaces.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "094c43e8bad8f1b8e497d21996f5cf66588f3b4c1ab9ced6dd40a3f67d827fb4",
+    "src": "/images/original/routes/020-media/images/cards/card-surfaces-094c43e8.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/carousel/carousel-one.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "b2d1e7c0642cd1ec7b36a26da54b58739804b61db9e986fe054eb7fe3c811e88",
+    "src": "/images/original/routes/020-media/images/carousel/carousel-one-b2d1e7c0.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/carousel/carousel-three.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "08e70e38babec81507497a81dfe0136a7b9993fb885ac06155b346bfc8413cac",
+    "src": "/images/original/routes/020-media/images/carousel/carousel-three-08e70e38.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/carousel/carousel-two.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "ba65261788ba8cc8dd5162dd0a748919a01aa925f2f8e3f844745e0c54af28be",
+    "src": "/images/original/routes/020-media/images/carousel/carousel-two-ba652617.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/stack/stack-one.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "c835acc71775886a86829989398b2e498fb2ccedafa465ee03f97dd8f6695c69",
+    "src": "/images/original/routes/020-media/images/stack/stack-one-c835acc7.svg",
+    "width": 1200,
+    "height": 700
+  },
+  "routes/020-media/images/stack/stack-two.svg": {
+    "kind": "static",
+    "outputVersion": 2,
+    "sourceHash": "83c64b1c1dd3b4745100baf272db7e91921b2e2967a51f0d31a9cd30cf045881",
+    "src": "/images/original/routes/020-media/images/stack/stack-two-83c64b1c.svg",
+    "width": 1200,
+    "height": 700
+  }
+}

package/examples/presentation/site/config.mjs ADDED Viewed

@@ -0,0 +1,29 @@
+const siteUrl = 'http://localhost:4321/';
+export default {
+	site: {
+		url: siteUrl,
+		basePath: '/',
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 2_000,
+			maximumDurationMs: 4_000,
+			durationPerPixelMs: 0.22,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/norna-visual-model-example',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/presentation/site/content.md ADDED Viewed

@@ -0,0 +1,67 @@
+---
+title: Visual Model
+description: A visual test bench for Norna's established and new presentation features.
+navigation:
+  label: Home
+---
+## Norna's visual model {#intro}
+This site is a small test bench for Norna's graphical possibilities. It shows
+the features that have been part of the site model for some time, together with
+the newer palette and section-surface controls.
+The examples are deliberately ordinary Norna files: a theme chooses the site's
+visual defaults, routes can use their own complete themes, and Markdown blocks
+place managed media in the content flow.
+## New: palettes and surfaces {#palette}
+The palette is a small, named choice rather than a collection of unrelated
+colours. The site theme selects one of the built-in palettes:
+```yaml
+presentation:
+  palette: paper
+```
+The palette supplies the page, navigation and frame colours. A site can also
+cycle through base, soft and emphasis section surfaces:
+```yaml
+presentation:
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
+```
+This keeps the visual rhythm consistent without asking each section to invent
+its own colours.
+## New: explicit section surfaces {#surfaces}
+This page uses the theme's surface sequence. `palette` is the visual family;
+`sectionSurfaces` chooses a bounded sequence of base, soft and emphasis
+treatments for the page.
+The result is a restrained change in background and text treatment, while the
+same typography and content model remain in place.
+## Established features {#established}
+Typography presets, managed image stacks, carousels and card lists remain the
+main building blocks for shaping a small site. They are shown in detail on the
+routes in this example.
+The important distinction is that these controls are named and bounded. They
+provide useful visual variation without turning every page into a new template
+or CSS project.
+## Explore the examples {#next}
+Read [Presets](/presets/) to compare the four typography presets.
+Read [Media blocks](/media/) to compare image stacks, carousels and card lists.
+Read [Surfaces](/surfaces/) for the relationship between palette defaults and
+theme-level surface choices.

package/examples/presentation/site/public/robots.txt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ User-agent: *
2	+ Allow: /