diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2025-12-14 17:36:55 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2025-12-14 17:36:55 -0800 |
| commit | 0888840cf20de2187095daa154ec441240a12ef3 (patch) | |
| tree | 40b20808ecb31200978dc7de466d3e2102f987d6 /src/posts | |
| download | lizdotcoffee-0888840cf20de2187095daa154ec441240a12ef3.tar.gz lizdotcoffee-0888840cf20de2187095daa154ec441240a12ef3.zip | |
Init
Diffstat (limited to 'src/posts')
| -rw-r--r-- | src/posts/hello-world.md | 34 |
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! |
