@filipgutica/ui 1.11.2 → 1.13.0
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/README.md +44 -6
- package/dist/components/UiSwitch.vue.d.ts +25 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +187 -115
- package/dist/site.js +65 -62
- package/package.json +7 -3
- package/src/components.css +112 -34
- package/src/fonts/OFL-IBM-Plex-Mono.txt +93 -0
- package/src/fonts/OFL-IBM-Plex-Sans.txt +93 -0
- package/src/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
- package/src/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
- package/src/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
- package/src/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
- package/src/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
- package/src/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
- package/src/fonts.css +55 -0
- package/src/site.css +132 -50
- package/src/theme.css +118 -89
- package/src/themes/graphite-indigo.css +62 -44
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ThinItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ExtraLight.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-ExtraLightItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Light.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-LightItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Regular.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Italic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Medium.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-MediumItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-SemiBold.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-SemiBoldItalic.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-Bold.ttf: Copyright 2017 IBM Corp. All rights reserved. IBMPlexMono-BoldItalic.ttf: Copyright 2017 IBM Corp. All rights reserved.
|
|
2
|
+
|
|
3
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
4
|
+
This license is copied below, and is also available with a FAQ at:
|
|
5
|
+
http://scripts.sil.org/OFL
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
-----------------------------------------------------------
|
|
9
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
10
|
+
-----------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
PREAMBLE
|
|
13
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
14
|
+
development of collaborative font projects, to support the font creation
|
|
15
|
+
efforts of academic and linguistic communities, and to provide a free and
|
|
16
|
+
open framework in which fonts may be shared and improved in partnership
|
|
17
|
+
with others.
|
|
18
|
+
|
|
19
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
|
20
|
+
redistributed freely as long as they are not sold by themselves. The
|
|
21
|
+
fonts, including any derivative works, can be bundled, embedded,
|
|
22
|
+
redistributed and/or sold with any software provided that any reserved
|
|
23
|
+
names are not used by derivative works. The fonts and derivatives,
|
|
24
|
+
however, cannot be released under any other type of license. The
|
|
25
|
+
requirement for fonts to remain under this license does not apply
|
|
26
|
+
to any document created using the fonts or their derivatives.
|
|
27
|
+
|
|
28
|
+
DEFINITIONS
|
|
29
|
+
"Font Software" refers to the set of files released by the Copyright
|
|
30
|
+
Holder(s) under this license and clearly marked as such. This may
|
|
31
|
+
include source files, build scripts and documentation.
|
|
32
|
+
|
|
33
|
+
"Reserved Font Name" refers to any names specified as such after the
|
|
34
|
+
copyright statement(s).
|
|
35
|
+
|
|
36
|
+
"Original Version" refers to the collection of Font Software components as
|
|
37
|
+
distributed by the Copyright Holder(s).
|
|
38
|
+
|
|
39
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
40
|
+
or substituting -- in part or in whole -- any of the components of the
|
|
41
|
+
Original Version, by changing formats or by porting the Font Software to a
|
|
42
|
+
new environment.
|
|
43
|
+
|
|
44
|
+
"Author" refers to any designer, engineer, programmer, technical
|
|
45
|
+
writer or other person who contributed to the Font Software.
|
|
46
|
+
|
|
47
|
+
PERMISSION & CONDITIONS
|
|
48
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
49
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
50
|
+
redistribute, and sell modified and unmodified copies of the Font
|
|
51
|
+
Software, subject to the following conditions:
|
|
52
|
+
|
|
53
|
+
1) Neither the Font Software nor any of its individual components,
|
|
54
|
+
in Original or Modified Versions, may be sold by itself.
|
|
55
|
+
|
|
56
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
|
57
|
+
redistributed and/or sold with any software, provided that each copy
|
|
58
|
+
contains the above copyright notice and this license. These can be
|
|
59
|
+
included either as stand-alone text files, human-readable headers or
|
|
60
|
+
in the appropriate machine-readable metadata fields within text or
|
|
61
|
+
binary files as long as those fields can be easily viewed by the user.
|
|
62
|
+
|
|
63
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
|
64
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
|
65
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
|
66
|
+
presented to the users.
|
|
67
|
+
|
|
68
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
69
|
+
Software shall not be used to promote, endorse or advertise any
|
|
70
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
|
71
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
72
|
+
permission.
|
|
73
|
+
|
|
74
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
|
75
|
+
must be distributed entirely under this license, and must not be
|
|
76
|
+
distributed under any other license. The requirement for fonts to
|
|
77
|
+
remain under this license does not apply to any document created
|
|
78
|
+
using the Font Software.
|
|
79
|
+
|
|
80
|
+
TERMINATION
|
|
81
|
+
This license becomes null and void if any of the above conditions are
|
|
82
|
+
not met.
|
|
83
|
+
|
|
84
|
+
DISCLAIMER
|
|
85
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
86
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
87
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
88
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
89
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
90
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
91
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
92
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
93
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
|
|
2
|
+
|
|
3
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
4
|
+
This license is copied below, and is also available with a FAQ at:
|
|
5
|
+
http://scripts.sil.org/OFL
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
-----------------------------------------------------------
|
|
9
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
10
|
+
-----------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
PREAMBLE
|
|
13
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
14
|
+
development of collaborative font projects, to support the font creation
|
|
15
|
+
efforts of academic and linguistic communities, and to provide a free and
|
|
16
|
+
open framework in which fonts may be shared and improved in partnership
|
|
17
|
+
with others.
|
|
18
|
+
|
|
19
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
|
20
|
+
redistributed freely as long as they are not sold by themselves. The
|
|
21
|
+
fonts, including any derivative works, can be bundled, embedded,
|
|
22
|
+
redistributed and/or sold with any software provided that any reserved
|
|
23
|
+
names are not used by derivative works. The fonts and derivatives,
|
|
24
|
+
however, cannot be released under any other type of license. The
|
|
25
|
+
requirement for fonts to remain under this license does not apply
|
|
26
|
+
to any document created using the fonts or their derivatives.
|
|
27
|
+
|
|
28
|
+
DEFINITIONS
|
|
29
|
+
"Font Software" refers to the set of files released by the Copyright
|
|
30
|
+
Holder(s) under this license and clearly marked as such. This may
|
|
31
|
+
include source files, build scripts and documentation.
|
|
32
|
+
|
|
33
|
+
"Reserved Font Name" refers to any names specified as such after the
|
|
34
|
+
copyright statement(s).
|
|
35
|
+
|
|
36
|
+
"Original Version" refers to the collection of Font Software components as
|
|
37
|
+
distributed by the Copyright Holder(s).
|
|
38
|
+
|
|
39
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
40
|
+
or substituting -- in part or in whole -- any of the components of the
|
|
41
|
+
Original Version, by changing formats or by porting the Font Software to a
|
|
42
|
+
new environment.
|
|
43
|
+
|
|
44
|
+
"Author" refers to any designer, engineer, programmer, technical
|
|
45
|
+
writer or other person who contributed to the Font Software.
|
|
46
|
+
|
|
47
|
+
PERMISSION & CONDITIONS
|
|
48
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
49
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
50
|
+
redistribute, and sell modified and unmodified copies of the Font
|
|
51
|
+
Software, subject to the following conditions:
|
|
52
|
+
|
|
53
|
+
1) Neither the Font Software nor any of its individual components,
|
|
54
|
+
in Original or Modified Versions, may be sold by itself.
|
|
55
|
+
|
|
56
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
|
57
|
+
redistributed and/or sold with any software, provided that each copy
|
|
58
|
+
contains the above copyright notice and this license. These can be
|
|
59
|
+
included either as stand-alone text files, human-readable headers or
|
|
60
|
+
in the appropriate machine-readable metadata fields within text or
|
|
61
|
+
binary files as long as those fields can be easily viewed by the user.
|
|
62
|
+
|
|
63
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
|
64
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
|
65
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
|
66
|
+
presented to the users.
|
|
67
|
+
|
|
68
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
69
|
+
Software shall not be used to promote, endorse or advertise any
|
|
70
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
|
71
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
72
|
+
permission.
|
|
73
|
+
|
|
74
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
|
75
|
+
must be distributed entirely under this license, and must not be
|
|
76
|
+
distributed under any other license. The requirement for fonts to
|
|
77
|
+
remain under this license does not apply to any document created
|
|
78
|
+
using the Font Software.
|
|
79
|
+
|
|
80
|
+
TERMINATION
|
|
81
|
+
This license becomes null and void if any of the above conditions are
|
|
82
|
+
not met.
|
|
83
|
+
|
|
84
|
+
DISCLAIMER
|
|
85
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
86
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
87
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
88
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
89
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
90
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
91
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
92
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
93
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/fonts.css
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* IBM Plex, latin subset, from @fontsource/ibm-plex-{sans,mono} 5.3.0. OFL licences in fonts/. */
|
|
2
|
+
|
|
3
|
+
@font-face {
|
|
4
|
+
font-family: 'IBM Plex Sans';
|
|
5
|
+
font-style: normal;
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
font-display: swap;
|
|
8
|
+
src: url('./fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
|
|
9
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@font-face {
|
|
13
|
+
font-family: 'IBM Plex Sans';
|
|
14
|
+
font-style: normal;
|
|
15
|
+
font-weight: 500;
|
|
16
|
+
font-display: swap;
|
|
17
|
+
src: url('./fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
|
|
18
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@font-face {
|
|
22
|
+
font-family: 'IBM Plex Sans';
|
|
23
|
+
font-style: normal;
|
|
24
|
+
font-weight: 600;
|
|
25
|
+
font-display: swap;
|
|
26
|
+
src: url('./fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
|
|
27
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@font-face {
|
|
31
|
+
font-family: 'IBM Plex Mono';
|
|
32
|
+
font-style: normal;
|
|
33
|
+
font-weight: 400;
|
|
34
|
+
font-display: swap;
|
|
35
|
+
src: url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
|
|
36
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@font-face {
|
|
40
|
+
font-family: 'IBM Plex Mono';
|
|
41
|
+
font-style: normal;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
font-display: swap;
|
|
44
|
+
src: url('./fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
|
|
45
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@font-face {
|
|
49
|
+
font-family: 'IBM Plex Mono';
|
|
50
|
+
font-style: normal;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
font-display: swap;
|
|
53
|
+
src: url('./fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
|
|
54
|
+
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
55
|
+
}
|
package/src/site.css
CHANGED
|
@@ -24,8 +24,11 @@
|
|
|
24
24
|
line-height: var(--leading-tight);
|
|
25
25
|
text-wrap: balance;
|
|
26
26
|
}
|
|
27
|
-
.fg-site-docs :where(h1) { max-width: 22ch; font
|
|
28
|
-
.fg-site-docs :where(h2) { font-size: var(--text-xl); }
|
|
27
|
+
.fg-site-docs :where(h1) { max-width: 22ch; font: var(--weight-semibold) var(--text-3xl) / 1.08 var(--font-mono); letter-spacing: var(--tracking-tight); }
|
|
28
|
+
.fg-site-docs :where(h2) { font-family: var(--font-mono); font-size: var(--text-xl); }
|
|
29
|
+
.fg-site-docs :where(h3) { font-family: var(--font-ui); font-size: var(--text-lg); }
|
|
30
|
+
:is(.fg-site-docs main, .fg-site-prose) :where(section > h2, section > :is(header, hgroup) > h2) { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
|
|
31
|
+
:is(.fg-site-docs main, .fg-site-prose) :where(section > h2, section > :is(header, hgroup) > h2)::before { content: '## ' / ''; color: var(--color-project); }
|
|
29
32
|
.fg-site-docs :where(p) { max-width: var(--measure); }
|
|
30
33
|
/* Tab panels and other enhanced markup use the hidden attribute, so it outranks the page's own
|
|
31
34
|
* display rules. until-found keeps the browser's find-in-page behavior. */
|
|
@@ -86,6 +89,7 @@
|
|
|
86
89
|
color: var(--color-muted);
|
|
87
90
|
font-size: var(--text-sm);
|
|
88
91
|
}
|
|
92
|
+
.fg-site-footer { font-family: var(--font-mono); }
|
|
89
93
|
.fg-site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
|
|
90
94
|
.fg-site-footer a {
|
|
91
95
|
display: inline-flex;
|
|
@@ -128,7 +132,7 @@
|
|
|
128
132
|
.fg-site-header {
|
|
129
133
|
position: relative;
|
|
130
134
|
z-index: 30;
|
|
131
|
-
border-bottom: 1px solid var(--color-
|
|
135
|
+
border-bottom: 1px solid var(--color-text);
|
|
132
136
|
background: var(--color-bg);
|
|
133
137
|
color: var(--color-text);
|
|
134
138
|
font-family: var(--font-ui);
|
|
@@ -156,7 +160,7 @@
|
|
|
156
160
|
min-height: var(--control-lg);
|
|
157
161
|
align-items: center;
|
|
158
162
|
color: var(--color-muted);
|
|
159
|
-
font-size: var(--text-
|
|
163
|
+
font-size: var(--text-md);
|
|
160
164
|
text-decoration: none;
|
|
161
165
|
}
|
|
162
166
|
.fg-site-header__links a:hover { color: var(--color-text); }
|
|
@@ -175,6 +179,8 @@
|
|
|
175
179
|
cursor: pointer;
|
|
176
180
|
user-select: none;
|
|
177
181
|
}
|
|
182
|
+
.fg-site-projects__trigger { font-family: var(--font-mono); }
|
|
183
|
+
.fg-site-projects__trigger::before { content: '~/' / ''; color: var(--color-project); }
|
|
178
184
|
.fg-site-projects__trigger::-webkit-details-marker { display: none; }
|
|
179
185
|
.fg-site-projects__trigger:hover,
|
|
180
186
|
.fg-site-projects[open] > .fg-site-projects__trigger { background: var(--color-row-hover); }
|
|
@@ -195,7 +201,7 @@
|
|
|
195
201
|
|
|
196
202
|
/* Route rows. Hover is neutral, and the current page keeps its selected fill on
|
|
197
203
|
* hover. An in-page section marker (aria-current="location") must look different
|
|
198
|
-
* from the current page, so it
|
|
204
|
+
* from the current page, so it keeps the bar without the selected fill. */
|
|
199
205
|
.fg-site-nav a {
|
|
200
206
|
display: flex;
|
|
201
207
|
min-height: var(--row);
|
|
@@ -203,18 +209,19 @@
|
|
|
203
209
|
padding-inline: var(--space-3);
|
|
204
210
|
border-radius: var(--radius-control);
|
|
205
211
|
color: var(--color-muted);
|
|
206
|
-
font-
|
|
212
|
+
font-family: var(--font-mono);
|
|
213
|
+
font-size: var(--text-sm);
|
|
207
214
|
text-decoration: none;
|
|
208
215
|
transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
|
|
209
216
|
}
|
|
210
217
|
.fg-site-nav a:hover { background: var(--color-row-hover); color: var(--color-text); }
|
|
211
218
|
.fg-site-nav a[aria-current="page"] {
|
|
212
|
-
background: var(--color-
|
|
213
|
-
box-shadow: inset 2px 0 0 var(--color-
|
|
219
|
+
background: var(--color-surface-raised);
|
|
220
|
+
box-shadow: inset 2px 0 0 var(--color-project);
|
|
214
221
|
color: var(--color-text);
|
|
215
222
|
font-weight: var(--weight-medium);
|
|
216
223
|
}
|
|
217
|
-
.fg-site-nav a[aria-current="location"] { color: var(--color-text); font-weight: var(--weight-medium); }
|
|
224
|
+
.fg-site-nav a[aria-current="location"] { box-shadow: inset 2px 0 0 var(--color-project); color: var(--color-text); font-weight: var(--weight-medium); }
|
|
218
225
|
.fg-site-nav a code { font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
219
226
|
|
|
220
227
|
.fg-site-appearance {
|
|
@@ -250,6 +257,7 @@
|
|
|
250
257
|
}
|
|
251
258
|
/* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
|
|
252
259
|
@media (forced-colors: active) {
|
|
260
|
+
.fg-site-nav a[aria-current] { border-inline-start: 2px solid Highlight; }
|
|
253
261
|
.fg-site-appearance__choice[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
|
|
254
262
|
}
|
|
255
263
|
|
|
@@ -284,8 +292,9 @@
|
|
|
284
292
|
margin: 0;
|
|
285
293
|
padding-inline: var(--space-3);
|
|
286
294
|
color: var(--color-muted);
|
|
287
|
-
font-
|
|
288
|
-
font-
|
|
295
|
+
font-family: var(--font-ui);
|
|
296
|
+
font-size: var(--text-xs);
|
|
297
|
+
font-weight: var(--weight-semibold);
|
|
289
298
|
}
|
|
290
299
|
.fg-site-rail__group { display: grid; gap: 2px; }
|
|
291
300
|
.fg-site-rail__group + .fg-site-rail__group { margin-top: var(--space-3); }
|
|
@@ -296,17 +305,23 @@
|
|
|
296
305
|
* default. A site can set --site-capture-bg and --t* values on :root, which also
|
|
297
306
|
* reach the full-size viewer. Nothing clips the panel, so focus rings inside it stay whole. */
|
|
298
307
|
.fg-capture {
|
|
308
|
+
--color-text: var(--color-terminal-text);
|
|
309
|
+
--color-muted: var(--color-terminal-caption-text);
|
|
310
|
+
--color-accent: var(--color-project-dark);
|
|
311
|
+
--color-focus: var(--color-project-dark);
|
|
312
|
+
--color-border-subtle: var(--color-terminal-border);
|
|
299
313
|
position: relative;
|
|
300
314
|
min-width: 0;
|
|
301
315
|
border: 1px solid var(--color-border-subtle);
|
|
302
316
|
border-radius: var(--radius-panel);
|
|
303
|
-
background: var(--color-
|
|
317
|
+
background: var(--color-terminal);
|
|
318
|
+
color: var(--color-terminal-text);
|
|
304
319
|
}
|
|
305
320
|
.fg-capture .fg-tabs__list { width: 100%; margin-block-end: 0; padding-inline: var(--space-2); }
|
|
306
|
-
.fg-capture .fg-tabs__tab { min-height: var(--control-lg); }
|
|
321
|
+
.fg-capture .fg-tabs__tab { min-height: var(--control-lg); font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
307
322
|
/* The Full size control sits at the end of the tab row. The list's margin, not its
|
|
308
323
|
* padding, reserves the control's width, so the scroll area and divider end before it. */
|
|
309
|
-
.fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) +
|
|
324
|
+
.fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 7rem); }
|
|
310
325
|
.fg-capture__full {
|
|
311
326
|
position: absolute;
|
|
312
327
|
top: 0;
|
|
@@ -320,7 +335,7 @@
|
|
|
320
335
|
border-radius: var(--radius-control);
|
|
321
336
|
background: transparent;
|
|
322
337
|
color: var(--color-muted);
|
|
323
|
-
font: var(--text-sm) / var(--leading) var(--font-
|
|
338
|
+
font: var(--text-sm) / var(--leading) var(--font-mono);
|
|
324
339
|
cursor: pointer;
|
|
325
340
|
}
|
|
326
341
|
.fg-capture__full:hover { color: var(--color-text); }
|
|
@@ -342,17 +357,18 @@
|
|
|
342
357
|
min-width: 0;
|
|
343
358
|
max-width: 100%;
|
|
344
359
|
overflow-x: auto;
|
|
345
|
-
background: var(--site-capture-bg, var(--color-
|
|
360
|
+
background: var(--site-capture-bg, var(--color-terminal));
|
|
361
|
+
color: var(--color-terminal-text);
|
|
346
362
|
}
|
|
347
|
-
/*
|
|
348
|
-
.fg-capture__screen:has(> .term) { background: var(--site-capture-bg, var(--t-bg,
|
|
363
|
+
/* ANSI captures and plain output share the terminal plate; explicit site palettes still win. */
|
|
364
|
+
.fg-capture__screen:has(> .term) { background: var(--site-capture-bg, var(--t-bg, var(--color-terminal))); }
|
|
349
365
|
.fg-capture__screen > * { width: max-content; margin: 0; }
|
|
350
366
|
/* Terminal colors for checked-in capture markup: .term and the ANSI classes the capture
|
|
351
367
|
* converter emits. Each color reads the site's --t* value first, so a site palette on
|
|
352
368
|
* :root still wins, and these defaults apply only where a site sets none. */
|
|
353
369
|
.fg-capture__screen .term {
|
|
354
370
|
padding: var(--space-4);
|
|
355
|
-
color: var(--t-fg,
|
|
371
|
+
color: var(--t-fg, var(--color-terminal-text));
|
|
356
372
|
font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
|
|
357
373
|
font-variant-ligatures: none;
|
|
358
374
|
tab-size: 8;
|
|
@@ -391,8 +407,8 @@
|
|
|
391
407
|
.fg-capture__screen .tb14 { background: var(--t14, #8ee3e8); }
|
|
392
408
|
.fg-capture__screen .tb15 { background: var(--t15, #ffffff); }
|
|
393
409
|
.fg-capture__screen .tf-dim { color: var(--t-dim, #a0a0ab); }
|
|
394
|
-
.fg-capture__screen .tf-bg { color: var(--t-bg,
|
|
395
|
-
.fg-capture__screen .tb-fg { background: var(--t-fg,
|
|
410
|
+
.fg-capture__screen .tf-bg { color: var(--t-bg, var(--color-terminal)); }
|
|
411
|
+
.fg-capture__screen .tb-fg { background: var(--t-fg, var(--color-terminal-text)); }
|
|
396
412
|
/* Text on the light selection row stays dark, whatever its own colour class. */
|
|
397
413
|
.fg-capture__screen .tb8 { color: #1b1b1f; }
|
|
398
414
|
.fg-capture__screen .tbold { font-weight: var(--weight-semibold); }
|
|
@@ -419,11 +435,13 @@
|
|
|
419
435
|
gap: var(--space-1);
|
|
420
436
|
padding: var(--space-3) var(--space-4);
|
|
421
437
|
border-top: 1px solid var(--color-border-subtle);
|
|
422
|
-
color: var(--color-
|
|
438
|
+
color: var(--color-terminal-caption-text);
|
|
439
|
+
background: var(--color-terminal-caption);
|
|
440
|
+
font-family: var(--font-mono);
|
|
423
441
|
font-size: var(--text-sm);
|
|
424
442
|
line-height: var(--leading);
|
|
425
443
|
}
|
|
426
|
-
.fg-capture__caption > code { color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
|
|
444
|
+
.fg-capture__caption > code { color: var(--color-terminal-caption-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
|
|
427
445
|
/* Inset: the enhanced panel clips its content. */
|
|
428
446
|
.fg-capture__screen:focus-visible,
|
|
429
447
|
.fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
|
|
@@ -491,28 +509,41 @@
|
|
|
491
509
|
/* Page helpers. Steps number a real sequence; facts are short label and value
|
|
492
510
|
* pairs on one line; definitions pair terms with short meanings. Definitions
|
|
493
511
|
* take dt and dd as direct children. */
|
|
494
|
-
.fg-site-steps { display: grid; gap: var(--space-
|
|
512
|
+
.fg-site-steps { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: fg-site-step; }
|
|
513
|
+
/* Each step hangs from a mono number in the project hue, set on the title's baseline; a
|
|
514
|
+
* rule runs down the leading column to the next step. */
|
|
495
515
|
.fg-site-steps > li {
|
|
496
516
|
position: relative;
|
|
497
|
-
|
|
498
|
-
|
|
517
|
+
display: grid;
|
|
518
|
+
grid-template-columns: var(--space-8) minmax(0, 1fr);
|
|
519
|
+
row-gap: var(--space-2);
|
|
499
520
|
counter-increment: fg-site-step;
|
|
500
521
|
}
|
|
522
|
+
.fg-site-steps > li > * { grid-column: 2; }
|
|
501
523
|
.fg-site-steps > li::before {
|
|
502
524
|
content: counter(fg-site-step);
|
|
525
|
+
grid-area: 1 / 1;
|
|
526
|
+
align-self: baseline;
|
|
527
|
+
color: var(--color-project);
|
|
528
|
+
font-family: var(--font-mono);
|
|
529
|
+
font-size: var(--text-sm);
|
|
530
|
+
font-weight: var(--weight-semibold);
|
|
531
|
+
font-variant-numeric: tabular-nums;
|
|
532
|
+
}
|
|
533
|
+
.fg-site-steps > li > :first-child { align-self: baseline; }
|
|
534
|
+
.fg-site-steps > li:not(:last-child)::after {
|
|
535
|
+
content: '';
|
|
503
536
|
position: absolute;
|
|
504
|
-
top:
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
537
|
+
top: var(--space-8);
|
|
538
|
+
bottom: calc(var(--space-2) - var(--space-6));
|
|
539
|
+
inset-inline-start: 0.25em;
|
|
540
|
+
border-inline-start: 1px solid var(--color-border-subtle);
|
|
541
|
+
}
|
|
542
|
+
/* The outcome of the last step. */
|
|
543
|
+
.fg-site-steps__result {
|
|
544
|
+
padding-inline-start: var(--space-3);
|
|
545
|
+
border-inline-start: 2px solid var(--color-project);
|
|
512
546
|
color: var(--color-muted);
|
|
513
|
-
font-size: var(--text-xs);
|
|
514
|
-
font-variant-numeric: tabular-nums;
|
|
515
|
-
line-height: 1;
|
|
516
547
|
}
|
|
517
548
|
.fg-site-facts {
|
|
518
549
|
display: flex;
|
|
@@ -522,6 +553,7 @@
|
|
|
522
553
|
color: var(--color-muted);
|
|
523
554
|
font-size: var(--text-sm);
|
|
524
555
|
}
|
|
556
|
+
.fg-site-facts { font-family: var(--font-mono); }
|
|
525
557
|
.fg-site-facts > div { display: flex; gap: var(--space-2); }
|
|
526
558
|
.fg-site-facts dd { margin: 0; color: var(--color-text); }
|
|
527
559
|
.fg-site-definitions {
|
|
@@ -574,19 +606,47 @@
|
|
|
574
606
|
letter-spacing: var(--tracking-tight);
|
|
575
607
|
text-wrap: balance;
|
|
576
608
|
}
|
|
577
|
-
.fg-site-prose :where(h1) { font-size: var(--text-3xl); }
|
|
578
|
-
|
|
609
|
+
.fg-site-prose :where(h1) { font-family: var(--font-mono); font-size: var(--text-3xl); line-height: 1.08; }
|
|
610
|
+
/* Hero titles sit in the components layer so they also outrank the prose defaults above. */
|
|
611
|
+
.fg-site-hero > h1 {
|
|
612
|
+
max-width: none;
|
|
613
|
+
font-size: var(--text-display);
|
|
614
|
+
line-height: 1.04;
|
|
615
|
+
word-spacing: -0.12em;
|
|
616
|
+
}
|
|
617
|
+
.fg-site-prose :where(h2) { font-family: var(--font-mono); font-size: var(--text-xl); }
|
|
579
618
|
.fg-site-prose :where(h3, h4) { font-size: var(--text-lg); }
|
|
580
619
|
.fg-site-prose :where(p, ul, ol) { max-width: var(--measure); margin: 0; }
|
|
581
620
|
.fg-site-prose :where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--space-4); }
|
|
582
621
|
.fg-site-prose :where(p a, li a, dd a) { text-decoration: underline; text-underline-offset: 0.18em; }
|
|
583
|
-
.fg-site-meta { color: var(--color-muted); font-size: var(--text-sm); }
|
|
622
|
+
.fg-site-meta { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
584
623
|
|
|
585
624
|
/* No-JavaScript desktop: the rail's disclosure stays expanded. */
|
|
586
625
|
@media (min-width: 801px) {
|
|
626
|
+
.fg-site-rail { border-inline-end: 1px solid var(--color-border-subtle); padding-inline-end: var(--space-4); }
|
|
587
627
|
.fg-site-rail__menu::details-content { content-visibility: visible; }
|
|
588
628
|
.fg-site-rail__menu:not([open]) > .fg-site-rail__content { display: block; }
|
|
589
629
|
}
|
|
630
|
+
/* Explicit opt-in keeps the hero independent of page-owned install and capture markup. */
|
|
631
|
+
.fg-site-hero { display: grid; gap: var(--space-4); }
|
|
632
|
+
.fg-site-hero > * { min-width: 0; }
|
|
633
|
+
.fg-site-hero__lede,
|
|
634
|
+
.fg-site-hero__aside { display: grid; gap: var(--space-3); align-content: start; }
|
|
635
|
+
.fg-site-hero__aside .fg-site-meta { margin: 0; align-self: start; }
|
|
636
|
+
/* 1024px is the documented wide exception; narrower heroes keep source order. */
|
|
637
|
+
@media (min-width: 1024px) {
|
|
638
|
+
.fg-site-hero {
|
|
639
|
+
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
|
640
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
641
|
+
column-gap: var(--space-8);
|
|
642
|
+
align-items: start;
|
|
643
|
+
}
|
|
644
|
+
/* Explicit lines also span the implicit column when an unlayered site overrides the template. */
|
|
645
|
+
.fg-site-hero > * { grid-column: 1 / 3; }
|
|
646
|
+
.fg-site-hero > h1 { grid-row: 1; }
|
|
647
|
+
.fg-site-hero > .fg-site-hero__lede { grid-column: 1; grid-row: 2; }
|
|
648
|
+
.fg-site-hero > .fg-site-hero__aside { grid-column: 2; grid-row: 2; }
|
|
649
|
+
}
|
|
590
650
|
/* Keep in sync with MOBILE_QUERY in UiSiteNav.vue. */
|
|
591
651
|
@media (max-width: 800px) {
|
|
592
652
|
.fg-site-docs { grid-template-columns: minmax(0, 1fr); }
|
|
@@ -597,10 +657,17 @@
|
|
|
597
657
|
overflow: visible;
|
|
598
658
|
padding-block: var(--space-2);
|
|
599
659
|
}
|
|
600
|
-
.fg-site-rail__summary
|
|
660
|
+
.fg-site-rail__summary,
|
|
661
|
+
.fg-site-rail__toggle {
|
|
601
662
|
display: flex;
|
|
663
|
+
gap: var(--space-3);
|
|
664
|
+
border: 1px solid var(--color-border);
|
|
665
|
+
background: var(--color-surface-raised);
|
|
602
666
|
width: max-content;
|
|
667
|
+
max-width: 100%;
|
|
603
668
|
min-height: var(--control-lg);
|
|
669
|
+
white-space: normal;
|
|
670
|
+
text-align: start;
|
|
604
671
|
align-items: center;
|
|
605
672
|
padding-inline: var(--space-3);
|
|
606
673
|
border-radius: var(--radius-control);
|
|
@@ -609,6 +676,15 @@
|
|
|
609
676
|
list-style: none;
|
|
610
677
|
cursor: pointer;
|
|
611
678
|
}
|
|
679
|
+
.fg-site-rail__summary::after,
|
|
680
|
+
.fg-site-rail__toggle::after {
|
|
681
|
+
content: '';
|
|
682
|
+
width: 6px;
|
|
683
|
+
height: 6px;
|
|
684
|
+
border-right: 1px solid currentColor;
|
|
685
|
+
border-bottom: 1px solid currentColor;
|
|
686
|
+
transform: rotate(45deg);
|
|
687
|
+
}
|
|
612
688
|
.fg-site-rail__summary::-webkit-details-marker { display: none; }
|
|
613
689
|
.fg-site-rail__summary:hover { color: var(--color-text); background: var(--color-row-hover); }
|
|
614
690
|
.fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
|
|
@@ -633,18 +709,24 @@
|
|
|
633
709
|
.fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__end { display: contents; }
|
|
634
710
|
.fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-projects { margin-inline-end: auto; }
|
|
635
711
|
.fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__links { order: 1; flex-basis: 100%; }
|
|
712
|
+
.fg-site-docs :where(h1) { font-size: 32px; }
|
|
713
|
+
.fg-site-hero > h1 { font-size: var(--text-display-sm); }
|
|
636
714
|
.fg-site-docs { padding-inline: var(--space-4); }
|
|
637
715
|
/* Docs-shell pages keep one header row on phones and repeat these links in their footer. */
|
|
638
716
|
.fg-site-docs .fg-site-header__links { display: none; }
|
|
639
|
-
/*
|
|
640
|
-
*
|
|
641
|
-
|
|
642
|
-
.fg-site-facts:has(a) {
|
|
643
|
-
.fg-site-facts a {
|
|
644
|
-
|
|
717
|
+
/* Expand the link target without adding space between the text rows. A later link fact
|
|
718
|
+
* moves a full target below the one before it, so their targets never overlap. */
|
|
719
|
+
.fg-site-facts { row-gap: var(--space-2); }
|
|
720
|
+
.fg-site-facts > div:has(a) ~ div:has(a) { margin-top: calc(var(--control-lg) - 1lh - var(--space-2)); }
|
|
721
|
+
.fg-site-facts a { position: relative; display: inline-block; }
|
|
722
|
+
.fg-site-facts a::after {
|
|
723
|
+
content: '';
|
|
724
|
+
position: absolute;
|
|
725
|
+
inset-inline: 0;
|
|
726
|
+
top: 50%;
|
|
645
727
|
min-height: var(--control-lg);
|
|
646
|
-
|
|
647
|
-
|
|
728
|
+
height: 100%;
|
|
729
|
+
transform: translateY(-50%);
|
|
648
730
|
}
|
|
649
731
|
.fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
|
|
650
732
|
/* Phones keep the icon; the accessible name still says Full size. */
|
|
@@ -681,7 +763,7 @@
|
|
|
681
763
|
.fg-site-header__inner { padding-inline: var(--site-gutter, var(--space-6)); }
|
|
682
764
|
}
|
|
683
765
|
@media (max-width: 680px) {
|
|
684
|
-
.fg-site-prose :where(h1) { font-size:
|
|
766
|
+
.fg-site-prose :where(h1) { font-size: 32px; }
|
|
685
767
|
.fg-site-header__end { gap: var(--space-2) var(--space-4); }
|
|
686
768
|
.fg-site-header__links { gap: var(--space-4); }
|
|
687
769
|
.fg-site-projects__menu a { min-height: var(--control-lg); }
|