Filter pills
+ + + + + +The toggle behind the message archives, the photo and
+ video galleries, the theme taxonomy and the year accordions. The live CSS
+ spells it three times — .filters-tags-frame,
+ .cptButtonFilter, and a bare .active that fills
+ whatever it lands on with rgba(145,116,85,.5) and white text.
+ One class with a pressed state covers all three.
The border is currentColor at 55%, not a
+ fixed brown. That is why the identical pills in the toolbar above work on
+ a dark ground with no second rule — the same component, inheriting a
+ different text colour.
Context re-points tokens
@@ -148,6 +182,10 @@ button below are all correct as a result. No dark-specific rule for any of them exists in the stylesheet. +This is the mechanism that replaces the footer's 24 id selectors: a region declares what its tokens mean, and every diff --git a/src/sass/abstracts/_palette.scss b/src/sass/abstracts/_palette.scss index 355f98f..f9a6824 100644 --- a/src/sass/abstracts/_palette.scss +++ b/src/sass/abstracts/_palette.scss @@ -57,6 +57,7 @@ $sand-100: #fcf8e3; // values are what ships today and a rounding difference would be a visible // change dressed up as a refactor. $ink-86a: rgba(72, 32, 32, 0.86); // body text +$ink-55a: rgba(72, 32, 32, 0.55); // #4820208c — filter borders $ink-50a: rgba(72, 32, 32, 0.5); $wood-50a: rgba(145, 116, 85, 0.5); $wood-20a: rgba(145, 116, 85, 0.2); diff --git a/src/sass/abstracts/_tokens.scss b/src/sass/abstracts/_tokens.scss index 2c22de3..50a0881 100644 --- a/src/sass/abstracts/_tokens.scss +++ b/src/sass/abstracts/_tokens.scss @@ -49,6 +49,10 @@ $colors: ( 'button-donate-bg': $gold-700, 'button-donate-ink': $white, + // Filters — the pill toggles used across archives, galleries and the topbar + 'filter-fill': $wood-50a, // hover and selected + 'filter-ink-active': $white, + // Forms 'field-bg': $brown-300, 'field-ink': $white, diff --git a/src/sass/components/_filter.scss b/src/sass/components/_filter.scss new file mode 100644 index 0000000..ee34435 --- /dev/null +++ b/src/sass/components/_filter.scss @@ -0,0 +1,93 @@ +// ----------------------------------------------------------------------------- +// Filter pills. +// +// The toggle used wherever a list can be narrowed: message archives, the photo +// and video galleries, the theme taxonomy, the year and month accordions. The +// live CSS spells the same thing three times — `.filters-tags-frame`, +// `.cptButtonFilter` and a bare `.active` that fills anything it lands on with +// `rgba(145,116,85,0.5)` and white text. One class with a pressed state covers +// all three. +// +// The border is `currentColor` at 55%, not a fixed brown. That is what lets the +// same pill work on the papyrus page and on a dark ground without a second +// rule: re-point the text colour and the border follows. +// ----------------------------------------------------------------------------- + +@use '../abstracts' as *; + +.filter { + display: inline-flex; + align-items: center; + gap: space('2xs'); + margin: 0 space('xs') space('xs') 0; + padding: space('2xs') space('sm'); + border: 2px solid color-mix(in srgb, currentColor 55%, transparent); + border-radius: radius('sm'); + background-color: transparent; + color: color('page-ink-strong'); + font-family: font('body'); + font-size: 16px; + font-weight: weight('bold'); + line-height: 1.4; + letter-spacing: 1.5px; + text-align: center; + text-decoration: none; + cursor: pointer; + transition: background-color 120ms ease-in-out, color 120ms ease-in-out; + + &:hover, + &:focus-visible { + background-color: color('filter-fill'); + color: color('filter-ink-active'); + } + + // Pressed. `aria-pressed` is the accessible form and is what the styling + // hangs off; `.is-active` exists for markup that cannot carry the attribute. + &[aria-pressed='true'], + &.is-active { + background-color: color('filter-fill'); + color: color('filter-ink-active'); + border-color: transparent; + } + + &[disabled] { + opacity: 0.45; + cursor: not-allowed; + } + + // Compact, for a toolbar or a dense filter bar. + &--sm { + padding: space('3xs') space('xs'); + font-size: 12px; + letter-spacing: 1px; + } + + // Fully rounded, for tag-style filters. + &--pill { + border-radius: radius('pill'); + } +} + +// A row of them. Replaces `.filters-box` and `.cptFilters`. +.filter-bar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: space('2xs'); + padding: 0; + list-style: none; + + // The pills carry their own right/bottom margin for markup that is not a + // flex container; inside the bar the gap does the work instead. + .filter { + margin: 0; + } +} + +.filter-bar__label { + margin-inline-end: space('xs'); + font-family: font('body'); + font-size: 16px; + font-weight: weight('bold'); + letter-spacing: 1.5px; +} diff --git a/src/sass/components/_index.scss b/src/sass/components/_index.scss index ffa3061..6bf0ba8 100644 --- a/src/sass/components/_index.scss +++ b/src/sass/components/_index.scss @@ -1,3 +1,4 @@ @forward 'button'; @forward 'field'; +@forward 'filter'; @forward 'footer'; diff --git a/src/sass/layout/_index.scss b/src/sass/layout/_index.scss new file mode 100644 index 0000000..e181bc3 --- /dev/null +++ b/src/sass/layout/_index.scss @@ -0,0 +1 @@ +@forward 'page'; diff --git a/src/sass/layout/_page.scss b/src/sass/layout/_page.scss new file mode 100644 index 0000000..966ef81 --- /dev/null +++ b/src/sass/layout/_page.scss @@ -0,0 +1,98 @@ +// ----------------------------------------------------------------------------- +// The page: wood ground, and the papyrus scroll the content sits on. +// +// Three stacked pieces — a head image, a vertically repeating middle, a foot +// image — which is how the live site builds it. What is different here: +// +// * The image URLs are custom properties, not literals. Swapping the set for +// a breakpoint is four declarations in one place instead of six rules +// duplicated per breakpoint, and a demo or a staging copy can re-point them +// without touching the stylesheet. +// * The live CSS states every rule twice, once under `html.webp` and once +// under `html.no-webp`. Every browser that runs this today decodes WebP, so +// there is one set. +// * The overlaps are derived from the images rather than guessed — see the +// note on `__foot`. +// ----------------------------------------------------------------------------- + +@use '../abstracts' as *; + +// Where WordPress serves these from. A project that mirrors the assets +// elsewhere overrides the custom properties below rather than this variable. +$uploads: '/wp-content/uploads' !default; + +:root { + --#{$prefix}-ground: url('#{$uploads}/2019/03/background_planche_1920-3_cnd.jpg'); + --#{$prefix}-scroll-head: url('#{$uploads}/2018/10/background-message-entete_cnd.png.webp'); + --#{$prefix}-scroll-body: url('#{$uploads}/2018/10/background-message-milieux1200x190-4_cnd.png.webp'); + --#{$prefix}-scroll-foot: url('#{$uploads}/2018/11/background-message-footer-1200x114_cnd.png.webp'); +} + +// The narrower cuts. Same four names, different files. +@include down('tablet') { + :root { + --#{$prefix}-ground: url('#{$uploads}/2019/09/background_planche_800x1300.jpg'); + --#{$prefix}-scroll-head: url('#{$uploads}/2018/11/background-message-entete750x140_cnd.png.webp'); + --#{$prefix}-scroll-body: url('#{$uploads}/2018/11/background-message-milieux750x190_cnd.png.webp'); + --#{$prefix}-scroll-foot: url('#{$uploads}/2018/11/background-message-footer-6_cnd.png.webp'); + } +} + +@include down('phone') { + :root { + --#{$prefix}-ground: url('#{$uploads}/2019/09/background_planche_600x1000.jpg'); + --#{$prefix}-scroll-head: url('#{$uploads}/2018/11/background-message-entete360x140-2_cnd.png.webp'); + --#{$prefix}-scroll-body: url('#{$uploads}/2018/11/background-message-milieux360x190_cnd.png.webp'); + --#{$prefix}-scroll-foot: url('#{$uploads}/2018/11/background-message-footer-360x114-3_cnd.png.webp'); + } +} + +// -- The wood ground --------------------------------------------------------- + +html { + background: var(--#{$prefix}-ground) top center / contain fixed; +} + +// -- The scroll -------------------------------------------------------------- + +.scroll { + max-width: var(--#{$prefix}-site-width); + margin-inline: auto; +} + +.scroll__head, +.scroll__foot { + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.scroll__head { + height: 140px; + background-image: var(--#{$prefix}-scroll-head); + background-position: bottom; +} + +.scroll__body { + // Closes the hairline where the head's bottom row meets the body. + margin-block-start: -1px; + padding: 0 clamp(#{space-raw('md')}, 5vw, 5rem) space('xl'); + background: var(--#{$prefix}-scroll-body) repeat-y top / 100% auto; +} + +.scroll__foot { + // The top 18px of the foot 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 is the + // measured ramp height plus a little, so the whole fade lands on papyrus. + // + // It has to be a margin: the element is static, and `top` only moves a + // positioned box. `position`/`z-index` pin the paint order the effect + // depends on — tree order already gives it, but silently, and one positioned + // ancestor added later would reverse it. + position: relative; + z-index: 1; + margin-block-start: -20px; + height: 114px; + background-image: var(--#{$prefix}-scroll-foot); + background-position: top; +} diff --git a/src/sass/main.scss b/src/sass/main.scss index a7755fe..a35041c 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -7,8 +7,10 @@ // // abstracts/ compile-time only, emits no CSS // base/ custom properties, @font-face, reset, element typography, links +// layout/ page structure: the wood ground and the papyrus scroll // components/ single-purpose blocks // ----------------------------------------------------------------------------- @use 'base'; +@use 'layout'; @use 'components';