Fix broken styling caused by 7edaa33

1 files changed, 22 insertions, 17 deletions

diff --git a/source/blog/2022/website-adventures-basics/index.md b/source/blog/2022/website-adventures-basics/index.md
index 02aebef..afcf19b 100644
--- a/source/blog/2022/website-adventures-basics/index.md
+++ b/source/blog/2022/website-adventures-basics/index.md
@@ -5,7 +5,7 @@ layout: "blog"
 toc: true
 ---
 
-Published on 2022-11-20, last updated on 2023-02-27.
+Published on 2022-11-20, last updated on 2023-05-19.
 
 Making and managing this personal website has been an adventure.
 In this series, I go over the technical challenges I've encountered
@@ -310,13 +310,16 @@ and they're also smelly! Take that!</em>
 So... time for JS? Well, fortunately, there's another way,
 using just old-school HTML and CSS:
 
-<div class="proof">
-<input type="checkbox" class="proof" id="proof-example"/>
-<label class="proof" for="proof-example">Click to show (IE welcome too)</label>
-<div class="proof-hidden">
-<label class="proof" for="proof-example">Click to hide.</label>
+<div class="collapse proof">
+<input type="checkbox" class="collapse-toggle" id="collapse-example"/>
+<label for="collapse-example">Click to show (IE welcome too)</label>
+<div class="collapse-hidden">
+<div class="collapse-starts"></div>
+<p>
+<label for="collapse-example">Click to hide.</label>
 <br>
 <em>This is a safe space where users of all browsers can rejoice together in peace.</em>
+</p>
 </div>
 </div>
 
@@ -324,15 +327,15 @@ Pretty cool eh? This box is structured as follows,
 using only `<div>`, `<input>` and `<label>`:
 ```html
 {% raw %}<!-- Wrapper for applying CSS to the entire collapsible object -->
-<div class="collapsible">
+<div class="collapse">
 <!-- (Invisible) checkbox that controls the content's visibility -->
-<input type="checkbox" class="collapsible" id="my-example"/>
+<input type="checkbox" class="collapse-toggle" id="my-example"/>
 <!-- (Visible) text label standing in for the checkbox -->
-<label class="collapsible" for="my-example">Click to show</label>
+<label for="my-example">Click to show</label>
 <!-- Wrapper for what should be hidden when the checkbox isn't checked -->
-<div class="collapsible-hidden">
+<div class="collapse-hidden">
 <!-- Replacement text label for when the content is being shown -->
-<label class="collapsible" for="my-example">Click to hide</label>{% endraw %}
+<label for="my-example">Click to hide</label>{% endraw %}
 <!-- The actual content that we want to show/hide -->
 ...
 </div>
@@ -343,16 +346,18 @@ And then the magic happens in CSS, where `x + y` means
 then apply this rule to the `<y>` element":
 ```css
 /* Hide the content by default */
-.collapsible-hidden {display: none;}
+.collapse-hidden {display: none;}
 /* Make the checkbox invisible */
-input.collapsible {display: none;}
+.collapse-toggle {display: none;}
 /* If it's checked, then show the content... */
-input.collapsible:checked + label + .collapsible-hidden {display: block;}
+.collapse-toggle:checked + label + .collapse-hidden {display: block;}
 /* ... and hide the original text label */
-input.collapsible:checked + label {display: none;}
+.collapse-toggle:checked + label {display: none;}
 ```
 
-Compared to `<details>`, this even gives some extra flexibility.
+Compared to `<details>`, this even gives some extra flexibility!
 For an example of a page using this technique,
 click [here](/know/concept/boltzmann-equation/) and scroll down.
-
+If you look at the source, you'll see that my HTML and CSS
+are a bit more complicated than described above,
+but it's still the same trick.