Site Info

This is just a plain old website now. There’s no blog, only web pages. The design was inspired in part by and the best motherfucking website. I create all pages by hand with GNU Emacs on Slackware, and use hand-made templates. I use a makefile to generate 360 pixel wide WEBP thumbnails and upload my site to a space rented from

Sample Files

Make copies of these files and use them if you like. You’ll need a PC running a reasonably current GNU/Linux, GNU/systemd, or BSD operating system.

GNU makefile
.SUFFIXES: .jpg .png .webp
.DEFAULT: images
include ./sshvars
PNG!=find site/images/ -name "*.png"
JPG!=find site/images/ -name "*.jpg"

	cwebp -short -resize 360 0 "$<" -o "$@"

	cwebp -short -resize 360 0 "$<" -o "$@"

images: $(JPG_WEBP) $(PNG_WEBP)

serve: images
	python3 -m http.server --directory site/

install: images
	rsync  	--rsh="ssh ${SSH_OPTS}" \
		--delete-delay \
		--exclude-from='./web-exclude.txt' \
		-acvz site/ ${SSH_USER}@${SSH_HOST}:${SSH_PATH}

	rm -rf $(JPG_WEBP) $(PNG_WEBP)
page template
<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>home |</title>
	<meta name="description" content="This is Matthew Graybosch's home page. He write science fantasy, is a devout metalhead, and is a full-stack thaumaturge at his day job.">
	<meta name="theme-color" content="#16161d">
	<meta name="robots" content="index,follow">
	<meta name="googlebot" content="noindex">
	<meta name="google" content="nositelinkssearchbox">
	<meta name="google" content="notranslate">
	<meta name="generator" content="GNU Emacs">
	<meta name="monetization" content="$">
	<link rel="stylesheet" href="/style.css">
	<link rel="icon" href="data:,">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
	<link rel="license" href="">
	<link rel="me" href="">
	<link rel="me" href="">
	<link rel="alternate" href="/feed.xml" type="application/atom+xml" title=" (atom)">
	<header id="banner" class="center">
	    <h1 class="title">Matthew’s Website</h1>
	    <q>even in the future nothing works</q>
	<main id="content">

	<footer class="center">
	    <small>© 2021 <a href="" rel="me">Matthew Graybosch</a>, <a href="" rel="license">some rights reserved</a>
breadcrumb snippet
<nav label="breadcrumbs">
    / <a href="/">home</a> / <a href="/about/">about</a>
html {
    font-size: 16px;
    background: #fffff0;

    color: #16161d;
    background: #fffffa;
    margin: 0 auto;
    max-width: 40rem;
    padding: 1rem .62rem;
    font: 1rem/1.62 sans-serif;

a {
    text-underline-offset: .2rem;

hr {
    border: 1px solid #16161d;

h1, h2, h3 {
    line-height: 1.2;

p, dd {
    hyphens: auto;

img {
    max-width: 100%;
    border: 2px solid #16161d;

figcaption {
    font-size: .9rem;
    font-style: italic;

small {
    font-size: .6rem;

dt {
    font-weight: bold;

dd+dd {
    margin-top: 1rem;

pre {
    white-space: pre-wrap;

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(22, 22, 29, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #16161d;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;

.title {
    font-size: 1rem;
    margin-bottom: 0;

.center {
    text-align: center;

.square {
    list-style: square;

.footnotes {
    font-size: .8rem;
    margin-left: 1rem;
    margin-right: 1rem;

@media only screen and (min-width: 1024px) {
    html {
	font-size: 24px;
	padding: 2rem;

    body {
	border: 5px solid #16161d;
	box-shadow: .5rem .5rem .25rem .1rem rgba(22, 22, 29, .5);

    img {
	box-shadow: .2rem .2rem .1rem .05rem rgba(22, 22, 29, .5);

@media only screen and (min-width: 1366px) {
    html {
	font-size: 32px;

@media only screen and (min-width: 1920px) {
    html {
	font-size: 40px;

@media only screen and (min-width: 2560px) {
    html {
	font-size: 48px;

@media print{
    html {
	font-size: 12px;
	background: white;
    body {
	max-width: none;
	color: black;
	background: white;

    a {
	color: black;
	font-style: underline;

No JavaScript

This site doesn’t use JavaScript at all. It doesn’t need to.

CSS Optional

If you dislike the page style, and you’re using Firefox, use Alt + v, y, and n to disable CSS in that tab. You’ll find my site readable with styles or without them.

Further Reading