ssstyles 0.0.1-test
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/LICENSE +21 -0
- package/README.md +59 -0
- package/css/actionlink.css +22 -0
- package/css/animation.css +113 -0
- package/css/autogrid.css +20 -0
- package/css/base/blockquote.css +28 -0
- package/css/base/button.css +34 -0
- package/css/base/code.css +41 -0
- package/css/base/colors.css +17 -0
- package/css/base/config.css +34 -0
- package/css/base/dialog.css +36 -0
- package/css/base/forms.css +36 -0
- package/css/base/highcontrast.css +25 -0
- package/css/base/layout.css +58 -0
- package/css/base/misc.css +20 -0
- package/css/base/summary.css +46 -0
- package/css/base/table.css +50 -0
- package/css/base/typo.css +35 -0
- package/css/base.css +13 -0
- package/css/basegrid.css +46 -0
- package/css/breakout.css +47 -0
- package/css/callout.css +37 -0
- package/css/card.css +65 -0
- package/css/carousel.css +19 -0
- package/css/contactlinks.css +55 -0
- package/css/flexgrid.css +9 -0
- package/css/group.css +47 -0
- package/css/headline.css +15 -0
- package/css/loading.css +28 -0
- package/css/nav.css +21 -0
- package/css/nolist.css +4 -0
- package/css/shadow.css +34 -0
- package/css/skiplink.css +14 -0
- package/css/style.css +23 -0
- package/css/toggle.css +41 -0
- package/css/transition.css +7 -0
- package/dist/base.css +1 -0
- package/dist/style.css +1 -0
- package/esbuild.js +24 -0
- package/package.json +47 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
* {
|
|
2
|
+
word-break: break-word;
|
|
3
|
+
hyphens: auto;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
font-family: var(--font);
|
|
8
|
+
font-size: min(max(var(--font-size-min), 1.5vw), var(--font-size-max));
|
|
9
|
+
line-height: var(--line-height);
|
|
10
|
+
letter-spacing: var(--letter-spacing);
|
|
11
|
+
text-wrap: balance;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
text-rendering: optimizeLegibility;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h1 {
|
|
17
|
+
font-size: 3rem;
|
|
18
|
+
font-family: var(--font-accent, var(--font));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h2,
|
|
22
|
+
h3,
|
|
23
|
+
h4,
|
|
24
|
+
h5,
|
|
25
|
+
h6 {
|
|
26
|
+
margin-top: 3.5rem;
|
|
27
|
+
font-family: var(--font-accent, var(--font));
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
input,
|
|
31
|
+
button,
|
|
32
|
+
textarea,
|
|
33
|
+
select {
|
|
34
|
+
font: inherit;
|
|
35
|
+
}
|
package/css/base.css
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import "./base/config.css" layer(ssstyles_base);
|
|
2
|
+
@import "./base/highcontrast.css" layer(ssstyles_base);
|
|
3
|
+
@import "./base/colors.css" layer(ssstyles_base);
|
|
4
|
+
@import "./base/layout.css" layer(ssstyles_base);
|
|
5
|
+
@import "./base/typo.css" layer(ssstyles_base);
|
|
6
|
+
@import "./base/forms.css" layer(ssstyles_base);
|
|
7
|
+
@import "./base/button.css" layer(ssstyles_base);
|
|
8
|
+
@import "./base/table.css" layer(ssstyles_base);
|
|
9
|
+
@import "./base/summary.css" layer(ssstyles_base);
|
|
10
|
+
@import "./base/blockquote.css" layer(ssstyles_base);
|
|
11
|
+
@import "./base/code.css" layer(ssstyles_base);
|
|
12
|
+
@import "./base/dialog.css" layer(ssstyles_base);
|
|
13
|
+
@import "./base/misc.css" layer(ssstyles_base);
|
package/css/basegrid.css
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--basegrid: "header ." "nav side" "content side" "footer .";
|
|
3
|
+
--basegrid-rows: max-content max-content auto max-content;
|
|
4
|
+
--basegrid-cols: 100% 20ch;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
display: grid;
|
|
9
|
+
min-height: 100vh;
|
|
10
|
+
grid-auto-columns: 1fr;
|
|
11
|
+
grid-template-columns: var(--basegrid-cols);
|
|
12
|
+
grid-template-rows: var(--basegrid-rows);
|
|
13
|
+
gap: 0 1rem;
|
|
14
|
+
grid-template-areas: var(--basegrid);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body > header {
|
|
18
|
+
grid-area: header;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body > nav {
|
|
22
|
+
grid-area: nav;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body > main {
|
|
26
|
+
grid-area: content;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body > footer {
|
|
30
|
+
grid-area: footer;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
body > aside {
|
|
34
|
+
grid-area: side;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (min-width: 85rem) {
|
|
38
|
+
[data-nav] {
|
|
39
|
+
grid-area: side;
|
|
40
|
+
|
|
41
|
+
& > ul > li {
|
|
42
|
+
width: 100%;
|
|
43
|
+
margin-bottom: 1rem;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
package/css/breakout.css
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
[data-breakout] {
|
|
2
|
+
--col-breakout: var(--col-bg);
|
|
3
|
+
position: relative;
|
|
4
|
+
background: var(--col-breakout);
|
|
5
|
+
margin: 0 calc((50vw - 50%) * -1 + 1rem);
|
|
6
|
+
padding: 1rem calc(50vw - 50% - 1rem);
|
|
7
|
+
|
|
8
|
+
&::before {
|
|
9
|
+
content: "";
|
|
10
|
+
position: absolute;
|
|
11
|
+
inset: 0;
|
|
12
|
+
box-shadow: -2rem 0 0 0 var(--col-breakout), 2rem 0 0 0 var(--col-breakout);
|
|
13
|
+
z-index: -1;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[data-breakout="bg"] {
|
|
18
|
+
--col-breakout: var(--col-bg);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
[data-breakout="bg2"] {
|
|
22
|
+
--col-breakout: var(--col-bg2);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-breakout="bg3"] {
|
|
26
|
+
--col-breakout: var(--col-bg3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[data-breakout="accent"] {
|
|
30
|
+
--col-breakout: var(--col-accent);
|
|
31
|
+
color: var(--col-accent-contrast);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-breakout="accent2"] {
|
|
35
|
+
--col-breakout: var(--col-accent2);
|
|
36
|
+
color: var(--col-accent-contrast);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-breakout="fg"] {
|
|
40
|
+
--col-breakout: var(--col-fg);
|
|
41
|
+
color: var(--col-bg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-breakout="fg2"] {
|
|
45
|
+
--col-breakout: var(--col-fg2);
|
|
46
|
+
color: var(--col-bg);
|
|
47
|
+
}
|
package/css/callout.css
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
[data-callout] {
|
|
2
|
+
--col-callout: var(--col-fg2);
|
|
3
|
+
--col-callout-contrast: var(--col-bg);
|
|
4
|
+
|
|
5
|
+
border: 1px solid var(--col-callout);
|
|
6
|
+
background-color: color-mix(in oklab, var(--col-callout), var(--col-bg) 80%);
|
|
7
|
+
padding: 1rem;
|
|
8
|
+
border-radius: var(--border-radius);
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
text-wrap: wrap;
|
|
11
|
+
|
|
12
|
+
> header {
|
|
13
|
+
margin: -1rem -1rem 0;
|
|
14
|
+
padding: 1rem;
|
|
15
|
+
background: var(--col-callout);
|
|
16
|
+
color: var(--col-callout-contrast);
|
|
17
|
+
font-family: var(--font-accent);
|
|
18
|
+
|
|
19
|
+
> * {
|
|
20
|
+
margin: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
> :last-child {
|
|
25
|
+
margin-bottom: 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[data-callout="accent"] {
|
|
30
|
+
--col-callout: var(--col-accent);
|
|
31
|
+
--col-callout-contrast: var(--col-accent-contrast);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-callout="accent2"] {
|
|
35
|
+
--col-callout: var(--col-accent2);
|
|
36
|
+
--col-callout-contrast: var(--col-accent-contrast);
|
|
37
|
+
}
|
package/css/card.css
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
[data-card] {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
background-color: var(--col-bg2);
|
|
5
|
+
border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
|
|
6
|
+
var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
|
|
7
|
+
padding: 1rem 1ch;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
--t-translate: 0.25s;
|
|
10
|
+
translate: 0 0;
|
|
11
|
+
|
|
12
|
+
> [data-card-link] {
|
|
13
|
+
position: absolute;
|
|
14
|
+
inset: 0;
|
|
15
|
+
z-index: 2;
|
|
16
|
+
border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
|
|
17
|
+
var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
|
|
18
|
+
|
|
19
|
+
&:focus {
|
|
20
|
+
outline: 0.125rem solid dodgerblue;
|
|
21
|
+
outline-offset: -0.125rem;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:has([data-card-link]):is(:hover, :focus-within) {
|
|
26
|
+
translate: 0 -0.3rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
> header {
|
|
30
|
+
background-color: var(--col-bg3);
|
|
31
|
+
margin: -1rem -1ch 1rem;
|
|
32
|
+
padding: 1rem 1ch;
|
|
33
|
+
font-size: 1.2rem;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
> [data-card-background] {
|
|
38
|
+
position: relative;
|
|
39
|
+
margin: -1rem -1ch;
|
|
40
|
+
max-width: calc(100% + 2ch);
|
|
41
|
+
|
|
42
|
+
& * {
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
height: auto;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:has(figcaption) {
|
|
48
|
+
min-height: 3.5rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
> figcaption {
|
|
52
|
+
position: absolute;
|
|
53
|
+
bottom: 0;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding: 1rem 0;
|
|
56
|
+
text-align: center;
|
|
57
|
+
background: color-mix(in lch, var(--col-bg2), transparent 20%);
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
|
|
60
|
+
@media (prefers-reduced-transparency) {
|
|
61
|
+
background: var(--col-bg2);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
package/css/carousel.css
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
[data-carousel] {
|
|
2
|
+
display: flex;
|
|
3
|
+
gap: 1rem;
|
|
4
|
+
overflow-x: auto;
|
|
5
|
+
scroll-snap-type: x mandatory;
|
|
6
|
+
|
|
7
|
+
> * {
|
|
8
|
+
flex: 0 0 auto;
|
|
9
|
+
scroll-snap-align: center;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
[data-carousel="left"] > * {
|
|
14
|
+
scroll-snap-align: left;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[data-carousel="right"] > * {
|
|
18
|
+
scroll-snap-align: right;
|
|
19
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
main {
|
|
2
|
+
:is(a[href^="mailto:"], a[href^="tel:"]) {
|
|
3
|
+
&::before {
|
|
4
|
+
content: "";
|
|
5
|
+
display: inline-block;
|
|
6
|
+
width: 1rem;
|
|
7
|
+
height: 1rem;
|
|
8
|
+
margin-inline-end: 0.5ch;
|
|
9
|
+
background-color: currentColor;
|
|
10
|
+
vertical-align: middle;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:is(a[href^="mailto:"])::before {
|
|
15
|
+
clip-path: polygon(
|
|
16
|
+
0% 10%,
|
|
17
|
+
0% 90%,
|
|
18
|
+
0% 15%,
|
|
19
|
+
50% 44%,
|
|
20
|
+
100% 15%,
|
|
21
|
+
100% 25%,
|
|
22
|
+
50% 55%,
|
|
23
|
+
0% 25%,
|
|
24
|
+
0% 90%,
|
|
25
|
+
100% 90%,
|
|
26
|
+
100% 10%
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:is(a[href^="tel:"])::before {
|
|
31
|
+
clip-path: polygon(
|
|
32
|
+
38.25% 3%,
|
|
33
|
+
48.49% 7.69%,
|
|
34
|
+
53.16% 22.73%,
|
|
35
|
+
50.41% 30.82%,
|
|
36
|
+
41.86% 35.15%,
|
|
37
|
+
37.32% 44.33%,
|
|
38
|
+
40.78% 57.66%,
|
|
39
|
+
45.03% 66.21%,
|
|
40
|
+
53.75% 70.96%,
|
|
41
|
+
62.81% 66.9%,
|
|
42
|
+
68.65% 69.16%,
|
|
43
|
+
79.87% 84.23%,
|
|
44
|
+
79.84% 92.28%,
|
|
45
|
+
70.14% 96.77%,
|
|
46
|
+
59.46% 96.77%,
|
|
47
|
+
46.27% 93.26%,
|
|
48
|
+
33.24% 81.33%,
|
|
49
|
+
27.26% 64.7%,
|
|
50
|
+
19.65% 39.61%,
|
|
51
|
+
20.89% 17.71%,
|
|
52
|
+
24.95% 10.48%
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
package/css/flexgrid.css
ADDED
package/css/group.css
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
[data-group] {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
flex-wrap: wrap;
|
|
4
|
+
gap: 1px;
|
|
5
|
+
border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
|
|
6
|
+
var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
|
|
7
|
+
|
|
8
|
+
&:not([data-group="vertical"]) {
|
|
9
|
+
> *:first-child {
|
|
10
|
+
--br-tr: 0;
|
|
11
|
+
--br-br: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
> *:not(:first-child):not(:last-child) {
|
|
15
|
+
--br-tl: 0;
|
|
16
|
+
--br-tr: 0;
|
|
17
|
+
--br-bl: 0;
|
|
18
|
+
--br-br: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
> *:last-child {
|
|
22
|
+
--br-tl: 0;
|
|
23
|
+
--br-bl: 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&[data-group="vertical"] {
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
|
|
30
|
+
> *:first-child {
|
|
31
|
+
--br-bl: 0;
|
|
32
|
+
--br-br: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
> *:not(:first-child):not(:last-child) {
|
|
36
|
+
--br-tl: 0;
|
|
37
|
+
--br-tr: 0;
|
|
38
|
+
--br-bl: 0;
|
|
39
|
+
--br-br: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> *:last-child {
|
|
43
|
+
--br-tr: 0;
|
|
44
|
+
--br-tl: 0;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
package/css/headline.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
:is(h1, h2, h3, h4, h5, h6) {
|
|
2
|
+
> :first-child:is([href^="#"]) {
|
|
3
|
+
text-decoration: none;
|
|
4
|
+
color: currentColor;
|
|
5
|
+
color: var(--col-fg2);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:is(&:hover, &:focus-within) > :first-child:is([href^="#"]) {
|
|
9
|
+
color: var(--col-accent);
|
|
10
|
+
|
|
11
|
+
&:hover {
|
|
12
|
+
color: var(--col-accent2);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/css/loading.css
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@keyframes spin {
|
|
2
|
+
from {
|
|
3
|
+
rotate: 0;
|
|
4
|
+
}
|
|
5
|
+
to {
|
|
6
|
+
rotate: 360deg;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[data-loading],
|
|
11
|
+
button[aria-busy="true"] {
|
|
12
|
+
&::before {
|
|
13
|
+
content: "";
|
|
14
|
+
display: inline-block;
|
|
15
|
+
vertical-align: text-bottom;
|
|
16
|
+
margin-right: 0.5ch;
|
|
17
|
+
animation: spin 1s linear infinite;
|
|
18
|
+
width: 1em;
|
|
19
|
+
aspect-ratio: 1;
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
border: 0.2rem solid color-mix(in srgb, currentColor, transparent 66%);
|
|
22
|
+
border-top-color: currentColor;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:is(button)::before {
|
|
26
|
+
margin-right: 1ch;
|
|
27
|
+
}
|
|
28
|
+
}
|
package/css/nav.css
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[data-nav] {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding-right: 1rem;
|
|
4
|
+
text-wrap: wrap;
|
|
5
|
+
|
|
6
|
+
> ul {
|
|
7
|
+
position: sticky;
|
|
8
|
+
top: 1rem;
|
|
9
|
+
list-style: none;
|
|
10
|
+
padding: 0;
|
|
11
|
+
|
|
12
|
+
> li {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
font-weight: 600;
|
|
15
|
+
|
|
16
|
+
&:not(:last-of-type) {
|
|
17
|
+
margin-right: 1rem;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
package/css/nolist.css
ADDED
package/css/shadow.css
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
[data-shadow] {
|
|
2
|
+
box-shadow: 0px calc(var(--shadow-mod, var(--shadow-level)) * var(--shadow-mod, var(--shadow-level)) * 1px)
|
|
3
|
+
calc(var(--shadow-level) * var(--shadow-level) * 2px)
|
|
4
|
+
calc(var(--shadow-mod, var(--shadow-level)) * 1px - 1px) rgba(0, 0, 0, 0.14),
|
|
5
|
+
0px 3px calc((var(--shadow-mod, var(--shadow-level)) - 1) * 5px)
|
|
6
|
+
calc((var(--shadow-mod, var(--shadow-level)) - 2) * 2px) rgba(0, 0, 0, 0.12),
|
|
7
|
+
0px calc((var(--shadow-mod, var(--shadow-level)) - 1) * 1.5px)
|
|
8
|
+
calc(var(--shadow-mod, var(--shadow-level)) * 2px)
|
|
9
|
+
calc((var(--shadow-mod, var(--shadow-level)) - 1) * 1.5px) rgba(0, 0, 0, 0.2);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[data-shadow$="-hover"] {
|
|
13
|
+
--t-box-shadow: 0.2s;
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
--shadow-mod: calc(var(--shadow-level) + 1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[data-shadow^="1"] {
|
|
21
|
+
--shadow-level: 1;
|
|
22
|
+
}
|
|
23
|
+
[data-shadow^="2"] {
|
|
24
|
+
--shadow-level: 2;
|
|
25
|
+
}
|
|
26
|
+
[data-shadow^="3"] {
|
|
27
|
+
--shadow-level: 3;
|
|
28
|
+
}
|
|
29
|
+
[data-shadow^="4"] {
|
|
30
|
+
--shadow-level: 4;
|
|
31
|
+
}
|
|
32
|
+
[data-shadow^="5"] {
|
|
33
|
+
--shadow-level: 5;
|
|
34
|
+
}
|
package/css/skiplink.css
ADDED
package/css/style.css
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@layer base, layout, components;
|
|
2
|
+
|
|
3
|
+
@import "./base.css" layer(base);
|
|
4
|
+
@import "./transition.css" layer(base);
|
|
5
|
+
|
|
6
|
+
@import "./basegrid.css" layer(layout);
|
|
7
|
+
@import "./flexgrid.css" layer(layout);
|
|
8
|
+
@import "./group.css" layer(layout);
|
|
9
|
+
@import "./breakout.css" layer(layout);
|
|
10
|
+
@import "./autogrid.css" layer(layout);
|
|
11
|
+
@import "./nolist.css" layer(components);
|
|
12
|
+
@import "./skiplink.css" layer(components);
|
|
13
|
+
@import "./contactlinks.css" layer(components);
|
|
14
|
+
@import "./headline.css" layer(components);
|
|
15
|
+
@import "./nav.css" layer(components);
|
|
16
|
+
@import "./card.css" layer(components);
|
|
17
|
+
@import "./toggle.css" layer(components);
|
|
18
|
+
@import "./loading.css" layer(components);
|
|
19
|
+
@import "./actionlink.css" layer(components);
|
|
20
|
+
@import "./carousel.css" layer(components);
|
|
21
|
+
@import "./callout.css" layer(components);
|
|
22
|
+
@import "./shadow.css" layer(components);
|
|
23
|
+
@import "./animation.css" layer(components);
|
package/css/toggle.css
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
input[type="checkbox"][data-toggle] {
|
|
2
|
+
appearance: none;
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-grid;
|
|
5
|
+
align-items: center;
|
|
6
|
+
padding: 0 0.75em;
|
|
7
|
+
background: var(--col-bg);
|
|
8
|
+
height: 1.65em;
|
|
9
|
+
width: 2.75em;
|
|
10
|
+
border-radius: 2em;
|
|
11
|
+
vertical-align: middle;
|
|
12
|
+
&:not([disabled], [aria-disabled]) {
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&::before {
|
|
17
|
+
content: "";
|
|
18
|
+
width: 1em;
|
|
19
|
+
height: 1em;
|
|
20
|
+
background: var(--col-fg);
|
|
21
|
+
border-radius: 1.2em;
|
|
22
|
+
top: 0.2em;
|
|
23
|
+
left: 0.2em;
|
|
24
|
+
transition: 0.1s ease-out transform, 0.1s ease-out background;
|
|
25
|
+
transform: translateX(-0.5em);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:checked::before {
|
|
29
|
+
transform: translateX(0.5em);
|
|
30
|
+
background: var(--col-accent);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:focus-visible {
|
|
34
|
+
outline: 0.125rem solid dodgerblue;
|
|
35
|
+
outline-offset: 0.125rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:is([disabled], [aria-disabled]) {
|
|
39
|
+
filter: contrast(0.5);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
* {
|
|
2
|
+
transition: transform var(--t-transform, 0s) ease-out, translate var(--t-translate, 0s) ease-out,
|
|
3
|
+
rotate var(--t-rotate, 0s) ease-out, scale var(--t-scale, 0s) ease-out,
|
|
4
|
+
box-shadow var(--t-box-shadow, 0s) ease-out, color var(--t-color, 0s) ease-out,
|
|
5
|
+
background var(--t-background, 0s) ease-out, border-color var(--t-border-color, 0s) ease-out,
|
|
6
|
+
filter var(--t-filter, 0s) ease-out, opacity var(--t-opacity, 0s) ease-out;
|
|
7
|
+
}
|
package/dist/base.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer ssstyles_base{:root{--body-width: 45rem;--col-bg: #eee;--col-bg2: #e8e8e8;--col-bg3: #dfdfdf;--col-fg: #333;--col-fg2: #7c8386;--col-accent: #b2033a;--col-accent2: #1c618f;--col-accent-contrast: #eee;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-mono: Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;--font-size-min: 1rem;--font-size-max: 1.2rem;--line-height: 1.6;--letter-spacing: .01875em;--border-radius: 10px}@media (prefers-color-scheme: dark){:root{--col-bg: #15181a;--col-bg2: #161e21;--col-bg3: #1a2225;--col-fg: #eee;--col-fg2: #7c8386;--col-accent: #ff297a;--col-accent2: #72c4ff;--col-accent-contrast: #111}}}@layer ssstyles_base{@media (prefers-contrast: more){:root{--col-bg: #fff;--col-bg2: #fff;--col-bg3: #fff;--col-fg: #000;--col-fg2: #000;--col-accent: #800;--col-accent2: #00f;--col-accent-contrast: #fff}}@media (prefers-contrast: more) and (prefers-color-scheme: dark){:root{--col-bg: #000;--col-bg2: #000;--col-bg3: #000;--col-fg: #fff;--col-fg2: #fff;--col-accent: #ff0;--col-accent2: #0ff;--col-accent-contrast: #000}}}@layer ssstyles_base{:root{color-scheme:light dark;background-color:var(--col-bg);color:var(--col-fg)}*{accent-color:var(--col-accent)}a:not([data-button]){color:var(--col-accent);&:hover{color:var(--col-accent2)}}}@layer ssstyles_base{:root{box-sizing:border-box}body{max-width:var(--body-width);margin:auto;padding:0 1rem;word-wrap:break-word;>:is(header,footer){position:relative;margin:0 calc((50vw - 50%)*-1 + 1rem);padding:2rem calc(50vw - 50% - 1rem);background:var(--col-bg3);&:before{content:"";position:absolute;inset:0;box-shadow:-2rem 0 0 0 var(--col-bg3),2rem 0 0 0 var(--col-bg3);z-index:-1}}&:not(:has(header)){padding-top:1rem}&:not(:has(footer)){padding-bottom:1rem}>header{margin-bottom:1rem}>footer{margin-top:5rem}}figure,video,canvas,iframe{display:block;max-width:100%;margin-inline-start:0;margin-inline-end:0}img,svg{max-width:100%;height:auto;vertical-align:text-bottom}}@layer ssstyles_base{*{word-break:break-word;hyphens:auto}:root{font-family:var(--font);font-size:min(max(var(--font-size-min),1.5vw),var(--font-size-max));line-height:var(--line-height);letter-spacing:var(--letter-spacing);text-wrap:balance;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;font-family:var(--font-accent, var(--font))}h2,h3,h4,h5,h6{margin-top:3.5rem;font-family:var(--font-accent, var(--font))}input,button,textarea,select{font:inherit}}@layer ssstyles_base{fieldset{background-color:var(--col-bg2);border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));border-color:var(--col-bg3);border-style:solid;:is(input:not(:is([type=button],[type=submit],[type=reset])),textarea,select){background-color:color-mix(in lch,var(--col-bg2) 95%,var(--col-fg));border-color:var(--col-fg2)}}input:not(:is([type=button],[type=submit],[type=reset])),textarea,select{padding:.1rem 1ch;background-color:var(--col-bg2);border:.125rem solid var(--col-fg2);--br-tl: var(--border-radius);--br-tr: var(--border-radius);--br-bl: var(--border-radius);--br-br: var(--border-radius);border-radius:var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl)}textarea{max-width:100%}select{-webkit-appearance:none;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%2740%27%20width%3D%27100%27%20fill%3D%22%23888%22%3E%3Cpolygon%20points%3D%220%2C0%2050%2C40%20100%2C0%22%2F%3E%3C%2Fsvg%3E) calc(100% - .8rem) 50%/.8rem no-repeat;padding-right:2rem}}@layer ssstyles_base{button,[data-button],input[type=submit],input[type=button],input[type=reset]{--col-button: var(--col-accent);--col-button2: var(--col-button);--pos-gradient: -.25rem;padding:.25rem 1ch;border:none;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));color:var(--col-accent-contrast);font-weight:500;text-decoration:none;cursor:pointer;background:linear-gradient(to bottom,var(--col-button2) calc(100% + var(--pos-gradient)),color-mix(in oklab,var(--col-button2),black 20%) calc(100% + var(--pos-gradient)));&:hover:not(:is([disabled],[aria-disabled])){--col-button2: color-mix(in oklab, var(--col-button), white 10%)}&:active:not(:is([disabled],[aria-disabled])){--pos-gradient: -.35rem}&[data-button=accent2]{--col-button: var(--col-accent2)}}}@layer ssstyles_base{table{border-collapse:collapse;table-layout:fixed;min-width:100%}figure:has(table){overflow-x:auto}thead{border-bottom:.125rem solid var(--col-bg3)}tbody tr:nth-child(2n){background-color:var(--col-bg2)}td,th{padding:.5rem 1ch;text-align:left;vertical-align:top;white-space:nowrap}tfoot{border-top:.125rem solid var(--col-bg3)}dl{& dd{margin-inline-start:.5ch;&:before{content:"\251c";margin-inline-end:.5ch;font-family:var(--font-mono);font-size:2em;position:relative;top:.4rem;line-height:0;color:var(--col-fg2)}&:last-of-type:before,&:has(+dt):before{content:"\2514"}}}}@layer ssstyles_base{details{background-color:var(--col-bg2);border-color:var(--col-bg3);border-style:solid;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));padding:.5rem 1ch;>summary{position:relative;font-weight:500;cursor:pointer;padding-left:1rem;list-style-type:none;&::marker,&::-webkit-details-marker{display:none}&:before{content:"";position:absolute;left:-1ch;width:0;height:0;border:.5rem solid transparent;border-left:.5rem solid var(--col-accent);transform:translate(.625rem,.25lh) rotate(var(--dstr, 0deg));transform-origin:25% center;transition:transform .1s ease-out}&:hover:before{border-left-color:var(--col-accent2)}}&[open]>summary{margin-bottom:1rem;&:before{--dstr: 90deg}}}}@layer ssstyles_base{blockquote{margin:1rem 0;padding:1rem 2ch;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));background:var(--col-bg2);font-size:1.2rem;font-style:italic;border:2px solid var(--col-bg3);>footer{font-size:1rem;margin:1rem 0 0 2ch;font-style:normal;&:before{content:"\2014 "}cite{font-style:italic}}}figure>blockquote{margin:0}}@layer ssstyles_base{code,kbd,pre{background:var(--col-bg2);border:.125rem solid var(--col-bg3);border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));padding:.05rem .5ch;font-size:.8rem;font-family:var(--font-mono);font-weight:600;color:var(--col-accent2);max-width:100%;overflow:auto;text-wrap:nowrap}pre{padding:.5rem;margin:1rem 0}kbd{border-bottom:.25rem solid var(--col-bg3);border-radius:var(--border-radius) var(--border-radius) 5px 5px;font-weight:700}pre code,code pre{background:inherit;font-size:inherit;color:inherit;border:0;margin:0;padding:0}code pre{display:inline}}@layer ssstyles_base{@keyframes dialog-fade-in{0%{opacity:0;translate:0 1rem}to{opacity:1;translate:0 0}}body:has(dialog[open]){overflow:hidden}dialog{padding:1rem 2ch;border:.125rem solid var(--col-bg3);background:var(--col-bg);@media (prefers-reduced-motion: no-preference){animation:dialog-fade-in .1s ease-out}>header{background:var(--col-bg3);margin:-1rem -2ch 1rem;padding:1rem 2ch;font-weight:700}&::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);animation:fade-in .1s ease-out}}}@layer ssstyles_base{hr{border:.125rem solid var(--col-bg3);border-radius:var(--border-radius);margin:5rem 0}[disabled],[aria-disabled]{cursor:not-allowed;filter:saturate(0)}abbr{cursor:help}mark{background-color:var(--col-accent2);color:var(--col-accent-contrast)}}
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer base,layout,components;@layer base{@layer ssstyles_base{:root{--body-width: 45rem;--col-bg: #eee;--col-bg2: #e8e8e8;--col-bg3: #dfdfdf;--col-fg: #333;--col-fg2: #7c8386;--col-accent: #b2033a;--col-accent2: #1c618f;--col-accent-contrast: #eee;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-mono: Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;--font-size-min: 1rem;--font-size-max: 1.2rem;--line-height: 1.6;--letter-spacing: .01875em;--border-radius: 10px}@media (prefers-color-scheme: dark){:root{--col-bg: #15181a;--col-bg2: #161e21;--col-bg3: #1a2225;--col-fg: #eee;--col-fg2: #7c8386;--col-accent: #ff297a;--col-accent2: #72c4ff;--col-accent-contrast: #111}}}}@layer base{@layer ssstyles_base{@media (prefers-contrast: more){:root{--col-bg: #fff;--col-bg2: #fff;--col-bg3: #fff;--col-fg: #000;--col-fg2: #000;--col-accent: #800;--col-accent2: #00f;--col-accent-contrast: #fff}}@media (prefers-contrast: more) and (prefers-color-scheme: dark){:root{--col-bg: #000;--col-bg2: #000;--col-bg3: #000;--col-fg: #fff;--col-fg2: #fff;--col-accent: #ff0;--col-accent2: #0ff;--col-accent-contrast: #000}}}}@layer base{@layer ssstyles_base{:root{color-scheme:light dark;background-color:var(--col-bg);color:var(--col-fg)}*{accent-color:var(--col-accent)}a:not([data-button]){color:var(--col-accent);&:hover{color:var(--col-accent2)}}}}@layer base{@layer ssstyles_base{:root{box-sizing:border-box}body{max-width:var(--body-width);margin:auto;padding:0 1rem;word-wrap:break-word;>:is(header,footer){position:relative;margin:0 calc((50vw - 50%)*-1 + 1rem);padding:2rem calc(50vw - 50% - 1rem);background:var(--col-bg3);&:before{content:"";position:absolute;inset:0;box-shadow:-2rem 0 0 0 var(--col-bg3),2rem 0 0 0 var(--col-bg3);z-index:-1}}&:not(:has(header)){padding-top:1rem}&:not(:has(footer)){padding-bottom:1rem}>header{margin-bottom:1rem}>footer{margin-top:5rem}}figure,video,canvas,iframe{display:block;max-width:100%;margin-inline-start:0;margin-inline-end:0}img,svg{max-width:100%;height:auto;vertical-align:text-bottom}}}@layer base{@layer ssstyles_base{*{word-break:break-word;hyphens:auto}:root{font-family:var(--font);font-size:min(max(var(--font-size-min),1.5vw),var(--font-size-max));line-height:var(--line-height);letter-spacing:var(--letter-spacing);text-wrap:balance;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;font-family:var(--font-accent, var(--font))}h2,h3,h4,h5,h6{margin-top:3.5rem;font-family:var(--font-accent, var(--font))}input,button,textarea,select{font:inherit}}}@layer base{@layer ssstyles_base{fieldset{background-color:var(--col-bg2);border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));border-color:var(--col-bg3);border-style:solid;:is(input:not(:is([type=button],[type=submit],[type=reset])),textarea,select){background-color:color-mix(in lch,var(--col-bg2) 95%,var(--col-fg));border-color:var(--col-fg2)}}input:not(:is([type=button],[type=submit],[type=reset])),textarea,select{padding:.1rem 1ch;background-color:var(--col-bg2);border:.125rem solid var(--col-fg2);--br-tl: var(--border-radius);--br-tr: var(--border-radius);--br-bl: var(--border-radius);--br-br: var(--border-radius);border-radius:var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl)}textarea{max-width:100%}select{-webkit-appearance:none;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%2740%27%20width%3D%27100%27%20fill%3D%22%23888%22%3E%3Cpolygon%20points%3D%220%2C0%2050%2C40%20100%2C0%22%2F%3E%3C%2Fsvg%3E) calc(100% - .8rem) 50%/.8rem no-repeat;padding-right:2rem}}}@layer base{@layer ssstyles_base{button,[data-button],input[type=submit],input[type=button],input[type=reset]{--col-button: var(--col-accent);--col-button2: var(--col-button);--pos-gradient: -.25rem;padding:.25rem 1ch;border:none;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));color:var(--col-accent-contrast);font-weight:500;text-decoration:none;cursor:pointer;background:linear-gradient(to bottom,var(--col-button2) calc(100% + var(--pos-gradient)),color-mix(in oklab,var(--col-button2),black 20%) calc(100% + var(--pos-gradient)));&:hover:not(:is([disabled],[aria-disabled])){--col-button2: color-mix(in oklab, var(--col-button), white 10%)}&:active:not(:is([disabled],[aria-disabled])){--pos-gradient: -.35rem}&[data-button=accent2]{--col-button: var(--col-accent2)}}}}@layer base{@layer ssstyles_base{table{border-collapse:collapse;table-layout:fixed;min-width:100%}figure:has(table){overflow-x:auto}thead{border-bottom:.125rem solid var(--col-bg3)}tbody tr:nth-child(2n){background-color:var(--col-bg2)}td,th{padding:.5rem 1ch;text-align:left;vertical-align:top;white-space:nowrap}tfoot{border-top:.125rem solid var(--col-bg3)}dl{& dd{margin-inline-start:.5ch;&:before{content:"\251c";margin-inline-end:.5ch;font-family:var(--font-mono);font-size:2em;position:relative;top:.4rem;line-height:0;color:var(--col-fg2)}&:last-of-type:before,&:has(+dt):before{content:"\2514"}}}}}@layer base{@layer ssstyles_base{details{background-color:var(--col-bg2);border-color:var(--col-bg3);border-style:solid;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));padding:.5rem 1ch;>summary{position:relative;font-weight:500;cursor:pointer;padding-left:1rem;list-style-type:none;&::marker,&::-webkit-details-marker{display:none}&:before{content:"";position:absolute;left:-1ch;width:0;height:0;border:.5rem solid transparent;border-left:.5rem solid var(--col-accent);transform:translate(.625rem,.25lh) rotate(var(--dstr, 0deg));transform-origin:25% center;transition:transform .1s ease-out}&:hover:before{border-left-color:var(--col-accent2)}}&[open]>summary{margin-bottom:1rem;&:before{--dstr: 90deg}}}}}@layer base{@layer ssstyles_base{blockquote{margin:1rem 0;padding:1rem 2ch;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));background:var(--col-bg2);font-size:1.2rem;font-style:italic;border:2px solid var(--col-bg3);>footer{font-size:1rem;margin:1rem 0 0 2ch;font-style:normal;&:before{content:"\2014 "}cite{font-style:italic}}}figure>blockquote{margin:0}}}@layer base{@layer ssstyles_base{code,kbd,pre{background:var(--col-bg2);border:.125rem solid var(--col-bg3);border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));padding:.05rem .5ch;font-size:.8rem;font-family:var(--font-mono);font-weight:600;color:var(--col-accent2);max-width:100%;overflow:auto;text-wrap:nowrap}pre{padding:.5rem;margin:1rem 0}kbd{border-bottom:.25rem solid var(--col-bg3);border-radius:var(--border-radius) var(--border-radius) 5px 5px;font-weight:700}pre code,code pre{background:inherit;font-size:inherit;color:inherit;border:0;margin:0;padding:0}code pre{display:inline}}}@layer base{@layer ssstyles_base{@keyframes dialog-fade-in{0%{opacity:0;translate:0 1rem}to{opacity:1;translate:0 0}}body:has(dialog[open]){overflow:hidden}dialog{padding:1rem 2ch;border:.125rem solid var(--col-bg3);background:var(--col-bg);@media (prefers-reduced-motion: no-preference){animation:dialog-fade-in .1s ease-out}>header{background:var(--col-bg3);margin:-1rem -2ch 1rem;padding:1rem 2ch;font-weight:700}&::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);animation:fade-in .1s ease-out}}}}@layer base{@layer ssstyles_base{hr{border:.125rem solid var(--col-bg3);border-radius:var(--border-radius);margin:5rem 0}[disabled],[aria-disabled]{cursor:not-allowed;filter:saturate(0)}abbr{cursor:help}mark{background-color:var(--col-accent2);color:var(--col-accent-contrast)}}}@layer base;@layer base{*{transition:transform var(--t-transform, 0s) ease-out,translate var(--t-translate, 0s) ease-out,rotate var(--t-rotate, 0s) ease-out,scale var(--t-scale, 0s) ease-out,box-shadow var(--t-box-shadow, 0s) ease-out,color var(--t-color, 0s) ease-out,background var(--t-background, 0s) ease-out,border-color var(--t-border-color, 0s) ease-out,filter var(--t-filter, 0s) ease-out,opacity var(--t-opacity, 0s) ease-out}}@layer layout{:root{--basegrid: "header ." "nav side" "content side" "footer .";--basegrid-rows: max-content max-content auto max-content;--basegrid-cols: 100% 20ch}body{display:grid;min-height:100vh;grid-auto-columns:1fr;grid-template-columns:var(--basegrid-cols);grid-template-rows:var(--basegrid-rows);gap:0 1rem;grid-template-areas:var(--basegrid)}body>header{grid-area:header}body>nav{grid-area:nav}body>main{grid-area:content}body>footer{grid-area:footer}body>aside{grid-area:side}@media (min-width: 85rem){[data-nav]{grid-area:side;>ul>li{width:100%;margin-bottom:1rem}}}}@layer layout{[data-flexgrid]{display:flex;flex-wrap:wrap;gap:1rem;>*{flex:1 1 auto}}}@layer layout{[data-group]{display:inline-flex;flex-wrap:wrap;gap:1px;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));&:not([data-group=vertical]){>*:first-child{--br-tr: 0;--br-br: 0}>*:not(:first-child):not(:last-child){--br-tl: 0;--br-tr: 0;--br-bl: 0;--br-br: 0}>*:last-child{--br-tl: 0;--br-bl: 0}}&[data-group=vertical]{flex-direction:column;>*:first-child{--br-bl: 0;--br-br: 0}>*:not(:first-child):not(:last-child){--br-tl: 0;--br-tr: 0;--br-bl: 0;--br-br: 0}>*:last-child{--br-tr: 0;--br-tl: 0}}}}@layer layout{[data-breakout]{--col-breakout: var(--col-bg);position:relative;background:var(--col-breakout);margin:0 calc((50vw - 50%)*-1 + 1rem);padding:1rem calc(50vw - 50% - 1rem);&:before{content:"";position:absolute;inset:0;box-shadow:-2rem 0 0 0 var(--col-breakout),2rem 0 0 0 var(--col-breakout);z-index:-1}}[data-breakout=bg]{--col-breakout: var(--col-bg)}[data-breakout=bg2]{--col-breakout: var(--col-bg2)}[data-breakout=bg3]{--col-breakout: var(--col-bg3)}[data-breakout=accent]{--col-breakout: var(--col-accent);color:var(--col-accent-contrast)}[data-breakout=accent2]{--col-breakout: var(--col-accent2);color:var(--col-accent-contrast)}[data-breakout=fg]{--col-breakout: var(--col-fg);color:var(--col-bg)}[data-breakout=fg2]{--col-breakout: var(--col-fg2);color:var(--col-bg)}}@layer layout{[data-autogrid]{--gap: 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--grid-item-width),1fr));justify-items:stretch;align-items:flex-start;gap:var(--gap)}[data-autogrid="1/4"]{--grid-item-width: max(calc(25% - var(--gap) * 3), 140px)}[data-autogrid="1/3"]{--grid-item-width: max(calc(33% - var(--gap) * 2), 200px)}[data-autogrid="1/2"]{--grid-item-width: max(calc(50% - var(--gap)), 240px)}}@layer components{[data-hint=nolist]{list-style:none;padding:0}}@layer components{[data-skiplink]{position:absolute;&:not(:focus,:focus-within){clip:rect(1px,1px,1px,1px);pointer-events:none;overflow:hidden;height:1px;width:1px;border:0;padding:0;position:absolute}}}@layer components{main{:is(a[href^="mailto:"],a[href^="tel:"]){&:before{content:"";display:inline-block;width:1rem;height:1rem;margin-inline-end:.5ch;background-color:currentColor;vertical-align:middle}}:is(a[href^="mailto:"]):before{clip-path:polygon(0% 10%,0% 90%,0% 15%,50% 44%,100% 15%,100% 25%,50% 55%,0% 25%,0% 90%,100% 90%,100% 10%)}:is(a[href^="tel:"]):before{clip-path:polygon(38.25% 3%,48.49% 7.69%,53.16% 22.73%,50.41% 30.82%,41.86% 35.15%,37.32% 44.33%,40.78% 57.66%,45.03% 66.21%,53.75% 70.96%,62.81% 66.9%,68.65% 69.16%,79.87% 84.23%,79.84% 92.28%,70.14% 96.77%,59.46% 96.77%,46.27% 93.26%,33.24% 81.33%,27.26% 64.7%,19.65% 39.61%,20.89% 17.71%,24.95% 10.48%)}}}@layer components{:is(h1,h2,h3,h4,h5,h6){>:first-child:is([href^="#"]){text-decoration:none;color:currentColor;color:var(--col-fg2)}:is(&:hover,&:focus-within)>:first-child:is([href^="#"]){color:var(--col-accent);&:hover{color:var(--col-accent2)}}}}@layer components{[data-nav]{position:relative;padding-right:1rem;text-wrap:wrap;>ul{position:sticky;top:1rem;list-style:none;padding:0;>li{display:inline-block;font-weight:600;&:not(:last-of-type){margin-right:1rem}}}}}@layer components{[data-card]{position:relative;display:inline-block;background-color:var(--col-bg2);border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));padding:1rem 1ch;overflow:hidden;--t-translate: .25s;translate:0 0;>[data-card-link]{position:absolute;inset:0;z-index:2;border-radius:var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));&:focus{outline:.125rem solid dodgerblue;outline-offset:-.125rem}}&:has([data-card-link]):is(:hover,:focus-within){translate:0 -.3rem}>header{background-color:var(--col-bg3);margin:-1rem -1ch 1rem;padding:1rem 1ch;font-size:1.2rem;font-weight:600}>[data-card-background]{position:relative;margin:-1rem -1ch;max-width:calc(100% + 2ch);& *{max-width:100%;height:auto}&:has(figcaption){min-height:3.5rem}>figcaption{position:absolute;bottom:0;width:100%;padding:1rem 0;text-align:center;background:color-mix(in lch,var(--col-bg2),transparent 20%);font-weight:500;@media (prefers-reduced-transparency){background:var(--col-bg2)}}}}}@layer components{input[type=checkbox][data-toggle]{appearance:none;position:relative;display:inline-grid;align-items:center;padding:0 .75em;background:var(--col-bg);height:1.65em;width:2.75em;border-radius:2em;vertical-align:middle;&:not([disabled],[aria-disabled]){cursor:pointer}&:before{content:"";width:1em;height:1em;background:var(--col-fg);border-radius:1.2em;top:.2em;left:.2em;transition:.1s ease-out transform,.1s ease-out background;transform:translate(-.5em)}&:checked:before{transform:translate(.5em);background:var(--col-accent)}&:focus-visible{outline:.125rem solid dodgerblue;outline-offset:.125rem}&:is([disabled],[aria-disabled]){filter:contrast(.5)}}}@layer components{@keyframes spin{0%{rotate:0}to{rotate:360deg}}[data-loading],button[aria-busy=true]{&:before{content:"";display:inline-block;vertical-align:text-bottom;margin-right:.5ch;animation:spin 1s linear infinite;width:1em;aspect-ratio:1;border-radius:50%;border:.2rem solid color-mix(in srgb,currentColor,transparent 66%);border-top-color:currentColor}&:is(button):before{margin-right:1ch}}}@layer components{[data-actionlink]{--actionlink-size: 3rem;--col-button: var(--col-accent);position:fixed;bottom:2rem;right:2rem;min-height:var(--actionlink-size);min-width:var(--actionlink-size);border-radius:var(--actionlink-size);background-color:var(--col-button);color:var(--col-accent-contrast);font-weight:600;display:grid;place-items:center;padding:1ch;text-decoration:none;z-index:1;&:hover{background-color:color-mix(in oklab,var(--col-button),white 10%)}}}@layer components{[data-carousel]{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;>*{flex:0 0 auto;scroll-snap-align:center}}[data-carousel=left]>*{scroll-snap-align:left}[data-carousel=right]>*{scroll-snap-align:right}}@layer components{[data-callout]{--col-callout: var(--col-fg2);--col-callout-contrast: var(--col-bg);border:1px solid var(--col-callout);background-color:color-mix(in oklab,var(--col-callout),var(--col-bg) 80%);padding:1rem;border-radius:var(--border-radius);overflow:hidden;text-wrap:wrap;>header{margin:-1rem -1rem 0;padding:1rem;background:var(--col-callout);color:var(--col-callout-contrast);font-family:var(--font-accent);>*{margin:0}}>:last-child{margin-bottom:0}}[data-callout=accent]{--col-callout: var(--col-accent);--col-callout-contrast: var(--col-accent-contrast)}[data-callout=accent2]{--col-callout: var(--col-accent2);--col-callout-contrast: var(--col-accent-contrast)}}@layer components{[data-shadow]{box-shadow:0 calc(var(--shadow-mod, var(--shadow-level)) * var(--shadow-mod, var(--shadow-level)) * 1px) calc(var(--shadow-level) * var(--shadow-level) * 2px) calc(var(--shadow-mod, var(--shadow-level)) * 1px - 1px) #00000024,0 3px calc((var(--shadow-mod, var(--shadow-level)) - 1) * 5px) calc((var(--shadow-mod, var(--shadow-level)) - 2) * 2px) #0000001f,0 calc((var(--shadow-mod, var(--shadow-level)) - 1) * 1.5px) calc(var(--shadow-mod, var(--shadow-level)) * 2px) calc((var(--shadow-mod, var(--shadow-level)) - 1) * 1.5px) #0003}[data-shadow$=-hover]{--t-box-shadow: .2s;&:hover{--shadow-mod: calc(var(--shadow-level) + 1)}}[data-shadow^="1"]{--shadow-level: 1}[data-shadow^="2"]{--shadow-level: 2}[data-shadow^="3"]{--shadow-level: 3}[data-shadow^="4"]{--shadow-level: 4}[data-shadow^="5"]{--shadow-level: 5}}@layer components{@keyframes fade-in{0%{opacity:0;translate:0 1rem}to{opacity:1;translate:0 0}}[data-fade-in]{view-timeline-name:--fade-in;view-timeline-axis:block;@media (prefers-reduced-motion: no-preference){animation:ease-in-out fade-in both;animation-timeline:--fade-in;animation-range:entry -10% cover 20%}}@keyframes sparkle{0%{opacity:0;translate:-.7ch -10%}10%{opacity:1;translate:-.7ch -10%}20%{opacity:0;translate:-.7ch -10%}25%{opacity:0;translate:60% -30%}35%{opacity:1;translate:60% -30%}45%{opacity:0;translate:60% -30%}55%{opacity:0;translate:30% 0}65%{opacity:1;translate:30% 0}75%{opacity:0;translate:30% 0}80%{opacity:0;translate:calc(100% - 1.3ch) -20%}90%{opacity:1;translate:calc(100% - 1.3ch) -20%}to{opacity:0;translate:calc(100% - 1.3ch) -20%}}[data-sparkle]{--sparkle-color: oklch(100% 0 259.28 / 100%);position:relative;text-shadow:0 0 10px var(--sparkle-color);letter-spacing:calc(var(--letter-spacing) + .03em);&:before,&:after{content:"\2728";position:absolute;inset:0;text-shadow:0 0 10px var(--sparkle-color);animation:sparkle 3s ease-in-out infinite;@media (prefers-reduced-motion){animation:none}}&:after{animation-delay:1s}@media (prefers-color-scheme: dark){--sparkle-color: oklch(100% 0 259.28 / 50%)}@media (prefers-reduced-motion){&:before,&:after{animation:none;position:relative}}}}
|
package/esbuild.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const esbuild = require("esbuild");
|
|
2
|
+
|
|
3
|
+
const watchFlag = process.argv.indexOf("--watch") > -1;
|
|
4
|
+
const minifyFlag = process.argv.indexOf("--minify") > -1;
|
|
5
|
+
|
|
6
|
+
const opts = {
|
|
7
|
+
entryPoints: ["./css/style.css", "./css/base.css"],
|
|
8
|
+
outdir: "dist",
|
|
9
|
+
bundle: true,
|
|
10
|
+
minify: minifyFlag,
|
|
11
|
+
sourcemap: minifyFlag ? false : "both",
|
|
12
|
+
loader: {
|
|
13
|
+
".woff": "file",
|
|
14
|
+
".woff2": "file",
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
if (watchFlag) {
|
|
19
|
+
esbuild.context(opts).then((ctx) => {
|
|
20
|
+
ctx.watch();
|
|
21
|
+
});
|
|
22
|
+
} else {
|
|
23
|
+
esbuild.build(opts);
|
|
24
|
+
}
|