diff options
Diffstat (limited to 'docs/res')
-rw-r--r-- | docs/res/base.css | 323 | ||||
-rw-r--r-- | docs/res/grid.css | 341 |
2 files changed, 502 insertions, 162 deletions
diff --git a/docs/res/base.css b/docs/res/base.css index b4254200d..1f349f903 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -1,3 +1,19 @@ +:root { + --fontSize: 15px; + /*--emsAcrossViewport: 80; + --fontSize: calc(100vw / var(--emsAcrossViewport));*/ + + --lineHeight: calc(var(--fontSize) * 1.5); + + --spacing: 2rem; + --spacingv: calc(var(--lineHeight) / 2); + + --gridGapCol: var(--spacing); + --gridGapRow: calc(var(--spacing) / 2); + + --red: #F02D09; +} + * { margin:0; padding:0; font-synthesis: none; } html { } body { @@ -5,12 +21,15 @@ body { color: #111; font: 15px/22px 'Inter', system-ui, sans-serif; - font-size: 15px; - line-height: 1.5; + /*font-size: 15px; + line-height: 1.5;*/ + + font-size: var(--fontSize); + line-height: var(--lineHeight); + letter-spacing: -0.004em; font-weight: 400; - padding-bottom: 30px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -89,12 +108,13 @@ a[href^="#"]:hover { text-decoration-style: dashed; } -p { - margin: 20px 0; -} -code, pre, q { - font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; - font-size:0.96em; +/*p, pre { + margin: 1rem 0; +}*/ +code, pre, q, tt { + font-family: 'IBM Plex Mono', monospace; + font-feature-settings: 'ss02' 1, 'zero' 1; + line-height: inherit; } code { display: block; @@ -102,7 +122,10 @@ code { padding: 0.5em 0; overflow: auto; } -pre, q { +pre { + white-space: pre-wrap; +} +q { display: inline; white-space: pre-wrap; } @@ -149,29 +172,84 @@ small { letter-spacing: 0.012em; } -h1, h2, h3 { - font-weight: 500; +h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -h1 { +/*h1, .h1 { color: #222; font-size: 55px; letter-spacing: -0.038em; line-height: 1.1em; text-indent: -2px; + font-weight: 700; +} +h1 { margin-bottom: 30px; margin-top: 10px; +}*/ +h1, .h1 { + margin-left: calc(3rem / -20); + font-weight: 700; + font-size: 4rem; + letter-spacing: -0.07em; + line-height: calc(var(--spacingv) * 6); +} +h1 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h2, .h2 { font-weight: 700; + font-size: 1.8rem; + letter-spacing: -0.03em; + line-height: calc(var(--spacingv) * 3); } h2 { - font-size: 30px; - font-weight: 600; - letter-spacing: -0.025em; - line-height: 30px; - margin-bottom: 25px; - margin-top: 10px; + margin-bottom: calc(var(--spacingv) * 2); +} +h3, .h3 { + font-weight: 700; + font-size: 1.2rem; + letter-spacing: -0.018em; + line-height: calc(var(--spacingv) * 2); +} +h3 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h3 q, h3. q { + font-weight: 400; + padding-left: 0.5em; +} + +h1 > a, h2 > a, h3 > a, h4 > a, +.h1 > a, .h2 > a, .h3 > a, .h4 > a { + color: inherit; + text-decoration: none !important; + text-shadow: none; + background: none; + outline:none; +} + +h4, h5, h6, .h4, .h5, .h6 { + font-weight: 640; + letter-spacing: -0.015em; +} +h4, h5, h6 { + margin-bottom: calc(var(--spacingv) * 1); } +/* add top margin to Hn when it follows another element */ +* + h1 { margin-top: calc(var(--spacingv) * 6); } +* + h2 { margin-top: calc(var(--spacingv) * 4); } +* + h3 { margin-top: calc(var(--spacingv) * 3); } +* + h4 { margin-top: calc(var(--spacingv) * 2); } + +p, pre, p + grid, pre + grid { + margin-bottom: var(--lineHeight); +} + + .row.dark h2, .row.black h2 { letter-spacing: -0.014em; @@ -208,26 +286,10 @@ h2.banner { background: rgba(0,0,0,0.1); } -h3 { - font-size: 20px; - font-weight: 600; - letter-spacing: -0.02em; -} .row.dark h3, .row.black h3 { letter-spacing: -0.012em; } -h3 q { - font-weight: 400; - padding-left: 0.5em; -} - -h1 > a, h2 > a, h3 > a { - color: inherit; - text-decoration: none !important; - text-shadow: none; - background: none; -} .row { padding: 50px; @@ -262,15 +324,18 @@ h1 > a, h2 > a, h3 > a { } .row-divider { - margin:0 auto; + height: 1rem; + /*margin: 0 auto; max-width: 888px; - height: 1px; - border-bottom: 1px dashed rgba(0,0,0,0.09); + height: 0.11rem; + background: black;*/ } .row.menu { padding: 0; border-bottom:1px solid rgba(0,0,0,0.1); + background: #111; + color: white; } .row.menu ul { width: auto; @@ -284,27 +349,38 @@ h1 > a, h2 > a, h3 > a { white-space: nowrap; } .row.menu ul li { - margin-right: 50px; + /*margin-right: 50px;*/ margin-bottom: -1px; text-indent: -0.5px; + text-align: center; } .row.menu ul li > a { color: inherit; - opacity: 0.6; + opacity: 0.8; text-decoration:none; display: inline-block; - padding: 15px 0 13px 0; - transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); - border-bottom: 3px solid transparent; + padding: 15px 25px 13px 25px; + /*transition: 80ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);*/ + /*border-bottom: 3px solid transparent;*/ } .row.menu ul li > a:hover, .row.menu ul li > a.active { - color: black; - border-bottom-color: black; + color: white; + background: var(--red); + border-bottom-color: white; opacity: 1; - } + } + .row.menu ul li:first-child > a { + padding-left:0; + padding-right:0; + margin-right: 25px; + background:transparent; + } + .row.menu ul li > a.active { + font-weight:600; + } .row.menu ul li.home > a { - font-weight: 500; - color: black; + font-weight: 600; + color: white; opacity: 1; } @@ -396,22 +472,21 @@ tablex { } /* --------------------------------------------------------------------- */ -/* -grid with 4 major columns subdivided twice - -| | | | | -| 1 | 2 | 3 | 4 | -| | | | | -| | | | | -| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -| | | | | | | | | -| | | | | | | | | -| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -| | | | | | | | | | | | | | | | | -| | | | | | | | | | | | | | | | | +/* grid */ +grid { + grid-column-gap: 2rem; + grid-row-gap: 0; +} +grid > c.spacer { + grid-column: 1 / -1; + height: calc(var(--spacingv) * 6); +} -*/ +@media only screen and (max-width: 565px) { + grid { grid-column-gap: 1rem; } + grid > c.spacer { height: calc(var(--spacingv) * 3); } +} .row.features { display:none; } @supports (display: grid) { @@ -419,105 +494,28 @@ grid with 4 major columns subdivided twice } .row.features p.example { margin-top:2rem; opacity:0.4; } -grid { - display: grid; - grid-template-columns: repeat(4, 1fr); +.row.features grid { grid-column-gap: 1rem; - grid-row-gap: 1rem; -} -grid.c4 { grid-template-columns: repeat(4, 1fr); } -grid.c8 { grid-template-columns: repeat(8, 1fr); } -grid.c9 { grid-template-columns: repeat(9, 1fr); } -grid.c16 { grid-template-columns: repeat(16, 1fr); } -/*grid, grid4 { - grid-template-columns: repeat(4, 1fr); -}*/ -c { - display: block; - grid-column-end: span 1; -} -c[start="1"] { grid-column-start: 1; } -c[start="2"] { grid-column-start: 2; } -c[start="3"] { grid-column-start: 3; } -c[start="4"] { grid-column-start: 4; } -c[start="5"] { grid-column-start: 5; } -c[start="6"] { grid-column-start: 6; } -c[start="7"] { grid-column-start: 7; } -c[start="8"] { grid-column-start: 8; } -c[start="9"] { grid-column-start: 9; } - -c[span="1"] { grid-column-end: span 1; } -c[span="2"] { grid-column-end: span 2; } -c[span="3"] { grid-column-end: span 3; } -c[span="4"] { grid-column-end: span 4; } -c[span="5"] { grid-column-end: span 5; } -c[span="6"] { grid-column-end: span 6; } -c[span="7"] { grid-column-end: span 7; } -c[span="8"] { grid-column-end: span 8; } -c[span="9"] { grid-column-end: span 9; } - -c[span="1-1"] { grid-column: 1 / 1; } -c[span="2-5"] { grid-column: 2 / 5; } -c[span="2-4"] { grid-column: 2 / 4; } - -grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; } -grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; } - -/* .debug can be added to a grid to visualize its effective cells. - .debug-color applies alternating colors. */ -grid.debug > *, grid.debug-color > * { - --color: rgba(250, 230, 0, 0.2); - background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); -} -grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); } -grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); } -grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); } - -.col-all { grid-column: 1 / span 16; } - -.col-1 { grid-column: 1 / span 2; } -.col-1-2 { grid-column: 1 / span 4; } -.col-1-3 { grid-column: 1 / span 6; } -.col-1-4 { grid-column: 1 / span 8; } -.col-1-5 { grid-column: 1 / span 10; } -.col-1-6 { grid-column: 1 / span 12; } -.col-1-7 { grid-column: 1 / span 14; } -.col-1-8 { grid-column: 1 / span 16; } - -.col-2 { grid-column: 2 / span 2; } -.col-2-2 { grid-column: 2 / span 4; } -.col-2-3 { grid-column: 2 / span 6; } -.col-2-4 { grid-column: 2 / span 8; } -.col-2-5 { grid-column: 2 / span 10; } -.col-2-6 { grid-column: 2 / span 12; } -.col-2-7 { grid-column: 2 / span 14; } - -.col-3 { grid-column: 3 / span 2; } -.col-3-2 { grid-column: 3 / span 4; } -.col-3-3 { grid-column: 3 / span 6; } -.col-3-4 { grid-column: 3 / span 8; } -.col-3-5 { grid-column: 3 / span 10; } -.col-3-6 { grid-column: 3 / span 12; } - -.col-4 { grid-column: 4 / span 2; } -.col-4-2 { grid-column: 4 / span 4; } -.col-4-3 { grid-column: 4 / span 6; } -.col-4-4 { grid-column: 4 / span 8; } -.col-4-5 { grid-column: 4 / span 10; } - -.col-5 { grid-column: 5 / span 2; } -.col-5-2 { grid-column: 5 / span 4; } -.col-5-3 { grid-column: 5 / span 6; } -.col-5-4 { grid-column: 5 / span 8; } - -.col-6 { grid-column: 6 / span 2; } -.col-6-2 { grid-column: 6 / span 4; } -.col-6-3 { grid-column: 6 / span 6; } - -.col-7 { grid-column: 7 / span 2; } -.col-7-2 { grid-column: 7 / span 4; } - -.col-8 { grid-column: 8 / span 2; } + grid-row-gap: 0.5rem; + margin-bottom: 0; +} + +/* --------------------------------------------------------------------- */ +/* flow */ + +flow { display:block; appearance: none; -webkit-appearance: none } +flow[columns] { + column-gap: var(--spacing); + /*column-fill: balance;*/ +} +flow[columns="2"] { + column-count: 2; +} +@media only screen and (max-width: 600px) { + flow[columns-s="1"] { + column-count: 1; + } +} /* --------------------------------------------------------------------- */ @@ -593,14 +591,15 @@ box.large tablex r out { /* ------------------------------------------------------ */ + /* wide windows */ @media only screen and (min-width: 566px) { - .narrow-window { display: none; } + .narrow-window, .only-small-screen { display: none; } } /* narrow windows */ @media only screen and (max-width: 565px) { - .wide-window { display: none; } + .wide-window, .only-large-screen { display: none; } .row.menu ul { justify-content: space-between; } diff --git a/docs/res/grid.css b/docs/res/grid.css new file mode 100644 index 000000000..3d5a70bdc --- /dev/null +++ b/docs/res/grid.css @@ -0,0 +1,341 @@ +/* Raster Simple CSS Grid System, version 3 */ +grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + --grid-cs: 1; /* start */ + --grid-ce: -1 /* end */ +} + +/* c -- cell or column */ +grid > c { display: block; appearance: none; -webkit-appearance: none } + +grid[columns="1"] { grid-template-columns: repeat(1, 1fr) } +grid[columns="2"] { grid-template-columns: repeat(2, 1fr) } +grid[columns="3"] { grid-template-columns: repeat(3, 1fr) } +grid[columns="4"] { grid-template-columns: repeat(4, 1fr) } +grid[columns="5"] { grid-template-columns: repeat(5, 1fr) } +grid[columns="6"] { grid-template-columns: repeat(6, 1fr) } +grid[columns="7"] { grid-template-columns: repeat(7, 1fr) } +grid[columns="8"] { grid-template-columns: repeat(8, 1fr) } +grid[columns="9"] { grid-template-columns: repeat(9, 1fr) } +grid[columns="10"] { grid-template-columns: repeat(10, 1fr) } +grid[columns="11"] { grid-template-columns: repeat(11, 1fr) } +grid[columns="12"] { grid-template-columns: repeat(12, 1fr) } +grid[columns="13"] { grid-template-columns: repeat(13, 1fr) } +grid[columns="14"] { grid-template-columns: repeat(14, 1fr) } +grid[columns="15"] { grid-template-columns: repeat(15, 1fr) } +grid[columns="16"] { grid-template-columns: repeat(16, 1fr) } +grid[columns="17"] { grid-template-columns: repeat(17, 1fr) } +grid[columns="18"] { grid-template-columns: repeat(18, 1fr) } +grid[columns="19"] { grid-template-columns: repeat(19, 1fr) } +grid[columns="20"] { grid-template-columns: repeat(20, 1fr) } +grid[columns="21"] { grid-template-columns: repeat(21, 1fr) } +grid[columns="22"] { grid-template-columns: repeat(22, 1fr) } +grid[columns="23"] { grid-template-columns: repeat(23, 1fr) } +grid[columns="24"] { grid-template-columns: repeat(24, 1fr) } +grid[columns="25"] { grid-template-columns: repeat(25, 1fr) } +grid[columns="26"] { grid-template-columns: repeat(26, 1fr) } +grid[columns="27"] { grid-template-columns: repeat(27, 1fr) } +grid[columns="28"] { grid-template-columns: repeat(28, 1fr) } +grid[columns="29"] { grid-template-columns: repeat(29, 1fr) } +grid[columns="30"] { grid-template-columns: 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-template-columns: repeat(1, 1fr) } + grid[columns-s="2"] { grid-template-columns: repeat(2, 1fr) } + grid[columns-s="3"] { grid-template-columns: repeat(3, 1fr) } + grid[columns-s="4"] { grid-template-columns: repeat(4, 1fr) } + grid[columns-s="5"] { grid-template-columns: repeat(5, 1fr) } + grid[columns-s="6"] { grid-template-columns: repeat(6, 1fr) } + grid[columns-s="7"] { grid-template-columns: repeat(7, 1fr) } + grid[columns-s="8"] { grid-template-columns: repeat(8, 1fr) } + grid[columns-s="9"] { grid-template-columns: repeat(9, 1fr) } + grid[columns-s="10"] { grid-template-columns: repeat(10, 1fr) } + grid[columns-s="11"] { grid-template-columns: repeat(11, 1fr) } + grid[columns-s="12"] { grid-template-columns: repeat(12, 1fr) } + grid[columns-s="13"] { grid-template-columns: repeat(13, 1fr) } + grid[columns-s="14"] { grid-template-columns: repeat(14, 1fr) } + grid[columns-s="15"] { grid-template-columns: repeat(15, 1fr) } + grid[columns-s="16"] { grid-template-columns: repeat(16, 1fr) } + grid[columns-s="17"] { grid-template-columns: repeat(17, 1fr) } + grid[columns-s="18"] { grid-template-columns: repeat(18, 1fr) } + grid[columns-s="19"] { grid-template-columns: repeat(19, 1fr) } + grid[columns-s="20"] { grid-template-columns: repeat(20, 1fr) } + grid[columns-s="21"] { grid-template-columns: repeat(21, 1fr) } + grid[columns-s="22"] { grid-template-columns: repeat(22, 1fr) } + grid[columns-s="23"] { grid-template-columns: repeat(23, 1fr) } + grid[columns-s="24"] { grid-template-columns: repeat(24, 1fr) } + grid[columns-s="25"] { grid-template-columns: repeat(25, 1fr) } + grid[columns-s="26"] { grid-template-columns: repeat(26, 1fr) } + grid[columns-s="27"] { grid-template-columns: repeat(27, 1fr) } + grid[columns-s="28"] { grid-template-columns: repeat(28, 1fr) } + grid[columns-s="29"] { grid-template-columns: repeat(29, 1fr) } + grid[columns-s="30"] { grid-template-columns: 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-template-columns: repeat(1, 1fr) } + grid[columns-l="2"] { grid-template-columns: repeat(2, 1fr) } + grid[columns-l="3"] { grid-template-columns: repeat(3, 1fr) } + grid[columns-l="4"] { grid-template-columns: repeat(4, 1fr) } + grid[columns-l="5"] { grid-template-columns: repeat(5, 1fr) } + grid[columns-l="6"] { grid-template-columns: repeat(6, 1fr) } + grid[columns-l="7"] { grid-template-columns: repeat(7, 1fr) } + grid[columns-l="8"] { grid-template-columns: repeat(8, 1fr) } + grid[columns-l="9"] { grid-template-columns: repeat(9, 1fr) } + grid[columns-l="10"] { grid-template-columns: repeat(10, 1fr) } + grid[columns-l="11"] { grid-template-columns: repeat(11, 1fr) } + grid[columns-l="12"] { grid-template-columns: repeat(12, 1fr) } + grid[columns-l="13"] { grid-template-columns: repeat(13, 1fr) } + grid[columns-l="14"] { grid-template-columns: repeat(14, 1fr) } + grid[columns-l="15"] { grid-template-columns: repeat(15, 1fr) } + grid[columns-l="16"] { grid-template-columns: repeat(16, 1fr) } + grid[columns-l="17"] { grid-template-columns: repeat(17, 1fr) } + grid[columns-l="18"] { grid-template-columns: repeat(18, 1fr) } + grid[columns-l="19"] { grid-template-columns: repeat(19, 1fr) } + grid[columns-l="20"] { grid-template-columns: repeat(20, 1fr) } + grid[columns-l="21"] { grid-template-columns: repeat(21, 1fr) } + grid[columns-l="22"] { grid-template-columns: repeat(22, 1fr) } + grid[columns-l="23"] { grid-template-columns: repeat(23, 1fr) } + grid[columns-l="24"] { grid-template-columns: repeat(24, 1fr) } + grid[columns-l="25"] { grid-template-columns: repeat(25, 1fr) } + grid[columns-l="26"] { grid-template-columns: repeat(26, 1fr) } + grid[columns-l="27"] { grid-template-columns: repeat(27, 1fr) } + grid[columns-l="28"] { grid-template-columns: repeat(28, 1fr) } + grid[columns-l="29"] { grid-template-columns: repeat(29, 1fr) } + grid[columns-l="30"] { grid-template-columns: 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: + 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) } |