diff --git a/lessons/98-playground.json b/lessons/98-playground.json index 606447e..57a0a0a 100644 --- a/lessons/98-playground.json +++ b/lessons/98-playground.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "playground", - "title": "HTML & CSS Editor", + "title": "Playground", "description": "Experiment freely with HTML and CSS", "mode": "playground", "difficulty": "beginner", @@ -9,7 +9,7 @@ "lessons": [ { "id": "sandbox", - "title": "Editor", + "title": "HTML & CSS Editor", "mode": "playground", "description": "", "task": "", diff --git a/src/app.js b/src/app.js index d8fc76a..b9cf9cb 100644 --- a/src/app.js +++ b/src/app.js @@ -1345,11 +1345,14 @@ const referenceContent = { widthlength, %, auto, fit-contentwidth: 100%; heightlength, %, autoheight: 200px; + min-widthlength, %, automin-width: 200px; + min-heightlength, %, automin-height: 100vh; max-widthlength, %, nonemax-width: 600px; paddinglength (1-4 values)padding: 1rem 2rem; marginlength, auto (1-4 values)margin: 0 auto; borderwidth style colorborder: 1px solid gray; border-radiuslength (1-4 values)border-radius: 8px; + border-collapseseparate, collapseborder-collapse: collapse; box-sizingcontent-box, border-boxbox-sizing: border-box; @@ -1705,6 +1708,7 @@ const referenceContent = { <em>Emphasized text (italic)<em>really</em> <code>Inline code<code>const x</code> <pre>Preformatted textCode blocks + <blockquote>Block quotation<blockquote cite="src"> <span>Generic inline containerStyling inline text <br>Line breakAddress, poem lines <hr>Thematic breakScene change, topic shift @@ -1712,6 +1716,24 @@ const referenceContent = { +
+

Semantic Inline

+ + + + + + + + + + + + + +
ElementPurposeExample
<time>Date/time<time datetime="2024-01-15">
<mark>Highlighted text<mark>important</mark>
<small>Fine printLegal text, copyright
<abbr>Abbreviation<abbr title="HyperText">HTML</abbr>
<kbd>Keyboard input<kbd>Ctrl+C</kbd>
<sub>SubscriptH2O
<sup>Superscriptx2
<ins>Inserted textShows additions
<del>Deleted textShows removals
+
+

Lists

diff --git a/src/helpers/renderer.js b/src/helpers/renderer.js index 4dbc0b5..3cae293 100644 --- a/src/helpers/renderer.js +++ b/src/helpers/renderer.js @@ -37,6 +37,11 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes moduleContainer.classList.add("module-container"); moduleContainer.dataset.moduleId = module.id; + // Keep welcome and playground modules always expanded + if (module.id === "welcome" || module.id === "playground") { + moduleContainer.open = true; + } + // Create module header using const moduleHeader = document.createElement("summary"); moduleHeader.classList.add("module-list-item", "module-header");