@refrakt-md/lumina 0.14.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/presets/nord.d.ts +46 -0
- package/dist/presets/nord.d.ts.map +1 -0
- package/dist/presets/nord.js +127 -0
- package/dist/presets/nord.js.map +1 -0
- package/package.json +8 -4
- package/styles/elements/table.css +4 -0
- package/styles/global.css +9 -0
- package/styles/runes/compare.css +9 -0
- package/styles/runes/cta.css +14 -0
- package/styles/runes/diff.css +40 -31
- package/styles/runes/hero.css +24 -0
- package/styles/runes/nav.css +17 -3
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { ThemeTokensConfig } from '@refrakt-md/types';
|
|
2
|
+
/**
|
|
3
|
+
* Nord — an *integrated* palette preset (canvas + chrome + foreground).
|
|
4
|
+
*
|
|
5
|
+
* Where niwaki took the scoped "foreground only" position deliberately,
|
|
6
|
+
* Nord takes the integrated position because that's how Nord was designed:
|
|
7
|
+
* its 16 hues were tuned together against the Polar Night / Snow Storm
|
|
8
|
+
* canvas families. Rendering Nord's foreground on a warm or neutral
|
|
9
|
+
* canvas misrepresents the palette's intent.
|
|
10
|
+
*
|
|
11
|
+
* Nord therefore claims chrome (`color.bg`, `color.surface.base`,
|
|
12
|
+
* `color.text`, `color.muted`, `color.border`, `color.primary`) and
|
|
13
|
+
* code-surface (`color.code.*`) tokens alongside `syntax.*`. When Nord
|
|
14
|
+
* is the active preset, the whole page renders in Polar Night / Snow
|
|
15
|
+
* Storm. When Nord is used as a scoped tint (via
|
|
16
|
+
* `theme.tints[].extends`), every Nord-tinted subtree renders against
|
|
17
|
+
* Nord's canvas without affecting surrounding content. The scope-
|
|
18
|
+
* eligibility filter in `generateScopedTintStylesheet` enforces the
|
|
19
|
+
* boundary — typography, spacing, radius, shadow, and status sentiments
|
|
20
|
+
* stay with whatever chrome is active, even when Nord is tinting.
|
|
21
|
+
*
|
|
22
|
+
* Composes:
|
|
23
|
+
* - `presets: ["nord"]` → Nord syntax on Nord canvas, neutral chrome elsewhere
|
|
24
|
+
* - `presets: ["tideline", "nord"]` → tideline chrome with Nord code surface
|
|
25
|
+
* - Used as a tint via `tints: { nord: { extends: ".../presets/nord" } }`
|
|
26
|
+
* (WORK-223 unlocks this) to showcase Nord on a site whose active
|
|
27
|
+
* preset is something else.
|
|
28
|
+
*
|
|
29
|
+
* Derived from the Nord palette by Arctic Ice Studio & Sven Greb,
|
|
30
|
+
* MIT licensed. https://www.nordtheme.com/
|
|
31
|
+
*
|
|
32
|
+
* The Nord palette is structured as four named groups:
|
|
33
|
+
* - Polar Night (nord0–3): the dark canvas and its near-canvas elevation
|
|
34
|
+
* - Snow Storm (nord4–6): the light/text family and the light canvas
|
|
35
|
+
* - Frost (nord7–10): cool blue accents — types, functions, keywords
|
|
36
|
+
* - Aurora (nord11–15): warm accents — red, orange, yellow, green, purple
|
|
37
|
+
*
|
|
38
|
+
* Role assignments below follow Nord's own syntax-highlighting reference.
|
|
39
|
+
* Where SPEC-056's extended roles (`type`, `tag`, `attribute`, ...) let
|
|
40
|
+
* Nord's intended hue splits land on distinct refrakt roles, we set them
|
|
41
|
+
* explicitly; where Nord collapses two roles to the same hue, we leave
|
|
42
|
+
* the optional role unset and let the fallback chain carry the value.
|
|
43
|
+
*/
|
|
44
|
+
declare const nord: ThemeTokensConfig;
|
|
45
|
+
export default nord;
|
|
46
|
+
//# sourceMappingURL=nord.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nord.d.ts","sourceRoot":"","sources":["../../src/presets/nord.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,IAAI,EAAE,iBAqFX,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Nord — an *integrated* palette preset (canvas + chrome + foreground).
|
|
3
|
+
*
|
|
4
|
+
* Where niwaki took the scoped "foreground only" position deliberately,
|
|
5
|
+
* Nord takes the integrated position because that's how Nord was designed:
|
|
6
|
+
* its 16 hues were tuned together against the Polar Night / Snow Storm
|
|
7
|
+
* canvas families. Rendering Nord's foreground on a warm or neutral
|
|
8
|
+
* canvas misrepresents the palette's intent.
|
|
9
|
+
*
|
|
10
|
+
* Nord therefore claims chrome (`color.bg`, `color.surface.base`,
|
|
11
|
+
* `color.text`, `color.muted`, `color.border`, `color.primary`) and
|
|
12
|
+
* code-surface (`color.code.*`) tokens alongside `syntax.*`. When Nord
|
|
13
|
+
* is the active preset, the whole page renders in Polar Night / Snow
|
|
14
|
+
* Storm. When Nord is used as a scoped tint (via
|
|
15
|
+
* `theme.tints[].extends`), every Nord-tinted subtree renders against
|
|
16
|
+
* Nord's canvas without affecting surrounding content. The scope-
|
|
17
|
+
* eligibility filter in `generateScopedTintStylesheet` enforces the
|
|
18
|
+
* boundary — typography, spacing, radius, shadow, and status sentiments
|
|
19
|
+
* stay with whatever chrome is active, even when Nord is tinting.
|
|
20
|
+
*
|
|
21
|
+
* Composes:
|
|
22
|
+
* - `presets: ["nord"]` → Nord syntax on Nord canvas, neutral chrome elsewhere
|
|
23
|
+
* - `presets: ["tideline", "nord"]` → tideline chrome with Nord code surface
|
|
24
|
+
* - Used as a tint via `tints: { nord: { extends: ".../presets/nord" } }`
|
|
25
|
+
* (WORK-223 unlocks this) to showcase Nord on a site whose active
|
|
26
|
+
* preset is something else.
|
|
27
|
+
*
|
|
28
|
+
* Derived from the Nord palette by Arctic Ice Studio & Sven Greb,
|
|
29
|
+
* MIT licensed. https://www.nordtheme.com/
|
|
30
|
+
*
|
|
31
|
+
* The Nord palette is structured as four named groups:
|
|
32
|
+
* - Polar Night (nord0–3): the dark canvas and its near-canvas elevation
|
|
33
|
+
* - Snow Storm (nord4–6): the light/text family and the light canvas
|
|
34
|
+
* - Frost (nord7–10): cool blue accents — types, functions, keywords
|
|
35
|
+
* - Aurora (nord11–15): warm accents — red, orange, yellow, green, purple
|
|
36
|
+
*
|
|
37
|
+
* Role assignments below follow Nord's own syntax-highlighting reference.
|
|
38
|
+
* Where SPEC-056's extended roles (`type`, `tag`, `attribute`, ...) let
|
|
39
|
+
* Nord's intended hue splits land on distinct refrakt roles, we set them
|
|
40
|
+
* explicitly; where Nord collapses two roles to the same hue, we leave
|
|
41
|
+
* the optional role unset and let the fallback chain carry the value.
|
|
42
|
+
*/
|
|
43
|
+
const nord = {
|
|
44
|
+
// Light mode — Snow Storm canvas with Polar Night foreground. Nord is
|
|
45
|
+
// dark-canonical; the light variant is a swap of the canvas/text axis
|
|
46
|
+
// while keeping the same Frost + Aurora accents at slightly darker
|
|
47
|
+
// values for contrast on the lighter background.
|
|
48
|
+
color: {
|
|
49
|
+
bg: '#eceff4', // Snow Storm nord6 — canonical light canvas
|
|
50
|
+
text: '#2e3440', // Polar Night nord0 — text on light canvas
|
|
51
|
+
muted: '#4c566a', // Polar Night nord3
|
|
52
|
+
border: '#d8dee9', // Snow Storm nord4 — between bg and elevated
|
|
53
|
+
primary: '#5e81ac', // Frost nord10 — Nord's interactive accent
|
|
54
|
+
'primary-hover': '#81a1c1', // Frost nord9 — lighter on hover
|
|
55
|
+
surface: {
|
|
56
|
+
base: '#e5e9f0', // Snow Storm nord5 — slightly elevated card surface
|
|
57
|
+
hover: '#d8dee9', // Snow Storm nord4
|
|
58
|
+
active: '#d8dee9',
|
|
59
|
+
raised: '#eceff4',
|
|
60
|
+
},
|
|
61
|
+
code: {
|
|
62
|
+
bg: '#eceff4', // Snow Storm nord6 — same as page canvas
|
|
63
|
+
text: '#2e3440', // Polar Night nord0
|
|
64
|
+
'inline-bg': '#e5e9f0', // Snow Storm nord5 — slight elevation for inline code
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
syntax: {
|
|
68
|
+
keyword: '#5e81ac', // Frost nord10 — slightly darker for light contrast
|
|
69
|
+
function: '#88c0d0', // Frost nord8
|
|
70
|
+
type: '#8fbcbb', // Frost nord7 — distinct from function (the SPEC-056 motivating split)
|
|
71
|
+
string: '#a3be8c', // Aurora nord14
|
|
72
|
+
constant: '#b48ead', // Aurora nord15 — purple for booleans/null/symbols
|
|
73
|
+
comment: '#4c566a', // Polar Night nord3 — muted on light canvas
|
|
74
|
+
punctuation: '#4c566a', // Polar Night nord3
|
|
75
|
+
variable: '#2e3440', // Polar Night nord0 — body text on light
|
|
76
|
+
// Extended roles where Nord's spec has a distinct intent
|
|
77
|
+
number: '#d08770', // Aurora nord12 — orange, separating numbers from string-constants
|
|
78
|
+
regex: '#ebcb8b', // Aurora nord13 — yellow regex hue
|
|
79
|
+
tag: '#5e81ac', // Frost nord10 — Nord renders HTML tags as deep Frost
|
|
80
|
+
attribute: '#8fbcbb', // Frost nord7 — Nord aligns attribute names with type-family
|
|
81
|
+
operator: '#81a1c1', // Frost nord9 — Nord splits operators from punctuation, painting them as keyword-family
|
|
82
|
+
// `parameter` and `property` and `link`, `string-expression` left unset:
|
|
83
|
+
// Nord doesn't separately spec them, so they cascade via the fallback
|
|
84
|
+
// chain (parameter→variable, property→variable, link→function,
|
|
85
|
+
// string-expression→string).
|
|
86
|
+
},
|
|
87
|
+
modes: {
|
|
88
|
+
dark: {
|
|
89
|
+
color: {
|
|
90
|
+
bg: '#2e3440', // Polar Night nord0 — canonical dark canvas
|
|
91
|
+
text: '#d8dee9', // Snow Storm nord4
|
|
92
|
+
muted: '#616e88', // between Polar Night nord3 and Snow Storm nord4
|
|
93
|
+
border: '#3b4252', // Polar Night nord1 — subtle separator
|
|
94
|
+
primary: '#88c0d0', // Frost nord8 — brighter on dark
|
|
95
|
+
'primary-hover': '#8fbcbb', // Frost nord7
|
|
96
|
+
surface: {
|
|
97
|
+
base: '#3b4252', // Polar Night nord1 — elevated card on dark
|
|
98
|
+
hover: '#434c5e', // Polar Night nord2
|
|
99
|
+
active: '#4c566a', // Polar Night nord3
|
|
100
|
+
raised: '#434c5e',
|
|
101
|
+
},
|
|
102
|
+
code: {
|
|
103
|
+
bg: '#2e3440', // Polar Night nord0 — canonical dark canvas
|
|
104
|
+
text: '#d8dee9', // Snow Storm nord4
|
|
105
|
+
'inline-bg': '#3b4252', // Polar Night nord1 — slightly elevated
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
syntax: {
|
|
109
|
+
keyword: '#81a1c1', // Frost nord9
|
|
110
|
+
function: '#88c0d0', // Frost nord8
|
|
111
|
+
type: '#8fbcbb', // Frost nord7
|
|
112
|
+
string: '#a3be8c', // Aurora nord14
|
|
113
|
+
constant: '#b48ead', // Aurora nord15
|
|
114
|
+
comment: '#616e88', // between nord3 and nord4 — Nord-spec'd comment on dark
|
|
115
|
+
punctuation: '#d8dee9', // Snow Storm nord4 — Nord's punctuation reads as default text
|
|
116
|
+
variable: '#d8dee9', // Snow Storm nord4
|
|
117
|
+
number: '#b48ead', // Aurora nord15 in dark; some Nord impls use nord12 — picking nord15 for harmony with constant
|
|
118
|
+
regex: '#ebcb8b', // Aurora nord13
|
|
119
|
+
tag: '#81a1c1', // Frost nord9 in dark
|
|
120
|
+
attribute: '#8fbcbb', // Frost nord7
|
|
121
|
+
operator: '#81a1c1', // Frost nord9
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
export default nord;
|
|
127
|
+
//# sourceMappingURL=nord.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nord.js","sourceRoot":"","sources":["../../src/presets/nord.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@refrakt-md/lumina",
|
|
3
3
|
"description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
|
|
4
|
-
"version": "0.14.
|
|
4
|
+
"version": "0.14.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -35,6 +35,10 @@
|
|
|
35
35
|
"types": "./dist/presets/niwaki.d.ts",
|
|
36
36
|
"default": "./dist/presets/niwaki.js"
|
|
37
37
|
},
|
|
38
|
+
"./presets/nord": {
|
|
39
|
+
"types": "./dist/presets/nord.d.ts",
|
|
40
|
+
"default": "./dist/presets/nord.js"
|
|
41
|
+
},
|
|
38
42
|
"./styles/runes/*.css": "./styles/runes/*.css",
|
|
39
43
|
"./assets/logo/prism.svg": "./assets/logo/prism.svg",
|
|
40
44
|
"./assets/*": "./assets/*"
|
|
@@ -55,9 +59,9 @@
|
|
|
55
59
|
"build": "tsc"
|
|
56
60
|
},
|
|
57
61
|
"dependencies": {
|
|
58
|
-
"@refrakt-md/runes": "0.14.
|
|
59
|
-
"@refrakt-md/transform": "0.14.
|
|
60
|
-
"@refrakt-md/types": "0.14.
|
|
62
|
+
"@refrakt-md/runes": "0.14.1",
|
|
63
|
+
"@refrakt-md/transform": "0.14.1",
|
|
64
|
+
"@refrakt-md/types": "0.14.1"
|
|
61
65
|
},
|
|
62
66
|
"devDependencies": {
|
|
63
67
|
"postcss": "^8.4.0"
|
package/styles/global.css
CHANGED
|
@@ -12,7 +12,16 @@ html {
|
|
|
12
12
|
line-height: 1.7;
|
|
13
13
|
-webkit-font-smoothing: antialiased;
|
|
14
14
|
-moz-osx-font-smoothing: grayscale;
|
|
15
|
+
-webkit-text-size-adjust: 100%;
|
|
16
|
+
text-size-adjust: 100%;
|
|
15
17
|
transition: background-color 200ms ease, color 200ms ease;
|
|
18
|
+
/* Opt out of mobile Safari's "text inflation" — it auto-scales text
|
|
19
|
+
* inside elements wider than the viewport (e.g. the diff's
|
|
20
|
+
* `min-width: 40rem` split panels and any horizontally-scrolling
|
|
21
|
+
* code block) and makes their fonts read several pixels larger
|
|
22
|
+
* than designed. */
|
|
23
|
+
-webkit-text-size-adjust: 100%;
|
|
24
|
+
text-size-adjust: 100%;
|
|
16
25
|
}
|
|
17
26
|
|
|
18
27
|
body {
|
package/styles/runes/compare.css
CHANGED
|
@@ -4,6 +4,15 @@
|
|
|
4
4
|
border-radius: var(--rf-radius-md);
|
|
5
5
|
overflow: hidden;
|
|
6
6
|
}
|
|
7
|
+
.rf-compare__header {
|
|
8
|
+
padding: 0.5rem 1rem;
|
|
9
|
+
font-family: var(--rf-font-sans);
|
|
10
|
+
font-size: 0.75rem;
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
color: var(--rf-color-muted);
|
|
13
|
+
background: var(--rf-color-surface);
|
|
14
|
+
border-bottom: 1px solid var(--rf-color-border);
|
|
15
|
+
}
|
|
7
16
|
.rf-compare--side-by-side .rf-compare__panels {
|
|
8
17
|
display: grid;
|
|
9
18
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
package/styles/runes/cta.css
CHANGED
|
@@ -142,3 +142,17 @@
|
|
|
142
142
|
margin: 0 0 1rem;
|
|
143
143
|
max-width: none;
|
|
144
144
|
}
|
|
145
|
+
|
|
146
|
+
/* Mobile: stack action buttons full-width so multi-button CTAs line up */
|
|
147
|
+
@media (max-width: 640px) {
|
|
148
|
+
.rf-cta ul {
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
align-items: stretch;
|
|
151
|
+
}
|
|
152
|
+
.rf-cta li a,
|
|
153
|
+
.rf-cta nav a {
|
|
154
|
+
justify-content: center;
|
|
155
|
+
width: 100%;
|
|
156
|
+
box-sizing: border-box;
|
|
157
|
+
}
|
|
158
|
+
}
|
package/styles/runes/diff.css
CHANGED
|
@@ -2,31 +2,27 @@
|
|
|
2
2
|
.rf-diff {
|
|
3
3
|
border: 1px solid var(--rf-color-border);
|
|
4
4
|
border-radius: var(--rf-radius-lg);
|
|
5
|
-
overflow
|
|
5
|
+
overflow: hidden;
|
|
6
6
|
font-size: 0.875rem;
|
|
7
|
+
background: var(--rf-color-code-bg);
|
|
7
8
|
}
|
|
8
|
-
.rf-
|
|
9
|
-
display: grid;
|
|
10
|
-
grid-template-columns: 1fr 1fr;
|
|
11
|
-
min-width: 40rem;
|
|
12
|
-
}
|
|
13
|
-
.rf-diff__split-container .rf-diff__panel:first-child {
|
|
14
|
-
border-right: 1px solid var(--rf-color-border);
|
|
15
|
-
}
|
|
16
|
-
.rf-diff__header,
|
|
17
|
-
.rf-diff__header-after {
|
|
9
|
+
.rf-diff__header {
|
|
18
10
|
padding: 0.5rem 1rem;
|
|
19
11
|
font-family: var(--rf-font-sans);
|
|
20
12
|
font-size: 0.75rem;
|
|
21
13
|
font-weight: 600;
|
|
14
|
+
color: var(--rf-color-muted);
|
|
22
15
|
background: var(--rf-color-surface);
|
|
23
16
|
border-bottom: 1px solid var(--rf-color-border);
|
|
24
17
|
}
|
|
25
|
-
.rf-
|
|
26
|
-
|
|
18
|
+
.rf-diff__split-container {
|
|
19
|
+
display: grid;
|
|
20
|
+
grid-template-columns: 1fr 1fr;
|
|
21
|
+
min-width: 40rem;
|
|
22
|
+
overflow-x: auto;
|
|
27
23
|
}
|
|
28
|
-
.rf-
|
|
29
|
-
|
|
24
|
+
.rf-diff__split-container .rf-diff__panel:first-child {
|
|
25
|
+
border-right: 1px solid var(--rf-color-border);
|
|
30
26
|
}
|
|
31
27
|
.rf-diff__code {
|
|
32
28
|
margin: 0;
|
|
@@ -42,31 +38,39 @@
|
|
|
42
38
|
.rf-diff__line {
|
|
43
39
|
display: flex;
|
|
44
40
|
min-height: 1.6em;
|
|
41
|
+
border-left: 3px solid transparent;
|
|
45
42
|
}
|
|
46
43
|
.rf-diff__line[data-type="equal"] { background: transparent; }
|
|
47
|
-
.rf-diff__line[data-type="remove"] {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
.rf-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
padding: 0 0.5rem;
|
|
55
|
-
user-select: none;
|
|
56
|
-
color: var(--rf-color-muted);
|
|
44
|
+
.rf-diff__line[data-type="remove"] {
|
|
45
|
+
background: color-mix(in srgb, var(--rf-color-danger) 18%, transparent);
|
|
46
|
+
border-left-color: var(--rf-color-danger);
|
|
47
|
+
}
|
|
48
|
+
.rf-diff__line[data-type="add"] {
|
|
49
|
+
background: color-mix(in srgb, var(--rf-color-success) 18%, transparent);
|
|
50
|
+
border-left-color: var(--rf-color-success);
|
|
57
51
|
}
|
|
52
|
+
.rf-diff__line[data-type="empty"] { background: transparent; }
|
|
58
53
|
.rf-diff__gutter-num {
|
|
54
|
+
flex-shrink: 0;
|
|
55
|
+
padding: 0 0.5rem;
|
|
59
56
|
width: 2.5em;
|
|
57
|
+
min-height: 1.6em;
|
|
60
58
|
text-align: right;
|
|
61
59
|
font-size: 0.75rem;
|
|
60
|
+
font-variant-numeric: tabular-nums;
|
|
61
|
+
user-select: none;
|
|
62
|
+
color: var(--rf-color-muted);
|
|
62
63
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
/* Change-type colour drives the directional cue — no more +/- prefix.
|
|
65
|
+
* Remove lines colour the before-number; add lines colour the after-number.
|
|
66
|
+
* The opposite side renders empty (no number) which itself signals "nothing
|
|
67
|
+
* here on this side". */
|
|
68
|
+
.rf-diff__line[data-type="remove"] .rf-diff__gutter-num[data-side="before"] {
|
|
69
|
+
color: var(--rf-color-danger);
|
|
70
|
+
}
|
|
71
|
+
.rf-diff__line[data-type="add"] .rf-diff__gutter-num[data-side="after"] {
|
|
72
|
+
color: var(--rf-color-success);
|
|
67
73
|
}
|
|
68
|
-
.rf-diff__line[data-type="remove"] .rf-diff__gutter-prefix { color: var(--rf-color-danger); }
|
|
69
|
-
.rf-diff__line[data-type="add"] .rf-diff__gutter-prefix { color: var(--rf-color-success); }
|
|
70
74
|
.rf-diff .rf-codeblock {
|
|
71
75
|
margin: 0;
|
|
72
76
|
}
|
|
@@ -74,4 +78,9 @@
|
|
|
74
78
|
flex: 1;
|
|
75
79
|
white-space: pre;
|
|
76
80
|
padding-right: 1rem;
|
|
81
|
+
/* Pin the row to 1.6em even when the text is empty — the highlighted
|
|
82
|
+
* span for an empty input has no inline content to establish a line
|
|
83
|
+
* box, so without this the flex item collapses below the parent's
|
|
84
|
+
* min-height and rows visually drift in the split-mode grid. */
|
|
85
|
+
min-height: 1.6em;
|
|
77
86
|
}
|
package/styles/runes/hero.css
CHANGED
|
@@ -189,3 +189,27 @@
|
|
|
189
189
|
.rf-hero__media pre {
|
|
190
190
|
margin: 0;
|
|
191
191
|
}
|
|
192
|
+
|
|
193
|
+
/* Mobile: stack actions full-width so the code block and button line up */
|
|
194
|
+
@media (max-width: 640px) {
|
|
195
|
+
.rf-hero__actions {
|
|
196
|
+
flex-direction: column;
|
|
197
|
+
align-items: stretch;
|
|
198
|
+
max-width: none;
|
|
199
|
+
}
|
|
200
|
+
.rf-hero__actions pre {
|
|
201
|
+
width: 100%;
|
|
202
|
+
box-sizing: border-box;
|
|
203
|
+
}
|
|
204
|
+
.rf-hero ul,
|
|
205
|
+
.rf-hero nav {
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
align-items: stretch;
|
|
208
|
+
}
|
|
209
|
+
.rf-hero li a,
|
|
210
|
+
.rf-hero nav a {
|
|
211
|
+
justify-content: center;
|
|
212
|
+
width: 100%;
|
|
213
|
+
box-sizing: border-box;
|
|
214
|
+
}
|
|
215
|
+
}
|
package/styles/runes/nav.css
CHANGED
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
text-decoration: none;
|
|
50
50
|
}
|
|
51
51
|
.rf-nav-item__link--active {
|
|
52
|
-
background: var(--rf-color-
|
|
52
|
+
background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
|
|
53
53
|
color: var(--rf-color-primary);
|
|
54
54
|
font-weight: 600;
|
|
55
55
|
}
|
|
@@ -87,18 +87,32 @@
|
|
|
87
87
|
border-right: 1.5px solid currentColor;
|
|
88
88
|
border-bottom: 1.5px solid currentColor;
|
|
89
89
|
transform: rotate(45deg);
|
|
90
|
-
transition: transform
|
|
90
|
+
transition: transform 200ms ease;
|
|
91
91
|
margin-right: 0.25rem;
|
|
92
92
|
}
|
|
93
|
+
.rf-nav--collapsible .rf-nav-group > ul,
|
|
94
|
+
.rf-nav--collapsible .rf-nav-group > ol {
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
transition: height 200ms ease;
|
|
97
|
+
}
|
|
93
98
|
.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ul,
|
|
94
99
|
.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ol {
|
|
95
|
-
|
|
100
|
+
height: 0;
|
|
96
101
|
}
|
|
97
102
|
.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h2::after,
|
|
98
103
|
.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h3::after {
|
|
99
104
|
transform: rotate(-45deg);
|
|
100
105
|
}
|
|
101
106
|
|
|
107
|
+
@media (prefers-reduced-motion: reduce) {
|
|
108
|
+
.rf-nav--collapsible .rf-nav-group > ul,
|
|
109
|
+
.rf-nav--collapsible .rf-nav-group > ol,
|
|
110
|
+
.rf-nav--collapsible .rf-nav-group h2::after,
|
|
111
|
+
.rf-nav--collapsible .rf-nav-group h3::after {
|
|
112
|
+
transition: none;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
102
116
|
/* ─── Menubar layout (header) ─────────────────────────────────────────── */
|
|
103
117
|
|
|
104
118
|
.rf-nav--menubar {
|