~bt/barf

8591d2db71a4a269cf3b1c5808107cb8810cd32f — Bradley Taunt 13 days ago d64a18d 
Ship basic dark mode and publish small post about these changes
patch browse .tar.gz 
10 files changed, 218 insertions(+), 38 deletions(-)

M build/about/index.html
M build/atom.xml
A build/dark-mode/index.html
M build/index.html
M build/macos/index.html
M build/markdown-examples/index.html
M build/posts.tsv
M build/websites/index.html
M header.html
A posts/dark-mode.md

M build/about/index.html => build/about/index.html +8 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>About `barf`</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


M build/atom.xml => build/atom.xml +20 -2
@@ 2,9 2,9 @@
<feed xmlns="http://www.w3.org/2005/Atom">
	<title>barf</title>
	<link href="https://barf.bt.ht/atom.xml" rel="self" />
	<updated>2023-01-18T10:34:50Z</updated>
	<updated>2023-03-07T11:14:15Z</updated>
	<author>
		<name></name>
		<name>Bradley Taunt</name>
	</author>
	<id>https://barf.bt.ht,2023-01-04:default-atom-feed/</id>
	<entry>


@@ 273,4 273,22 @@ brew install gnu-sed
		<updated>2023-01-18T00:00:00Z</updated>
		<published>2023-01-18T00:00:00Z</published>
	</entry>
	<entry>
		<title>Supporting Basic Dark Mode</title>
		<content type="html">&lt;h1&gt;Supporting Basic Dark Mode&lt;/h1&gt;
&lt;p&gt;2023-03-07&lt;/p&gt;
&lt;p&gt;The default &lt;code&gt;barf&lt;/code&gt; site generator now supports basic dark mode functionality. This has been achieved by including the standard &lt;code&gt;color-scheme&lt;/code&gt; meta tag in the core &lt;code&gt;header.html&lt;/code&gt; file:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;meta name=&amp;quot;color-scheme&amp;quot; content=&amp;quot;dark light&amp;quot;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This change also ships with some minor updates to the default &lt;code&gt;blockquote&lt;/code&gt; design. You can see an example below:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;This is a really &lt;em&gt;cool&lt;/em&gt; blockquote&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;Minor Caveat&lt;/h2&gt;
&lt;p&gt;Unfortunately, Safari still has minor &lt;code&gt;ahref&lt;/code&gt; / link color issue when defaulting to browser dark mode. If this is a problem for your own build of &lt;code&gt;barf&lt;/code&gt;, take a look at a &lt;a href=&quot;https://bt.ht/safari-default-dark-mode/&quot;&gt;solution I wrote about here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Personally, I can&#39;t be bothered to add that extra code to this project. The Safari team needs to get their shit together and fix such a simple bug. Plus, you shouldn&#39;t be using Safari anyway - it&#39;s proprietary garbage.&lt;/p&gt;</content>
		<link href="https://barf.bt.ht/dark-mode"/>
		<id>https://barf.bt.ht/dark-mode</id>
		<updated>2023-03-07T00:00:00Z</updated>
		<published>2023-03-07T00:00:00Z</published>
	</entry>
</feed>


A build/dark-mode/index.html => build/dark-mode/index.html +129 -0
@@ 0,0 1,129 @@
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>Supporting Basic Dark Mode</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>
		* {
			box-sizing: border-box;
		}
		body {
			font-family: sans-serif;
			line-height: 1.45;
			margin: 0 auto;
			max-width: 45rem;
			padding: 0 15px;
		}
		hr {
			background-color: grey;
			border: 0;
			height: 1px;
			margin: 2rem 0;
		}
		nav {
			margin: 2rem 0 0;
		}
		main {
			hyphens: auto;
		}
		main p {
			margin: 1rem;
		}
		h1,h2,h3,h4 {
			margin: 2rem 0 0;
		}
		h1 {
			margin-bottom: 0.5rem;
		}
		h1 + p {
			margin: 0 0 1rem;
		}
		span.created {
			display: block;
			margin: 4px 15px;
		}
		img {
			border: 1px solid lightgrey;
			height: auto;
			max-width: 100%;
			width: auto;
		}
		blockquote {
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}
		blockquote p {
			margin: 0;
		}
		figure {
			margin: 2rem 0;
		}
		figcaption {
			color: slategrey;
		}
		code {
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			border: 1px solid;
		}
		pre code {
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;
		}
		table {
			border-collapse: collapse;
			margin: 2rem 0;
			text-align: left;
			width: 100%;
		}
		tr {
			border-bottom: 1px solid lightgrey;
		}
		tr:nth-of-type(odd) td {
			background-color: #f8f8f8;
		}
		th,td {
			padding: 6px;
		}
		footer {
			border-top: 1px dashed grey;
			margin: 2rem 0;
			padding: 1rem 15px;
		}
	</style>
</head>

<nav>
	<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
</nav>

<main>
<h1>Supporting Basic Dark Mode</h1>
<p>2023-03-07</p>
<p>The default <code>barf</code> site generator now supports basic dark mode functionality. This has been achieved by including the standard <code>color-scheme</code> meta tag in the core <code>header.html</code> file:</p>
<pre><code>&lt;meta name=&quot;color-scheme&quot; content=&quot;dark light&quot;&gt;
</code></pre>
<p>This change also ships with some minor updates to the default <code>blockquote</code> design. You can see an example below:</p>
<blockquote><p>This is a really <em>cool</em> blockquote</p>
</blockquote>
<h2>Minor Caveat</h2>
<p>Unfortunately, Safari still has minor <code>ahref</code> / link color issue when defaulting to browser dark mode. If this is a problem for your own build of <code>barf</code>, take a look at a <a href="https://bt.ht/safari-default-dark-mode/">solution I wrote about here</a>.</p>
<p>Personally, I can't be bothered to add that extra code to this project. The Safari team needs to get their shit together and fix such a simple bug. Plus, you shouldn't be using Safari anyway - it's proprietary garbage.</p>
<footer role="contentinfo">
    <span><a href="#">↑ Back to Top</a></span><br><br>
    <small>
        Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
        The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
    </small>
</footer>
\ No newline at end of file


M build/index.html => build/index.html +9 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>barf</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


@@ 117,6 119,7 @@
<p>Blogs Are Really Fun</p>
</blockquote>
<hr />
<span class='created'>2023-03-07 &mdash; <a href="dark-mode/">Supporting Basic Dark Mode</a></span>
<span class='created'>2023-01-18 &mdash; <a href="macos/">Running `barf` on MacOS</a></span>
<span class='created'>2023-01-05 &mdash; <a href="markdown-examples/">Markdown Examples in barf</a></span>
<footer role="contentinfo">


M build/macos/index.html => build/macos/index.html +8 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>Running `barf` on MacOS</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


M build/markdown-examples/index.html => build/markdown-examples/index.html +8 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>Markdown Examples in barf</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


M build/posts.tsv => build/posts.tsv +1 -0
@@ 1,2 1,3 @@
posts/markdown-examples.md	Markdown Examples in barf		
posts/macos.md	Running `barf` on MacOS		
posts/dark-mode.md	Supporting Basic Dark Mode		


M build/websites/index.html => build/websites/index.html +8 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>Websites Built with `barf`</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


M header.html => header.html +8 -6
@@ 3,6 3,8 @@
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>{{TITLE}}</title>
	<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>


@@ 51,8 53,8 @@
			width: auto;
		}
		blockquote {
			background-color: linen;
			border-left: 4px solid lightcoral;
			border: 1px solid;
			border-left: 6px solid;
			margin: 2rem 0;
			padding: 10px;
		}


@@ 66,15 68,15 @@
			color: slategrey;
		}
		code {
			background: #eee;
			padding: 0.3rem;
			border: 1px solid;
			padding: 0.1rem 0.3rem;
			tab-size: 4;
		}
		pre {
			background: #eee;
			border: 1px solid;
		}
		pre code {
			background: none;
			border: 0;
			display: block;
			overflow-x: auto;
			padding: 0.3rem 0.6rem;


A posts/dark-mode.md => posts/dark-mode.md +19 -0
@@ 0,0 1,19 @@
# Supporting Basic Dark Mode

2023-03-07

The default `barf` site generator now supports basic dark mode functionality. This has been achieved by including the standard `color-scheme` meta tag in the core `header.html` file:

```
<meta name="color-scheme" content="dark light">
```

This change also ships with some minor updates to the default `blockquote` design. You can see an example below:

> This is a really *cool* blockquote

## Minor Caveat

Unfortunately, Safari still has minor `ahref` / link color issue when defaulting to browser dark mode. If this is a problem for your own build of `barf`, take a look at a [solution I wrote about here](https://bt.ht/safari-default-dark-mode/).

Personally, I can't be bothered to add that extra code to this project. The Safari team needs to get their shit together and fix such a simple bug. Plus, you shouldn't be using Safari anyway - it's proprietary garbage.
\ No newline at end of file