Reorganize documentation

Author: 1aron

…guide/pre-rendering/_opengraph-image.tsx …p/[locale]/guide/at/_opengraph-image.tsxsite/app/[locale]/guide/pre-rendering/_opengraph-image.tsx renamed to site/app/[locale]/guide/at/_opengraph-image.tsx site/app/[locale]/guide/pre-rendering/_opengraph-image.tsx renamed to site/app/[locale]/guide/at/_opengraph-image.tsx

@@ -6,8 +6,8 @@ export default () =>
     <DocTable>
         <thead>
             <tr>
-                <th>Name</th>
-                <th>Value</th>
+                <th>Token</th>
+                <th>CSS text</th>
             </tr>
         </thead>
         <tbody>
@@ -19,9 +19,9 @@ export default () =>
                             const eachBreakpoint = at[eachBreakpointName]
                             return (
                                 <tr key={eachBreakpointName}>
-                                    <td><code>{eachBreakpointName}</code></td>
+                                    <th><code>{eachBreakpointName}</code></th>
                                     <td>
-                                        <InlineCode lang="js">{JSON.stringify(eachBreakpoint)}</InlineCode>
+                                        <InlineCode>{eachBreakpoint}</InlineCode>
                                     </td>
                                 </tr>
                             )

…e]/guide/syntax/components/AtDefault.tsx …[locale]/guide/at/components/Default.tsxsite/app/[locale]/guide/syntax/components/AtDefault.tsx renamed to site/app/[locale]/guide/at/components/Default.tsx site/app/[locale]/guide/syntax/components/AtDefault.tsx renamed to site/app/[locale]/guide/at/components/Default.tsx

@@ -1,14 +1,14 @@
 <Code lang="js" name="master.css.js">{require('!!raw-loader!../tests/add-a-media-query/master.css.js').default}</Code>
-(!) You wouldn't want to write full media queries within the markup.
-```html
-<!-- @MARK @media(orientation:landscape) -->
-<div class="aspect:2/1@media(orientation:landscape)">…</div>
-```
-(o) Employ concise yet semantically meaningful markup.
+Employ concise yet semantically meaningful markup.
 <Code lang="html">{require('!!raw-loader!../tests/add-a-media-query/template.html').default}</Code>
 <details>
     <summary>Generated CSS</summary>
     <div>
         <Code lang="css" beautify>{require('!!raw-loader!../tests/add-a-media-query/generated.css?raw').default}</Code>
     </div>
-</details>
+</details>
+(!) You wouldn't want to write full condtions within the markup.
+```html
+<!-- @MARK @media(orientation:landscape) -->
+<div class="aspect:2/1@media(orientation:landscape)">…</div>
+```

…]/guide/syntax/components/AtOverview.mdx …locale]/guide/at/components/Overview.mdxsite/app/[locale]/guide/syntax/components/AtOverview.mdx renamed to site/app/[locale]/guide/at/components/Overview.mdx site/app/[locale]/guide/syntax/components/AtOverview.mdx renamed to site/app/[locale]/guide/at/components/Overview.mdx

@@ -0,0 +1,52 @@
+## Overview [sr-only]
+<Default />
+In native CSS, it's not possible to reuse queries through CSS variables. By tokenizing *media queries*, *feature queries*, *container queries*, and applying them with flexible syntax within the markup.
+<Overview />
+
+---
+
+## Basic usage
+### Add a media query token
+Create a media query token, such as `@landscape`, to represent landscape orientation.
+<Code lang="js" name="master.css.js">{require('!!raw-loader!./tests/add-a-media-query/master.css.js').default}</Code>
+When displayed in landscape orientation, the image is presented in a 2:1 aspect ratio.
+<Code lang="html">{require('!!raw-loader!./tests/add-a-media-query/template.html').default}</Code>
+<details>
+    <summary>Generated CSS</summary>
+    <div>
+        <Code lang="css" beautify>{require('!!raw-loader!./tests/add-a-media-query/generated.css?raw').default}</Code>
+    </div>
+</details>
+
+### Add a feature query token
+Create a feature query token, such as `@supports-backdrop`, to apply styles based on `backdrop-filter` support.
+<Code lang="js" name="master.css.js">{require('!!raw-loader!./tests/add-a-feature-query/master.css.js').default}</Code>
+Applies translucent background only when `backdrop-filter` is supported.
+<Code lang="html">{require('!!raw-loader!./tests/add-a-feature-query/template.html').default}</Code>
+<details>
+    <summary>Generated CSS</summary>
+    <div>
+        <Code lang="css" beautify>{require('!!raw-loader!./tests/add-a-feature-query/generated.css?raw').default}</Code>
+    </div>
+</details>
+
+### Add a feature name alias
+Create a feature name alias to shorten the syntax of a feature query.
+```js name=master.css.js
+export default {
+    at: {
+        h: 'height' // [!code highlight]
+    }
+}
+```
+Use the name alias `h`:
+```html
+<!-- @MARK h -->
+<div class="hidden@container(h<=200)">…</div>
+```
+<details>
+    <summary>Generated CSS</summary>
+    <Class2CSS>
+        {['hidden@container(h<=200)']}
+    </Class2CSS>
+</details>

site/app/[locale]/guide/at/content.mdx

@@ -0,0 +1,13 @@
+import define from 'internal/utils/metadata'
+
+const metadata = define({
+    title: 'Customizing At-rules',
+    description: 'A guide to adding custom at-rule tokens and aliases.',
+    category: 'Customization',
+    other: {
+        subject: 'At-rules',
+    },
+    fileURL: import.meta.url
+})
+
+export default metadata

site/app/[locale]/guide/at/metadata.ts

@@ -0,0 +1,7 @@
+export default {
+    at: {
+        supports: {
+            backdrop: 'supports(backdrop-filter:blur(0px))' /* [!code highlight] */
+        }
+    }
+}