diff --git a/sample_data/article/index.md b/sample_data/article/index.md
index 04e93ea..971b3d2 100644
--- a/sample_data/article/index.md
+++ b/sample_data/article/index.md
@@ -35,16 +35,16 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 2. Another item
-⋅⋅* Unordered sub-list. 
+  * Unordered sub-list. 
 1. Actual numbers don't matter, just that it's a number
-⋅⋅1. Ordered sub-list
+  1. Ordered sub-list
 4. And another item.
 
-⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
+   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
 
-⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
-⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
-⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
+   To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
+   Note that this line is separate, but within the same paragraph.⋅⋅
+   (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
 
 * Unordered list can use asterisks
 - Or minuses
diff --git a/sample_data/home/style.css b/sample_data/home/style.css
index f01d8a3..fb4ca4e 100644
--- a/sample_data/home/style.css
+++ b/sample_data/home/style.css
@@ -79,6 +79,23 @@ table td:first-of-type {
     padding: 0.25em 0.5em;
 }
 
+details {
+    background: #f8f8f8;
+    margin: 0.25em 0;
+    padding: 0;
+}
+
+details > summary {
+    cursor: pointer;
+    padding: 0.5em 1em;
+}
+
+details > p {
+    background: #f5f5f5;
+    padding: 0.5em 0.5em 0.5em 2em;
+    margin: 0;
+}
+
 main.article div.header span.time span, div.article span.time span {
     color: #888;
     font-family: serif;