Site Info

This is just a plain old website now. There’s no blog, only web pages. The design was inspired in part by maya.land 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 NearlyFreeSpeech.net.

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"
JPG_WEBP=${JPG:.jpg=.webp}
PNG_WEBP=${PNG:.png=.webp}

.jpg.webp:
	cwebp -short -resize 360 0 "$<" -o "$@"

.png.webp:
	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}

clean:
	rm -rf $(JPG_WEBP) $(PNG_WEBP)
		    
page template
<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>home | matthewgraybosch.com</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="$ilp.uphold.com/m77AB8Ui7hqR">
	<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="https://creativecommons.org/licenses/by-nc-sa/4.0/">
	<link rel="me" href="mailto:contact@matthewgraybosch.com">
	<link rel="me" href="https://starbreaker.org/">
	<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="matthewgraybosch.com (atom)">
    </head>
    <body>
	<header id="banner" class="center">
	    <h1 class="title">Matthew’s Website</h1>
	    <q>even in the future nothing works</q>
	</header>
	<hr>
	<main id="content">

	</main>
	<hr>
	<footer class="center">
	    <small>© 2021 <a href="mailto:contact@matthewgraybosch.com" rel="me">Matthew Graybosch</a>, <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license">some rights reserved</a>
	    </small>
	</footer>
    </body>
</html>
breadcrumb snippet
<nav label="breadcrumbs">
    / <a href="/">home</a> / <a href="/about/">about</a>
</nav>
<hr>
stylesheet
html {
    font-size: 16px;
    background: #fffff0;
}

body{
    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