move stylesheet to local static, add fitvids-ish css aspect-ratio han…

…dling for videos, different link hovers

content/posts/2010-05-11-coding-ye-olde-todo-app.html

@@ -4,7 +4,7 @@
 slug = "coding-ye-olde-todo-app"
 layout = "blog"
 +++
-<iframe src="//www.youtube.com/embed/o4M8mw_0IOg" frameborder="0"></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/o4M8mw_0IOg?si=xUaK3lRK9onILrbd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 <p><a href="http://microcosmpublishing.com/">Microcosm</a> asked to add a todo section to their admin, and this is what I came up with after a few half-days of coding (thanks in large part to my good friend <a href="http://mootools.net/">MooTools</a>). They have two shops and a growing staff, and everybody spends quite a bit of time in the admin I built for them.</p>
 <p>I&rsquo;m a huge fan of <a href="http://www.potionfactory.com/thehitlist/">The Hit List</a>, which I believe is just about as perfect a task manager as you could ask for, and I obviously borrowed some ideas. If I had more time to fuss with this, and if it was something <i>I&rsquo;d</i> be using regularly, I&rsquo;d implement full keyboard control and mimic The Hit List even more.</p>
 <p>Todo apps feel like the advanced &ldquo;Hello, World&rdquo; of programming exercises, akin to Tetris for game developers. I can&rsquo;t believe it took me this long to get to make one.</p>

static/js/main.js

@@ -0,0 +1,4 @@
+// Adjust aspect-ratio for "fitvid" videos
+document.querySelectorAll('iframe[src*="youtube"], iframe[src*="vimeo"]').forEach((video) => {
+  video.style.aspectRatio = `${video.getAttribute('width')} / ${video.getAttribute('height')}`
+});