1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46

---
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import DocsLayout from "../../layouts/DocsLayout.astro";
import Document from "../../components/Document.astro";
import Preview from "../../components/Preview.astro";
import ThemeMatrixPreview from "../../components/ThemeMatrixPreview.astro";
---

<DocsLayout title="Globals">
	<Document>
		<p>
			UA 間の差異を限りなく少なくするため、 Yamori の CSS は<strong>
				全てのスタイルをリセット
			</strong>
			します。 リセットでは
			<strong>
				Yamori によって作成されていない全ての HTML 要素
			</strong> に対して <code>
				all: unset; box-sizing: border-box
			</code> が与えられます。
		</p>
		<Preview title="<button>BUTTON</button>">
			<button type="button">BUTTON</button>
		</Preview>
		<p>
			これにより、全ての HTML 要素は CustomElement のホストと同様に <code>
				display: inline
			</code> が初期値となります。 基本的にインラインではない要素に対しては毎回
			<code>
				display
			</code>
			プロパティを与える必要があります。
		</p>

		<h2>Body Styles</h2>
		<p>
			スタイリングのベースラインとして <code>&lt;body&gt;</code>
			には継承される一部の CSS プロパティと背景色が与えられています。
		</p>
		<ThemeMatrixPreview>
			<p>Paragraph – 段落</p>
		</ThemeMatrixPreview>
	</Document>
</DocsLayout>