LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bottom-anchor banner artwork, instant navigation via in-memory page cache, seed/stars/structure tweaks

Browse Source 
- Fix banner artwork sizing: explicit 100% grid track so children
  stretch instead of resolving height:100% against a content-sized row
  (SVG intrinsic ratio bloated the row, cropping the artwork's bottom).
  Bottom-anchor via object-position, transform-origin and YMax slice.
- pagerite.js: in-memory page cache — preload every visible internal
  link once, serve navigation from memory without fetching; editors'
  loadPlain keeps the cache in sync (pagerite:page-fetched).
- Structure editor: delete pages directly, no two-step confirmation.
- New 'stars' banner design (drifting starfield) alongside 'eyes'.
- Rewrite seed content: welcome page, three-level docs section covering
  all Markdown features (source + rendered), showcase hierarchy with
  image positioning and a simple leaf-page banner example.
This commit is contained in:
LeoVasanko
2026-08-19 01:40:26 +00:00
parent 3b074c02ed
commit 512ed91b31
14 changed files with 409 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/pagerite.css
+18 -5
View File
@@ -132,22 +132,35 @@ body {
overflow: hidden;
/* Stack the design artwork and the page's own banner code on top of
each other (artwork first): the banner is a background layer, author
code overlays it. A single child behaves exactly as before. */
code overlays it. A single child behaves exactly as before. The track
is explicitly banner-sized: an auto row would size to the content
(an SVG's intrinsic aspect ratio makes it far taller than the banner),
and children's height:100% would resolve against that bloated row. */
display: grid;
grid-template: 100% / 100%;
}
/* :not(style, script): author-level display:block would override the UA's
display:none on those and render their source as banner text. */
display:none on those and render their source as banner text. No
width/height: the default stretch alignment fills the track without a
percentage-resolution cycle. */
#page-banner>*:not(style, script) {
grid-area: 1 / 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Banner artwork is bottom-anchored: the meaningful content (horizon,
ground, characters) sits at the bottom, so on wide viewports — where
the fixed-height banner crops the artwork vertically — the sky/top is
what scrolls out of view. object-position covers replaced elements
(img, canvas); inline SVG is anchored by the transform-origin below
together with preserveAspectRatio="...YMax slice" in the artwork. */
object-position: bottom;
/* Scroll parallax: pagerite.js sets --pry on <html>; the banner stays
windowed in place while the artwork drifts inside it. The scale
provides overscan so the drift never reveals an edge. */
provides overscan so the drift never reveals an edge; scaling from the
bottom keeps the artwork's bottom edge pinned to the banner's. */
transform: scale(1.25) translateY(var(--pry, 0px));
transform-origin: bottom;
will-change: transform;
}