diff options
Diffstat (limited to 'sass/uchu/_base.scss')
| -rw-r--r-- | sass/uchu/_base.scss | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/sass/uchu/_base.scss b/sass/uchu/_base.scss new file mode 100644 index 0000000..ab6efbd --- /dev/null +++ b/sass/uchu/_base.scss @@ -0,0 +1,178 @@ +/// based on Raster v20 (release package) (rsms.me/raster) + +u-grid { + --grid-tc: repeat(4, 1fr); + --grid-ce: -1; + --grid-cs: 1; + display: grid; + grid-column-gap: var(--column-gap); + grid-row-gap: var(--row-gap); + grid-template-columns: var(--grid-tc); + + &.compact { grid-row-gap: 0; } + + &.debug { + > * { + --color: rgba(248, 110, 91, 0.3); + background-image: linear-gradient(180deg, var(--color) 0, var(--color)); + } + + > :nth-child(6n+2) { + --color: rgba(103, 126, 208, 0.3); + } + + > :nth-child(6n+3) { + --color: rgba(224, 174, 72, 0.3); + } + + > :nth-child(6n+4) { + --color: rgba(77, 214, 115, 0.3); + } + + > :nth-child(6n+5) { + --color: rgba(217, 103, 219, 0.3); + } + + > :nth-child(6n+6) { + --color: rgba(94, 204, 211, 0.3); + } + + > :nth-child(6n+7) { + --color: rgba(248, 110, 91, 0.3); + } + } + + > hr { grid-column: 1 / -1; } + + > hr, + > hr:not(:first-child):not(:last-child) { + margin-top: calc(var(--line-height) - var(--hr-thickness)); + margin-bottom: 0; + } + + > u-cell { + appearance: none; + display: block; + + &[span] { grid-column-end: span var(--grid-ce); } + &[span*="+"], &[span*="-"], &[span*=".."] { grid-column-start: var(--grid-cs); } + &[span*="-"], &[span*=".."] { grid-column-end: var(--grid-ce); } + &[span=row] { grid-column: var(--grid-cs) / var(--grid-ce); } + + &[span^="1"] { --grid-cs: 1; } + &[span^="2"] { --grid-cs: 2; } + &[span^="3"] { --grid-cs: 3; } + &[span^="4"] { --grid-cs: 4; } + &[span^="5"] { --grid-cs: 5; } + &[span^="6"] { --grid-cs: 6; } + &[span^="7"] { --grid-cs: 7; } + &[span^="8"] { --grid-cs: 8; } + &[span^="9"] { --grid-cs: 9; } + &[span^="10"] { --grid-cs: 10; } + &[span^="11"] { --grid-cs: 11; } + &[span^="12"] { --grid-cs: 12; } + &[span^="13"] { --grid-cs: 13; } + &[span^="14"] { --grid-cs: 14; } + &[span^="15"] { --grid-cs: 15; } + &[span^="16"] { --grid-cs: 16; } + &[span^="17"] { --grid-cs: 17; } + &[span^="18"] { --grid-cs: 18; } + &[span^="19"] { --grid-cs: 19; } + &[span^="20"] { --grid-cs: 20; } + &[span^="21"] { --grid-cs: 21; } + &[span^="22"] { --grid-cs: 22; } + &[span^="23"] { --grid-cs: 23; } + &[span^="24"] { --grid-cs: 24; } + &[span^="25"] { --grid-cs: 25; } + &[span^="26"] { --grid-cs: 26; } + &[span^="27"] { --grid-cs: 27; } + &[span^="28"] { --grid-cs: 28; } + &[span^="29"] { --grid-cs: 29; } + &[span^="30"] { --grid-cs: 30; } + + &[span$="+1"], &[span="1"] { --grid-ce: 1; } + &[span$="+2"], &[span$="-1"], &[span="2"] { --grid-ce: 2; } + &[span$="+3"], &[span$="-2"], &[span="3"] { --grid-ce: 3; } + &[span$="+4"], &[span$="-3"], &[span="4"] { --grid-ce: 4; } + &[span$="+5"], &[span$="-4"], &[span="5"] { --grid-ce: 5; } + &[span$="+6"], &[span$="-5"], &[span="6"] { --grid-ce: 6; } + &[span$="+7"], &[span$="-6"], &[span="7"] { --grid-ce: 7; } + &[span$="+8"], &[span$="-7"], &[span="8"] { --grid-ce: 8; } + &[span$="+9"], &[span$="-8"], &[span="9"] { --grid-ce: 9; } + &[span$="+10"], &[span$="-9"], &[span="10"] { --grid-ce: 10; } + &[span$="+11"], &[span$="-10"], &[span="11"] { --grid-ce: 11; } + &[span$="+12"], &[span$="-11"], &[span="12"] { --grid-ce: 12; } + &[span$="+13"], &[span$="-12"], &[span="13"] { --grid-ce: 13; } + &[span$="+14"], &[span$="-13"], &[span="14"] { --grid-ce: 14; } + &[span$="+15"], &[span$="-14"], &[span="15"] { --grid-ce: 15; } + &[span$="+16"], &[span$="-15"], &[span="16"] { --grid-ce: 16; } + &[span$="+17"], &[span$="-16"], &[span="17"] { --grid-ce: 17; } + &[span$="+18"], &[span$="-17"], &[span="18"] { --grid-ce: 18; } + &[span$="+19"], &[span$="-18"], &[span="19"] { --grid-ce: 19; } + &[span$="+20"], &[span$="-19"], &[span="20"] { --grid-ce: 20; } + &[span$="+21"], &[span$="-20"], &[span="21"] { --grid-ce: 21; } + &[span$="+22"], &[span$="-21"], &[span="22"] { --grid-ce: 22; } + &[span$="+23"], &[span$="-22"], &[span="23"] { --grid-ce: 23; } + &[span$="+24"], &[span$="-23"], &[span="24"] { --grid-ce: 24; } + &[span$="+25"], &[span$="-24"], &[span="25"] { --grid-ce: 25; } + &[span$="+26"], &[span$="-25"], &[span="26"] { --grid-ce: 26; } + &[span$="+27"], &[span$="-26"], &[span="27"] { --grid-ce: 27; } + &[span$="+28"], &[span$="-27"], &[span="28"] { --grid-ce: 28; } + &[span$="+29"], &[span$="-28"], &[span="29"] { --grid-ce: 29; } + &[span$="+30"], &[span$="-29"], &[span="30"] { --grid-ce: 30; } + &[span$="-30"] { --grid-ce: 31; } + + &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { margin-bottom: 0; } + + > img, + > p > img { + max-width: 100%; + object-fit: contain; + } + } + + &[columns="1"] { --grid-tc: repeat(1, 1fr); } + &[columns="2"] { --grid-tc: repeat(2, 1fr); } + &[columns="3"] { --grid-tc: repeat(3, 1fr); } + &[columns="4"] { --grid-tc: repeat(4, 1fr); } + &[columns="5"] { --grid-tc: repeat(5, 1fr); } + &[columns="6"] { --grid-tc: repeat(6, 1fr); } + &[columns="7"] { --grid-tc: repeat(7, 1fr); } + &[columns="8"] { --grid-tc: repeat(8, 1fr); } + &[columns="9"] { --grid-tc: repeat(9, 1fr); } + &[columns="10"] { --grid-tc: repeat(10, 1fr); } + &[columns="11"] { --grid-tc: repeat(11, 1fr); } + &[columns="12"] { --grid-tc: repeat(12, 1fr); } + &[columns="13"] { --grid-tc: repeat(13, 1fr); } + &[columns="14"] { --grid-tc: repeat(14, 1fr); } + &[columns="15"] { --grid-tc: repeat(15, 1fr); } + &[columns="16"] { --grid-tc: repeat(16, 1fr); } + &[columns="17"] { --grid-tc: repeat(17, 1fr); } + &[columns="18"] { --grid-tc: repeat(18, 1fr); } + &[columns="19"] { --grid-tc: repeat(19, 1fr); } + &[columns="20"] { --grid-tc: repeat(20, 1fr); } + &[columns="21"] { --grid-tc: repeat(21, 1fr); } + &[columns="22"] { --grid-tc: repeat(22, 1fr); } + &[columns="23"] { --grid-tc: repeat(23, 1fr); } + &[columns="24"] { --grid-tc: repeat(24, 1fr); } + &[columns="25"] { --grid-tc: repeat(25, 1fr); } + &[columns="26"] { --grid-tc: repeat(26, 1fr); } + &[columns="27"] { --grid-tc: repeat(27, 1fr); } + &[columns="28"] { --grid-tc: repeat(28, 1fr); } + &[columns="29"] { --grid-tc: repeat(29, 1fr); } + &[columns="30"] { --grid-tc: repeat(30, 1fr); } +} + +[flow-cols] { + column-fill: balance; + column-gap: var(--column-gap); +} + +[flow-cols="1"] { column-count: 1; } +[flow-cols="2"] { column-count: 2; } +[flow-cols="3"] { column-count: 3; } +[flow-cols="4"] { column-count: 4; } +[flow-cols="5"] { column-count: 5; } +[flow-cols="6"] { column-count: 6; } +[flow-cols="7"] { column-count: 7; } +[flow-cols="8"] { column-count: 8; } |