From b052f741d935abd2f51423abf3fcda9157844b5c Mon Sep 17 00:00:00 2001 From: "netop://ウィビ" Date: Sat, 11 Apr 2026 14:42:43 -0700 Subject: initial commit --- sass/uchu/_base.scss | 178 +++++++++++ sass/uchu/_form.scss | 77 +++++ sass/uchu/_reset.scss | 708 +++++++++++++++++++++++++++++++++++++++++ sass/uchu/core/_animation.scss | 23 ++ sass/uchu/core/_mixin.scss | 84 +++++ sass/uchu/core/_root.scss | 38 +++ sass/uchu/uchu.scss | 4 + 7 files changed, 1112 insertions(+) create mode 100644 sass/uchu/_base.scss create mode 100644 sass/uchu/_form.scss create mode 100644 sass/uchu/_reset.scss create mode 100644 sass/uchu/core/_animation.scss create mode 100644 sass/uchu/core/_mixin.scss create mode 100644 sass/uchu/core/_root.scss create mode 100644 sass/uchu/uchu.scss (limited to 'sass/uchu') 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; } diff --git a/sass/uchu/_form.scss b/sass/uchu/_form.scss new file mode 100644 index 0000000..e8d3194 --- /dev/null +++ b/sass/uchu/_form.scss @@ -0,0 +1,77 @@ +fieldset { + position: relative; + + button { + margin-top: 1rem; padding: 0.5rem calc(0.75rem + 2px); + + border: none; + display: block; + text-transform: lowercase; + + &:not(:disabled) { + background-color: var(--uchu-gray-9); + color: var(--uchu-gray-2); + cursor: pointer; + } + + &:disabled { + background-color: var(--uchu-gray-2); + color: var(--uchu-gray-6); + cursor: not-allowed; + } + } + + label { + color: var(--uchu-gray-5); + font-size: 80%; + position: absolute; + padding-top: 4px; + padding-left: calc(0.75rem + 2px); + text-transform: lowercase; + + + input, + + select { + background-color: var(--uchu-gray-2); + border: 2px solid; + transition: border-color 0.2s; + width: 400px; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } + + &::placeholder { + color: var(--uchu-gray-5); + opacity: 1; + } + + &:not(:focus) { + border-color: var(--uchu-gray-2); + } + + &:focus { + border-color: var(--uchu-blue-4); + box-shadow: none; + outline: none; + } + } + + + select { + background-image: url("/media/svg/caret-down.svg"); + background-position: right 1rem bottom 0.7rem; + background-repeat: no-repeat; + background-size: 1rem; + padding: 1.5rem 0.75rem 0.5rem 0.5rem; + } + + + input { + padding: 1.5rem 0.75rem 0.5rem 0.75rem; + + &:invalid { + border-color: var(--uchu-red-5); + box-shadow: none; + outline: none; + } + } + } +} diff --git a/sass/uchu/_reset.scss b/sass/uchu/_reset.scss new file mode 100644 index 0000000..a270848 --- /dev/null +++ b/sass/uchu/_reset.scss @@ -0,0 +1,708 @@ +* { + box-sizing: border-box; + font: inherit; + line-height: inherit; + + + hr:last-child { margin-top: calc(var(--hr-thickness) / -2); } + + + h2 { + margin-top: var(--line-height); + margin-bottom: 0; + padding-top: calc(var(--line-height) * 0.5); + padding-bottom: calc(var(--line-height) * 0.5); + } + + + img { margin-top: calc(var(--baseline) * -1); } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } +} + +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; +} + +address, article, aside, blockquote, dd, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, li, nav, ol, p, pre, r-grid, table, tfoot, ul, video { + margin-top: var(--block-spacing-top); + margin-bottom: var(--block-spacing-bottom); +} + +a { + color: inherit; + cursor: pointer; + text-decoration: underline oklch(var(--uchu-yin-raw) / 30%); + transition: all 0.2s; + white-space: nowrap; + -webkit-text-decoration: underline oklch(var(--uchu-yin-raw) / 30%); /// safari needs a hand + + &:hover { + color: var(--uchu-blue-4); + } +} + +b, strong { + font-weight: 600; + + code, pre, tt { + font-weight: inherit; + } +} + +blockquote, q { + quotes: none; + + &::after, + &::before { + content: none; + } +} + +button { + margin: 0; padding: 0; + + appearance: none; + background-color: transparent; + border: none; +} + +html { + background-color: var(--background-color); + color: var(--foreground-color); + font-family: var(--font-sans), -system-ui, system-ui, sans-serif; + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv10" 1; + font-size: var(--font-size); + font-variant-ligatures: contextual common-ligatures; + letter-spacing: -0.01rem; + line-height: var(--line-height); +} + +body { + overflow-x: hidden; + padding: calc(var(--line-height) * 2); + padding-bottom: calc(var(--line-height) * 3); + scroll-behavior: smooth; + + @media only screen and (max-width: 600px) { + padding: var(--line-height); + padding-bottom: calc(var(--line-height) * 2); + } +} + +:first-child { margin-top: unset; } +:last-child { margin-bottom: unset; } + +hr { + background-color: var(--foreground-color); + border: none; + height: var(--hr-thickness); + margin-top: calc(var(--line-height) - var(--hr-thickness) / 2); + margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2); + opacity: 0.05; + + &:not(:first-child) { + margin-top: var(--line-height); + margin-bottom: calc(var(--line-height) - var(--hr-thickness)); + } + + &:last-child, + &:only-child { + margin-top: calc(var(--line-height) - var(--hr-thickness) / 2); + } + + &:first-child { + margin-top: calc(var(--hr-thickness) / -2); + margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2); + } + + &:last-child { + margin-bottom: calc(var(--hr-thickness) / -2); + } + + &:only-child { + margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2); + } +} + + + +em, i { + font-style: italic; +} + +code, +pre, +tt { + font-family: var(--mono-font), Inconsolata, Menlo, monospace; + font-variant-numeric: slashed-zero; /// best zero + font-weight: 430; + white-space: pre-wrap; + word-wrap: break-word; + + b, strong { + font-weight: 580; + } +} + +pre { + display: block; + overflow-x: auto; + white-space: pre; + word-wrap: normal; + + code, + tt { + white-space: pre; + word-wrap: normal; + } +} + + + +h1 { + font-size: var(--h1-size); + font-weight: 720; + letter-spacing: -0.05rem; + line-height: calc(var(--line-height) * 2); + margin-top: calc(var(--line-height) * 2); + margin-bottom: var(--line-height); + margin-left: calc(var(--h1-size) / -22); + word-break: break-word; + + &.single-line { + margin-top: var(--line-height); + padding-top: calc(var(--line-height) * 0.5); + padding-bottom: calc(var(--line-height) * 0.5); + + &:first-child { + margin-top: 0; + padding-bottom: calc(var(--line-height) * 0.5); + } + } + + &.large { + --h1-size: 4rem; + font-weight: 730; + line-height: calc(var(--line-height) * 3); + } + + &.xlarge { + --h1-size: 5.5rem; + font-weight: 740; + line-height: calc(var(--line-height) * 4); + } + + &.xxlarge { + --h1-size: 7.5rem; + font-weight: 750; + line-height: calc(var(--line-height) * 5); + } + + &.xxxlarge { + --h1-size: 10.5rem; + font-weight: 760; + line-height: calc(var(--line-height) * 7); + } +} + +h2 { + font-size: var(--h2-size); + font-weight: 700; + letter-spacing: -0.03rem; + line-height: calc(var(--line-height) * 2); + margin-bottom: var(--line-height); + margin-left: calc(var(--h2-size) / -26); + + &.single-line { + margin-top: var(--line-height); + margin-bottom: 0; + padding-top: calc(var(--line-height) * 0.5); + padding-bottom: calc(var(--line-height) * 0.5); + &:first-child { margin-top: unset; } + } +} + +h3, h4 { + font-size: var(--h3-size); + font-weight: 700; + letter-spacing: -0.02rem; + line-height: calc(var(--line-height) * 1.15); + margin-bottom: var(--baseline); + padding-top: calc(var(--baseline) * 0.75); + padding-bottom: calc(var(--baseline) * 0.25); + + &.single-line { + margin-bottom: 0; + padding-bottom: calc(var(--baseline) * 1.25); + } + + + h1, + + h1.single-line { + margin-top: calc(var(--baseline) * 3); + } + + &.single-line + h1, + &.single-line + h1.single-line, + &.single-line + h2, + &.single-line + h2.single-line { + margin-top: var(--line-height); + } + + + h2, + + h2.single-line { + margin-top: var(--baseline); + } +} + +h4 { + font-size: var(--h4-size); + font-weight: 700; + letter-spacing: -0.012rem; +} + +h5, h6 { + font-weight: 670; + letter-spacing: -0.015rem; + margin-bottom: 0; +} + +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; + + &:hover { + color: inherit; + text-decoration: underline oklch(var(--uchu-yin-raw) / 30%); + } +} + +img { + display: block; + margin-top: var(--baseline); + margin-bottom: var(--baseline); + + &:first-child, + &:last-child { + display: block; + margin-top: var(--baseline); + margin-bottom: var(--baseline); + } + + &:only-child { margin: 0; } + + &.cover, + &.fill { + object-fit: cover; + } + + &.bottom, + &.center, + &.top { + align-self: center; + } + + &.bottom { object-position: center bottom; } + &.center { object-position: center center; } + &.top { object-position: center top; } + + &.left.bottom, + &.left.center, + &.left.top { + align-self: flex-start; + } + + &.left.bottom { object-position: left bottom; } + &.left.center { object-position: left center; } + &.left.top { object-position: left top; } + + &.right.bottom, + &.right.center, + &.right.top { + align-self: flex-end; + } + + &.right.bottom { object-position: right bottom; } + &.right.center { object-position: right center; } + &.right.top { object-position: right top; } +} + +input, +select { + appearance: none; + border: none; + letter-spacing: -0.01rem; /// to match html rule + + -moz-appearance: none; + -webkit-appearance: none; + + &:focus-visible { + outline: 2px solid var(--uchu-blue-4); + } +} + +ol, +ul { + list-style-position: outside; + --list-indentation: 2rem; + &.compact > li { margin-bottom: 0; } +} + +ol { + &:not([start]) { + counter-reset: ol-counter; + list-style: none; + padding-left: var(--list-indentation); + + > li { + counter-increment: ol-counter; + position: relative; + + &::before { + --space: 0.5rem; + --width: calc(var(--list-indentation) - var(--space)); + width: var(--width); height: var(--line-height); + + content: counter(ol-counter) ". "; + font-variant-numeric: tabular-nums; + font-weight: 500; + left: calc(-1 * (var(--width) + var(--space))); + position: absolute; + text-align: left; + } + } + } + + &[start] { padding-inline-start: var(--list-indentation); } +} + +ul { padding-left: 1.3rem; } + +li { + margin-bottom: var(--baseline); + margin-left: 0.2rem; + + > p + ol, + > p + ul { + margin-top: calc(var(--baseline) * -1); + } + + &.task-list-item { + list-style-type: none; + + > input[type=checkbox] { + width: 1.5rem; height: var(--baseline); + + appearance: none; + background: none; + border: none; + display: inline-block; + list-style: none; + margin-right: 0.5rem; + margin-left: -1.4rem; + opacity: 1; + position: relative; + + --check-svg-url: url('data:image/svg+xml;utf8,'); + --outline-svg-url: url('data:image/svg+xml;utf8,'); + + &::after, + &::before { + top: -0.25rem; bottom: -0.25rem; left: 0; + + background-position: 50%; + background-repeat: no-repeat; + background-size: contain; + color: transparent; + content: "×"; + display: block; + position: absolute; + width: 1.1rem; + + @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) { + mask-position: center center; + mask-repeat: no-repeat; + mask-size: contain; + } + } + + &::after { + background-image: var(--outline-svg-url); + + @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) { + background-color: var(--foreground-color); + mask-image: var(--outline-svg-url); + } + } + + &[checked]::before { + background-image: var(--check-svg-url); + + @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) { + background-color: var(--foreground-color); + mask-image: var(--check-svg-url); + } + } + } + } +} + +table { + --border-opacity: 0.15; + --border-color: rgba(var(--foreground-color-rgb), calc(var(--foreground-color-a) * var(--border-opacity))); + --border-width: 1px; + + border-collapse: collapse; + border-right: var(--border-width) solid var(--border-color); + border-spacing: 0; + border-top: var(--border-width) solid var(--border-color); + overflow: auto; + position: relative; + margin-top: calc(var(--line-height) * 1 + var(--border-width) * -1); + margin-bottom: calc(var(--line-height) * 1.5); + + * { + box-sizing: border-box; + } + + &:first-child { + margin-top: calc(var(--line-height) * 0.5 + var(--border-width) * -1); + margin-bottom: calc(var(--line-height) * 0.5); + } + + td, + th { + background-image: linear-gradient(90deg, var(--border-color), var(--border-color) 1px, transparent 0, transparent calc(var(--baseline) / 2)); + background-position: 0 -1px; + background-repeat: no-repeat; + background-size: 100% 100%; + padding: var(--baseline) 1rem; + position: relative; + + &::after { + right: 0; bottom: 0; left: 0; + + background-color: var(--border-color); + color: transparent; + content: "A"; + height: var(--border-width); + pointer-events: none; + position: absolute; + z-index: 1; + } + } + + th { + font-weight: 600; + text-align: left; + + &[align=center] { text-align: center; } + &[align=right] { text-align: right; } + } +} + +p + table { + margin-top: calc(var(--line-height) * 1.5 + var(--border-width) * -1); +} + + + +@media only screen and (max-width: 600px) { + .only-large-window { + display: none; + } +} + +@media only screen and (min-width: 601px) { + .only-small-window { + display: none; + } +} + +.compact { + > li > p + ol, + > li > p + ul { + margin-top: calc(var(--block-spacing-bottom) * -1); + } +} + +.small { + font-size: 0.85rem; + line-height: var(--line-height); +} + +.xsmall { + font-size: 0.8rem; + line-height: calc(var(--line-height) * 0.75); + padding-top: calc(var(--line-height) * 0.25); +} + +.xxsmall { + font-size: 0.65rem; + line-height: calc(var(--line-height) * 0.7); + padding-top: calc(var(--line-height) * 0.3); +} + +.xxxsmall { + font-size: 0.5rem; + line-height: calc(var(--line-height) * 0.5); + padding-bottom: calc(var(--line-height) * 0.25); +} + +.show-base-grid { + background-image: repeating-linear-gradient( + 0deg, var(--base-grid-color2), + var(--base-grid-color2) 1px, + transparent 0, + transparent calc(var(--baseline) / 2), + var(--base-grid-color1) calc(var(--baseline) / 2), + var(--base-grid-color1) calc(var(--baseline) / 2 + 1px), + transparent calc(var(--baseline) / 2 + 1px), + transparent var(--baseline) + ); + background-position: 0 0.5px; + background-repeat: repeat-y; + background-size: 100% var(--baseline); +} + +.single-line { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.block { display: block; } +.inline { display: inline-block; } + +.flex-h, .flex-v { + display: flex; +} + +.flex-h { + flex-direction: row; + .bottom { align-self: flex-end; } +} + +.flex-v { + flex-direction: column; + &.center { align-self: center; } +} + +.center { text-align: center; } +.left { text-align: left; } +.right { text-align: right; } + +.margin0 { margin: 0; } +.margin1 { margin: calc(var(--line-height) * 1); } +.margin2 { margin: calc(var(--line-height) * 2); } +.margin3 { margin: calc(var(--line-height) * 3); } +.margin4 { margin: calc(var(--line-height) * 4); } +.margin5 { margin: calc(var(--line-height) * 8); } + +.padding0 { padding: 0; } +.padding1 { padding: calc(var(--line-height) * 1); } +.padding2 { padding: calc(var(--line-height) * 2); } +.padding3 { padding: calc(var(--line-height) * 3); } +.padding4 { padding: calc(var(--line-height) * 4); } +.padding5 { padding: calc(var(--line-height) * 8); } + +.w-1 { width: calc(var(--line-height) * 1); } +.w-2 { width: calc(var(--line-height) * 2); } +.w-3 { width: calc(var(--line-height) * 3); } +.w-4 { width: calc(var(--line-height) * 4); } +.w-5 { width: calc(var(--line-height) * 5); } +.w-6 { width: calc(var(--line-height) * 6); } +.w-7 { width: calc(var(--line-height) * 7); } +.w-8 { width: calc(var(--line-height) * 8); } +.w-9 { width: calc(var(--line-height) * 9); } +.w-10 { width: calc(var(--line-height) * 10); } +.w-11 { width: calc(var(--line-height) * 11); } +.w-12 { width: calc(var(--line-height) * 12); } +.w-13 { width: calc(var(--line-height) * 13); } +.w-14 { width: calc(var(--line-height) * 14); } +.w-15 { width: calc(var(--line-height) * 15); } +.w-16 { width: calc(var(--line-height) * 16); } +.w-17 { width: calc(var(--line-height) * 17); } +.w-18 { width: calc(var(--line-height) * 18); } +.w-19 { width: calc(var(--line-height) * 19); } +.w-20 { width: calc(var(--line-height) * 20); } +.w-21 { width: calc(var(--line-height) * 21); } +.w-22 { width: calc(var(--line-height) * 22); } +.w-23 { width: calc(var(--line-height) * 23); } +.w-24 { width: calc(var(--line-height) * 24); } +.w-25 { width: calc(var(--line-height) * 25); } +.w-26 { width: calc(var(--line-height) * 26); } +.w-27 { width: calc(var(--line-height) * 27); } +.w-28 { width: calc(var(--line-height) * 28); } +.w-29 { width: calc(var(--line-height) * 29); } +.w-30 { width: calc(var(--line-height) * 30); } +.w-31 { width: calc(var(--line-height) * 31); } +.w-32 { width: calc(var(--line-height) * 32); } +.w-33 { width: calc(var(--line-height) * 33); } +.w-34 { width: calc(var(--line-height) * 34); } +.w-35 { width: calc(var(--line-height) * 35); } +.w-36 { width: calc(var(--line-height) * 36); } +.w-37 { width: calc(var(--line-height) * 37); } +.w-38 { width: calc(var(--line-height) * 38); } +.w-39 { width: calc(var(--line-height) * 39); } +.w-40 { width: calc(var(--line-height) * 40); } +.w-full { width: 100%; } + +.h-1 { height: calc(var(--line-height) * 1); } +.h-2 { height: calc(var(--line-height) * 2); } +.h-3 { height: calc(var(--line-height) * 3); } +.h-4 { height: calc(var(--line-height) * 4); } +.h-5 { height: calc(var(--line-height) * 5); } +.h-6 { height: calc(var(--line-height) * 6); } +.h-7 { height: calc(var(--line-height) * 7); } +.h-8 { height: calc(var(--line-height) * 8); } +.h-9 { height: calc(var(--line-height) * 9); } +.h-10 { height: calc(var(--line-height) * 10); } +.h-11 { height: calc(var(--line-height) * 11); } +.h-12 { height: calc(var(--line-height) * 12); } +.h-13 { height: calc(var(--line-height) * 13); } +.h-14 { height: calc(var(--line-height) * 14); } +.h-15 { height: calc(var(--line-height) * 15); } +.h-16 { height: calc(var(--line-height) * 16); } +.h-17 { height: calc(var(--line-height) * 17); } +.h-18 { height: calc(var(--line-height) * 18); } +.h-19 { height: calc(var(--line-height) * 19); } +.h-20 { height: calc(var(--line-height) * 20); } +.h-21 { height: calc(var(--line-height) * 21); } +.h-22 { height: calc(var(--line-height) * 22); } +.h-23 { height: calc(var(--line-height) * 23); } +.h-24 { height: calc(var(--line-height) * 24); } +.h-25 { height: calc(var(--line-height) * 25); } +.h-26 { height: calc(var(--line-height) * 26); } +.h-27 { height: calc(var(--line-height) * 27); } +.h-28 { height: calc(var(--line-height) * 28); } +.h-29 { height: calc(var(--line-height) * 29); } +.h-30 { height: calc(var(--line-height) * 30); } +.h-31 { height: calc(var(--line-height) * 31); } +.h-32 { height: calc(var(--line-height) * 32); } +.h-33 { height: calc(var(--line-height) * 33); } +.h-34 { height: calc(var(--line-height) * 34); } +.h-35 { height: calc(var(--line-height) * 35); } +.h-36 { height: calc(var(--line-height) * 36); } +.h-37 { height: calc(var(--line-height) * 37); } +.h-38 { height: calc(var(--line-height) * 38); } +.h-39 { height: calc(var(--line-height) * 39); } +.h-40 { height: calc(var(--line-height) * 40); } + +.opacity0 { opacity: 0; } +.opacity1 { opacity: 0.1; } +.opacity2 { opacity: 0.2; } +.opacity3 { opacity: 0.3; } +.opacity4 { opacity: 0.4; } +.opacity5 { opacity: 0.5; } +.opacity6 { opacity: 0.6; } +.opacity7 { opacity: 0.7; } +.opacity8 { opacity: 0.8; } +.opacity9 { opacity: 0.9; } +.opacity10 { opacity: 1; } diff --git a/sass/uchu/core/_animation.scss b/sass/uchu/core/_animation.scss new file mode 100644 index 0000000..5487ce4 --- /dev/null +++ b/sass/uchu/core/_animation.scss @@ -0,0 +1,23 @@ +@keyframes hovering { + 0% { + transform: translate(0, 0); + } + + 50% { + transform: translate(0, 8px); + } + + 100% { + transform: translate(0, 0); + } +} + +@keyframes marquee { + 0% { + transform: translateX(0); + } + + to { + transform: translateX(-100%); + } +} diff --git a/sass/uchu/core/_mixin.scss b/sass/uchu/core/_mixin.scss new file mode 100644 index 0000000..618cbe6 --- /dev/null +++ b/sass/uchu/core/_mixin.scss @@ -0,0 +1,84 @@ +@mixin center { + align-items: center; + display: inline-flex; + justify-content: center; +} + +@mixin clearfix { + clear: both; + content: ""; + display: block; +} + +@mixin ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/// Smart font include +/// Simply pass in the font-weight you want to use and the normal/italicized versions will be added +/// No more weighing down the front-end with references to unused weights +@mixin font($font-weight, $relative-font-path, $font-name) { + @font-face { + font-family: $font-name; + font-style: normal; + font-weight: $font-weight; + src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2"); + } +} + +@mixin font-plus-italics($font-weight, $relative-font-path, $font-name) { + @font-face { + font-family: $font-name; + font-style: normal; + font-weight: $font-weight; + src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2"); + } + + @font-face { + font-family: $font-name; + font-style: italic; + font-weight: $font-weight; + src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2"); + } +} + +@mixin mono-plus-italics($font-weight, $relative-font-path, $font-name) { + @font-face { + font-family: $font-name; + font-style: normal; + font-weight: $font-weight; + src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2"); + unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥ + } + + @font-face { + font-family: $font-name; + font-style: italic; + font-weight: $font-weight; + src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2"); + unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥ + } +} + +@mixin hide-text { + border: none; + color: transparent; + font: 0 / 0 a; + text-shadow: none; +} + +@mixin selection($background-color: var(--uchu-yang), $text-color: var(--uchu-gray-9)) { + &::selection { + background-color: $background-color; + color: $text-color; + text-shadow: none; + } + + &::-moz-selection { + background-color: $background-color; + color: $text-color; + text-shadow: none; + } +} diff --git a/sass/uchu/core/_root.scss b/sass/uchu/core/_root.scss new file mode 100644 index 0000000..ff0dc09 --- /dev/null +++ b/sass/uchu/core/_root.scss @@ -0,0 +1,38 @@ +:root { + --background-color: var(--uchu-gray-1); + --base-grid-color1: oklch(var(--uchu-blue-3-raw) / 30%); + --base-grid-color2: oklch(var(--uchu-purple-3-raw) / 30%); + --baseline: calc(var(--line-height) / 2); + --block-spacing-bottom: var(--line-height); + --block-spacing-top: 0; + --column-gap: calc(var(--line-height) * 2); + --display-scale: 1; + --font-mono: null; + --font-sans: null; + --font-serif: null; + --font-size: 12px; + --foreground-color: oklch(var(--uchu-yin-raw) / 80%); + --h1-size: 2.8rem; + --h2-size: 2.2rem; + --h3-size: 1.4rem; + --h4-size: 1.1rem; + --hr-thickness: 2px; + --line-height: calc(var(--font-size) * 1.5); + --pixel: 1px; + --row-gap: var(--line-height); + + @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { + --display-scale: 2; + --pixel: 0.5px; + } + + @media only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) { + --display-scale: 3; + --pixel: 0.34px; + } + + @media only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) { + --display-scale: 4; + --pixel: 0.25px; + } +} diff --git a/sass/uchu/uchu.scss b/sass/uchu/uchu.scss new file mode 100644 index 0000000..146bfe6 --- /dev/null +++ b/sass/uchu/uchu.scss @@ -0,0 +1,4 @@ +@forward "./core/root"; +@forward "reset"; +@forward "base"; +@forward "form"; -- cgit v1.2.3