Created
April 21, 2019 15:44
-
-
Save kennedysgarage/5c947b37810d89a9e65f0788067b5044 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================= Grid ===*/ | |
| /* Raster v6 (rsms.me/raster) */ | |
| :root { | |
| --fontSize: 12px; | |
| --lineHeight: calc(var(--fontSize)*1.5); | |
| --baseline: calc(var(--lineHeight)/2); | |
| --blockSpacingTop: 0px; | |
| --blockSpacingBottom: calc(var(--lineHeight)*1); | |
| --hrThickness: 2px; | |
| --h1-size: 2.8rem; | |
| --h2-size: 2.2rem; | |
| --h3-size: 1.4rem; | |
| --h4-size: 1.1rem; | |
| --columnGap: var(--lineHeight); | |
| --rowGap: var(--lineHeight); | |
| // --red: #ee2711; | |
| // --blue: #1871e9; | |
| // --green: #12c05b; | |
| // --yellow: #f9bf0f; | |
| --displayScale: 1; | |
| --pixel: 1px | |
| } | |
| @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 | |
| } | |
| } | |
| * { | |
| font: inherit; | |
| line-height: inherit | |
| } | |
| grid { | |
| display: grid; | |
| --grid-tc: repeat(4, 1fr); | |
| grid-template-columns: var(--grid-tc); | |
| --grid-cs: 1; | |
| --grid-ce: -1 | |
| } | |
| 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) | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| @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) | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| } | |
| @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) | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| 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 | |
| } | |
| } | |
| grid.debug>* { | |
| --color: rgba(248, 110, 91, 0.3); | |
| background-image: linear-gradient(180deg, var(--color) 0, var(--color)) | |
| } | |
| 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) | |
| } | |
| html { | |
| font-family: Inter, -system-ui, system-ui, sans-serif | |
| } | |
| @supports (font-variation-settings:normal) { | |
| html { | |
| font-family: Inter var, -system-ui, system-ui, sans-serif | |
| } | |
| } | |
| html { | |
| font-size: var(--fontSize); | |
| line-height: var(--lineHeight); | |
| background: #fff; | |
| color: #000; | |
| letter-spacing: -.01em; | |
| -webkit-text-size-adjust: 100%; | |
| -moz-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| text-size-adjust: 100%; | |
| -webkit-font-variant-ligatures: contextual common-ligatures; | |
| font-variant-ligatures: contextual common-ligatures; | |
| -webkit-font-feature-settings: "cv01"1, "cv06"1, "cv10"1; | |
| font-feature-settings: "cv01"1, "cv06"1, "cv10"1 | |
| } | |
| 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) | |
| } | |
| } | |
| [flow-cols-l], | |
| [flow-cols-s], | |
| [flow-cols] { | |
| -webkit-column-gap: var(--columnGap); | |
| column-gap: var(--columnGap); | |
| -webkit-column-fill: balance; | |
| column-fill: balance | |
| } | |
| [flow-cols="1"] { | |
| -webkit-column-count: 1; | |
| column-count: 1 | |
| } | |
| [flow-cols="2"] { | |
| -webkit-column-count: 2; | |
| column-count: 2 | |
| } | |
| [flow-cols="3"] { | |
| -webkit-column-count: 3; | |
| column-count: 3 | |
| } | |
| [flow-cols="4"] { | |
| -webkit-column-count: 4; | |
| column-count: 4 | |
| } | |
| [flow-cols="5"] { | |
| -webkit-column-count: 5; | |
| column-count: 5 | |
| } | |
| [flow-cols="6"] { | |
| -webkit-column-count: 6; | |
| column-count: 6 | |
| } | |
| [flow-cols="7"] { | |
| -webkit-column-count: 7; | |
| column-count: 7 | |
| } | |
| [flow-cols="8"] { | |
| -webkit-column-count: 8; | |
| column-count: 8 | |
| } | |
| @media only screen and (max-width:600px) { | |
| [flow-cols-s="1"] { | |
| -webkit-column-count: 1; | |
| column-count: 1 | |
| } | |
| [flow-cols-s="2"] { | |
| -webkit-column-count: 2; | |
| column-count: 2 | |
| } | |
| [flow-cols-s="3"] { | |
| -webkit-column-count: 3; | |
| column-count: 3 | |
| } | |
| [flow-cols-s="4"] { | |
| -webkit-column-count: 4; | |
| column-count: 4 | |
| } | |
| [flow-cols-s="5"] { | |
| -webkit-column-count: 5; | |
| column-count: 5 | |
| } | |
| [flow-cols-s="6"] { | |
| -webkit-column-count: 6; | |
| column-count: 6 | |
| } | |
| [flow-cols-s="7"] { | |
| -webkit-column-count: 7; | |
| column-count: 7 | |
| } | |
| [flow-cols-s="8"] { | |
| -webkit-column-count: 8; | |
| column-count: 8 | |
| } | |
| } | |
| @media only screen and (min-width:1599px) { | |
| [flow-cols-l="1"] { | |
| -webkit-column-count: 1; | |
| column-count: 1 | |
| } | |
| [flow-cols-l="2"] { | |
| -webkit-column-count: 2; | |
| column-count: 2 | |
| } | |
| [flow-cols-l="3"] { | |
| -webkit-column-count: 3; | |
| column-count: 3 | |
| } | |
| [flow-cols-l="4"] { | |
| -webkit-column-count: 4; | |
| column-count: 4 | |
| } | |
| [flow-cols-l="5"] { | |
| -webkit-column-count: 5; | |
| column-count: 5 | |
| } | |
| [flow-cols-l="6"] { | |
| -webkit-column-count: 6; | |
| column-count: 6 | |
| } | |
| [flow-cols-l="7"] { | |
| -webkit-column-count: 7; | |
| column-count: 7 | |
| } | |
| [flow-cols-l="8"] { | |
| -webkit-column-count: 8; | |
| column-count: 8 | |
| } | |
| } | |
| 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-child { | |
| margin-top: unset | |
| } | |
| :last-child { | |
| margin-bottom: unset | |
| } | |
| hr:first-child { | |
| margin-top: calc(var(--hrThickness)/-2); | |
| margin-bottom: calc(var(--lineHeight) - var(--hrThickness)/2) | |
| } | |
| hr:last-child { | |
| margin-bottom: calc(var(--hrThickness)/-2) | |
| } | |
| hr, | |
| hr:last-child, | |
| hr:only-child { | |
| margin-top: calc(var(--lineHeight) - var(--hrThickness)/2) | |
| } | |
| hr, | |
| hr:only-child { | |
| border: none; | |
| background: #000; | |
| height: var(--hrThickness); | |
| margin-bottom: calc(var(--lineHeight) - var(--hrThickness)/2) | |
| } | |
| *+hr:last-child { | |
| margin-top: calc(var(--hrThickness)/-2) | |
| } | |
| hr:not(:first-child) { | |
| 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-top: calc(var(--lineHeight) - var(--hrThickness)); | |
| margin-bottom: 0 | |
| } | |
| code, | |
| pre, | |
| textarea.code, | |
| tt { | |
| font-family: IBM Plex Mono, monospace; | |
| -webkit-font-feature-settings: "ss02"1, "zero"1; | |
| font-feature-settings: "ss02"1, "zero"1 | |
| } | |
| pre { | |
| white-space: pre-wrap | |
| } | |
| code { | |
| white-space: nowrap | |
| } | |
| .bold, | |
| b, | |
| strong { | |
| font-weight: 600 | |
| } | |
| .italic, | |
| em, | |
| i { | |
| font-style: italic | |
| } | |
| code b, | |
| pre b, | |
| textarea.code b, | |
| tt b { | |
| font-weight: 540 | |
| } | |
| h { | |
| display: block; | |
| -moz-appearance: none; | |
| appearance: none; | |
| -webkit-appearance: none | |
| } | |
| .h1, | |
| h, | |
| h1 { | |
| font-weight: 720; | |
| letter-spacing: -.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) | |
| } | |
| h1.single-line, | |
| h1.single-line:first-child { | |
| padding-bottom: calc(var(--lineHeight)*0.5) | |
| } | |
| h1.single-line:first-child { | |
| margin-top: 0 | |
| } | |
| .h2, | |
| h2 { | |
| font-weight: 700; | |
| letter-spacing: -.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, | |
| .h4, | |
| h3, | |
| h4 { | |
| font-weight: 700; | |
| letter-spacing: -.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: -.012em; | |
| font-size: var(--h4-size) | |
| } | |
| h3.single-line, | |
| h4.single-line { | |
| padding-bottom: calc(var(--baseline)*1.25); | |
| margin-bottom: 0 | |
| } | |
| h3+h1, | |
| h3+h1.single-line, | |
| h4+h1, | |
| h4+h1.single-line { | |
| margin-top: calc(var(--baseline)*3) | |
| } | |
| h3.single-line+h1, | |
| h3.single-line+h1.single-line, | |
| h3.single-line+h2, | |
| h3.single-line+h2.single-line, | |
| h4.single-line+h1, | |
| h4.single-line+h1.single-line, | |
| h4.single-line+h2, | |
| h4.single-line+h2.single-line { | |
| margin-top: var(--lineHeight) | |
| } | |
| h3+h2, | |
| h3+h2.single-line, | |
| h4+h2, | |
| h4+h2.single-line { | |
| margin-top: var(--baseline) | |
| } | |
| .h5, | |
| .h6, | |
| h5, | |
| h6 { | |
| font-weight: 670; | |
| letter-spacing: -.015em | |
| } | |
| .h5, | |
| .h6, | |
| grid>c.h1, | |
| grid>c.h2, | |
| grid>c.h3, | |
| grid>c.h4, | |
| grid>c.h5, | |
| grid>c.h6, | |
| h5, | |
| h6 { | |
| margin-bottom: 0 | |
| } | |
| .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 { | |
| font-size: .85rem; | |
| line-height: var(--lineHeight) | |
| } | |
| .xsmall { | |
| font-size: .8em; | |
| line-height: calc(var(--lineHeight)*0.75); | |
| padding-top: calc(var(--lineHeight)*0.25) | |
| } | |
| .xxsmall { | |
| font-size: .65em; | |
| line-height: calc(var(--lineHeight)*0.7); | |
| padding-top: calc(var(--lineHeight)*0.3) | |
| } | |
| .xxxsmall { | |
| font-size: .5em; | |
| line-height: calc(var(--lineHeight)*0.5); | |
| padding-bottom: calc(var(--lineHeight)*0.25) | |
| } | |
| a { | |
| text-decoration: underline; | |
| -webkit-text-decoration: underline rgba(0, 0, 0, .3); | |
| text-decoration: underline rgba(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, .3); | |
| text-decoration: underline rgba(0, 0, 0, .3); | |
| color: inherit | |
| } | |
| 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.cover, | |
| img.fill { | |
| -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-column-gap: var(--columnGap); | |
| grid-row-gap: var(--rowGap) | |
| } | |
| grid.compact { | |
| grid-row-gap: 0 | |
| } | |
| ol, | |
| ul { | |
| list-style-position: outside | |
| } | |
| ol.compact>li, | |
| ul.compact>li { | |
| margin: 0 | |
| } | |
| ul { | |
| padding-left: 1.3em | |
| } | |
| ol { | |
| list-style: none; | |
| counter-reset: counter1; | |
| padding-left: 2em | |
| } | |
| ol>li { | |
| counter-increment: counter1; | |
| position: relative | |
| } | |
| ol>li:before { | |
| content: counter(counter1) ". "; | |
| font-weight: 500; | |
| position: absolute; | |
| --space: 0.5em; | |
| --width: 2em; | |
| left: calc(-1*var(--width)); | |
| width: var(--width); | |
| height: var(--lineHeight); | |
| text-align: left | |
| } | |
| @media only screen and (max-width:600px) { | |
| .only-large-window { | |
| display: none | |
| } | |
| } | |
| @media only screen and (min-width:601px) { | |
| .only-small-window { | |
| display: none | |
| } | |
| } | |
| .show-base-grid { | |
| background-image: repeating-linear-gradient(0deg, hsla(0, 0%, 47.1%, .05), hsla(0, 0%, 47.1%, .05) 1px, transparent 0, transparent calc(var(--baseline)/2), rgba(20, 230, 245, .3) calc(var(--baseline)/2), rgba(20, 230, 245, .3) calc(var(--baseline)/2 + 1px), transparent calc(var(--baseline)/2 + 1px), transparent var(--baseline)); | |
| background-repeat: repeat-y; | |
| background-size: 100% var(--baseline); | |
| background-position: 0 .5px | |
| } | |
| .single-line { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis | |
| } | |
| .block { | |
| display: block | |
| } | |
| .inline { | |
| display: inline-block | |
| } | |
| .flex-h { | |
| display: flex; | |
| flex-direction: row | |
| } | |
| .flex-v { | |
| display: flex; | |
| flex-direction: column | |
| } | |
| .left { | |
| text-align: left | |
| } | |
| .right { | |
| text-align: right | |
| } | |
| .center { | |
| text-align: center | |
| } | |
| .flex-v.center { | |
| align-self: center | |
| } | |
| .flex-h .bottom { | |
| align-self: flex-end | |
| } | |
| img.top { | |
| -o-object-position: center top; | |
| object-position: center top; | |
| align-self: center | |
| } | |
| img.center { | |
| -o-object-position: center center; | |
| object-position: center center; | |
| align-self: center | |
| } | |
| img.bottom { | |
| -o-object-position: center bottom; | |
| object-position: center bottom; | |
| align-self: center | |
| } | |
| img.left.top { | |
| -o-object-position: left top; | |
| object-position: left top; | |
| align-self: flex-start | |
| } | |
| img.left.center { | |
| -o-object-position: left center; | |
| object-position: left center; | |
| align-self: flex-start | |
| } | |
| img.left.bottom { | |
| -o-object-position: left bottom; | |
| object-position: left bottom; | |
| align-self: flex-start | |
| } | |
| img.right.top { | |
| -o-object-position: right top; | |
| object-position: right top; | |
| align-self: flex-end | |
| } | |
| img.right.center { | |
| -o-object-position: right center; | |
| object-position: right center; | |
| align-self: flex-end | |
| } | |
| img.right.bottom { | |
| -o-object-position: right bottom; | |
| object-position: right bottom; | |
| align-self: flex-end | |
| } | |
| .padding0 { | |
| padding: 0 | |
| } | |
| .padding1 { | |
| padding: calc(var(--lineHeight)*1) | |
| } | |
| .padding2 { | |
| padding: calc(var(--lineHeight)*2) | |
| } | |
| .padding3 { | |
| padding: calc(var(--lineHeight)*3) | |
| } | |
| .padding4 { | |
| padding: calc(var(--lineHeight)*4) | |
| } | |
| .padding5 { | |
| padding: calc(var(--lineHeight)*5); | |
| padding: calc(var(--lineHeight)*6); | |
| padding: calc(var(--lineHeight)*7); | |
| padding: calc(var(--lineHeight)*8) | |
| } | |
| .margin0 { | |
| margin: 0 | |
| } | |
| .margin1 { | |
| margin: calc(var(--lineHeight)*1) | |
| } | |
| .margin2 { | |
| margin: calc(var(--lineHeight)*2) | |
| } | |
| .margin3 { | |
| margin: calc(var(--lineHeight)*3) | |
| } | |
| .margin4 { | |
| margin: calc(var(--lineHeight)*4) | |
| } | |
| .margin5 { | |
| margin: calc(var(--lineHeight)*5); | |
| margin: calc(var(--lineHeight)*6); | |
| margin: calc(var(--lineHeight)*7); | |
| margin: calc(var(--lineHeight)*8) | |
| } | |
| .w-1 { | |
| width: calc(var(--lineHeight)*1) | |
| } | |
| .w-2 { | |
| width: calc(var(--lineHeight)*2) | |
| } | |
| .w-3 { | |
| width: calc(var(--lineHeight)*3) | |
| } | |
| .w-4 { | |
| width: calc(var(--lineHeight)*4) | |
| } | |
| .w-5 { | |
| width: calc(var(--lineHeight)*5) | |
| } | |
| .w-6 { | |
| width: calc(var(--lineHeight)*6) | |
| } | |
| .w-7 { | |
| width: calc(var(--lineHeight)*7) | |
| } | |
| .w-8 { | |
| width: calc(var(--lineHeight)*8) | |
| } | |
| .w-9 { | |
| width: calc(var(--lineHeight)*9) | |
| } | |
| .w-10 { | |
| width: calc(var(--lineHeight)*10) | |
| } | |
| .w-11 { | |
| width: calc(var(--lineHeight)*11) | |
| } | |
| .w-12 { | |
| width: calc(var(--lineHeight)*12) | |
| } | |
| .w-13 { | |
| width: calc(var(--lineHeight)*13) | |
| } | |
| .w-14 { | |
| width: calc(var(--lineHeight)*14) | |
| } | |
| .w-15 { | |
| width: calc(var(--lineHeight)*15) | |
| } | |
| .w-16 { | |
| width: calc(var(--lineHeight)*16) | |
| } | |
| .w-17 { | |
| width: calc(var(--lineHeight)*17) | |
| } | |
| .w-18 { | |
| width: calc(var(--lineHeight)*18) | |
| } | |
| .w-19 { | |
| width: calc(var(--lineHeight)*19) | |
| } | |
| .w-20 { | |
| width: calc(var(--lineHeight)*20) | |
| } | |
| .w-21 { | |
| width: calc(var(--lineHeight)*21) | |
| } | |
| .w-22 { | |
| width: calc(var(--lineHeight)*22) | |
| } | |
| .w-23 { | |
| width: calc(var(--lineHeight)*23) | |
| } | |
| .w-24 { | |
| width: calc(var(--lineHeight)*24) | |
| } | |
| .w-25 { | |
| width: calc(var(--lineHeight)*25) | |
| } | |
| .w-26 { | |
| width: calc(var(--lineHeight)*26) | |
| } | |
| .w-27 { | |
| width: calc(var(--lineHeight)*27) | |
| } | |
| .w-28 { | |
| width: calc(var(--lineHeight)*28) | |
| } | |
| .w-29 { | |
| width: calc(var(--lineHeight)*29) | |
| } | |
| .w-30 { | |
| width: calc(var(--lineHeight)*30) | |
| } | |
| .w-31 { | |
| width: calc(var(--lineHeight)*31) | |
| } | |
| .w-32 { | |
| width: calc(var(--lineHeight)*32) | |
| } | |
| .w-33 { | |
| width: calc(var(--lineHeight)*33) | |
| } | |
| .w-34 { | |
| width: calc(var(--lineHeight)*34) | |
| } | |
| .w-35 { | |
| width: calc(var(--lineHeight)*35) | |
| } | |
| .w-36 { | |
| width: calc(var(--lineHeight)*36) | |
| } | |
| .w-37 { | |
| width: calc(var(--lineHeight)*37) | |
| } | |
| .w-38 { | |
| width: calc(var(--lineHeight)*38) | |
| } | |
| .w-39 { | |
| width: calc(var(--lineHeight)*39) | |
| } | |
| .w-40 { | |
| width: calc(var(--lineHeight)*40) | |
| } | |
| .h-1 { | |
| height: calc(var(--lineHeight)*1) | |
| } | |
| .h-2 { | |
| height: calc(var(--lineHeight)*2) | |
| } | |
| .h-3 { | |
| height: calc(var(--lineHeight)*3) | |
| } | |
| .h-4 { | |
| height: calc(var(--lineHeight)*4) | |
| } | |
| .h-5 { | |
| height: calc(var(--lineHeight)*5) | |
| } | |
| .h-6 { | |
| height: calc(var(--lineHeight)*6) | |
| } | |
| .h-7 { | |
| height: calc(var(--lineHeight)*7) | |
| } | |
| .h-8 { | |
| height: calc(var(--lineHeight)*8) | |
| } | |
| .h-9 { | |
| height: calc(var(--lineHeight)*9) | |
| } | |
| .h-10 { | |
| height: calc(var(--lineHeight)*10) | |
| } | |
| .h-11 { | |
| height: calc(var(--lineHeight)*11) | |
| } | |
| .h-12 { | |
| height: calc(var(--lineHeight)*12) | |
| } | |
| .h-13 { | |
| height: calc(var(--lineHeight)*13) | |
| } | |
| .h-14 { | |
| height: calc(var(--lineHeight)*14) | |
| } | |
| .h-15 { | |
| height: calc(var(--lineHeight)*15) | |
| } | |
| .h-16 { | |
| height: calc(var(--lineHeight)*16) | |
| } | |
| .h-17 { | |
| height: calc(var(--lineHeight)*17) | |
| } | |
| .h-18 { | |
| height: calc(var(--lineHeight)*18) | |
| } | |
| .h-19 { | |
| height: calc(var(--lineHeight)*19) | |
| } | |
| .h-20 { | |
| height: calc(var(--lineHeight)*20) | |
| } | |
| .h-21 { | |
| height: calc(var(--lineHeight)*21) | |
| } | |
| .h-22 { | |
| height: calc(var(--lineHeight)*22) | |
| } | |
| .h-23 { | |
| height: calc(var(--lineHeight)*23) | |
| } | |
| .h-24 { | |
| height: calc(var(--lineHeight)*24) | |
| } | |
| .h-25 { | |
| height: calc(var(--lineHeight)*25) | |
| } | |
| .h-26 { | |
| height: calc(var(--lineHeight)*26) | |
| } | |
| .h-27 { | |
| height: calc(var(--lineHeight)*27) | |
| } | |
| .h-28 { | |
| height: calc(var(--lineHeight)*28) | |
| } | |
| .h-29 { | |
| height: calc(var(--lineHeight)*29) | |
| } | |
| .h-30 { | |
| height: calc(var(--lineHeight)*30) | |
| } | |
| .h-31 { | |
| height: calc(var(--lineHeight)*31) | |
| } | |
| .h-32 { | |
| height: calc(var(--lineHeight)*32) | |
| } | |
| .h-33 { | |
| height: calc(var(--lineHeight)*33) | |
| } | |
| .h-34 { | |
| height: calc(var(--lineHeight)*34) | |
| } | |
| .h-35 { | |
| height: calc(var(--lineHeight)*35) | |
| } | |
| .h-36 { | |
| height: calc(var(--lineHeight)*36) | |
| } | |
| .h-37 { | |
| height: calc(var(--lineHeight)*37) | |
| } | |
| .h-38 { | |
| height: calc(var(--lineHeight)*38) | |
| } | |
| .h-39 { | |
| height: calc(var(--lineHeight)*39) | |
| } | |
| .h-40 { | |
| height: calc(var(--lineHeight)*40) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment