jasa/tlig-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page component and filter pilles added

Browse Source
This commit is contained in:
jasa
2026-09-23 15:32:24 +02:00
parent e8a71dcb92
commit 3ee471bf39
10 changed files with 293 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/demo.scss
+21 -66
View File
@@ -1,73 +1,36 @@
// -----------------------------------------------------------------------------
// Demo chrome — NOT part of the shipped stylesheet.
//
// Everything here exists to frame the foundation in something that looks like
// the real site (wood ground, papyrus scroll) and to give the page its toolbar
// and swatch grid. It is reached only from src/index.html, which is not a build
// input, so none of it can reach dist/tlig.css.
// What is left here is only the page's own chrome: the toolbar, the swatch
// grid, the section scaffolding, and the four image URLs pointed at this
// project's local mirror. The scroll frame itself graduated into the
// stylesheet (`layout/_page.scss`).
//
// The scroll frame is deliberately here and not in components/: page layout is
// still on the "not done" list, and a demo is not the place to quietly ship it.
// Reached only from src/index.html, which is not a build input, so none of it
// can reach dist/tlig.css.
// -----------------------------------------------------------------------------
@use '../sass/abstracts' as *;
$img: '/wp-content/includes/images';
// -- The page ground ---------------------------------------------------------
html {
background: url('#{$img}/background_planche_1920.jpg') top center / contain fixed;
// The scroll frame is a real component now (`layout/_page.scss`). All the demo
// does is point its four image tokens at the local mirror in `site/`, which is
// exactly the re-pointing the component was built to allow.
:root {
--tlig-ground: url('#{$img}/background_planche_1920.jpg');
--tlig-scroll-head: url('#{$img}/page/background-message-entete_cnd.png.webp');
--tlig-scroll-body: url('#{$img}/page/background-message-milieux1200x190-4_cnd.png.webp');
--tlig-scroll-foot: url('#{$img}/page/background-message-footer-1200x114_cnd.png.webp');
}
body {
min-height: 100vh;
}
// The scroll: a head image, a vertically repeating middle, a foot image.
.scroll {
max-width: 1200px;
margin-inline: auto;
}
.scroll__head,
.scroll__foot {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.scroll__head {
height: 140px;
background-image: url('#{$img}/page/background-message-entete_cnd.png.webp');
background-position: bottom;
}
.scroll__body {
margin-block-start: -1px;
padding: 0 clamp(#{space-raw('md')}, 5vw, 5rem) space('xl');
background: url('#{$img}/page/background-message-milieux1200x190-4_cnd.png.webp') repeat-y top / 100% auto;
}
.scroll__foot {
// The top 18px of this image ramp from alpha 15 up to its 242 plateau — it
// fades in. Butted against the body, that ramp composites over bare wood and
// reads as a hard line at the body's bottom edge. The overlap below is the
// measured ramp height plus a little, so the whole fade lands on papyrus.
//
// `top` cannot do this: the element is static, and only a positioned box
// moves. `position`/`z-index` pin the paint order the effect depends on —
// tree order already gives it, but silently.
position: relative;
z-index: 1;
margin-block-start: -20px;
height: 114px;
background-image: url('#{$img}/page/background-message-footer-1200x114_cnd.png.webp');
background-position: top;
}
// Below the tablet breakpoint the site swaps in narrower scroll images, which
// are not mirrored into this project. Rather than stretch the wide ones, the
// demo falls back to a plain parchment panel.
// Only the wide cuts are mirrored into this project. Rather than stretch them,
// the demo drops the frame below the tablet breakpoint and falls back to a
// plain parchment panel. The real component swaps in the narrow cuts instead.
@include down('tablet') {
.scroll__head,
.scroll__foot { display: none; }
@@ -223,19 +186,11 @@ body {
&__spacer { flex: 1; }
button {
padding: 3px 10px;
border: 1px solid rgba(240, 230, 210, 0.3);
border-radius: radius('pill');
background: transparent;
// The toolbar's buttons are the real `.filter` component — the same pills the
// page uses. Nothing here restyles them; the dark ground is enough, because
// the pill takes its border from `currentColor`.
.filter {
color: inherit;
font-size: 12px;
&[aria-pressed='true'] {
background: #f0e6d2;
color: #1e0e0e;
border-color: #f0e6d2;
}
}
code {