M _config.yml => _config.yml +1 -1
@@ 48,7 48,7 @@ cloudinary:
markdown: kramdown
kramdown:
- footnote_backlink: "[return]"
+ footnote_backlink: "↩︎"
compress_html:
clippings: all
A _includes/aside.html => _includes/aside.html +17 -0
@@ 0,0 1,17 @@
+<aside>
+ <img src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt">
+ {% include navigation.html %}
+ <dl>
+ <dt>email</dt>
+ <dd><a href="mailto:hello@tdarb.org">hello@tdarb.org</a></dd>
+ <dt>sourcehut</dt>
+ <dd><a href="https://sr.ht/~uglyduck/">~uglyduck</a></dd>
+ <dt>github</dt>
+ <dd><a href="https://github.com/bradleytaunt">bradleytaunt</a></dd>
+ <dt>dribbble</dt>
+ <dd><a href="https://dribbble.com/hustlepizza">tdarb</a></dd>
+ <dt>donate</dt>
+ <dd><a href="https://en.liberapay.com/tdarb">liberapay</a></dd>
+ </dl>
+ <p><small>Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and vintage electronics. You can learn more <a href="/about">details about me here</a>.</small></p>
+</aside><
\ No newline at end of file
M => +3 -1
@@ 1,7 1,9 @@
<footer>
<br>
<hr>
<p align="center">This site is part of the Fediverse webring:<br>
{% include navigation.html %}
<hr>
<p style="text-align: center;">This site is part of the Fediverse webring:<br>
<a href="https://fediring.net/previous?host=tdarb.org">←</a> <a href="https://fediring.net/">Fediring</a> <a href="https://fediring.net/next?host=tdarb.org">→</a></p>
<hr>
<small>
M _includes/head.html => _includes/head.html +1 -1
@@ 12,5 12,5 @@
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png">
<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml">
- <style>*{box-sizing:border-box;}body{font:18px/1.45 'Palatino','Georgia',serif;margin:auto;max-width:75ch;padding:10px;}a,a:visited{color:darkblue;}a:hover,a:focus{color:crimson;}img{max-width:100%;}pre{overflow:auto}figure{border:1px solid;max-width:800px;padding:10px;text-align:center;}code{font-size:16px;}.single .promo{border:double;display:block;margin:2rem 0;padding:15px;position:relative;width:100%;}table{width:100%;}</style>
+ <link rel="stylesheet" href="{{ site.baseurl }}/style.css">
</head>
M => +2 -3
@@ 1,6 1,5 @@
<header>
<span>Welcome to <strong>tdarb.org</strong>. Enjoy your visit!</span>
<hr>
{% include navigation.html %}
<h1>Bradley Taunt's blog</h1>
<span>{{ site.description }}</span>
<hr>
</header>
M _includes/navigation.html => _includes/navigation.html +1 -7
@@ 1,17 1,11 @@
<nav>
- <a href="/">Home</a>
- <span>·</span>
<a href="/about">About</a>
<span>·</span>
<a href="/projects">Projects</a>
<span>·</span>
- <a href="/articles">Articles</a>
- <span>·</span>
- <a href="/uses">Things I Use</a>
+ <a href="/uses">Uses</a>
<span>·</span>
<a href="/privacy">Privacy</a>
<span>·</span>
- <a href="https://en.liberapay.com/uglyduck/">Support</a>
- <span>·</span>
<a href="/feed.xml">RSS</a>
</nav>
M _layouts/bloglist.html => _layouts/bloglist.html +14 -7
@@ 1,9 1,16 @@
----
-layout: default
----
+<!DOCTYPE html>
+<html lang="en">
-<header>
- <h1>{{ page.title }}</h1>
-</header>
+ {% include head.html %}
-{{ content }}
+ <body class="index">
+
+ {% include header.html %}
+ <main>
+ {{ content }}
+ </main>
+ {% include aside.html %}
+ {% include footer.html %}
+
+ </body>
+</html>
M _layouts/default.html => _layouts/default.html +0 -1
@@ 5,7 5,6 @@
<body>
- {% include header.html %}
<main>
{{ content }}
{% include footer.html %}
M _layouts/page.html => _layouts/page.html +2 -0
@@ 4,6 4,8 @@ layout: default
<header>
<h1>{{ page.title }}</h1>
+ <span><a href="{{ site.url }}">← return to the hompage</a></span>
+ <hr>
</header>
<section>
M _layouts/post.html => _layouts/post.html +2 -3
@@ 4,14 4,13 @@
{% include head.html %}
<body>
- {% include header.html %}
<main>
<header>
<h1>{{ page.title }}</h1>
+ <span><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time> on <a href="{{ site.url }}">Bradley Taunt's blog</a></span>
+ <hr>
</header>
<article class="single">
- <p><em>Posted on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></em></p>
- <hr>
{{ content }}
</article>
<br>
M about.md => about.md +26 -2
@@ 7,8 7,6 @@ permalink: /about/
If you're reading this page, that means you want to know a little more than what I mention on the homepage. Thanks for your interest and curiosity!
-<img style="float:right;margin:0 0 5px 15px;width:165px;" src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt">
-
I'm Brad Taunt, a web designer/developer hybrid with over 10 years of professional experience across large enterprise application software, all the way down to mom-and-pop shops. I have a strong emphasis on building maintainable CSS, with a passion for accessibility and web performance.
**tdarb** is simply my first name and last initial spelt backwards:
@@ 19,8 17,34 @@ I'm Brad Taunt, a web designer/developer hybrid with over 10 years of profession
When I'm not pushing pixels or hacking up some code, you can find me experimenting with the latest CSS, splitting batches of firewood, cheering on the Ottawa Senators, or hanging out with my wife and our two sons. Feel free to also check out my [reading list](/books).
+Articles written here are more or less for my own reference in the future – don’t take them so seriously. Some of my more popular and “customized” essays are listed below, if that’s your cup of tea.
+
+If you're interested, I also curate the exclusive membership groups [1mb.club](https://1mb.club) and [XHTML.club](https://xhtml.club). The web is a bloated mess and I created these ever-growing directories to showcase websites that care about respecting their users' time and resources. Feel free to submit your own personal sites or projects if they fit within the restrictions of these "exclusive" clubs.
+
+> *Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better*.
+>
+>-- Edsger Wybe Dijkstra
+
I'm a huge fan of video games in general but tend to get sucked into looter shooters, in-depth RPGs and relaxing simulators. Whenever I manage to get any "free time" (that's a difficult thing to obtain with two kids under 4) you'll find me grinding out power levels in Destiny 2, being summoned for some jolly co-op in Dark Souls, or catching some fish in Animal Crossing New Horizons.
+## Some of my more popular articles
+
+- [A Reality Where CSS and JavaScript Don't Exist](/css-js-mistake/)
+- [Making Tables Responsive With Minimal CSS](/responsive-tables/)
+- [Write HTML Like It's 1999](/html-like-1999/)
+- [Better Box Shadows](/better-box-shadows/)
+
+## Essays & thought experiments
+
+- [Better Search Results](/better-search-results/) <br>
+A UX experiment and case study re-thinking the design of search result layouts.
+
+- [Blog Anonymously](/blog-anonymously/) <br>
+Tips and tricks on how to blog anonymously across the interwebs.
+
+- [Frugal Web Browser](https://frugalweb.xyz) <br>
+A design experiment exploring the concept of a performance-focused web browser.
+
## Respecting your privacy
This website has zero trackers and does not have any form of analytics. So you can rest assured that your privacy is completely safe while browsing this website.
D articles/index.html => articles/index.html +0 -29
@@ 1,29 0,0 @@
----
-layout: bloglist
-title: Articles
-description: The rants and ravings of a madman screaming into the abyss of the internet
-pagination:
- enabled: true
----
-
-{% for post in paginator.posts %}
- <article>
- <p><small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></small><br><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></p>
- </article>
-{% endfor %}
-
-<br>
-<!-- Pagination links -->
-<div class="pagination">
- {% if paginator.previous_page %}
- <a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
- {% endif %}
- <span class="page_number ">
- Page: {{ paginator.page }} of {{ paginator.total_pages }}
- </span>
- {% if paginator.next_page %}
- <a href="{{ paginator.next_page_path }}" class="next">Next</a>
- {% else %}
- <span class="next ">Next</span>
- {% endif %}
-</div>
A index.html => index.html +11 -0
@@ 0,0 1,11 @@
+---
+layout: bloglist
+title: User interface designer, developer & Raspberry Pi tinkerer
+description: The personal blog of Bradley Taunt
+---
+
+{% for post in site.posts %}
+ <article>
+ <p><small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></small><br><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></p>
+ </article>
+{% endfor %}
D index.md => index.md +0 -39
@@ 1,39 0,0 @@
----
-layout: page
-title: User interface designer, developer & Raspberry Pi tinkerer
-description: The personal blog of Bradley Taunt
----
-
-Hello, my name is Brad Taunt and this is my little piece of the internet. I’m a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware – specifically single board computers and vintage electronics. You can learn more [details about me here](/about) - including my goofy looking portrait for visual reference (in case you need to avoid me in public)
-
-You might be wondering why this website has no CSS - which might seem odd since *I am* a designer - but luckily I've [written about the merits of a world without CSS or JavaScript](/css-js-mistake/) that helps shed some light on my decision to go CSS-less. Maybe that article will convince you to do the same. Less web bloat is always a good thing!
-
-I believe in a free and open web, which is why I try to contribute as much as possible to the open source community and [create my own libre software products](/projects).
-
-This blog is a place for me to just dump my thoughts, ranging from design patterns, CSS hacks/demos, custom SBC builds, linux distros and even video games.
-
-Articles written here are more or less for my own reference in the future – don’t take them so seriously. Some of my more popular and “customized” essays are listed below, if that’s your cup of tea.
-
-If you're interested, I also curate the exclusive membership groups [1mb.club](https://1mb.club) and [XHTML.club](https://xhtml.club). The web is a bloated mess and I created these ever-growing directories to showcase websites that care about respecting their users' time and resources. Feel free to submit your own personal sites or projects if they fit within the restrictions of these "exclusive" clubs.
-
-> *Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better*.
->
->-- Edsger Wybe Dijkstra
-
-## Some of my more popular articles
-
-- [A Reality Where CSS and JavaScript Don't Exist](/css-js-mistake/)
-- [Making Tables Responsive With Minimal CSS](/responsive-tables/)
-- [Write HTML Like It's 1999](/html-like-1999/)
-- [Better Box Shadows](/better-box-shadows/)
-
-## Essays & thought experiments
-
-- [Better Search Results](/better-search-results/) <br>
-A UX experiment and case study re-thinking the design of search result layouts.
-
-- [Blog Anonymously](/blog-anonymously/) <br>
-Tips and tricks on how to blog anonymously across the interwebs.
-
-- [Frugal Web Browser](https://frugalweb.xyz) <br>
-A design experiment exploring the concept of a performance-focused web browser.
M privacy.md => privacy.md +1 -1
@@ 14,6 14,6 @@ This website doesn't implement any trackers or analytics - so no worries.
### Support
-If you happen to enjoy any content on this site and have a burning urge to somehow thank me for it - feel free to support me by [donating through Liberapay](https://en.liberapay.com/uglyduck/).
+If you happen to enjoy any content on this site and have a burning urge to somehow thank me for it - feel free to support me by [donating through Liberapay](https://en.liberapay.com/tdarb).
Every little bit helps!=
\ No newline at end of file
M style.css => style.css +24 -9
@@ 1,10 1,25 @@
-*{box-sizing: border-box;}
-body {
- background-color: #f9f9f9;
- line-height: 1.5;
- margin: 2em auto;
- max-width: 650px;
+*{box-sizing:border-box;}
+body{font-family:sans-serif;line-height:1.3;margin:auto;max-width:920px;padding:10px;}
+dl{font-size:90%;}
+dt{font-weight:bold;}
+h1,h2,h3,h4,h5,h6{margin:2.5rem 0 0;}
+h1{font-size:1.5rem;margin:0;}
+h1 + span{display:block;margin:0 0 1rem;}
+img{max-width:100%;}
+pre{background:#f9f9f9;overflow:auto;padding:10px;}
+figure{border:1px solid;margin:2rem 0;max-width:800px;padding:10px;text-align:center;}
+code{font-size:16px;}
+body.index{display:flex;flex-wrap:wrap;justify-content:space-between;}
+body.index main{width:calc(100% - 300px);}
+aside{width:280px;}
+aside img{border-radius:8px;display:block;margin:1rem auto;max-width:150px;}
+.single, section{margin:0 auto;max-width:720px;}
+.single .promo{background:aliceblue;border:double;display:block;margin:2rem 0;padding:15px;position:relative;width:100%;}
+header,footer{width:100%;}
+nav{text-align:center;}
+.footnotes{font-size:85%;}
+table{width:100%;}
+@media(max-width:640px){
+ body.index main{width:100%;}
+ aside{display:none;}
}
-p + p {text-indent:40px;}
-p:last-child{text-indent:0;}
-img{height:auto;max-width:100%;}