@janga/norna 0.7.8 → 0.7.10

package/examples/presentation/site/routes/010-presets/route-content.md

@@ -0,0 +1,63 @@
+---
+title: Presets
+description: Compare Norna's built-in typography presets.
+navigation:
+  label: Presets
+---
+
+## Quiet Gallery {#quiet-gallery}
+
+This route uses the `quiet-gallery` preset. It keeps headings and body text
+restrained so images or other visual material can carry more of the page.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+ante venenatis dapibus posuere velit aliquet. This is useful for portfolios,
+image-led presentations and pages where captions matter more than long prose.
+
+### Typical use
+
+Choose this preset when the page should feel calm and the visual material should
+remain the primary signal.
+
+## Compact Gallery {#compact-gallery}
+
+This section uses `compact-gallery`. It keeps the same broad model but fits more
+short sections and image-led content into a smaller vertical rhythm.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum
+nulla sed consectetur. This is useful when visitors need to scan many compact
+items without losing the overall structure of the page.
+
+### Typical use
+
+Choose this preset for a dense overview, catalogue or small collection of
+related items.
+
+## Text Forward {#text-forward}
+
+This section uses `text-forward`. It gives explanatory writing more presence
+while retaining the same Norna section structure.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur
+est at lobortis. Cras mattis consectetur purus sit amet fermentum. This is
+useful for guides, project explanations and documentation with only occasional
+images.
+
+### Typical use
+
+Choose this preset when the reader should spend more time with the text than
+with a gallery.
+
+## Statement {#statement}
+
+This section uses `statement`. It gives short, declarative content a stronger
+visual voice.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi
+porta gravida at eget metus. Use it sparingly when a section needs emphasis,
+contrast or a more direct editorial tone.
+
+### Typical use
+
+Choose this preset for an introduction, a short point of view or a deliberately
+strong transition between quieter sections.

package/examples/presentation/site/routes/010-presets/theme.md

@@ -0,0 +1,4 @@
+---
+typography:
+  preset: quiet-gallery
+---

package/examples/presentation/site/routes/020-media/images/cards/card-carousel.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel card</title>
+  <desc id="desc">A framed panel with a central image and navigation marks.</desc>
+  <rect width="1200" height="700" fill="#d9dfda"/>
+  <rect x="210" y="130" width="780" height="440" rx="18" fill="#f7f8f7"/>
+  <circle cx="600" cy="320" r="135" fill="#38645a"/>
+  <path d="M300 570h600" stroke="#17201d" stroke-width="10" opacity=".35"/>
+  <circle cx="545" cy="570" r="10" fill="#17201d"/>
+  <circle cx="600" cy="570" r="10" fill="#17201d" opacity=".35"/>
+  <circle cx="655" cy="570" r="10" fill="#17201d" opacity=".35"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/cards/card-stack.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Image stack card</title>
+  <desc id="desc">Three offset paper rectangles represent an image stack.</desc>
+  <rect width="1200" height="700" fill="#f0ebe1"/>
+  <rect x="270" y="170" width="660" height="360" fill="#d8d0c4" transform="rotate(-7 600 350)"/>
+  <rect x="270" y="170" width="660" height="360" fill="#685a43" transform="rotate(6 600 350)"/>
+  <rect x="270" y="170" width="660" height="360" fill="#f8f5ee"/>
+  <circle cx="600" cy="350" r="92" fill="#685a43"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/cards/card-surfaces.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Section surfaces card</title>
+  <desc id="desc">Two horizontal surfaces show a restrained change of section background.</desc>
+  <rect width="1200" height="700" fill="#f8f5ee"/>
+  <rect x="170" y="145" width="860" height="170" fill="#f8f5ee" stroke="#272522" stroke-opacity=".25" stroke-width="5"/>
+  <rect x="170" y="385" width="860" height="170" fill="#ebe5d9"/>
+  <path d="M300 230h600M300 470h600" stroke="#685a43" stroke-width="18" opacity=".8"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/carousel/carousel-one.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame one</title>
+  <desc id="desc">A green panel with a diagonal line.</desc>
+  <rect width="1200" height="700" fill="#d9dfda"/>
+  <path d="M120 560 1080 140" stroke="#38645a" stroke-width="46"/>
+  <circle cx="260" cy="190" r="70" fill="#17201d"/>
+  <circle cx="940" cy="510" r="70" fill="#f7f8f7"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/carousel/carousel-three.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame three</title>
+  <desc id="desc">A red panel with a compact grid.</desc>
+  <rect width="1200" height="700" fill="#7d302b"/>
+  <g fill="#f8f5ee">
+    <rect x="270" y="170" width="180" height="150"/>
+    <rect x="510" y="170" width="180" height="150" opacity=".72"/>
+    <rect x="750" y="170" width="180" height="150" opacity=".48"/>
+    <rect x="270" y="380" width="180" height="150" opacity=".48"/>
+    <rect x="510" y="380" width="180" height="150" opacity=".72"/>
+    <rect x="750" y="380" width="180" height="150"/>
+  </g>
+</svg>

package/examples/presentation/site/routes/020-media/images/carousel/carousel-two.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Carousel frame two</title>
+  <desc id="desc">A blue-green panel with two overlapping circles.</desc>
+  <rect width="1200" height="700" fill="#17201d"/>
+  <circle cx="485" cy="350" r="210" fill="#38645a"/>
+  <circle cx="715" cy="350" r="210" fill="#d9dfda" opacity=".88"/>
+  <path d="M370 350h460" stroke="#f7f8f7" stroke-width="12" opacity=".65"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/stack/stack-one.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Single visual idea</title>
+  <desc id="desc">A warm panel with a large circle and a small accent line.</desc>
+  <rect width="1200" height="700" fill="#f0ebe1"/>
+  <circle cx="600" cy="330" r="190" fill="#685a43"/>
+  <rect x="260" y="555" width="680" height="12" rx="6" fill="#272522" opacity=".55"/>
+  <rect x="420" y="590" width="360" height="8" rx="4" fill="#272522" opacity=".25"/>
+</svg>

package/examples/presentation/site/routes/020-media/images/stack/stack-two.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Related visual detail</title>
+  <desc id="desc">A dark panel with three aligned cream blocks.</desc>
+  <rect width="1200" height="700" fill="#272522"/>
+  <rect x="170" y="170" width="250" height="360" fill="#f8f5ee"/>
+  <rect x="475" y="170" width="250" height="360" fill="#d8d0c4"/>
+  <rect x="780" y="170" width="250" height="360" fill="#685a43"/>
+  <rect x="170" y="570" width="860" height="10" fill="#f8f5ee" opacity=".55"/>
+</svg>

package/examples/presentation/site/routes/020-media/route-content.md

@@ -0,0 +1,77 @@
+---
+title: Media blocks
+description: Compare Norna's managed image stacks, carousels and card lists.
+navigation:
+  label: Media blocks
+---
+
+## Image stack {#stack}
+
+An image stack places one or more managed images in the normal Markdown flow.
+Each source file belongs in the section's image folder, and Norna creates the
+responsive output used by the browser.
+
+````
+```norna-image-stack
+- image: stack-one.svg
+  alt: A pale panel with a single large circle.
+  caption: One image can introduce a visual idea.
+- image: stack-two.svg
+  alt: A dark panel with three aligned blocks.
+  caption: A stack can contain several related images.
+```
+````
+
+```norna-image-stack
+- image: stack-one.svg
+  alt: A pale panel with a single large circle.
+  caption: One image can introduce a visual idea.
+- image: stack-two.svg
+  alt: A dark panel with three aligned blocks.
+  caption: A stack can contain several related images.
+```
+
+## Image carousel {#carousel}
+
+A carousel keeps a related group together while showing one image at a time.
+The controls, keyboard interaction and current position are provided by Norna.
+
+```norna-image-carousel
+- image: carousel-one.svg
+  alt: A green panel with a diagonal line.
+  caption: First frame: a broad direction.
+- image: carousel-two.svg
+  alt: A blue panel with two overlapping circles.
+  caption: Second frame: a closer relationship.
+- image: carousel-three.svg
+  alt: A red panel with a compact grid.
+  caption: Third frame: a denser detail.
+```
+
+## Card list {#cards}
+
+Cards are useful when several short items need the same visual treatment. The
+block controls the layout and size without requiring a component for each card.
+
+```norna-card-list
+layout: image-top
+flow: grid
+size: m
+width: normal
+
+- title: Image stack
+  text: A simple vertical sequence of managed images.
+  image: card-stack.svg
+  badge-text: Established
+- title: Carousel
+  text: A focused sequence with controls and captions.
+  image: card-carousel.svg
+  badge-text: Established
+- title: Section surfaces
+  text: A bounded way to create rhythm between sections.
+  image: card-surfaces.svg
+  badge-text: New
+```
+
+The examples above are still ordinary Markdown blocks. Their presentation is
+opinionated, so the same source remains predictable on smaller screens.

package/examples/presentation/site/routes/020-media/theme.md

@@ -0,0 +1,4 @@
+---
+typography:
+  preset: compact-gallery
+---

package/examples/presentation/site/routes/030-surfaces/route-content.md

@@ -0,0 +1,44 @@
+---
+title: Surfaces
+description: See how palette defaults and section surfaces work together.
+navigation:
+  label: Surfaces
+---
+
+## Palette options {#palette-options}
+
+Norna currently provides a small set of named palettes. The theme chooses one
+for the whole site:
+
+```yaml
+presentation:
+  palette: dark
+```
+
+The available choices are `dark`, `light` and `paper`. A palette defines the
+page, navigation, frame and section colours together, so these parts stay in
+balance.
+
+## Emphasis surface {#emphasis-surface}
+
+The route theme uses a palette and a surface sequence when a visual pause or
+change of rhythm helps the reader. This is not a free-form colour override:
+
+```yaml
+presentation:
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
+```
+
+The theme can cycle through the selected surfaces automatically. Individual
+sections do not select their own colours.
+
+## A practical rule {#practical-rule}
+
+Use the site palette for the overall tone. Use soft and emphasis surfaces for a
+small number of meaningful transitions, not to make every section look
+unrelated.
+
+Typography presets and media blocks can vary the content inside that system;
+surfaces provide the route-level rhythm around it.

package/examples/presentation/site/routes/030-surfaces/theme.md

@@ -0,0 +1,7 @@
+---
+presentation:
+  palette: light
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft, emphasis]
+---

package/examples/presentation/site/sitewide-content.md

@@ -0,0 +1,6 @@
+---
+navigation:
+  brand: Visual Model
+footer:
+  copyrightMessage: Norna visual model example.
+---

package/examples/presentation/site/theme.md

@@ -0,0 +1,43 @@
+---
+layout:
+  density: normal
+  pageWidth: 1240px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+  spacing:
+    firstSectionTop:
+      desktop: clamp(1.5rem, 3vw, 2.5rem)
+      mobile: 1rem
+    sectionGap:
+      desktop: clamp(2rem, 4vw, 3.5rem)
+      mobile: 2rem
+    finalSectionBottom:
+      desktop: clamp(2rem, 4vw, 3.5rem)
+      mobile: 2rem
+    headingToBlock:
+      desktop: 0.75em
+      mobile: 0.7em
+    blockGap:
+      desktop: 1.5em
+      mobile: 1.25em
+    imageGap:
+      desktop: clamp(1.25rem, 3vw, 2.25rem)
+      mobile: 1.5rem
+gallery:
+  width: 960px
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 72
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: text-forward
+  rhythm: normal
+presentation:
+  palette: paper  # Alternatives: dark, light
+  sectionSurfaces:
+    mode: cycle
+---