M .eleventy.js => .eleventy.js +1 -0
@@ 4,6 4,7 @@ export default function (eleventyConfig) {
dir: {
input: 'src',
output: '_site',
+ layouts: 'layouts',
},
}
}
A src/404.md => src/404.md +9 -0
@@ 0,0 1,9 @@
+---
+title: page not found
+layout: default
+permalink: /404.html
+---
+
+# 404
+
+Page Not Found
A src/colophon.md => src/colophon.md +12 -0
@@ 0,0 1,12 @@
+---
+title: colophon
+layout: default
+---
+
+## Website
+
+This site is handcrafted in GNU Emacs, built with Eleventy, and served by Cloudflare Pages.
+
+The typeface is [Departure Mono](//departuremono.com), with Light and Dark themes inspired by the palette of my go-to Emacs theme, [Kaolin Aurora](https://github.com/ogdenwebb/emacs-kaolin-themes/wiki/Kaolin-aurora-theme).
+
+The source code is available [here](//git.sr.ht/~thames/tham.es).
D src/index.11ty.js => src/index.11ty.js +0 -187
@@ 1,187 0,0 @@
-export function render(data) {
- return `<!doctype html>
- <html lang="en-us">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>thames</title>
- <link
- rel="icon"
- href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥃</text></svg>"
- type="image/svg+xml"
- />
- <link rel="preload" href="/avatar.gif" as="image" />
- <link
- rel="preload"
- href="/font.woff2"
- as="font"
- type="font/woff2"
- crossorigin="anonymous"
- />
- <style>
- @font-face {
- font-family: 'mono';
- src: url('/font.woff2') format('woff2');
- }
- html,
- body {
- margin: 0;
- padding: 0;
- height: 100%;
- font-size: clamp(1.2rem, 2vw, 2rem);
- font-family: 'mono', monospace;
- background: #fdfdff;
- color: #0c0f12;
- }
-
- main {
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100vh;
- max-width: 40rem;
- margin: 0 auto;
- padding: 1em;
- box-sizing: border-box;
- overflow: auto;
- }
-
- section {
- line-height: 1.4;
- display: flex;
- align-items: center;
- }
-
- p {
- margin: 0 0 0 1em;
- }
-
- img {
- height: 9em;
- width: 9em;
- image-rendering: pixelated;
- background: #e6e6e8;
- border-radius: 30%;
- }
-
- a {
- color: #000;
- text-decoration: none;
- }
-
- a:focus {
- background: #e6e6e8;
- outline: 2px solid #e6e6e8;
- outline-offset: 0px;
- border-radius: 5px;
- }
-
- footer {
- display: flex;
- margin-top: 1em;
- border: 0.2em #e6e6e8 solid;
- border-left: none;
- border-right: none;
- padding: 0.5em 0;
- justify-content: space-evenly;
- }
- @media (max-width: 600px) {
- section {
- flex-direction: column;
- }
- p {
- margin: 2em 0 0 0;
- }
- footer {
- justify-content: space-between;
- }
- footer a span {
- display: none;
- }
- }
-
- @media (prefers-color-scheme: dark) {
- html,
- body {
- background: #0c0f12;
- color: #bebec4;
- }
- img {
- background: #191f26;
- }
-
- a {
- color: #bebec4;
- }
-
- a:focus {
- background: #1f272e;
- outline: 2px solid #1f272e;
- }
-
- footer {
- border-color: #191f26;
- }
- }
-
- ::selection {
- background: #00ffbf;
- color: black;
- }
-
- .u-uid {
- display: none;
- }
-
- @media (prefers-color-scheme: dark) {
- body {
- background: #0c0f12;
- color: #bebec4;
- }
- img {
- background: #191f26;
- }
-
- a {
- color: #bebec4;
- }
-
- a:focus {
- background: #1f272e;
- outline: 2px solid #1f272e;
- }
- }
-
- ::selection {
- background: #00ffbf;
- color: black;
- }
- </style>
- </head>
- <body>
- <main class="h-card">
- <header></header>
- <section>
- <img class="u-photo" src="/avatar.gif" />
- <p>
- Welcome, I'm thames. This is my space on the web — simple,
- open, and indie.
- <span class="p-note">
- I'm a Domain Name, Emacs, NESdev, and Whiskey enthusiast.
- </span>
- </p>
- </section>
- <footer>
- <a class="u-url u-uid p-name" href="/">thames</a>
- <a class="u-url" href="/now">Now<span> Page</span></a>
- <a class="u-url" href="https://bsky.app/profile/tham.es"
- >B<span>lue</span>sky</a
- >
- <a class="u-url" href="https://git.sr.ht/~thames"
- >S<span>ou</span>r<span>ce</span>h<span>u</span>t</a
- >
- </footer>
- </main>
- </body>
- </html>`
-}
A src/index.html => src/index.html +27 -0
@@ 0,0 1,27 @@
+---
+title: thames
+layout: default
+head: >
+ <link rel="preload" href="/avatar.gif" as="image"/>
+ <link rel="stylesheet" href="/home.css" />
+---
+
+<section class="h-card">
+ <img class="u-photo" src="/avatar.gif" />
+ <p>
+ Welcome, I'm <span class="p-name">thames</span>. This is my space on the
+ web — <a href="/colophon">simple</a>,
+ <a href="//git.sr.ht/~thames/tham.es">open</a>, and
+ <a href="//indieweb.org">indie</a>.
+ <span class="p-note">
+ I'm a Domain Name, Emacs, NESdev, and Whiskey enthusiast.
+ </span>
+ </p>
+ <ul>
+ <li><a class="u-url u-uid" href="/">Home Page</a></li>
+ <li><a class="u-url" href="/now">Now Page</a></li>
+ <li><a class="u-email" href="mailto:richard@tham.es">Email</a></li>
+ <li><a class="u-url" href="//bsky.app/profile/tham.es">Bluesky</a></li>
+ <li><a class="u-url" href="//git.sr.ht/~thames">Sourcehut</a></li>
+ </ul>
+</section>
A src/layouts/default.11ty.js => src/layouts/default.11ty.js +36 -0
@@ 0,0 1,36 @@
+export function render({ content, head, page, title }) {
+ return `<!doctype html>
+ <html lang="en-us">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>${title}</title>
+ <link rel="stylesheet" href="/base.css" />
+ <link
+ rel="icon"
+ href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥃</text></svg>"
+ type="image/svg+xml"
+ />
+ <link
+ rel="preload"
+ href="/font.woff2"
+ as="font"
+ type="font/woff2"
+ crossorigin="anonymous"
+ />
+ ${head || ''}
+ </head>
+ <body>
+ <main>
+ ${
+ page.url === '/'
+ ? ''
+ : '<header><a href="/">tham.es</a> / ' +
+ page.fileSlug +
+ '</header>'
+ }
+ ${content}
+ </main>
+ </body>
+ </html>`
+}
A src/static/base.css => src/static/base.css +56 -0
@@ 0,0 1,56 @@
+@font-face {
+ font-family: 'mono';
+ src: url('/font.woff2') format('woff2');
+}
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ font-size: 1.2rem;
+ font-family: 'mono', monospace;
+ background: #fdfdff;
+ color: #0c0f12;
+ line-height: 1.4;
+}
+
+main {
+ max-width: 40rem;
+ margin: 0 auto;
+ padding: 1em;
+ box-sizing: border-box;
+ overflow: auto;
+}
+
+a {
+ color: #000;
+}
+
+a:focus {
+ background: #e6e6e8;
+ outline: 2px solid #e6e6e8;
+ outline-offset: 0px;
+ border-radius: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+ html,
+ body {
+ background: #14191e;
+ color: #bebec4;
+ }
+
+ a {
+ color: #bebec4;
+ }
+
+ a:focus {
+ background: #1f272e;
+ outline: 2px solid #1f272e;
+ }
+}
+
+::selection {
+ background: #00ffbf;
+ color: black;
+}
A src/static/home.css => src/static/home.css +41 -0
@@ 0,0 1,41 @@
+html,
+body {
+ font-size: clamp(1.2rem, 2vw, 2rem);
+}
+main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 100vh;
+}
+section {
+ display: flex;
+ align-items: center;
+}
+img {
+ height: 9em;
+ width: 9em;
+ image-rendering: pixelated;
+ background: #e6e6e8;
+ border-radius: 30%;
+}
+p {
+ margin: 0 0 0 1em;
+}
+ul {
+ display: none;
+}
+@media (max-width: 600px) {
+ section {
+ flex-direction: column;
+ }
+ p {
+ margin: 2em 0 0 0;
+ text-align: center;
+ }
+}
+@media (prefers-color-scheme: dark) {
+ img {
+ background: #191f26;
+ }
+}