Update documentation content

website/app/[locale]/guide/responsive-design/components/Default.tsx

@@ -1,5 +1,4 @@
-import { at } from '@master/css'
-import InlineCode from 'websites/components/InlineCode'
+import { variables } from '@master/css'
 import DocTable from 'websites/components/DocTable'
 import descriptions from '../../../reference/screens/descriptions'
 
@@ -15,14 +14,14 @@ export default () =>
         <tbody>
             {
                 [
-                    ...Object.keys(at)
-                        .filter((eachBreakpointName) => typeof at[eachBreakpointName as keyof typeof at] === 'number')
+                    ...Object.keys(variables.screen)
+                        .filter((eachBreakpointName) => typeof variables.screen[eachBreakpointName as keyof typeof variables.screen] === 'number')
                         .map((eachBreakpointName) => {
                             // @ts-ignore
-                            const eachBreakpoint = at[eachBreakpointName]
+                            const eachBreakpoint = variables.screen[eachBreakpointName]
                             return (
                                 <tr key={eachBreakpointName}>
-                                    <th><code>{eachBreakpointName}</code></th>
+                                    <td><code>{eachBreakpointName}</code></td>
                                     <td>
                                         <code className='token number'>{eachBreakpoint}<span className='token unit'>px</span></code>
                                     </td>

website/app/[locale]/guide/responsive-design/content.mdx

@@ -5,11 +5,11 @@
 ```html
 <div class="grid-cols:2 grid-cols:3**@xs** grid-cols:4**@sm** grid-cols:5**@md** …">…</div>
 ```
-The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined viewport widths](/reference/screens) available.
+The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined screen sizes](/reference/screens) available.
 
 This comprehensive coverage caters to the modern web layout scenario.
 <Default />
-To customize responsive breakpoints, see the [At](/reference/at#add-a-responsive-breakpoint) documentation.
+To customize responsive breakpoints, see the [screens](/reference/screens#add-a-responsive-breakpoint) documentation.
 
 ## Development strategies
 When it comes to designing and developing responsive web pages, [Mobile-first](#mobile-first) and [Desktop-first](#desktop-first) are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions.

website/app/[locale]/reference/at/components/Default.tsx

@@ -19,7 +19,7 @@ export default () =>
                             const eachBreakpoint = at[eachBreakpointName]
                             return (
                                 <tr key={eachBreakpointName}>
-                                    <th><code>{eachBreakpointName}</code></th>
+                                    <td><code>{eachBreakpointName}</code></td>
                                     <td>
                                         <InlineCode lang="js">{JSON.stringify(eachBreakpoint)}</InlineCode>
                                     </td>

website/app/[locale]/reference/at/components/Overview.mdx

@@ -1,9 +1,9 @@
-<Code lang="js" name="master.css.js">{require('!!raw-loader!../tests/add-a-responsive-breakpoint/master.css.js').default}</Code>
-Applies larger font sizes as the viewport width increases.
-<Code lang="html">{require('!!raw-loader!../tests/add-a-responsive-breakpoint/template.html').default}</Code>
+<Code lang="js" name="master.css.js">{require('!!raw-loader!../tests/add-a-media-query/master.css.js').default}</Code>
+Apply the image to a `2:1` ratio when in landscape orientation.
+<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-responsive-breakpoint/generated.css').default}</Code>
+        <Code lang="css" beautify>{require('!!raw-loader!../tests/add-a-media-query/generated.css').default}</Code>
     </div>
 </details>

website/app/[locale]/reference/at/content.mdx

@@ -16,12 +16,7 @@ Tokenizing queries also serves for simplification.
 
 ---
 
-## Basic usage
-### Add a responsive breakpoint
-Create a responsive breakpoint, such as `@tablet` and `@desktop`.
-<Overview />
-The responsive breakpoints can be flexibly used with operators, see the [Responsive Design](/guide/responsive-design) documentation.
-
+## Customization
 ### Add a media query
 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>
@@ -49,8 +44,7 @@ Applies translucent background only when `backdrop-filter` is supported.
 
 ---
 
-## Reference
-### Default
+## Default
 <Default />
 View the full [source code](https://github.com/master-co/css/blob/rc/packages/core/src/config/at.ts)
 

website/app/[locale]/reference/at/metadata.ts

@@ -2,7 +2,7 @@ import { Metadata } from 'websites/types/Metadata'
 
 const metadata: Metadata = {
     title: 'At',
-    description: 'Customizing feature queries and breakpoints for your design system.',
+    description: 'Customizing at-rules for your design system.',
     category: 'Configuration',
 }
 

website/app/[locale]/reference/fonts/content.mdx

@@ -27,7 +27,7 @@ By default, Master provides three font family variables, `sans`, `serif`, and `m
 
 ---
 
-## Basic usage
+## Customization
 ### Add a font
 Customize your font tokens by defining [variables](/reference/variables). For example, add `Inter` as the general font and `Fira Code` as the code font.
 ```js name=master.css.js

website/app/[locale]/reference/max-height/syntaxes.ts

@@ -10,7 +10,7 @@ const syntaxes = [
     'max-h:screen-2xs',
     'max-h:screen-xs',
     'max-h:screen-sm',
-    ['max-h:screen-md',],
+    'max-h:screen-md',
     'max-h:screen-lg',
     'max-h:screen-xl',
     'max-h:screen-2xl',

website/app/[locale]/reference/max-width/syntaxes.ts

@@ -10,7 +10,7 @@ const syntaxes = [
     'max-w:screen-2xs',
     'max-w:screen-xs',
     'max-w:screen-sm',
-    ['max-w:screen-md',],
+    'max-w:screen-md',
     'max-w:screen-lg',
     'max-w:screen-xl',
     'max-w:screen-2xl',

website/app/[locale]/reference/rules/content.mdx

@@ -11,11 +11,12 @@ Implement your design tokens in different syntax rules.
 
 ---
 
-## References
-### Default
+## Default
 <Default />
 View the full [source code](https://github.com/master-co/css/blob/rc/packages/core/src/config/rules.ts)
 
-### Layer
+---
+
+## Layer
 <LayerReference />
 View the full [source code](https://github.com/master-co/css/blob/rc/packages/core/src/layer.ts)

website/app/[locale]/reference/spacing-and-sizing/content.mdx

@@ -30,7 +30,7 @@ export default {
 
 ---
 
-## Basic usage
+## Customization
 ### Add a spacing
 Customize your spacing [variables](/reference/variables), in `xs~xl`.
 ```js name=master.css.js

website/app/[locale]/reference/styles/content.mdx

@@ -9,7 +9,7 @@ This is just one of the abstract means. For React, Vue, and Svelte users, it's r
 
 ---
 
-## Basic usage
+## Customization
 ### Add a style
 Create an abstract style using Master CSS syntax.
 <Overview />