M => +1 -1
@@ 1,4 1,4 @@
<footer role="contentinfo" id="menu">
<footer>
<br>
<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-family:"Palatino", serif;line-height:1.48;margin:0 auto;max-width:90ch;padding:1.5em;}img{height:auto;max-width:100%;}pre{overflow:auto;}h1,h2,h3,h4,h5,h6{font-family:"Verdana", sans-serif;line-height:1.2;margin-top:1.5em;}</style>
+ <style>img{max-width:100%;}pre{overflow:auto}</style>
</head>
M => +4 -1
@@ 1,3 1,6 @@
<header role="banner">
<header>
<span>Welcome to <strong>tdarb.org</strong>. Enjoy your visit!</span>
<hr>
{% include navigation.html %}
<hr>
</header>
M _includes/navigation.html => _includes/navigation.html +1 -1
@@ 1,4 1,4 @@
-<nav role="navigation">
+<nav>
<a href="/">Home</a>
<span>·</span>
<a href="/about">About</a>
M _layouts/default.html => _layouts/default.html +1 -1
@@ 5,7 5,7 @@
<body>
- <main id="main" role="main">
+ <main>
{% include header.html %}
{{ content }}
{% include footer.html %}
M index.md => index.md +6 -4
@@ 1,11 1,13 @@
---
layout: page
-title: User interface designer, developer & <strike>hardware</strike> Raspberry Pi tinkerer
+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.
@@ 32,11 34,11 @@ The web is a bloated mess. I created these ever-growing directories to showcase
## Popular essays & thought experiments:
-[Better Search Results](/better-search-results/) <br>
+- [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>
+- [Blog Anonymously](/blog-anonymously/) <br>
Tips and tricks on how to blog anonymously across the interwebs.
-[Frugal Web Browser](https://frugalweb.xyz) <br>
+- [Frugal Web Browser](https://frugalweb.xyz) <br>
A design experiment exploring the concept of a performance-focused web browser.
M style.css => style.css +10 -61
@@ 1,61 1,10 @@
-*{box-sizing:border-box;}
-body{font:15px/1.44 serif;margin:1.5em;}
-img{background-color:white;display:block;height:auto;max-width:1000px;width:100%;}
-code{font-size:13px;word-wrap:break-word;}
-pre{border:1px dashed;height:43px;margin:5px 0 0;overflow:auto;padding:10px;}
-pre:hover{height:100%;}
-pre code{word-wrap:normal;}
-table{border-collapse:collapse;text-align:left;width:100%;}
-table:not(.articles) th, table:not(.articles) td{border:1px solid;padding:10px;vertical-align:top;}
-p{text-align:justify;width:100%;}
-blockquote{font-style:italic;}
-figcaption{font-style:italic;font-size:90%;margin-top:10px;}
-fieldset{min-width:auto;width:100%;}
-.footnotes{font-size:90%;}
-.reversefootnote{font-size:80%;vertical-align:top;}
-.post-title{font-size:180%;margin-top:0;}
-
-header,footer {text-align:center;}
-section {margin:auto;max-width:55ch;padding:20px 0 40px;}
-section.article-list,article {
- column-count: 2;
- column-fill: balance;
- column-gap: 5ch;
- column-rule: none;
- column-width: 40ch;
- margin: auto;
- max-width: 100ch;
- padding: 20px 0;
-}
-.article-item {
- border-bottom: 1px solid;
- break-inside: avoid;
- margin-bottom: 2em;
-}
-section.article-list {
- column-count: auto;
- column-rule: 1px solid rgb(204,204,204);
- margin: 0 auto;
- max-width: 100%;
- overflow: visible;
-}
-article.single {
- max-width:55ch;
-}
-article p:first-of-type, article > h3 {margin-top: 0;}
-
-.pagination {
- margin: 4em 0;
- text-align: center;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
- /* Some browsers (eg Chrome) don't unset dark mode when printing */
- @media not print {
- html {background:#0e0e0e;color:#e1e1e1; }
- a {color: gold;}
- a:visited {color: orange;}
- a:hover,a:focus{color:orangered;}
- }
-}
+*{box-sizing: border-box;}
+body {
+ background-color: #f9f9f9;
+ line-height: 1.5;
+ margin: 2em auto;
+ max-width: 650px;
+}
+p + p {text-indent:40px;}
+p:last-child{text-indent:0;}
+img{height:auto;max-width:100%;}