@master/internal-site 0.2.5 → 0.2.6
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/package.json +8 -8
- package/src/demo/specimens/background-attachment.json +3 -3
- package/src/demo/specimens/background-origin.json +9 -9
- package/src/demo/specimens/clip-path.json +3 -3
- package/src/demo/specimens/counter-set.json +8 -8
- package/src/demo/specimens/filter.json +6 -6
- package/src/demo/specimens/grid-auto-flow.json +3 -3
- package/src/demo/specimens/grid-template-areas.json +5 -5
- package/src/demo/specimens/grid-template-columns.json +6 -6
- package/src/demo/specimens/justify-content.json +8 -8
- package/src/demo/specimens/mask-image.json +3 -3
- package/src/demo/specimens/object-position.json +6 -6
- package/src/demo/specimens/place-content.json +4 -4
- package/src/demo/specimens/scroll-snap-stop.json +3 -3
- package/src/demo/specimens/shape-margin.json +5 -5
- package/src/demo/specimens/shape-outside.json +3 -3
- package/src/demo/specimens/transform-origin.json +3 -3
- package/src/scripts/atomic-class-authoring.ts +4 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@master/internal-site",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "First-party Astro and Svelte website framework for Master sites.",
|
|
6
6
|
"engines": {
|
|
@@ -308,14 +308,14 @@
|
|
|
308
308
|
"peerDependencies": {
|
|
309
309
|
"astro": "7.4.2",
|
|
310
310
|
"svelte": "5.57.2",
|
|
311
|
-
"@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
312
|
-
"@master/css-astro": "^2.0
|
|
311
|
+
"@master/css": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
|
|
312
|
+
"@master/css-astro": "^2.1.0",
|
|
313
313
|
"vite": "8.3.5",
|
|
314
|
-
"@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
315
|
-
"@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
316
|
-
"@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
317
|
-
"@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
318
|
-
"@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.
|
|
314
|
+
"@master/css-compiler": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
|
|
315
|
+
"@master/css-tooling": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
|
|
316
|
+
"@master/css-schema": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
|
|
317
|
+
"@master/css-preset": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0",
|
|
318
|
+
"@master/css-language-service": "0.0.0 || >=0.0.0-site.1793646900.gdf48b35846c1 <0.0.1 || ^2.1.0"
|
|
319
319
|
},
|
|
320
320
|
"dependencies": {
|
|
321
321
|
"@astrojs/svelte": "^9.1.2",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "attach-to-scrollable-content",
|
|
5
5
|
"title": "Attach to scrollable content",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n (background-size:
|
|
7
|
+
"<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n (background-size:320px_200px) (background-image:url(/demo/landscape.svg))\"\n>\n <div class=\"flex flex-col items-start justify-between h(480)\">\n <p class=\"m(0) p-xs bg-surface-base fg-text-body\">Start of content</p>\n <p class=\"m(0) p-xs bg-surface-base fg-text-body\">End of content</p>\n </div>\n </section>\n <p class=\"mt-md font-sm fg-text-muted\">Scroll this page as well as the inner panel.</p>\n</body>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"(background-repeat:repeat-y)",
|
|
22
22
|
"(background-position-x:50%)",
|
|
23
23
|
"(background-position-y:0px)",
|
|
24
|
-
"(background-size:
|
|
24
|
+
"(background-size:320px_200px)",
|
|
25
25
|
"(background-image:url(/demo/landscape.svg))",
|
|
26
26
|
"flex",
|
|
27
27
|
"flex-col",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"classLists": [
|
|
40
40
|
"min-h(720)",
|
|
41
|
-
"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:
|
|
41
|
+
"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:320px_200px) (background-image:url(/demo/landscape.svg))",
|
|
42
42
|
"flex flex-col items-start justify-between h(480)",
|
|
43
43
|
"m(0) p-xs bg-surface-base fg-text-body",
|
|
44
44
|
"m(0) p-xs bg-surface-base fg-text-body",
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
"id": "choose-the-background-positioning-area",
|
|
5
5
|
"title": "Choose the background positioning area",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
8
|
-
"<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
9
|
-
"<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
7
|
+
"<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>",
|
|
8
|
+
"<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>",
|
|
9
|
+
"<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>"
|
|
10
10
|
],
|
|
11
11
|
"css": "",
|
|
12
12
|
"classes": [
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
"p-lg",
|
|
17
17
|
"b(8)",
|
|
18
18
|
"b-dashed",
|
|
19
|
-
"(border-color:color-mix(var(--color-violet-50)
|
|
19
|
+
"(border-color:color-mix(var(--color-violet-50),_transparent))",
|
|
20
20
|
"(background-clip:border-box)",
|
|
21
21
|
"(background-repeat:no-repeat)",
|
|
22
22
|
"(background-origin:border-box)",
|
|
23
|
-
"(background-position:
|
|
24
|
-
"(background-size:
|
|
23
|
+
"(background-position:0_0)",
|
|
24
|
+
"(background-size:80px_50px)",
|
|
25
25
|
"(background-image:url(/demo/landscape.svg))",
|
|
26
26
|
"(background-origin:padding-box)",
|
|
27
27
|
"(background-origin:content-box)"
|
|
28
28
|
],
|
|
29
29
|
"classLists": [
|
|
30
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
31
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
32
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
30
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
|
|
31
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
|
|
32
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))"
|
|
33
33
|
],
|
|
34
34
|
"highlighted": []
|
|
35
35
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Clip with an inset",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Unclipped · original border -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80 (clip-path:none)\">\n Clipped panel\n </div>\n</div>",
|
|
8
|
-
"<!-- Inset · rounded paint boundary -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80\n (clip-path:inset(
|
|
8
|
+
"<!-- Inset · rounded paint boundary -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80\n (clip-path:inset(8px_24px_round_12px))\">\n Clipped panel\n </div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"bg-blue-10",
|
|
26
26
|
"fg-blue-80",
|
|
27
27
|
"(clip-path:none)",
|
|
28
|
-
"(clip-path:inset(
|
|
28
|
+
"(clip-path:inset(8px_24px_round_12px))"
|
|
29
29
|
],
|
|
30
30
|
"classLists": [
|
|
31
31
|
"h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
|
|
32
32
|
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:none)",
|
|
33
33
|
"h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
|
|
34
|
-
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(
|
|
34
|
+
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(8px_24px_round_12px))"
|
|
35
35
|
],
|
|
36
36
|
"highlighted": []
|
|
37
37
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "set-a-counter-on-one-item",
|
|
5
5
|
"title": "Set a counter on one item",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:
|
|
7
|
+
"<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)\">\n <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n (content:counter(step)'.\\00a0')::before\">Install dependencies</li>\n <li id=\"target\" value=\"9\" class=\"mb-2xs (counter-increment:step_1) (counter-set:step_9)\n fg-text-blue::before (content:counter(step)'.\\00a0')::before\">Deployment checklist</li>\n <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n (content:counter(step)'.\\00a0')::before\">Verify production</li>\n</ol>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -13,18 +13,18 @@
|
|
|
13
13
|
"font-md",
|
|
14
14
|
"leading-lg",
|
|
15
15
|
"(list-style:none)",
|
|
16
|
-
"(counter-reset:
|
|
16
|
+
"(counter-reset:step_0)",
|
|
17
17
|
"mb-2xs",
|
|
18
|
-
"(counter-increment:
|
|
18
|
+
"(counter-increment:step_1)",
|
|
19
19
|
"fg-text-blue::before",
|
|
20
20
|
"(content:counter(step)'.\\00a0')::before",
|
|
21
|
-
"(counter-set:
|
|
21
|
+
"(counter-set:step_9)"
|
|
22
22
|
],
|
|
23
23
|
"classLists": [
|
|
24
|
-
"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:
|
|
25
|
-
"mb-2xs (counter-increment:
|
|
26
|
-
"mb-2xs (counter-increment:
|
|
27
|
-
"mb-2xs (counter-increment:
|
|
24
|
+
"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)",
|
|
25
|
+
"mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
|
|
26
|
+
"mb-2xs (counter-increment:step_1) (counter-set:step_9) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
|
|
27
|
+
"mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before"
|
|
28
28
|
],
|
|
29
29
|
"highlighted": []
|
|
30
30
|
}
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
"id": "use-drop-shadow-for-transparent-images",
|
|
5
5
|
"title": "Use drop shadow for transparent images",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md\n (filter:drop-shadow(
|
|
8
|
-
"<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md (box-shadow:
|
|
7
|
+
"<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md\n (filter:drop-shadow(0_4px_2px_#7c3aed))\">\n <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>",
|
|
8
|
+
"<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md (box-shadow:0_4px_2px_#7c3aed)\">\n <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
12
12
|
"block",
|
|
13
13
|
"m-md",
|
|
14
|
-
"(filter:drop-shadow(
|
|
15
|
-
"(box-shadow:
|
|
14
|
+
"(filter:drop-shadow(0_4px_2px_#7c3aed))",
|
|
15
|
+
"(box-shadow:0_4px_2px_#7c3aed)"
|
|
16
16
|
],
|
|
17
17
|
"classLists": [
|
|
18
|
-
"block m-md (filter:drop-shadow(
|
|
19
|
-
"block m-md (box-shadow:
|
|
18
|
+
"block m-md (filter:drop-shadow(0_4px_2px_#7c3aed))",
|
|
19
|
+
"block m-md (box-shadow:0_4px_2px_#7c3aed)"
|
|
20
20
|
],
|
|
21
21
|
"highlighted": []
|
|
22
22
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Fill gaps densely",
|
|
6
6
|
"html": [
|
|
7
7
|
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>",
|
|
8
|
-
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:
|
|
8
|
+
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"max-w-full",
|
|
19
19
|
"grid-col-span(2)",
|
|
20
20
|
"p-sm",
|
|
21
|
-
"(grid-auto-flow:
|
|
21
|
+
"(grid-auto-flow:row_dense)"
|
|
22
22
|
],
|
|
23
23
|
"classLists": [
|
|
24
24
|
"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"grid-col-span(2) p-sm",
|
|
27
27
|
"p-sm",
|
|
28
28
|
"p-sm",
|
|
29
|
-
"grid grid-cols(3) (grid-auto-flow:
|
|
29
|
+
"grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
|
|
30
30
|
"grid-col-span(2) p-sm",
|
|
31
31
|
"grid-col-span(2) p-sm",
|
|
32
32
|
"p-sm",
|
|
@@ -4,27 +4,27 @@
|
|
|
4
4
|
"id": "apply-conditionally",
|
|
5
5
|
"title": "Apply conditionally",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm\">\n <header id=\"target\" class=\"(grid-area:head) p-sm\">Header</header>\n <aside id=\"peer\" class=\"(grid-area:nav) p-sm\">Nav</aside>\n <section id=\"item-3\" class=\"(grid-area:main) p-sm\">Content</section>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"grid",
|
|
12
12
|
"(grid-template-areas:'head'|'nav'|'main')",
|
|
13
13
|
"(grid-template-columns:1fr)",
|
|
14
|
-
"(grid-template-rows:
|
|
14
|
+
"(grid-template-rows:48px_48px_96px)",
|
|
15
15
|
"gap-md",
|
|
16
16
|
"(width:17.5rem)",
|
|
17
17
|
"max-w-full",
|
|
18
18
|
"(grid-template-areas:'head\\20head'|'nav\\20main')@sm",
|
|
19
|
-
"(grid-template-columns:
|
|
20
|
-
"(grid-template-rows:
|
|
19
|
+
"(grid-template-columns:80px_1fr)@sm",
|
|
20
|
+
"(grid-template-rows:48px_96px)@sm",
|
|
21
21
|
"(grid-area:head)",
|
|
22
22
|
"p-sm",
|
|
23
23
|
"(grid-area:nav)",
|
|
24
24
|
"(grid-area:main)"
|
|
25
25
|
],
|
|
26
26
|
"classLists": [
|
|
27
|
-
"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:
|
|
27
|
+
"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm",
|
|
28
28
|
"(grid-area:head) p-sm",
|
|
29
29
|
"(grid-area:nav) p-sm",
|
|
30
30
|
"(grid-area:main) p-sm"
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"id": "use-minmax",
|
|
5
5
|
"title": "Control a track’s minimum",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:
|
|
8
|
-
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n <div id=\"peer\" class=\"p-sm\">2</div>\n</div>",
|
|
8
|
+
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n <div id=\"peer\" class=\"p-sm\">2</div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
12
12
|
"grid",
|
|
13
13
|
"(grid-auto-rows:64px)",
|
|
14
|
-
"(grid-template-columns:
|
|
14
|
+
"(grid-template-columns:1fr_2fr)",
|
|
15
15
|
"gap-md",
|
|
16
16
|
"(width:17.5rem)",
|
|
17
17
|
"max-w-full",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"p-sm",
|
|
20
20
|
"block",
|
|
21
21
|
"(width:12rem)",
|
|
22
|
-
"(grid-template-columns:minmax(0,1fr)
|
|
22
|
+
"(grid-template-columns:minmax(0,1fr)_2fr)"
|
|
23
23
|
],
|
|
24
24
|
"classLists": [
|
|
25
|
-
"grid (grid-auto-rows:64px) (grid-template-columns:
|
|
25
|
+
"grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full",
|
|
26
26
|
"overflow-clip p-sm",
|
|
27
27
|
"block (width:12rem)",
|
|
28
28
|
"p-sm",
|
|
29
|
-
"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)
|
|
29
|
+
"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full",
|
|
30
30
|
"overflow-clip p-sm",
|
|
31
31
|
"block (width:12rem)",
|
|
32
32
|
"p-sm"
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
"id": "use-explicit-css-values",
|
|
5
5
|
"title": "Keep overflowing content reachable",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
8
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
9
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
7
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered overflow\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
|
|
8
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Unsafe centered overflow\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
|
|
9
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered fitting content\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>"
|
|
10
10
|
],
|
|
11
11
|
"css": "",
|
|
12
12
|
"classes": [
|
|
13
13
|
"flex",
|
|
14
14
|
"overflow-auto",
|
|
15
|
-
"(justify-content:
|
|
15
|
+
"(justify-content:safe_center)",
|
|
16
16
|
"(width:15rem)",
|
|
17
17
|
"max-w-full",
|
|
18
18
|
"(flex:none)",
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
"(height:4rem)",
|
|
21
21
|
"(width:17.5rem)",
|
|
22
22
|
"p-xs",
|
|
23
|
-
"(justify-content:
|
|
23
|
+
"(justify-content:unsafe_center)",
|
|
24
24
|
"(width:12rem)"
|
|
25
25
|
],
|
|
26
26
|
"classLists": [
|
|
27
|
-
"flex overflow-auto (justify-content:
|
|
27
|
+
"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
|
|
28
28
|
"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
|
|
29
|
-
"flex overflow-auto (justify-content:
|
|
29
|
+
"flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full",
|
|
30
30
|
"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
|
|
31
|
-
"flex overflow-auto (justify-content:
|
|
31
|
+
"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
|
|
32
32
|
"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs"
|
|
33
33
|
],
|
|
34
34
|
"highlighted": []
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "fade-overflowing-media",
|
|
5
5
|
"title": "Fade overflowing media",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Scrollable list · fixed lower fade -->\n<div class=\"w(240) max-w-full\">\n <div class=\"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within\n outline-offset(3):focus-within\">\n <div id=\"target\" role=\"region\" tabindex=\"0\"\n aria-label=\"Layer list\"\n aria-describedby=\"scroll-help\"\n class=\"overflow-auto h(160) bg-surface-base\n (mask-image:linear-gradient(
|
|
7
|
+
"<!-- Scrollable list · fixed lower fade -->\n<div class=\"w(240) max-w-full\">\n <div class=\"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within\n outline-offset(3):focus-within\">\n <div id=\"target\" role=\"region\" tabindex=\"0\"\n aria-label=\"Layer list\"\n aria-describedby=\"scroll-help\"\n class=\"overflow-auto h(160) bg-surface-base\n (mask-image:linear-gradient(to_bottom,black_60%,transparent))\n (mask-mode:alpha) (outline:none):focus-visible\">\n <ol class=\"m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body\">\n <li id=\"first-layer\" class=\"py-xs\">Outline</li>\n <li class=\"py-xs\">Surface</li>\n <li class=\"py-xs\">Foreground</li>\n <li class=\"py-xs\">Accent</li>\n <li class=\"py-xs\">Annotation</li>\n <li class=\"py-xs\">Selection</li>\n <li class=\"py-xs\">Focus</li>\n <li id=\"last-layer\" class=\"py-xs\">Export</li>\n </ol>\n </div>\n </div>\n <p id=\"scroll-help\" class=\"mb(0) mt-sm font-sm fg-text-body\">\n Eight layers. Scroll or follow the links below.\n </p>\n <nav aria-label=\"Layer navigation\"\n class=\"flex flex-wrap gap-md mt-sm font-sm\">\n <a href=\"#first-layer\">First layer</a>\n <a href=\"#last-layer\">Last layer</a>\n </nav>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"overflow-auto",
|
|
18
18
|
"h(160)",
|
|
19
19
|
"bg-surface-base",
|
|
20
|
-
"(mask-image:linear-gradient(
|
|
20
|
+
"(mask-image:linear-gradient(to_bottom,black_60%,transparent))",
|
|
21
21
|
"(mask-mode:alpha)",
|
|
22
22
|
"(outline:none):focus-visible",
|
|
23
23
|
"m(0)",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"classLists": [
|
|
37
37
|
"w(240) max-w-full",
|
|
38
38
|
"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within outline-offset(3):focus-within",
|
|
39
|
-
"overflow-auto h(160) bg-surface-base (mask-image:linear-gradient(
|
|
39
|
+
"overflow-auto h(160) bg-surface-base (mask-image:linear-gradient(to_bottom,black_60%,transparent)) (mask-mode:alpha) (outline:none):focus-visible",
|
|
40
40
|
"m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body",
|
|
41
41
|
"py-xs",
|
|
42
42
|
"py-xs",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
"id": "use-precise-positions",
|
|
5
5
|
"title": "Use precise positions",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- 50% 25% · 12.5px top crop -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:50
|
|
8
|
-
"<!-- Left 12px · top 8px -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:
|
|
7
|
+
"<!-- 50% 25% · 12.5px top crop -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:50%_25%)\" />",
|
|
8
|
+
"<!-- Left 12px · top 8px -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:left_12px_top_8px)\" />"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
"max-w-full",
|
|
16
16
|
"bg-surface-base",
|
|
17
17
|
"object-cover",
|
|
18
|
-
"(object-position:50
|
|
19
|
-
"(object-position:
|
|
18
|
+
"(object-position:50%_25%)",
|
|
19
|
+
"(object-position:left_12px_top_8px)"
|
|
20
20
|
],
|
|
21
21
|
"classLists": [
|
|
22
|
-
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:50
|
|
23
|
-
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:
|
|
22
|
+
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:50%_25%)",
|
|
23
|
+
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:left_12px_top_8px)"
|
|
24
24
|
],
|
|
25
25
|
"highlighted": []
|
|
26
26
|
}
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
"id": "use-separate-axis-values",
|
|
5
5
|
"title": "Use separate axis values",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-template-columns:
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-template-columns:5rem_5rem) (grid-template-rows:3rem_3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"p-sm\">01</div>\n <div id=\"peer\" class=\"p-sm\">02</div>\n <div id=\"item-3\" class=\"p-sm\">03</div>\n <div id=\"item-4\" class=\"p-sm\">04</div>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"grid",
|
|
12
|
-
"(grid-template-columns:
|
|
13
|
-
"(grid-template-rows:
|
|
12
|
+
"(grid-template-columns:5rem_5rem)",
|
|
13
|
+
"(grid-template-rows:3rem_3rem)",
|
|
14
14
|
"content-start",
|
|
15
15
|
"justify-between",
|
|
16
16
|
"gap-md",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"p-sm"
|
|
21
21
|
],
|
|
22
22
|
"classLists": [
|
|
23
|
-
"grid (grid-template-columns:
|
|
23
|
+
"grid (grid-template-columns:5rem_5rem) (grid-template-rows:3rem_3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full",
|
|
24
24
|
"p-sm",
|
|
25
25
|
"p-sm",
|
|
26
26
|
"p-sm",
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"id": "use-sparingly",
|
|
5
5
|
"title": "Use sparingly",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"scrollport\" class=\"flex overflow-x-auto gap-md (scroll-snap-type:
|
|
7
|
+
"<div id=\"scrollport\" class=\"flex overflow-x-auto gap-md (scroll-snap-type:x_mandatory)\"\n tabindex=\"0\" aria-label=\"Horizontal panels\">\n <article id=\"panel-1\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 1</article>\n <article id=\"panel-2\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)\">Panel 2</article>\n <article id=\"panel-3\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 3</article>\n <article id=\"panel-4\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 4</article>\n <article id=\"panel-5\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 5</article>\n <article id=\"panel-6\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 6</article>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"flex",
|
|
12
12
|
"overflow-x-auto",
|
|
13
13
|
"gap-md",
|
|
14
|
-
"(scroll-snap-type:
|
|
14
|
+
"(scroll-snap-type:x_mandatory)",
|
|
15
15
|
"shrink(0)",
|
|
16
16
|
"(height:9rem)",
|
|
17
17
|
"(width:12rem)",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"(scroll-snap-stop:always)"
|
|
21
21
|
],
|
|
22
22
|
"classLists": [
|
|
23
|
-
"flex overflow-x-auto gap-md (scroll-snap-type:
|
|
23
|
+
"flex overflow-x-auto gap-md (scroll-snap-type:x_mandatory)",
|
|
24
24
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
|
|
25
25
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)",
|
|
26
26
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
"id": "increase-margin-for-large-media",
|
|
5
5
|
"title": "Reserve room for a larger shape margin",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Margin md · 16px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-md\n (shape-outside:circle(40px)
|
|
8
|
-
"<!-- Margin xl · 32px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-xl\n (shape-outside:circle(40px)
|
|
7
|
+
"<!-- Margin md · 16px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-md\n (shape-outside:circle(40px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"40\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>",
|
|
8
|
+
"<!-- Margin xl · 32px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-xl\n (shape-outside:circle(40px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"40\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
"outline-line-subtle",
|
|
24
24
|
"fill-blue-60",
|
|
25
25
|
"shape-margin-md",
|
|
26
|
-
"(shape-outside:circle(40px)
|
|
26
|
+
"(shape-outside:circle(40px)_border-box)",
|
|
27
27
|
"m(0)",
|
|
28
28
|
"shape-margin-xl"
|
|
29
29
|
],
|
|
30
30
|
"classLists": [
|
|
31
31
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
32
|
-
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-md (shape-outside:circle(40px)
|
|
32
|
+
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-md (shape-outside:circle(40px)_border-box)",
|
|
33
33
|
"m(0)",
|
|
34
34
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
35
|
-
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-xl (shape-outside:circle(40px)
|
|
35
|
+
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-xl (shape-outside:circle(40px)_border-box)",
|
|
36
36
|
"m(0)"
|
|
37
37
|
],
|
|
38
38
|
"highlighted": []
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Wrap text around a circle",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Normal float · rectangular wrap -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60 (shape-outside:none)\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>",
|
|
8
|
-
"<!-- Circle · text follows the curved boundary -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60\n (shape-outside:circle(48px)
|
|
8
|
+
"<!-- Circle · text follows the curved boundary -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60\n (shape-outside:circle(48px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"fill-blue-60",
|
|
23
23
|
"(shape-outside:none)",
|
|
24
24
|
"m(0)",
|
|
25
|
-
"(shape-outside:circle(48px)
|
|
25
|
+
"(shape-outside:circle(48px)_border-box)"
|
|
26
26
|
],
|
|
27
27
|
"classLists": [
|
|
28
28
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
29
29
|
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:none)",
|
|
30
30
|
"m(0)",
|
|
31
31
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
32
|
-
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:circle(48px)
|
|
32
|
+
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:circle(48px)_border-box)",
|
|
33
33
|
"m(0)"
|
|
34
34
|
],
|
|
35
35
|
"highlighted": []
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Set the pivot point",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Center · four edges move inward -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:center)\">\n Center pivot\n </div>\n <span aria-hidden=\"true\"\n class=\"absolute left(77) top(45) w(6) h(6) (border-radius:100%)\n bg-violet-60 pointer-none\"></span>\n </div>\n</div>",
|
|
8
|
-
"<!-- Top left · two edges stay fixed -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:
|
|
8
|
+
"<!-- Top left · two edges stay fixed -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:top_left)\">\n Corner pivot\n </div>\n <span aria-hidden=\"true\"\n class=\"absolute left(-3) top(-3) w(6) h(6) (border-radius:100%)\n bg-violet-60 pointer-none\"></span>\n </div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"(border-radius:100%)",
|
|
38
38
|
"bg-violet-60",
|
|
39
39
|
"pointer-none",
|
|
40
|
-
"(transform-origin:
|
|
40
|
+
"(transform-origin:top_left)",
|
|
41
41
|
"left(-3)",
|
|
42
42
|
"top(-3)"
|
|
43
43
|
],
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"absolute left(77) top(45) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none",
|
|
49
49
|
"p-lg",
|
|
50
50
|
"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle",
|
|
51
|
-
"grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:
|
|
51
|
+
"grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:top_left)",
|
|
52
52
|
"absolute left(-3) top(-3) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none"
|
|
53
53
|
],
|
|
54
54
|
"highlighted": []
|
|
@@ -20,9 +20,12 @@ export function atomicClassIssue(className: string): string | undefined {
|
|
|
20
20
|
if (char === '\\') { value += char + (tail[++index] ?? ''); continue }
|
|
21
21
|
if (quote) { if (char === quote) quote = ''; value += char; continue }
|
|
22
22
|
if (char === '"' || char === "'") { quote = char; value += char; continue }
|
|
23
|
+
// `__` stays literal; `\_` is consumed above as an escaped underscore.
|
|
24
|
+
if (char === '_' && tail[index + 1] === '_') { value += '__'; index++; continue }
|
|
23
25
|
if (char === '(') depth++
|
|
24
26
|
if (char === ')' && !depth--) break
|
|
25
|
-
|
|
27
|
+
// A value space is written `_` since Master CSS 2.1; the deprecated `|` still decodes the same way.
|
|
28
|
+
value += !depth && (char === '_' || char === '|' || char === '/' || char === ',') ? '\0' : char
|
|
26
29
|
}
|
|
27
30
|
// A single grid line, named area, or span is one placement setting.
|
|
28
31
|
if (property.startsWith('grid-') && !tail.includes('/')) return
|