From aca4d756fdc5ad80cb0abe9027afbdbd28c422ae Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Sun, 8 Dec 2019 12:50:12 -0800 Subject: [PATCH] v7 --- raster.css | 971 +---------------------------------------------- raster.debug.css | 73 +--- raster.grid.css | 339 +---------------- 3 files changed, 3 insertions(+), 1380 deletions(-) diff --git a/raster.css b/raster.css index 480c266..723ec5b 100644 --- a/raster.css +++ b/raster.css @@ -1,971 +1,2 @@ /* Raster v7 (release package) (rsms.me/raster) */ -@import url('https://rsms.me/inter/inter.css'); -@import url('https://rsms.me/res/fonts/iaw.css'); -/* - -Variables - -*/ -:root { - /* - Font size is the basis of all other measurements. - It's either constant or viewport-relative. Choose one. - - Constant: */ - --fontSize: 12px; - /* - - Veiwport-relative (100% / EMs-across-viewport) */ - /*--fontSize: calc(100vw / 80);*/ -} -/*@media only screen and (max-width: 600px) { :root { - --fontSize: calc(100vw / 30); -}}*/ -:root { - --sansFont: "Inter"; - --monoFont: "iaw-mono"; /* "IBM Plex Mono" */ - - /* line height is the basis for vertical spacing */ - --lineHeight: calc(var(--fontSize) * 1.5); - - /* horizontal and vertical spacing basis */ - --baseline: calc(var(--lineHeight) / 2); - - /* spacing around blocks */ - --blockSpacingTop: 0px; - --blockSpacingBottom: calc(var(--lineHeight) * 1); - - /* horizontal rule */ - --hrThickness: 2px; - - /* heading size */ - --h1-size: 2.8rem; - --h2-size: 2.2rem; - --h3-size: 1.4rem; - --h4-size: 1.1rem; - - /* grid spacing */ - --columnGap: calc(var(--lineHeight) * 2); - --rowGap: var(--lineHeight); - - /* 1 pixel */ - --displayScale: 1; - --pixel: 1px; -} -@supports (font-variation-settings: normal) { - :root { - --sansFont: "Inter var"; - --monoFont: "iaw-mono-var"; - } -} -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { :root { - --displayScale: 2; - --pixel: 0.5px; -}} -@media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) { :root { - --displayScale: 3; - --pixel: 0.34px; -}} -@media only screen and (-webkit-min-device-pixel-ratio: 3.5), only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) { :root { - --displayScale: 4; - --pixel: 0.25px; -}} -/*@media only screen and (max-device-width: 812px) and (orientation: landscape) { :root { - --fontSize: 1.7vw; -}}*/ -/* reset */ -* { - font: inherit; - line-height: inherit; -} -a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, -body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, -em, embed, fieldset, figcaption, figure, footer, form, grid, h1, h2, h3, h4, h5, -h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, -mark, menu, nav, noscript, object, ol, output, p, pre, q, s, samp, section, -small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, -thead, time, tr, tt, u, ul, var, video { - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; -} -blockquote, q { quotes: none; } -blockquote:before, blockquote:after, q:before, q:after { - content: ""; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -a, a:active, a:visited { color: inherit; } -/* Raster grid subsystem (rsms.me/raster) */ -grid { - display: grid; - --grid-tc: repeat(4, 1fr); - grid-template-columns: var(--grid-tc); - --grid-cs: 1; /* column start */ - --grid-ce: -1 /* column end */ -} -/* c -- cell or column */ -grid > c { display: block; -moz-appearance: none; appearance: none; -webkit-appearance: none } -grid[columns="1"] { --grid-tc: repeat(1, 1fr) } -grid[columns="2"] { --grid-tc: repeat(2, 1fr) } -grid[columns="3"] { --grid-tc: repeat(3, 1fr) } -grid[columns="4"] { --grid-tc: repeat(4, 1fr) } -grid[columns="5"] { --grid-tc: repeat(5, 1fr) } -grid[columns="6"] { --grid-tc: repeat(6, 1fr) } -grid[columns="7"] { --grid-tc: repeat(7, 1fr) } -grid[columns="8"] { --grid-tc: repeat(8, 1fr) } -grid[columns="9"] { --grid-tc: repeat(9, 1fr) } -grid[columns="10"] { --grid-tc: repeat(10, 1fr) } -grid[columns="11"] { --grid-tc: repeat(11, 1fr) } -grid[columns="12"] { --grid-tc: repeat(12, 1fr) } -grid[columns="13"] { --grid-tc: repeat(13, 1fr) } -grid[columns="14"] { --grid-tc: repeat(14, 1fr) } -grid[columns="15"] { --grid-tc: repeat(15, 1fr) } -grid[columns="16"] { --grid-tc: repeat(16, 1fr) } -grid[columns="17"] { --grid-tc: repeat(17, 1fr) } -grid[columns="18"] { --grid-tc: repeat(18, 1fr) } -grid[columns="19"] { --grid-tc: repeat(19, 1fr) } -grid[columns="20"] { --grid-tc: repeat(20, 1fr) } -grid[columns="21"] { --grid-tc: repeat(21, 1fr) } -grid[columns="22"] { --grid-tc: repeat(22, 1fr) } -grid[columns="23"] { --grid-tc: repeat(23, 1fr) } -grid[columns="24"] { --grid-tc: repeat(24, 1fr) } -grid[columns="25"] { --grid-tc: repeat(25, 1fr) } -grid[columns="26"] { --grid-tc: repeat(26, 1fr) } -grid[columns="27"] { --grid-tc: repeat(27, 1fr) } -grid[columns="28"] { --grid-tc: repeat(28, 1fr) } -grid[columns="29"] { --grid-tc: repeat(29, 1fr) } -grid[columns="30"] { --grid-tc: repeat(30, 1fr) } -/* span=start... */ -grid > c[span^="1"] { --grid-cs: 1 } -grid > c[span^="2"] { --grid-cs: 2 } -grid > c[span^="3"] { --grid-cs: 3 } -grid > c[span^="4"] { --grid-cs: 4 } -grid > c[span^="5"] { --grid-cs: 5 } -grid > c[span^="6"] { --grid-cs: 6 } -grid > c[span^="7"] { --grid-cs: 7 } -grid > c[span^="8"] { --grid-cs: 8 } -grid > c[span^="9"] { --grid-cs: 9 } -grid > c[span^="10"] { --grid-cs: 10 } -grid > c[span^="11"] { --grid-cs: 11 } -grid > c[span^="12"] { --grid-cs: 12 } -grid > c[span^="13"] { --grid-cs: 13 } -grid > c[span^="14"] { --grid-cs: 14 } -grid > c[span^="15"] { --grid-cs: 15 } -grid > c[span^="16"] { --grid-cs: 16 } -grid > c[span^="17"] { --grid-cs: 17 } -grid > c[span^="18"] { --grid-cs: 18 } -grid > c[span^="19"] { --grid-cs: 19 } -grid > c[span^="20"] { --grid-cs: 20 } -grid > c[span^="21"] { --grid-cs: 21 } -grid > c[span^="22"] { --grid-cs: 22 } -grid > c[span^="23"] { --grid-cs: 23 } -grid > c[span^="24"] { --grid-cs: 24 } -grid > c[span^="25"] { --grid-cs: 25 } -grid > c[span^="26"] { --grid-cs: 26 } -grid > c[span^="27"] { --grid-cs: 27 } -grid > c[span^="28"] { --grid-cs: 28 } -grid > c[span^="29"] { --grid-cs: 29 } -grid > c[span^="30"] { --grid-cs: 30 } -/* span=...+width, span=...-end */ -grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 } -grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 } -grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 } -grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 } -grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 } -grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 } -grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 } -grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 } -grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 } -grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 } -grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 } -grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 } -grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 } -grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 } -grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 } -grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 } -grid > c[span$="+17"], grid > c[span$="-16"], grid > c[span="17"] { --grid-ce: 17 } -grid > c[span$="+18"], grid > c[span$="-17"], grid > c[span="18"] { --grid-ce: 18 } -grid > c[span$="+19"], grid > c[span$="-18"], grid > c[span="19"] { --grid-ce: 19 } -grid > c[span$="+20"], grid > c[span$="-19"], grid > c[span="20"] { --grid-ce: 20 } -grid > c[span$="+21"], grid > c[span$="-20"], grid > c[span="21"] { --grid-ce: 21 } -grid > c[span$="+22"], grid > c[span$="-21"], grid > c[span="22"] { --grid-ce: 22 } -grid > c[span$="+23"], grid > c[span$="-22"], grid > c[span="23"] { --grid-ce: 23 } -grid > c[span$="+24"], grid > c[span$="-23"], grid > c[span="24"] { --grid-ce: 24 } -grid > c[span$="+25"], grid > c[span$="-24"], grid > c[span="25"] { --grid-ce: 25 } -grid > c[span$="+26"], grid > c[span$="-25"], grid > c[span="26"] { --grid-ce: 26 } -grid > c[span$="+27"], grid > c[span$="-26"], grid > c[span="27"] { --grid-ce: 27 } -grid > c[span$="+28"], grid > c[span$="-27"], grid > c[span="28"] { --grid-ce: 28 } -grid > c[span$="+29"], grid > c[span$="-28"], grid > c[span="29"] { --grid-ce: 29 } -grid > c[span$="+30"], grid > c[span$="-29"], grid > c[span="30"] { --grid-ce: 30 } -grid > c[span$="-30"] { --grid-ce: 31 } -/* connect vars */ -grid > c[span] { grid-column-end: span var(--grid-ce) } -grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] { - grid-column-start: var(--grid-cs) } -grid > c[span*="-"], grid > c[span*=".."] { - grid-column-end: var(--grid-ce) } -grid > c[span="row"] { grid-column: 1 / -1 } -/* for window width <= 600 */ -@media only screen and (max-width: 600px) { - grid[columns-s="1"] { --grid-tc: repeat(1, 1fr) } - grid[columns-s="2"] { --grid-tc: repeat(2, 1fr) } - grid[columns-s="3"] { --grid-tc: repeat(3, 1fr) } - grid[columns-s="4"] { --grid-tc: repeat(4, 1fr) } - grid[columns-s="5"] { --grid-tc: repeat(5, 1fr) } - grid[columns-s="6"] { --grid-tc: repeat(6, 1fr) } - grid[columns-s="7"] { --grid-tc: repeat(7, 1fr) } - grid[columns-s="8"] { --grid-tc: repeat(8, 1fr) } - grid[columns-s="9"] { --grid-tc: repeat(9, 1fr) } - grid[columns-s="10"] { --grid-tc: repeat(10, 1fr) } - grid[columns-s="11"] { --grid-tc: repeat(11, 1fr) } - grid[columns-s="12"] { --grid-tc: repeat(12, 1fr) } - grid[columns-s="13"] { --grid-tc: repeat(13, 1fr) } - grid[columns-s="14"] { --grid-tc: repeat(14, 1fr) } - grid[columns-s="15"] { --grid-tc: repeat(15, 1fr) } - grid[columns-s="16"] { --grid-tc: repeat(16, 1fr) } - grid[columns-s="17"] { --grid-tc: repeat(17, 1fr) } - grid[columns-s="18"] { --grid-tc: repeat(18, 1fr) } - grid[columns-s="19"] { --grid-tc: repeat(19, 1fr) } - grid[columns-s="20"] { --grid-tc: repeat(20, 1fr) } - grid[columns-s="21"] { --grid-tc: repeat(21, 1fr) } - grid[columns-s="22"] { --grid-tc: repeat(22, 1fr) } - grid[columns-s="23"] { --grid-tc: repeat(23, 1fr) } - grid[columns-s="24"] { --grid-tc: repeat(24, 1fr) } - grid[columns-s="25"] { --grid-tc: repeat(25, 1fr) } - grid[columns-s="26"] { --grid-tc: repeat(26, 1fr) } - grid[columns-s="27"] { --grid-tc: repeat(27, 1fr) } - grid[columns-s="28"] { --grid-tc: repeat(28, 1fr) } - grid[columns-s="29"] { --grid-tc: repeat(29, 1fr) } - grid[columns-s="30"] { --grid-tc: repeat(30, 1fr) } - - /* span-s=start... */ - grid > c[span-s^="1"] { --grid-cs: 1 } - grid > c[span-s^="2"] { --grid-cs: 2 } - grid > c[span-s^="3"] { --grid-cs: 3 } - grid > c[span-s^="4"] { --grid-cs: 4 } - grid > c[span-s^="5"] { --grid-cs: 5 } - grid > c[span-s^="6"] { --grid-cs: 6 } - grid > c[span-s^="7"] { --grid-cs: 7 } - grid > c[span-s^="8"] { --grid-cs: 8 } - grid > c[span-s^="9"] { --grid-cs: 9 } - grid > c[span-s^="10"] { --grid-cs: 10 } - grid > c[span-s^="11"] { --grid-cs: 11 } - grid > c[span-s^="12"] { --grid-cs: 12 } - grid > c[span-s^="13"] { --grid-cs: 13 } - grid > c[span-s^="14"] { --grid-cs: 14 } - grid > c[span-s^="15"] { --grid-cs: 15 } - grid > c[span-s^="16"] { --grid-cs: 16 } - grid > c[span-s^="17"] { --grid-cs: 17 } - grid > c[span-s^="18"] { --grid-cs: 18 } - grid > c[span-s^="19"] { --grid-cs: 19 } - grid > c[span-s^="20"] { --grid-cs: 20 } - grid > c[span-s^="21"] { --grid-cs: 21 } - grid > c[span-s^="22"] { --grid-cs: 22 } - grid > c[span-s^="23"] { --grid-cs: 23 } - grid > c[span-s^="24"] { --grid-cs: 24 } - grid > c[span-s^="25"] { --grid-cs: 25 } - grid > c[span-s^="26"] { --grid-cs: 26 } - grid > c[span-s^="27"] { --grid-cs: 27 } - grid > c[span-s^="28"] { --grid-cs: 28 } - grid > c[span-s^="29"] { --grid-cs: 29 } - grid > c[span-s^="30"] { --grid-cs: 30 } - - /* span-s=...+width, span-s=...-end */ - grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 } - grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 } - grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 } - grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 } - grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 } - grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 } - grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 } - grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 } - grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 } - grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 } - grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 } - grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 } - grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 } - grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 } - grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 } - grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 } - grid > c[span-s$="+17"], grid > c[span-s$="-16"], grid > c[span-s="17"] { --grid-ce: 17 } - grid > c[span-s$="+18"], grid > c[span-s$="-17"], grid > c[span-s="18"] { --grid-ce: 18 } - grid > c[span-s$="+19"], grid > c[span-s$="-18"], grid > c[span-s="19"] { --grid-ce: 19 } - grid > c[span-s$="+20"], grid > c[span-s$="-19"], grid > c[span-s="20"] { --grid-ce: 20 } - grid > c[span-s$="+21"], grid > c[span-s$="-20"], grid > c[span-s="21"] { --grid-ce: 21 } - grid > c[span-s$="+22"], grid > c[span-s$="-21"], grid > c[span-s="22"] { --grid-ce: 22 } - grid > c[span-s$="+23"], grid > c[span-s$="-22"], grid > c[span-s="23"] { --grid-ce: 23 } - grid > c[span-s$="+24"], grid > c[span-s$="-23"], grid > c[span-s="24"] { --grid-ce: 24 } - grid > c[span-s$="+25"], grid > c[span-s$="-24"], grid > c[span-s="25"] { --grid-ce: 25 } - grid > c[span-s$="+26"], grid > c[span-s$="-25"], grid > c[span-s="26"] { --grid-ce: 26 } - grid > c[span-s$="+27"], grid > c[span-s$="-26"], grid > c[span-s="27"] { --grid-ce: 27 } - grid > c[span-s$="+28"], grid > c[span-s$="-27"], grid > c[span-s="28"] { --grid-ce: 28 } - grid > c[span-s$="+29"], grid > c[span-s$="-28"], grid > c[span-s="29"] { --grid-ce: 29 } - grid > c[span-s$="+30"], grid > c[span-s$="-29"], grid > c[span-s="30"] { --grid-ce: 30 } - grid > c[span-s$="-30"] { --grid-ce: 31 } - - /* connect vars */ - grid > c[span-s] { grid-column-end: span var(--grid-ce) } - grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] { - grid-column-start: var(--grid-cs) } - grid > c[span-s*="-"], grid > c[span-s*=".."] { - grid-column-end: var(--grid-ce) } - grid > c[span-s="row"] { grid-column: 1 / -1 } -} -/* for window width >= 1600 */ -@media only screen and (min-width: 1599px) { - grid[columns-l="1"] { --grid-tc: repeat(1, 1fr) } - grid[columns-l="2"] { --grid-tc: repeat(2, 1fr) } - grid[columns-l="3"] { --grid-tc: repeat(3, 1fr) } - grid[columns-l="4"] { --grid-tc: repeat(4, 1fr) } - grid[columns-l="5"] { --grid-tc: repeat(5, 1fr) } - grid[columns-l="6"] { --grid-tc: repeat(6, 1fr) } - grid[columns-l="7"] { --grid-tc: repeat(7, 1fr) } - grid[columns-l="8"] { --grid-tc: repeat(8, 1fr) } - grid[columns-l="9"] { --grid-tc: repeat(9, 1fr) } - grid[columns-l="10"] { --grid-tc: repeat(10, 1fr) } - grid[columns-l="11"] { --grid-tc: repeat(11, 1fr) } - grid[columns-l="12"] { --grid-tc: repeat(12, 1fr) } - grid[columns-l="13"] { --grid-tc: repeat(13, 1fr) } - grid[columns-l="14"] { --grid-tc: repeat(14, 1fr) } - grid[columns-l="15"] { --grid-tc: repeat(15, 1fr) } - grid[columns-l="16"] { --grid-tc: repeat(16, 1fr) } - grid[columns-l="17"] { --grid-tc: repeat(17, 1fr) } - grid[columns-l="18"] { --grid-tc: repeat(18, 1fr) } - grid[columns-l="19"] { --grid-tc: repeat(19, 1fr) } - grid[columns-l="20"] { --grid-tc: repeat(20, 1fr) } - grid[columns-l="21"] { --grid-tc: repeat(21, 1fr) } - grid[columns-l="22"] { --grid-tc: repeat(22, 1fr) } - grid[columns-l="23"] { --grid-tc: repeat(23, 1fr) } - grid[columns-l="24"] { --grid-tc: repeat(24, 1fr) } - grid[columns-l="25"] { --grid-tc: repeat(25, 1fr) } - grid[columns-l="26"] { --grid-tc: repeat(26, 1fr) } - grid[columns-l="27"] { --grid-tc: repeat(27, 1fr) } - grid[columns-l="28"] { --grid-tc: repeat(28, 1fr) } - grid[columns-l="29"] { --grid-tc: repeat(29, 1fr) } - grid[columns-l="30"] { --grid-tc: repeat(30, 1fr) } - - /* span-l=start... */ - grid > c[span-l^="1"] { --grid-cs: 1 } - grid > c[span-l^="2"] { --grid-cs: 2 } - grid > c[span-l^="3"] { --grid-cs: 3 } - grid > c[span-l^="4"] { --grid-cs: 4 } - grid > c[span-l^="5"] { --grid-cs: 5 } - grid > c[span-l^="6"] { --grid-cs: 6 } - grid > c[span-l^="7"] { --grid-cs: 7 } - grid > c[span-l^="8"] { --grid-cs: 8 } - grid > c[span-l^="9"] { --grid-cs: 9 } - grid > c[span-l^="10"] { --grid-cs: 10 } - grid > c[span-l^="11"] { --grid-cs: 11 } - grid > c[span-l^="12"] { --grid-cs: 12 } - grid > c[span-l^="13"] { --grid-cs: 13 } - grid > c[span-l^="14"] { --grid-cs: 14 } - grid > c[span-l^="15"] { --grid-cs: 15 } - grid > c[span-l^="16"] { --grid-cs: 16 } - grid > c[span-l^="17"] { --grid-cs: 17 } - grid > c[span-l^="18"] { --grid-cs: 18 } - grid > c[span-l^="19"] { --grid-cs: 19 } - grid > c[span-l^="20"] { --grid-cs: 20 } - grid > c[span-l^="21"] { --grid-cs: 21 } - grid > c[span-l^="22"] { --grid-cs: 22 } - grid > c[span-l^="23"] { --grid-cs: 23 } - grid > c[span-l^="24"] { --grid-cs: 24 } - grid > c[span-l^="25"] { --grid-cs: 25 } - grid > c[span-l^="26"] { --grid-cs: 26 } - grid > c[span-l^="27"] { --grid-cs: 27 } - grid > c[span-l^="28"] { --grid-cs: 28 } - grid > c[span-l^="29"] { --grid-cs: 29 } - grid > c[span-l^="30"] { --grid-cs: 30 } - - /* span-l=...+width, span-l=...-end */ - grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 } - grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 } - grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 } - grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 } - grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 } - grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 } - grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 } - grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 } - grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 } - grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 } - grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 } - grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 } - grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 } - grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 } - grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 } - grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 } - grid > c[span-l$="+17"], grid > c[span-l$="-16"], grid > c[span-l="17"] { --grid-ce: 17 } - grid > c[span-l$="+18"], grid > c[span-l$="-17"], grid > c[span-l="18"] { --grid-ce: 18 } - grid > c[span-l$="+19"], grid > c[span-l$="-18"], grid > c[span-l="19"] { --grid-ce: 19 } - grid > c[span-l$="+20"], grid > c[span-l$="-19"], grid > c[span-l="20"] { --grid-ce: 20 } - grid > c[span-l$="+21"], grid > c[span-l$="-20"], grid > c[span-l="21"] { --grid-ce: 21 } - grid > c[span-l$="+22"], grid > c[span-l$="-21"], grid > c[span-l="22"] { --grid-ce: 22 } - grid > c[span-l$="+23"], grid > c[span-l$="-22"], grid > c[span-l="23"] { --grid-ce: 23 } - grid > c[span-l$="+24"], grid > c[span-l$="-23"], grid > c[span-l="24"] { --grid-ce: 24 } - grid > c[span-l$="+25"], grid > c[span-l$="-24"], grid > c[span-l="25"] { --grid-ce: 25 } - grid > c[span-l$="+26"], grid > c[span-l$="-25"], grid > c[span-l="26"] { --grid-ce: 26 } - grid > c[span-l$="+27"], grid > c[span-l$="-26"], grid > c[span-l="27"] { --grid-ce: 27 } - grid > c[span-l$="+28"], grid > c[span-l$="-27"], grid > c[span-l="28"] { --grid-ce: 28 } - grid > c[span-l$="+29"], grid > c[span-l$="-28"], grid > c[span-l="29"] { --grid-ce: 29 } - grid > c[span-l$="+30"], grid > c[span-l$="-29"], grid > c[span-l="30"] { --grid-ce: 30 } - grid > c[span-l$="-30"] { --grid-ce: 31 } - - /* connect vars */ - grid > c[span-l] { grid-column-end: span var(--grid-ce) } - grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] { - grid-column-start: var(--grid-cs) } - grid > c[span-l*="-"], grid > c[span-l*=".."] { - grid-column-end: var(--grid-ce) } - grid > c[span-l="row"] { grid-column: 1 / -1 } -} -/* .debug can be added to a grid to visualize its effective cells */ -grid.debug > * { - --color: rgba(248,110,91 ,0.3); - background-image: - -webkit-gradient(linear, left top, left bottom, from(var(--color)), to(var(--color))); - background-image: - linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); -} -grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) } -grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) } -grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) } -grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) } -grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) } -grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) } -/* document */ -html { font-family: var(--sansFont), -system-ui, system-ui, sans-serif; } -html { - font-size: var(--fontSize); - line-height: var(--lineHeight); - background: #fff; - color: #000; - letter-spacing: -0.01em; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; - font-variant-ligatures: contextual common-ligatures; - font-feature-settings: 'cv10' 1; /* G */ -} -body { - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; - overflow-x: hidden; - padding: calc(var(--lineHeight) * 2); - padding-bottom: calc(var(--lineHeight) * 3); -} -@media only screen and (max-width: 600px) { - body { - padding: var(--lineHeight); - padding-bottom: calc(var(--lineHeight) * 2); - } -} -/* column flow */ -[flow-cols], [flow-cols-s], [flow-cols-l] { - -webkit-column-gap: var(--columnGap); - -moz-column-gap: var(--columnGap); - column-gap: var(--columnGap); - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; -} -[flow-cols="1"] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 } -[flow-cols="2"] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2 } -[flow-cols="3"] { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3 } -[flow-cols="4"] { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4 } -[flow-cols="5"] { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5 } -[flow-cols="6"] { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6 } -[flow-cols="7"] { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7 } -[flow-cols="8"] { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8 } -/* for window width <= 600 */ -@media only screen and (max-width: 600px) { - [flow-cols-s="1"] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 } - [flow-cols-s="2"] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2 } - [flow-cols-s="3"] { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3 } - [flow-cols-s="4"] { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4 } - [flow-cols-s="5"] { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5 } - [flow-cols-s="6"] { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6 } - [flow-cols-s="7"] { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7 } - [flow-cols-s="8"] { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8 } -} -/* for window width >= 1600 */ -@media only screen and (min-width: 1599px) { - [flow-cols-l="1"] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 } - [flow-cols-l="2"] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2 } - [flow-cols-l="3"] { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3 } - [flow-cols-l="4"] { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4 } - [flow-cols-l="5"] { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5 } - [flow-cols-l="6"] { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6 } - [flow-cols-l="7"] { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7 } - [flow-cols-l="8"] { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8 } -} -/* block */ -address, article, aside, blockquote, dd, dl, dt, fieldset, figure, form, -grid, h1, h2, h3, h4, h5, h6, li, nav, ol, p, pre, table, tfoot, ul, video { - margin-top: var(--blockSpacingTop); - margin-bottom: var(--blockSpacingBottom); -} -/* first element has no top margin */ -:first-child { margin-top: unset; } -:last-child { margin-bottom: unset; } -/* hr */ -hr:first-child { - margin-top: calc(var(--hrThickness) / -2); - margin-bottom: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)); -} -hr:last-child { - margin-top: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)); - margin-bottom: calc(var(--hrThickness) / -2); -} -hr, hr:only-child { - border: none; - background: black; - height: var(--hrThickness); - margin-top: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)); - margin-bottom: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)); -} -* + hr:last-child { - /* hr following block has hrThickness removed from its top spacing */ - margin-top: calc(var(--hrThickness) / -2); -} -hr:not(:first-child) { - /* note: collapses with preceeding block bottom margin */ - margin-top: var(--lineHeight); - margin-bottom: calc(var(--lineHeight) - var(--hrThickness)); -} -grid > hr { grid-column: 1 / -1 } -grid > hr, -grid > hr:not(:first-child):not(:last-child) { - /*margin: calc(var(--lineHeight) - calc(var(--hrThickness) / 2)) 0; CENTER*/ - margin-top: calc(var(--lineHeight) - var(--hrThickness)); /* BOTTOM-bias */ - margin-bottom: 0; -} -/* collapse consecutive HRs into one */ -/*grid > hr + hr, -grid > hr:not(:first-child):not(:last-child) + hr { - display:none; -}*/ -/* text style modifiers */ -b, strong, .bold { font-weight: 600; } -i, em, .italic { font-style: italic; } -/* preformatted text */ -pre, code, tt, .code, .monospace { - font-family: var(--monoFont), Inconsolata, Menlo, monospace; - font-weight: 430; -} -pre { white-space: pre-wrap; } -code { white-space: nowrap; } -b pre, b code, b tt, b .code, b .monospace { - font-weight: 600; -} -pre b, code b, tt b, .code b, .monospace b { - font-weight: 600; - font-weight: 580; -} -code > pre { white-space: pre; overflow-x: auto; } -/* headings */ -h { display: block; -moz-appearance: none; appearance: none; -webkit-appearance: none } -h, h1, .h1 { - font-weight: 720; - letter-spacing: -0.05em; - font-size: var(--h1-size); - line-height: calc(var(--lineHeight) * 2); - margin-left: calc(var(--h1-size) / -22); - margin-top: calc(var(--lineHeight) * 2); - margin-bottom: var(--lineHeight); - word-break: break-word; -} -h1.single-line { - margin-top: var(--lineHeight); - padding-top: calc(var(--lineHeight) * 0.5); - padding-bottom: calc(var(--lineHeight) * 0.5); -} -h1.single-line:first-child { - margin-top: 0; - padding-bottom: calc(var(--lineHeight) * 0.5); -} -h2, .h2 { - font-weight: 700; - letter-spacing: -0.03em; - font-size: var(--h2-size); - line-height: calc(var(--lineHeight) * 2); - margin-left: calc(var(--h2-size) / -26); - margin-bottom: var(--lineHeight); -} -* + h2, h2.single-line { - margin-top: var(--lineHeight); - padding-top: calc(var(--lineHeight) * 0.5); - padding-bottom: calc(var(--lineHeight) * 0.5); - margin-bottom: 0; -} -h2.single-line:first-child { - margin-top: unset; -} -h3, .h3, h4, .h4 { - font-weight: 700; - letter-spacing: -0.02em; - font-size: var(--h3-size); - padding-top: calc(var(--baseline) * 0.75); - padding-bottom: calc(var(--baseline) * 0.25); - margin-bottom: var(--baseline); -} -h4, .h4 { - font-weight: 700; - letter-spacing: -0.012em; - font-size: var(--h4-size); -} -h3.single-line, h4.single-line { - padding-bottom: calc(var(--baseline) * 1.25); - margin-bottom: 0; -} -h3 + h1, -h4 + h1, -h3 + h1.single-line, -h4 + h1.single-line { - margin-top: calc(var(--baseline) * 3) -} -h3.single-line + h1.single-line, -h4.single-line + h1.single-line, -h3.single-line + h1, -h4.single-line + h1, -h3.single-line + h2.single-line, -h4.single-line + h2.single-line, -h3.single-line + h2, -h4.single-line + h2 { - margin-top: var(--lineHeight) -} -h3 + h2, -h4 + h2, -h3 + h2.single-line, -h4 + h2.single-line { - margin-top: var(--baseline) -} -h5, h6, .h5, .h6 { - font-weight: 670; - letter-spacing: -0.015em; - margin-bottom: 0; -} -grid > c.h1, grid > c.h2, grid > c.h3, grid > c.h4, grid > c.h5, grid > c.h6 { - margin-bottom:0 -} -/* large headers */ -h1.large, .h1.large { - --h1-size: 4rem; - line-height: calc(var(--lineHeight) * 3); - font-weight: 730; -} -h1.xlarge, .h1.xlarge { - --h1-size: 5.5rem; - line-height: calc(var(--lineHeight) * 4); - font-weight: 740; -} -h1.xxlarge, .h1.xxlarge { - --h1-size: 7.5rem; - line-height: calc(var(--lineHeight) * 5); - font-weight: 750; -} -h1.xxxlarge, .h1.xxxlarge { - --h1-size: 10.5rem; - line-height: calc(var(--lineHeight) * 7); - font-weight: 760; -} -/* small text */ -.small { - font-size: 0.85rem; - line-height: var(--lineHeight); -} -.xsmall { - font-size: 0.8em; - line-height: calc(var(--lineHeight) * 0.75); - padding-top: calc(var(--lineHeight) * 0.25); -} -.xxsmall { - font-size: 0.65em; - line-height: calc(var(--lineHeight) * 0.7); - padding-top: calc(var(--lineHeight) * 0.3); -} -.xxxsmall { - font-size: 0.5em; - line-height: calc(var(--lineHeight) * 0.5); - padding-bottom: calc(var(--lineHeight) * 0.25); -} -/* anchor */ -a { - text-decoration: underline; - -webkit-text-decoration: underline rgba(0, 0, 0, 0.3); - text-decoration: underline rgba(0, 0, 0, 0.3); - white-space: nowrap; -} -a:hover { color: var(--blue); } -h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a, -.h1 > a, .h2 > a, .h3 > a, .h4 > a, .h5 > a, .h6 > a { - text-decoration: none; -} -h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, -h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover, -.h4 > a:hover, .h5 > a:hover, .h6 > a:hover { - text-decoration: underline; - -webkit-text-decoration: underline rgba(0, 0, 0, 0.3); - text-decoration: underline rgba(0, 0, 0, 0.3); - color: inherit; -} -/* image */ -img, img:first-child, img:last-child { - display:block; - margin-top: var(--baseline); - margin-bottom: var(--baseline); -} -img:only-child { margin:0 } -* + img { margin-top: calc(var(--baseline) * -1); } -img.fill, img.cover { -o-object-fit: cover; object-fit: cover } -grid > c > img, -grid > c > p > img { - -o-object-fit: contain; - object-fit: contain; - max-width: 100%; -} -/* grid */ -grid { - grid-column-gap: var(--columnGap); - grid-row-gap: var(--rowGap); -} -grid.compact { grid-row-gap: 0; } -/* list */ -li { - margin-bottom: var(--baseline); -} -li > p + ul, -li > p + ol { - /*