feat: complete reference coverage and UX improvements
Reference pages: - Add min-width, min-height, border-collapse to Box Model - Add blockquote to Text Content - Add new Semantic Inline section (time, mark, small, abbr, kbd, sub, sup, ins, del) UX improvements: - Rename "Free Coding" to "HTML & CSS Editor" in Playground - Keep Welcome and Playground modules always expanded in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
22
src/app.js
22
src/app.js
@@ -1345,11 +1345,14 @@ const referenceContent = {
|
||||
<tbody>
|
||||
<tr><td><code>width</code></td><td>length, %, auto, fit-content</td><td><code>width: 100%;</code></td></tr>
|
||||
<tr><td><code>height</code></td><td>length, %, auto</td><td><code>height: 200px;</code></td></tr>
|
||||
<tr><td><code>min-width</code></td><td>length, %, auto</td><td><code>min-width: 200px;</code></td></tr>
|
||||
<tr><td><code>min-height</code></td><td>length, %, auto</td><td><code>min-height: 100vh;</code></td></tr>
|
||||
<tr><td><code>max-width</code></td><td>length, %, none</td><td><code>max-width: 600px;</code></td></tr>
|
||||
<tr><td><code>padding</code></td><td>length (1-4 values)</td><td><code>padding: 1rem 2rem;</code></td></tr>
|
||||
<tr><td><code>margin</code></td><td>length, auto (1-4 values)</td><td><code>margin: 0 auto;</code></td></tr>
|
||||
<tr><td><code>border</code></td><td>width style color</td><td><code>border: 1px solid gray;</code></td></tr>
|
||||
<tr><td><code>border-radius</code></td><td>length (1-4 values)</td><td><code>border-radius: 8px;</code></td></tr>
|
||||
<tr><td><code>border-collapse</code></td><td>separate, collapse</td><td><code>border-collapse: collapse;</code></td></tr>
|
||||
<tr><td><code>box-sizing</code></td><td>content-box, border-box</td><td><code>box-sizing: border-box;</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1705,6 +1708,7 @@ const referenceContent = {
|
||||
<tr><td><code><em></code></td><td>Emphasized text (italic)</td><td><code><em>really</em></code></td></tr>
|
||||
<tr><td><code><code></code></td><td>Inline code</td><td><code><code>const x</code></code></td></tr>
|
||||
<tr><td><code><pre></code></td><td>Preformatted text</td><td>Code blocks</td></tr>
|
||||
<tr><td><code><blockquote></code></td><td>Block quotation</td><td><code><blockquote cite="src"></code></td></tr>
|
||||
<tr><td><code><span></code></td><td>Generic inline container</td><td>Styling inline text</td></tr>
|
||||
<tr><td><code><br></code></td><td>Line break</td><td>Address, poem lines</td></tr>
|
||||
<tr><td><code><hr></code></td><td>Thematic break</td><td>Scene change, topic shift</td></tr>
|
||||
@@ -1712,6 +1716,24 @@ const referenceContent = {
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="ref-section">
|
||||
<h2>Semantic Inline</h2>
|
||||
<table class="ref-table">
|
||||
<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code><time></code></td><td>Date/time</td><td><code><time datetime="2024-01-15"></code></td></tr>
|
||||
<tr><td><code><mark></code></td><td>Highlighted text</td><td><code><mark>important</mark></code></td></tr>
|
||||
<tr><td><code><small></code></td><td>Fine print</td><td>Legal text, copyright</td></tr>
|
||||
<tr><td><code><abbr></code></td><td>Abbreviation</td><td><code><abbr title="HyperText">HTML</abbr></code></td></tr>
|
||||
<tr><td><code><kbd></code></td><td>Keyboard input</td><td><code><kbd>Ctrl+C</kbd></code></td></tr>
|
||||
<tr><td><code><sub></code></td><td>Subscript</td><td>H<sub>2</sub>O</td></tr>
|
||||
<tr><td><code><sup></code></td><td>Superscript</td><td>x<sup>2</sup></td></tr>
|
||||
<tr><td><code><ins></code></td><td>Inserted text</td><td>Shows additions</td></tr>
|
||||
<tr><td><code><del></code></td><td>Deleted text</td><td>Shows removals</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="ref-section">
|
||||
<h2>Lists</h2>
|
||||
<table class="ref-table">
|
||||
|
||||
Reference in New Issue
Block a user