Swap out lowdown for standard markdown for more flexibility

5 files changed, 15 insertions, 7 deletions

diff --git a/.build.yml b/.build.yml
index 7e3803e..ff70f23 100644
--- a/.build.yml
+++ b/.build.yml
@@ -2,7 +2,7 @@ image: alpine/latest
 oauth: pages.sr.ht/PAGES:RW
 packages:
 - rsync 
-- lowdown
+- markdown
 - coreutils
 - go
 - hut
diff --git a/barf b/barf
index 53750ca..9cdcb8d 100755
--- a/barf
+++ b/barf
@@ -15,7 +15,7 @@ elif [ "$os_name" = "Darwin" ]; then
 fi
 
 set -eu
-MARKDOWN=lowdown
+MARKDOWN=markdown
 IFS='	'
 
 # Create tab separated file with filename, title, creation date, last update
@@ -41,7 +41,7 @@ index_html() {
 	while read -r f title created; do
 		link=$(echo "$f" | sed -E 's|.*/(.*).md|\1/|')
 		created=$(echo $(head -3 "$f" | tail -1))
-		echo "<li>$created &middot; <a href=\"$link\">$title</a></li>"
+		echo "<li><span>$created</span><a href=\"$link\">$title</a></li>"
 	done < "$1" | sort -r
 
 	echo "</ul>"
diff --git a/header.html b/header.html
index 63151e3..cd1ca7a 100644
--- a/header.html
+++ b/header.html
@@ -8,7 +8,7 @@
 	<title>{{TITLE}}</title>
 	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
 	<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
-<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts{list-style:none;padding:0;}.footnotes{font-size:90%;}</style>
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts,#menu{list-style:none;padding:0;}.posts li{margin-bottom:8px;}.posts li span{display:block;font-size:90%;}#menu li{display:inline-block;margin-right:8px;}.footnotes{font-size:90%;}</style>
 </head>
 
 <nav>
diff --git a/index.md b/index.md
index b2f26df..e1a94cd 100644
--- a/index.md
+++ b/index.md
@@ -1,4 +1,6 @@
-# Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences.
+# ~bt
+
+**Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences.**
 
 As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several [open source projects](/projects).
 
diff --git a/posts/Please_Make_Your_Table_Headings_Sticky.md b/posts/Please_Make_Your_Table_Headings_Sticky.md
index 249066a..239c94d 100644
--- a/posts/Please_Make_Your_Table_Headings_Sticky.md
+++ b/posts/Please_Make_Your_Table_Headings_Sticky.md
@@ -4,7 +4,10 @@
 
 I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll...
 
-[Click here to see standard table headers video](/public/videos/not-fixed-header-tables.mp4)
+<video width="100%" controls="">
+  <source src="/public/videos/not-fixed-header-tables.mp4" type="video/mp4">
+Your browser does not support the video tag.
+</video>
 
 <h2>This should be a header</h2>
 
@@ -14,7 +17,10 @@ Look at that table header disappear! Now, if I scroll all the way down to item #
 
 Check it out:
 
-[Click here to see "fixed" table headers video](/public/videos/fixed-header-tables.mp4)
+<video width="100%" controls="">
+  <source src="/public/videos/fixed-header-tables.mp4" type="video/mp4">
+Your browser does not support the video tag.
+</video>
 
 Pretty awesome, right? It might look like magic but it's actually very easy to implement. You only need to add 2 CSS properties on your `thead`: