summaryrefslogtreecommitdiff
path: root/sass/uchu/_reset.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/uchu/_reset.scss')
-rw-r--r--sass/uchu/_reset.scss708
1 files changed, 708 insertions, 0 deletions
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,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.7 9.3L8.1 12.6L13.8 6.9L12.3 5.3L8.1 9.5L6.3 7.7L4.7 9.3Z" fill="black"/></svg>');
+ --outline-svg-url: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1.75" y="1.75" width="14.5" height="14.5" rx="0.5" stroke="black" stroke-width="1.5"/></svg>');
+
+ &::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; }