Initial commit
This commit is contained in:
jasa
@@ -0,0 +1,256 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// 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.
|
||||
//
|
||||
// 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.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@use '../sass/abstracts' as *;
|
||||
|
||||
$img: '/wp-content/includes/images';
|
||||
|
||||
// -- The page ground ---------------------------------------------------------
|
||||
|
||||
html {
|
||||
background: url('#{$img}/background_planche_1920.jpg') top center / contain fixed;
|
||||
}
|
||||
|
||||
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.
|
||||
@include down('tablet') {
|
||||
.scroll__head,
|
||||
.scroll__foot { display: none; }
|
||||
|
||||
.scroll__body {
|
||||
margin: space('md');
|
||||
padding: space('lg');
|
||||
border-radius: radius('md');
|
||||
background: rgba(247, 240, 224, 0.92);
|
||||
}
|
||||
}
|
||||
|
||||
// -- Section scaffolding -----------------------------------------------------
|
||||
|
||||
.demo-section {
|
||||
padding-block: space('xl');
|
||||
|
||||
& + & {
|
||||
border-block-start: 1px solid rgba(145, 116, 85, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: space('sm');
|
||||
margin-block-end: space('lg');
|
||||
font-family: font('body');
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: $brown-600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-note {
|
||||
margin-block-start: space('sm');
|
||||
font-family: font('body');
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
color: $brown-600;
|
||||
}
|
||||
|
||||
// A row of specimens that should sit side by side and wrap sanely.
|
||||
.demo-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: space('md');
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// -- Swatches ----------------------------------------------------------------
|
||||
|
||||
.swatch-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: space('sm');
|
||||
}
|
||||
|
||||
.swatch {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(72, 32, 32, 0.15);
|
||||
border-radius: radius('sm');
|
||||
background: $white;
|
||||
font-family: font('body');
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
|
||||
// Checkerboard, so an alpha token reads as translucent rather than as a
|
||||
// slightly different flat colour.
|
||||
&__chip {
|
||||
height: 56px;
|
||||
background-image:
|
||||
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
|
||||
linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
|
||||
background-size: 12px 12px;
|
||||
background-position: 0 0, 6px 6px;
|
||||
}
|
||||
|
||||
&__fill { height: 100%; }
|
||||
|
||||
&__meta { padding: space('2xs') space('xs'); }
|
||||
&__name { font-weight: 700; color: $brown-900; }
|
||||
&__value { color: $grey-500; font-variant-numeric: tabular-nums; }
|
||||
}
|
||||
|
||||
// -- Type specimen table -----------------------------------------------------
|
||||
|
||||
.specimen {
|
||||
display: grid;
|
||||
grid-template-columns: 8rem 1fr;
|
||||
gap: space('sm') space('lg');
|
||||
align-items: baseline;
|
||||
|
||||
@include down('phone') {
|
||||
grid-template-columns: 1fr;
|
||||
gap: space('2xs');
|
||||
}
|
||||
}
|
||||
|
||||
.specimen__key {
|
||||
font-family: font('body');
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: $brown-600;
|
||||
}
|
||||
|
||||
// -- Dark-ground demo --------------------------------------------------------
|
||||
|
||||
.demo-dark {
|
||||
padding: space('lg');
|
||||
border-radius: radius('md');
|
||||
background: $brown-900;
|
||||
}
|
||||
|
||||
// -- Toolbar -----------------------------------------------------------------
|
||||
|
||||
.toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: space('md');
|
||||
align-items: center;
|
||||
padding: space('xs') space('md');
|
||||
background: rgba(30, 14, 14, 0.94);
|
||||
color: #f0e6d2;
|
||||
font-family: font('body');
|
||||
font-size: 12px;
|
||||
backdrop-filter: blur(6px);
|
||||
|
||||
&__brand {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__group {
|
||||
display: flex;
|
||||
gap: space('2xs');
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__spacer { flex: 1; }
|
||||
|
||||
button {
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(240, 230, 210, 0.3);
|
||||
border-radius: radius('pill');
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
|
||||
&[aria-pressed='true'] {
|
||||
background: #f0e6d2;
|
||||
color: #1e0e0e;
|
||||
border-color: #f0e6d2;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// "Show the boxes" — outlines every component so the structure is visible.
|
||||
.show-boxes {
|
||||
.site-footer__col,
|
||||
.demo-row > *,
|
||||
.field-group,
|
||||
.scroll__body > * {
|
||||
outline: 1px dashed rgba(202, 74, 31, 0.6);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user