summaryrefslogtreecommitdiff
path: root/src/posts/hello-world.md
diff options
context:
space:
mode:
authorElizabeth Hunt <me@liz.coffee>2025-12-14 17:36:55 -0800
committerElizabeth Hunt <me@liz.coffee>2025-12-14 17:36:55 -0800
commit0888840cf20de2187095daa154ec441240a12ef3 (patch)
tree40b20808ecb31200978dc7de466d3e2102f987d6 /src/posts/hello-world.md
downloadlizdotcoffee-0888840cf20de2187095daa154ec441240a12ef3.tar.gz
lizdotcoffee-0888840cf20de2187095daa154ec441240a12ef3.zip
Init
Diffstat (limited to 'src/posts/hello-world.md')
-rw-r--r--src/posts/hello-world.md34
1 files changed, 34 insertions, 0 deletions
diff --git a/src/posts/hello-world.md b/src/posts/hello-world.md
new file mode 100644
index 0000000..22eef26
--- /dev/null
+++ b/src/posts/hello-world.md
@@ -0,0 +1,34 @@
+---
+layout: base.njk
+title: Hello World
+date: 2025-12-14
+---
+
+# Hello World!
+
+This is my first blog post. I can write regular markdown here.
+
+## Interactive Toy Example
+
+Here's a little interactive toy:
+
+<div id="color-toy" style="padding: 2rem; background: #f0f0f0; border-radius: 8px; text-align: center;">
+ <button id="change-color">Click me!</button>
+ <p id="color-display" style="margin-top: 1rem; font-weight: bold;">Color: #f0f0f0</p>
+</div>
+
+<script>
+ const btn = document.getElementById('change-color');
+ const display = document.getElementById('color-display');
+ const toy = document.getElementById('color-toy');
+
+ btn.addEventListener('click', () => {
+ const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
+ toy.style.background = randomColor;
+ display.textContent = 'Color: ' + randomColor;
+ });
+</script>
+
+## More Content
+
+And I can continue writing markdown after the interactive bit!