Css fixes
This commit is contained in:
@@ -38,5 +38,5 @@
|
|||||||
"^.+\\.css$"
|
"^.+\\.css$"
|
||||||
],
|
],
|
||||||
"importOrderParserPlugins": ["typescript", "jsx"],
|
"importOrderParserPlugins": ["typescript", "jsx"],
|
||||||
"importOrderTypeScriptVersion": "5.7.0"
|
"importOrderTypeScriptVersion": "6.0.3"
|
||||||
}
|
}
|
||||||
|
|||||||
21
LICENSE
21
LICENSE
@@ -1,21 +0,0 @@
|
|||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) Thinkmill Labs Pty Ltd
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
@@ -6,7 +6,6 @@ import markdoc from '@astrojs/markdoc'
|
|||||||
import node from '@astrojs/node'
|
import node from '@astrojs/node'
|
||||||
import react from '@astrojs/react'
|
import react from '@astrojs/react'
|
||||||
|
|
||||||
// https://astro.build/config
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'https://dave-dmg.de',
|
site: 'https://dave-dmg.de',
|
||||||
integrations: [react(), markdoc(), keystatic()],
|
integrations: [react(), markdoc(), keystatic()],
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
"name": "dave-dmg",
|
"name": "dave-dmg",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "MIT",
|
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const { title, description } = Astro.props
|
|||||||
<Font cssVariable="--font-julia-mono" preload />
|
<Font cssVariable="--font-julia-mono" preload />
|
||||||
<Font cssVariable="--font-unigrim" />
|
<Font cssVariable="--font-unigrim" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="ui">
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,112 +1,114 @@
|
|||||||
:root {
|
@layer tokens {
|
||||||
/* === PALETTE === */
|
:root {
|
||||||
|
/* === PALETTE === */
|
||||||
|
|
||||||
/* == Ink == */
|
/* == Ink == */
|
||||||
--color-palette-black-ink: oklch(21.9% 0.006 286deg);
|
--color-palette-black-ink: oklch(21.9% 0.006 286deg);
|
||||||
--color-palette-charcoal: oklch(26.6% 0.008 240deg);
|
--color-palette-charcoal: oklch(26.6% 0.008 240deg);
|
||||||
--color-palette-slate: oklch(33.7% 0.019 267deg);
|
--color-palette-slate: oklch(33.7% 0.019 267deg);
|
||||||
--color-palette-graphite: oklch(40% 0.005 89deg);
|
--color-palette-graphite: oklch(40% 0.005 89deg);
|
||||||
|
|
||||||
/* == Stock == */
|
/* == Stock == */
|
||||||
--color-palette-ash: oklch(51% 0.008 85deg);
|
--color-palette-ash: oklch(51% 0.008 85deg);
|
||||||
--color-palette-stone: oklch(64% 0.01 84deg);
|
--color-palette-stone: oklch(64% 0.01 84deg);
|
||||||
--color-palette-sand: oklch(74% 0.01 83deg);
|
--color-palette-sand: oklch(74% 0.01 83deg);
|
||||||
--color-palette-bone: oklch(83% 0.01 82deg);
|
--color-palette-bone: oklch(83% 0.01 82deg);
|
||||||
--color-palette-parchment: oklch(89% 0.009 82deg);
|
--color-palette-parchment: oklch(89% 0.009 82deg);
|
||||||
--color-palette-stock: oklch(94.5% 0.008 83deg);
|
--color-palette-stock: oklch(94.5% 0.008 83deg);
|
||||||
--color-palette-cream: oklch(97% 0.006 84deg);
|
--color-palette-cream: oklch(97% 0.006 84deg);
|
||||||
--color-palette-paper: oklch(98.8% 0.005 85deg);
|
--color-palette-paper: oklch(98.8% 0.005 85deg);
|
||||||
|
|
||||||
/* == Accents == */
|
/* == Accents == */
|
||||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg);
|
--color-palette-lava: oklch(63.6% 0.193 17.075deg);
|
||||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
|
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
|
||||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg);
|
--color-palette-bright-canary: oklch(89% 0.157 97.726deg);
|
||||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg);
|
--color-palette-cerise: oklch(60.7% 0.23 18.554deg);
|
||||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
|
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
|
||||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
|
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
|
||||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
|
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
|
||||||
|
|
||||||
/* === SEMANTICS === */
|
/* === SEMANTICS === */
|
||||||
|
|
||||||
/* == Roles == */
|
/* == Roles == */
|
||||||
--color-primary: var(--color-palette-lava);
|
--color-primary: var(--color-palette-lava);
|
||||||
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
||||||
--color-secondary: var(--color-palette-lime-green);
|
--color-secondary: var(--color-palette-lime-green);
|
||||||
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
|
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
|
||||||
--color-tertiary: var(--color-palette-bright-canary);
|
--color-tertiary: var(--color-palette-bright-canary);
|
||||||
--color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
|
--color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
|
||||||
|
|
||||||
/* == Text == */
|
/* == Text == */
|
||||||
--color-text-primary: var(--color-palette-black-ink);
|
--color-text-primary: var(--color-palette-black-ink);
|
||||||
--color-text-secondary: var(--color-palette-charcoal);
|
--color-text-secondary: var(--color-palette-charcoal);
|
||||||
--color-text-tertiary: var(--color-palette-slate);
|
--color-text-tertiary: var(--color-palette-slate);
|
||||||
--color-text-quarternary: var(--color-palette-graphite);
|
--color-text-quarternary: var(--color-palette-graphite);
|
||||||
--color-text-quiet: var(--color-palette-ash);
|
--color-text-quiet: var(--color-palette-ash);
|
||||||
--color-text-disabled: var(--color-palette-stone);
|
--color-text-disabled: var(--color-palette-stone);
|
||||||
--color-text-inverse: var(--color-palette-paper);
|
--color-text-inverse: var(--color-palette-paper);
|
||||||
|
|
||||||
/* == Surfaces == */
|
/* == Surfaces == */
|
||||||
--color-surface-base: var(--color-palette-stock);
|
--color-surface-base: var(--color-palette-stock);
|
||||||
--color-surface-elevated-1: var(--color-palette-paper);
|
--color-surface-elevated-1: var(--color-palette-paper);
|
||||||
--color-surface-elevated-2: var(--color-palette-cream);
|
--color-surface-elevated-2: var(--color-palette-cream);
|
||||||
--color-surface-elevated-3: var(--color-palette-parchment);
|
--color-surface-elevated-3: var(--color-palette-parchment);
|
||||||
--color-surface-inverse: var(--color-palette-black-ink);
|
--color-surface-inverse: var(--color-palette-black-ink);
|
||||||
--color-surface-selected: var(--color-palette-paper);
|
--color-surface-selected: var(--color-palette-paper);
|
||||||
--color-surface-hover: var(--color-palette-cream);
|
--color-surface-hover: var(--color-palette-cream);
|
||||||
|
|
||||||
/* == Borders == */
|
/* == Borders == */
|
||||||
--color-border-hairline: var(--color-palette-parchment);
|
--color-border-hairline: var(--color-palette-parchment);
|
||||||
--color-border-subtle: var(--color-palette-bone);
|
--color-border-subtle: var(--color-palette-bone);
|
||||||
--color-border-normal: var(--color-palette-sand);
|
--color-border-normal: var(--color-palette-sand);
|
||||||
--color-border-strong: var(--color-palette-black-ink);
|
--color-border-strong: var(--color-palette-black-ink);
|
||||||
|
|
||||||
/* == States == */
|
/* == States == */
|
||||||
--color-state-error: var(--color-palette-cerise);
|
--color-state-error: var(--color-palette-cerise);
|
||||||
--color-state-warning: var(--color-palette-persimmon);
|
--color-state-warning: var(--color-palette-persimmon);
|
||||||
--color-state-success: var(--color-palette-lime-green);
|
--color-state-success: var(--color-palette-lime-green);
|
||||||
--color-state-info: var(--color-palette-royal-blue);
|
--color-state-info: var(--color-palette-royal-blue);
|
||||||
|
|
||||||
/* == Links == */
|
/* == Links == */
|
||||||
--color-text-link: var(--color-primary);
|
--color-text-link: var(--color-primary);
|
||||||
--color-text-link-hover: var(--color-primary-emphasis);
|
--color-text-link-hover: var(--color-primary-emphasis);
|
||||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||||
|
|
||||||
/* == Focus == */
|
/* == Focus == */
|
||||||
--color-focus-ring: var(--color-primary);
|
--color-focus-ring: var(--color-primary);
|
||||||
|
|
||||||
/* == Apparatus == */
|
/* == Apparatus == */
|
||||||
--color-unfilled-block: var(--color-palette-sand);
|
--color-unfilled-block: var(--color-palette-sand);
|
||||||
--color-unfilled-line: var(--color-palette-bone);
|
--color-unfilled-line: var(--color-palette-bone);
|
||||||
--color-plate: var(--color-palette-stone);
|
--color-plate: var(--color-palette-stone);
|
||||||
--color-rule: var(--color-palette-bone);
|
--color-rule: var(--color-palette-bone);
|
||||||
--color-rule-strong: var(--color-palette-black-ink);
|
--color-rule-strong: var(--color-palette-black-ink);
|
||||||
|
|
||||||
/* == Dice & Receipts == */
|
/* == Dice & Receipts == */
|
||||||
--color-dice-surface: var(--color-surface-inverse);
|
--color-dice-surface: var(--color-surface-inverse);
|
||||||
--color-dice-text: var(--color-text-inverse);
|
--color-dice-text: var(--color-text-inverse);
|
||||||
--color-receipt: var(--color-text-quiet);
|
--color-receipt: var(--color-text-quiet);
|
||||||
|
|
||||||
/* == Scale Tier == */
|
/* == Scale Tier == */
|
||||||
--color-tier-active-surface: var(--color-palette-paper);
|
--color-tier-active-surface: var(--color-palette-paper);
|
||||||
--color-tier-active-text: var(--color-text-primary);
|
--color-tier-active-text: var(--color-text-primary);
|
||||||
--color-tier-idle-surface: var(--color-palette-cream);
|
--color-tier-idle-surface: var(--color-palette-cream);
|
||||||
--color-tier-idle-text: var(--color-text-quiet);
|
--color-tier-idle-text: var(--color-text-quiet);
|
||||||
--color-tier-locked-text: var(--color-text-disabled);
|
--color-tier-locked-text: var(--color-text-disabled);
|
||||||
--color-tier-marker: var(--color-primary);
|
--color-tier-marker: var(--color-primary);
|
||||||
|
|
||||||
/* == Overlays == */
|
/* == Overlays == */
|
||||||
--color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
|
--color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
|
||||||
--color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
|
--color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
|
||||||
--color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
|
--color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
|
||||||
|
|
||||||
/* == Shadow == */
|
/* == Shadow == */
|
||||||
--shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
|
--shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
|
||||||
--shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
|
--shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
|
||||||
--shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
|
--shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
|
||||||
--shadow-pressed: 0 0 0 var(--color-palette-black-ink);
|
--shadow-pressed: 0 0 0 var(--color-palette-black-ink);
|
||||||
|
|
||||||
/* == Utility == */
|
/* == Utility == */
|
||||||
--color-highlight: var(--color-tertiary);
|
--color-highlight: var(--color-tertiary);
|
||||||
--color-skeleton-base: var(--color-surface-elevated-2);
|
--color-skeleton-base: var(--color-surface-elevated-2);
|
||||||
--color-skeleton-shimmer: var(--color-surface-elevated-1);
|
--color-skeleton-shimmer: var(--color-surface-elevated-1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
162
src/styles/base/foundation.css
vendored
162
src/styles/base/foundation.css
vendored
@@ -1,12 +1,12 @@
|
|||||||
@layer reset {
|
@layer reset {
|
||||||
/*
|
/*
|
||||||
Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
|
Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
*,
|
*,
|
||||||
::before,
|
::before,
|
||||||
@@ -17,11 +17,11 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Use a consistent sensible line-height in all browsers.
|
1. Use a consistent sensible line-height in all browsers.
|
||||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
3. Use a more readable tab size.
|
3. Use a more readable tab size.
|
||||||
4. Use the system's `sans` font-family by default.
|
4. Use the system's `sans` font-family by default.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family:
|
font-family:
|
||||||
@@ -45,9 +45,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Remove the margin in all browsers.
|
1. Remove the margin in all browsers.
|
||||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0; /* 1 */
|
margin: 0; /* 1 */
|
||||||
@@ -55,10 +55,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Add the correct height in Firefox.
|
1. Add the correct height in Firefox.
|
||||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||||
3. Ensure horizontal rules are visible by default.
|
3. Ensure horizontal rules are visible by default.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: 0; /* 1 */
|
height: 0; /* 1 */
|
||||||
@@ -67,16 +67,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
abbr:where([title]) {
|
abbr:where([title]) {
|
||||||
text-decoration: underline dotted;
|
text-decoration: underline dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Remove the default font size and weight for headings.
|
Remove the default font size and weight for headings.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
@@ -89,8 +89,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Reset links to optimize for opt-in styling instead of opt-out.
|
Reset links to optimize for opt-in styling instead of opt-out.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -98,8 +98,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add the correct font weight in Edge and Safari.
|
Add the correct font weight in Edge and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
@@ -107,9 +107,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Use the system's `mono` font family by default.
|
1. Use the system's `mono` font family by default.
|
||||||
2. Correct the odd `em` font sizing in all browsers.
|
2. Correct the odd `em` font sizing in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
@@ -122,16 +122,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add the correct font size in all browsers.
|
Add the correct font size in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
@@ -150,10 +150,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||||
3. Remove gaps between table borders by default.
|
3. Remove gaps between table borders by default.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse; /* 3 */
|
border-collapse: collapse; /* 3 */
|
||||||
@@ -162,10 +162,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Change the font styles in all browsers.
|
1. Change the font styles in all browsers.
|
||||||
2. Remove the margin in Firefox and Safari.
|
2. Remove the margin in Firefox and Safari.
|
||||||
3. Remove default padding in all browsers.
|
3. Remove default padding in all browsers.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
@@ -183,8 +183,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Remove the inheritance of text transform in Edge and Firefox.
|
Remove the inheritance of text transform in Edge and Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
@@ -192,9 +192,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
2. Remove default button styles.
|
2. Remove default button styles.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type="button"],
|
||||||
@@ -206,32 +206,32 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Use the modern Firefox focus style for all focusable elements.
|
Use the modern Firefox focus style for all focusable elements.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:-moz-focusring {
|
:-moz-focusring {
|
||||||
outline: auto;
|
outline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:-moz-ui-invalid {
|
:-moz-ui-invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add the correct vertical alignment in Chrome and Firefox.
|
Add the correct vertical alignment in Chrome and Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Correct the cursor style of increment and decrement buttons in Safari.
|
Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-inner-spin-button,
|
::-webkit-inner-spin-button,
|
||||||
::-webkit-outer-spin-button {
|
::-webkit-outer-spin-button {
|
||||||
@@ -239,9 +239,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Correct the odd appearance in Chrome and Safari.
|
1. Correct the odd appearance in Chrome and Safari.
|
||||||
2. Correct the outline style in Safari.
|
2. Correct the outline style in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
appearance: textfield; /* 1 */
|
appearance: textfield; /* 1 */
|
||||||
@@ -249,17 +249,17 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Remove the inner padding in Chrome and Safari on macOS.
|
Remove the inner padding in Chrome and Safari on macOS.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
::-webkit-search-decoration {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Correct the inability to style clickable types in iOS and Safari.
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
2. Change font properties to `inherit` in Safari.
|
2. Change font properties to `inherit` in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
font: inherit; /* 2 */
|
font: inherit; /* 2 */
|
||||||
@@ -267,16 +267,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add the correct display in Chrome and Safari.
|
Add the correct display in Chrome and Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Removes the default spacing and border for appropriate elements.
|
Removes the default spacing and border for appropriate elements.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
@@ -312,16 +312,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Prevent resizing textareas horizontally by default.
|
Prevent resizing textareas horizontally by default.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
textarea::placeholder {
|
textarea::placeholder {
|
||||||
@@ -329,8 +329,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Set the default cursor for buttons.
|
Set the default cursor for buttons.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
@@ -338,18 +338,18 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Make sure disabled buttons don't get the pointer cursor.
|
Make sure disabled buttons don't get the pointer cursor.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:disabled {
|
:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
img,
|
img,
|
||||||
svg,
|
svg,
|
||||||
@@ -364,8 +364,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
img,
|
img,
|
||||||
video {
|
video {
|
||||||
@@ -374,8 +374,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Make elements with the HTML hidden attribute stay hidden by default.
|
Make elements with the HTML hidden attribute stay hidden by default.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -1,200 +1,202 @@
|
|||||||
.ui {
|
@layer tokens {
|
||||||
/* == Font sizes == */
|
.ui {
|
||||||
--type--3: 0.625rem; /* 10px */
|
/* == Font sizes == */
|
||||||
--type--2: 0.6875rem; /* 11px */
|
--type--3: 0.625rem; /* 10px */
|
||||||
--type--1: 0.75rem; /* 12px */
|
--type--2: 0.6875rem; /* 11px */
|
||||||
--type-0: 0.875rem; /* 14px — base */
|
--type--1: 0.75rem; /* 12px */
|
||||||
--type-1: 1rem; /* 16px */
|
--type-0: 0.875rem; /* 14px — base */
|
||||||
--type-2: 1.125rem; /* 18px */
|
--type-1: 1rem; /* 16px */
|
||||||
--type-3: 1.25rem; /* 20px */
|
--type-2: 1.125rem; /* 18px */
|
||||||
--type-4: 1.375rem; /* 22px */
|
--type-3: 1.25rem; /* 20px */
|
||||||
--type-5: 1.5625rem; /* 25px */
|
--type-4: 1.375rem; /* 22px */
|
||||||
--type-6: 1.75rem; /* 28px */
|
--type-5: 1.5625rem; /* 25px */
|
||||||
--type-7: 1.9375rem; /* 31px */
|
--type-6: 1.75rem; /* 28px */
|
||||||
--type-8: 2.1875rem; /* 35px */
|
--type-7: 1.9375rem; /* 31px */
|
||||||
--type-9: 2.5rem; /* 40px */
|
--type-8: 2.1875rem; /* 35px */
|
||||||
--type-10: 2.75rem; /* 44px */
|
--type-9: 2.5rem; /* 40px */
|
||||||
|
--type-10: 2.75rem; /* 44px */
|
||||||
|
|
||||||
/* == Line heights == */
|
/* == Line heights == */
|
||||||
--leading--3: 1.6;
|
--leading--3: 1.6;
|
||||||
--leading--2: 1.4545;
|
--leading--2: 1.4545;
|
||||||
--leading--1: 1.6667;
|
--leading--1: 1.6667;
|
||||||
--leading-0: 1.4286;
|
--leading-0: 1.4286;
|
||||||
--leading-1: 1.5;
|
--leading-1: 1.5;
|
||||||
--leading-2: 1.3333;
|
--leading-2: 1.3333;
|
||||||
--leading-3: 1.4;
|
--leading-3: 1.4;
|
||||||
--leading-4: 1.2727;
|
--leading-4: 1.2727;
|
||||||
--leading-5: 1.28;
|
--leading-5: 1.28;
|
||||||
--leading-6: 1.2857;
|
--leading-6: 1.2857;
|
||||||
--leading-7: 1.1613;
|
--leading-7: 1.1613;
|
||||||
--leading-8: 1.1429;
|
--leading-8: 1.1429;
|
||||||
--leading-9: 1.2;
|
--leading-9: 1.2;
|
||||||
--leading-10: 1.1818;
|
--leading-10: 1.1818;
|
||||||
|
|
||||||
/* == Letter spacing == */
|
/* == Letter spacing == */
|
||||||
--tracking--3: 0.012em;
|
--tracking--3: 0.012em;
|
||||||
--tracking--2: 0.0082em;
|
--tracking--2: 0.0082em;
|
||||||
--tracking--1: 0.005em;
|
--tracking--1: 0.005em;
|
||||||
--tracking-0: 0em;
|
--tracking-0: 0em;
|
||||||
--tracking-1: -0.0037em;
|
--tracking-1: -0.0037em;
|
||||||
--tracking-2: -0.0067em;
|
--tracking-2: -0.0067em;
|
||||||
--tracking-3: -0.009em;
|
--tracking-3: -0.009em;
|
||||||
--tracking-4: -0.0109em;
|
--tracking-4: -0.0109em;
|
||||||
--tracking-5: -0.0132em;
|
--tracking-5: -0.0132em;
|
||||||
--tracking-6: -0.015em;
|
--tracking-6: -0.015em;
|
||||||
--tracking-7: -0.0165em;
|
--tracking-7: -0.0165em;
|
||||||
--tracking-8: -0.018em;
|
--tracking-8: -0.018em;
|
||||||
--tracking-9: -0.0195em;
|
--tracking-9: -0.0195em;
|
||||||
--tracking-10: -0.0205em;
|
--tracking-10: -0.0205em;
|
||||||
|
|
||||||
/* == Prose leading == */
|
/* == Prose leading == */
|
||||||
--leading-prose: 1.7;
|
--leading-prose: 1.7;
|
||||||
--leading-prose-tight: 1.6;
|
--leading-prose-tight: 1.6;
|
||||||
|
|
||||||
/* == Chrome tracking == */
|
/* == Chrome tracking == */
|
||||||
--tracking-label: 0.14em; /* step labels, buttons */
|
--tracking-label: 0.14em; /* step labels, buttons */
|
||||||
--tracking-tag: 0.12em; /* tags */
|
--tracking-tag: 0.12em; /* tags */
|
||||||
--tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
|
--tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
|
||||||
--tracking-plate: 0.08em; /* plate numbers */
|
--tracking-plate: 0.08em; /* plate numbers */
|
||||||
--tracking-display: 0.01em; /* Blaka h1 */
|
--tracking-display: 0.01em; /* Blaka h1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
/* == Font sizes == */
|
/* == Font sizes == */
|
||||||
--type--3: 0.625em;
|
--type--3: 0.625em;
|
||||||
--type--2: 0.6875em;
|
--type--2: 0.6875em;
|
||||||
--type--1: 0.8125em;
|
--type--1: 0.8125em;
|
||||||
--type-0: 1em; /* 16px — base */
|
--type-0: 1em; /* 16px — base */
|
||||||
--type-1: 1.1875em;
|
--type-1: 1.1875em;
|
||||||
--type-2: 1.4375em;
|
--type-2: 1.4375em;
|
||||||
--type-3: 1.6875em;
|
--type-3: 1.6875em;
|
||||||
--type-4: 2em;
|
--type-4: 2em;
|
||||||
--type-5: 2.375em;
|
--type-5: 2.375em;
|
||||||
--type-6: 2.8125em;
|
--type-6: 2.8125em;
|
||||||
--type-7: 3.375em;
|
--type-7: 3.375em;
|
||||||
--type-8: 4em;
|
--type-8: 4em;
|
||||||
--type-9: 4.75em;
|
--type-9: 4.75em;
|
||||||
--type-10: 5.6875em;
|
--type-10: 5.6875em;
|
||||||
|
|
||||||
/* == Line heights == */
|
/* == Line heights == */
|
||||||
--leading--3: 2;
|
--leading--3: 2;
|
||||||
--leading--2: 1.8182;
|
--leading--2: 1.8182;
|
||||||
--leading--1: 1.5385;
|
--leading--1: 1.5385;
|
||||||
--leading-0: 1.5;
|
--leading-0: 1.5;
|
||||||
--leading-1: 1.4737;
|
--leading-1: 1.4737;
|
||||||
--leading-2: 1.3912;
|
--leading-2: 1.3912;
|
||||||
--leading-3: 1.3333;
|
--leading-3: 1.3333;
|
||||||
--leading-4: 1.25;
|
--leading-4: 1.25;
|
||||||
--leading-5: 1.2632;
|
--leading-5: 1.2632;
|
||||||
--leading-6: 1.1556;
|
--leading-6: 1.1556;
|
||||||
--leading-7: 1.1852;
|
--leading-7: 1.1852;
|
||||||
--leading-8: 1.125;
|
--leading-8: 1.125;
|
||||||
--leading-9: 1.1053;
|
--leading-9: 1.1053;
|
||||||
--leading-10: 1.0989;
|
--leading-10: 1.0989;
|
||||||
|
|
||||||
/* == Letter spacing == */
|
/* == Letter spacing == */
|
||||||
--tracking--3: 0.018em;
|
--tracking--3: 0.018em;
|
||||||
--tracking--2: 0.0136em;
|
--tracking--2: 0.0136em;
|
||||||
--tracking--1: 0.0069em;
|
--tracking--1: 0.0069em;
|
||||||
--tracking-0: 0em;
|
--tracking-0: 0em;
|
||||||
--tracking-1: -0.0047em;
|
--tracking-1: -0.0047em;
|
||||||
--tracking-2: -0.0091em;
|
--tracking-2: -0.0091em;
|
||||||
--tracking-3: -0.0122em;
|
--tracking-3: -0.0122em;
|
||||||
--tracking-4: -0.015em;
|
--tracking-4: -0.015em;
|
||||||
--tracking-5: -0.0174em;
|
--tracking-5: -0.0174em;
|
||||||
--tracking-6: -0.0193em;
|
--tracking-6: -0.0193em;
|
||||||
--tracking-7: -0.0211em;
|
--tracking-7: -0.0211em;
|
||||||
--tracking-8: -0.0225em;
|
--tracking-8: -0.0225em;
|
||||||
--tracking-9: -0.0237em;
|
--tracking-9: -0.0237em;
|
||||||
--tracking-10: -0.0247em;
|
--tracking-10: -0.0247em;
|
||||||
--leading-prose: 1.6;
|
--leading-prose: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* === FONT FAMILIES == */
|
/* === FONT FAMILIES == */
|
||||||
--font-display: var(--font-blaka), serif;
|
--font-display: var(--font-blaka), serif;
|
||||||
--font-header: var(--font-geist), sans-serif;
|
--font-header: var(--font-geist), sans-serif;
|
||||||
--font-body: var(--font-julia-mono), monospace;
|
--font-body: var(--font-julia-mono), monospace;
|
||||||
--font-mono: var(--font-geist-mono), monospace;
|
--font-mono: var(--font-geist-mono), monospace;
|
||||||
--font-symbols: var(--font-unigrim), monospace;
|
--font-symbols: var(--font-unigrim), monospace;
|
||||||
--font-weight-display: 400;
|
--font-weight-display: 400;
|
||||||
--font-weight-body: 400;
|
--font-weight-body: 400;
|
||||||
--font-weight-emphasis: 700;
|
--font-weight-emphasis: 700;
|
||||||
--font-weight-label: 600;
|
--font-weight-label: 600;
|
||||||
--font-weight-heading: 800;
|
--font-weight-heading: 800;
|
||||||
|
|
||||||
/* === SIZE === */
|
/* === SIZE === */
|
||||||
--size-0: 0;
|
--size-0: 0;
|
||||||
--size-px: 0.0625rem; /* 1px */
|
--size-px: 0.0625rem; /* 1px */
|
||||||
--size-1: 0.125rem; /* 2px */
|
--size-1: 0.125rem; /* 2px */
|
||||||
--size-2: 0.25rem; /* 4px */
|
--size-2: 0.25rem; /* 4px */
|
||||||
--size-3: 0.375rem; /* 6px */
|
--size-3: 0.375rem; /* 6px */
|
||||||
--size-4: 0.5rem; /* 8px */
|
--size-4: 0.5rem; /* 8px */
|
||||||
--size-5: 0.625rem; /* 10px */
|
--size-5: 0.625rem; /* 10px */
|
||||||
--size-6: 0.75rem; /* 12px */
|
--size-6: 0.75rem; /* 12px */
|
||||||
--size-7: 0.875rem; /* 14px */
|
--size-7: 0.875rem; /* 14px */
|
||||||
--size-8: 1rem; /* 16px */
|
--size-8: 1rem; /* 16px */
|
||||||
--size-9: 1.25rem; /* 20px */
|
--size-9: 1.25rem; /* 20px */
|
||||||
--size-10: 1.5rem; /* 24px */
|
--size-10: 1.5rem; /* 24px */
|
||||||
--size-11: 2rem;
|
--size-11: 2rem;
|
||||||
--size-12: 2.5rem;
|
--size-12: 2.5rem;
|
||||||
--size-13: 3rem;
|
--size-13: 3rem;
|
||||||
--size-14: 4rem;
|
--size-14: 4rem;
|
||||||
--size-15: 5rem;
|
--size-15: 5rem;
|
||||||
--size-16: 6rem;
|
--size-16: 6rem;
|
||||||
|
|
||||||
/* === SPACING === */
|
/* === SPACING === */
|
||||||
--space-0: 0;
|
--space-0: 0;
|
||||||
--space-px: 0.0625em;
|
--space-px: 0.0625em;
|
||||||
--space-1: 0.125em;
|
--space-1: 0.125em;
|
||||||
--space-2: 0.25em;
|
--space-2: 0.25em;
|
||||||
--space-3: 0.375em;
|
--space-3: 0.375em;
|
||||||
--space-4: 0.5em;
|
--space-4: 0.5em;
|
||||||
--space-5: 0.625em;
|
--space-5: 0.625em;
|
||||||
--space-6: 0.75em;
|
--space-6: 0.75em;
|
||||||
--space-7: 0.875em;
|
--space-7: 0.875em;
|
||||||
--space-8: 1em;
|
--space-8: 1em;
|
||||||
--space-9: 1.25em;
|
--space-9: 1.25em;
|
||||||
--space-10: 1.5em;
|
--space-10: 1.5em;
|
||||||
--space-11: 2em;
|
--space-11: 2em;
|
||||||
--space-12: 2.5em;
|
--space-12: 2.5em;
|
||||||
--space-13: 3em;
|
--space-13: 3em;
|
||||||
--space-14: 4em;
|
--space-14: 4em;
|
||||||
--space-15: 5em;
|
--space-15: 5em;
|
||||||
--space-16: 6em;
|
--space-16: 6em;
|
||||||
|
|
||||||
/* === BORDER === */
|
/* === BORDER === */
|
||||||
--border-hairline: var(--size-px); /* 1px — inside a card */
|
--border-hairline: var(--size-px); /* 1px — inside a card */
|
||||||
--border-card: var(--size-1); /* 2px — the card edge */
|
--border-card: var(--size-1); /* 2px — the card edge */
|
||||||
--border-shell: var(--size-3); /* 6px?? no: see below */
|
--border-shell: var(--size-3); /* 6px?? no: see below */
|
||||||
--border-boundary: 0.1875rem; /* 3px — section / shell boundary */
|
--border-boundary: 0.1875rem; /* 3px — section / shell boundary */
|
||||||
--border-marker: var(--size-1); /* 2px — the tier row active marker */
|
--border-marker: var(--size-1); /* 2px — the tier row active marker */
|
||||||
--radius: 0; /* always. */
|
--radius: 0; /* always. */
|
||||||
|
|
||||||
/* === FIXED SLOTS === */
|
/* === FIXED SLOTS === */
|
||||||
--slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
|
--slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
|
||||||
--slot-plate: 2.25rem; /* plate number column */
|
--slot-plate: 2.25rem; /* plate number column */
|
||||||
--slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
|
--slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
|
||||||
--slot-marker: var(--size-5); /* footnote marker column */
|
--slot-marker: var(--size-5); /* footnote marker column */
|
||||||
--slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
|
--slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
|
||||||
|
|
||||||
/* ═══ MOTION ═══ */
|
/* ═══ MOTION ═══ */
|
||||||
--motion-fast: 150ms; /* state change: hover, focus, press */
|
--motion-fast: 150ms; /* state change: hover, focus, press */
|
||||||
--motion-normal: 300ms; /* reveals: chooser open, tier switch */
|
--motion-normal: 300ms; /* reveals: chooser open, tier switch */
|
||||||
--motion-slow: 500ms;
|
--motion-slow: 500ms;
|
||||||
--motion-instant: 0ms; /* roll results. Use this deliberately. */
|
--motion-instant: 0ms; /* roll results. Use this deliberately. */
|
||||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||||
|
|
||||||
/* ═══ LAYOUT ═══ */
|
/* ═══ LAYOUT ═══ */
|
||||||
--layout-max-width: 74rem; /* the tool shell */
|
--layout-max-width: 74rem; /* the tool shell */
|
||||||
--layout-content-width: minmax(0, 78ch); /* article measure */
|
--layout-content-width: minmax(0, 78ch); /* article measure */
|
||||||
--layout-margin-width: minmax(10ch, 1fr);
|
--layout-margin-width: minmax(10ch, 1fr);
|
||||||
--layout-step-columns: 2;
|
--layout-step-columns: 2;
|
||||||
--layout-gutter: var(--size-6); /* between step cards */
|
--layout-gutter: var(--size-6); /* between step cards */
|
||||||
--layout-section-gap: var(--size-9); /* header to grid */
|
--layout-section-gap: var(--size-9); /* header to grid */
|
||||||
--layout-page-margin: var(--size-10);
|
--layout-page-margin: var(--size-10);
|
||||||
--layout-tier-height: 2.25rem;
|
--layout-tier-height: 2.25rem;
|
||||||
--layout-header-height: 3.125rem;
|
--layout-header-height: 3.125rem;
|
||||||
--layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
|
--layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
@layer reset, base, components, utilities;
|
@layer reset, tokens, base, components, utilities;
|
||||||
|
|
||||||
@import url("base/custom-media.css");
|
|
||||||
@import url("base/foundation.css");
|
@import url("base/foundation.css");
|
||||||
@import url("base/colors.css");
|
@import url("base/colors.css");
|
||||||
@import url("base/primitives.css");
|
@import url("base/primitives.css");
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"jsxImportSource": "react",
|
"jsxImportSource": "react",
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"],
|
"@/*": ["./src/*"],
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user