source ⟩ hypertext ⟩ public ⟩ comments ⟩ en.pug

//- meta
	slug: comments
	translates: comments
	lang: en
	title: Comments on “The Satyrs’ Forest”
	pageCreated: "2023-03-28"
	pageUpdated: "2024-09-02"

extends ../../views/layout.pug

append head
	style.
		:root {
			--background: #ffdead;
			--text: #221e17;
			--accent: #910;
		}

		body {
			background-image: url("/comments/courtyard.webp");
			background-position: center;
			background-size: cover;
		}

		main {
			background-color: var(--background);
			box-shadow: 0 0 1em #0008;
		}

		main > figure {
			inline-size: 33%;
			margin-inline-start: 1em;
			float: right;
		}
		
		main > figure figcaption {
			color: var(--accent);
			font-size: 0.8em;
			text-wrap: balance;
		}

		.rubric-rules code {
			padding-inline: 0.35ch;
			color: var(--accent);
		}

block header
	h1 Comments on #[i The Satyrs’ Forest]

block content
	figure
		img(src=qua("norman.webp") alt="Norman Rockwell’s famous “Freedom of Speech” painting, showing a man standing up and speaking")
		figcaption
			| “The second 
			i Matrix
			|  film is better.”
	p
		| Several pages on this site (including this one!) have a comments section at the bottom, with a janky little system i’ve bodged together to let you all roast me.
	h2#rules The rules
	p Be excellent to each other. That’s pretty much it. I trust you’re all normal enough not to hurl insults and spam at each other.
	p
		| This isn’t really a 
		em rule
		|  rule, but i might edit your comment if it’s misspelt or all lowercase, solely because i’m a pedant and it annoys me.
	h2#rubric Rubric
	p
		| Comments on the main site use a spinoff of the ubiquitous Markdown which i’ve decided to call 
		b Rubric
		| . The basics:
	.rubric-rules
		ul
			li
				| Headings: 
				code # Header 1
				|  (h1), 
				code ## Header 2
				|  (h2), 
				code ### Header 3
				|  (h3)…
			li
				| Quotes: 
				code > Blockquote goes here
			li
				| Lists: 
				code - A bullet-point list item
				| , 
				code 1. A numbered list item
			li
				| Spoilers: 
				code ~~~ Summary goes here
				|  (Start spoiler), 
				code ~~~
				|  (End spoiler)
			li
				| Bold: 
				code
					b *Bold type*
				|  (b), 
				code
					strong **Strong type**
				|  (strong)
			li
				| Italic: 
				code
					| /
					i Italic type
					| /
				|  (i, for text formatting), 
				code
					| //
					em Emphasised type
					| //
				|  (em, for emphasis)
			li
				| Hypertext: 
				code [https://google.com External links]
			li
				| Miscellaneous: 
				code
					| ~
					small Small font
					| ~
				| , 
				code
					| ~~
					s Strikethrough
					| ~~
				| , 
				code
					| ++
					ins Inserted text
					| ++
				| , 
				code
					| --
					del Deleted text
					| --
				| , 
				code
					| ^^
					sup Superscript
					| ^^
				| , 
				code
					| __
					s Subscript
					| __
				| , 
				code
					| ::
					span.smallcaps Small caps
					| ::
				| , 
				code `Verbatim code`
				| , 
				code ---
				| (Horizontal rule)
	h2#secret-word Secret word
	p
		| The “secret word” works a bit like a trip code does on the more degenerate parts of the internet. Posts with a secret word have a little hash code — say, 
		code 2w8373gz
		|  — at the top, next to your name. That way, if you put the same secret word for all your comments, you can confirm that it’s really you (or at least the same person who’s been leaving all those other comments).
	p
		| I’d like to use it to let people upload custom avatars one day, to replace the old 
		a(href="https://en.gravatar.com/") email-based system
		|  — keep your eyes peeled!