A new template for me to make less terrible webpages with

I want a single CSS stylesheet that solves most or all practical concerns I have and makes things look nice. I like small text, I like footnotes, I like serifs. I've decided to go mobile-first (probably the most sensible choice, though I yield most of my stuff is generally designed for a larger screen), and I want nice footnotes, asides, and quotes, code, and images. I'd also like it easily amendable and self-explanatory. So, I'll use this to document and develop it.


Asides are great for more magazine-esque writings, and probably great for various types of meta-writing, or significant notes or whatnot. They're not exactly the kind of thing I can just show off inline, because that's very much besides the point.

Great little thingies for not really getting in the way, but still providing some additional level of detail or joke or something along those lines. Asides should be visually distinct from blockquotes, I'm currently thinking that on larger screens they'll appear on a sidebar, and for smaller screens the text might be lighter-colored and smaller. Note that asides are distinct from footnotes and parentheticals in both form and semantic function as well.


Lists are probably pretty self-explanatory. I doubt that there will be much styling to them. They come in two varieties

  • Ordered
  • Unordered

I'll just leave that, I imagine most of the style differences are things that would vary article to article, if they mattered at all


Now these are pretty complicated. I am absolutely the type of person who requires good footnoting in any template I would ever use, and I am also the type of person that would demand to have that without a line of javascript. I'm aiming for something pretty close to what Wikipedia has done*footnote text goes here, but really long, so that I might better style long footnotes.footnote text goes herex. Probably the most contrived HTML and CSS in this template, and I'm not sure how writing-friendly it'll end up being in practice.

It's ugly in the HTML, but it functions as desired. It works on mobile and desktop well enough. The central idea is that you can hover over on desktop or tap on mobile and get it to pop up, either inline or as a footer, respectively. It's mandatory that you either don't have an element with ID "close", or you can just choose another invalid ID, so that closing on mobile doesn't take you to the top of the page. The basic idea is shown below.

This produces code that has a footnote<sup class="fn"><a href="#fn2">*</a><span class="hover"><span class="hoverbox"><span class="hovertxt">Footnote text on desktop</span></span></span><span id="fn2" class="foot"><span class="foottxt">Footnote text on mobile</span><a class="close" href="#close">x</a></span></sup> right there in the middle

This produces code that has a footnote*Footnote text on desktopFootnote text on mobilex right there in the middle. Wow so messy! Really makes one (not me) think twice about javascript, but honestly that looks pretty template-able. I recommend spans so that line breaks don't screw stuff up so much, though as you can see here superscript works fine. The HTML really jumps around with line breaks so be cautious. I don't like how it messes with the browser history on mobile, but I guess it's fine overall. Okay, this is the major one that required figuring things out, most of the rest of it should be much more straightforward.


Not too complicated, images should generally be on their own lines, I won't worry about putting images within the text yet. Just keeping it simple. Here's an image.

Gotta put it in a figure tag to get the centering, plus that way it's easy and natural to add a figcaption if it's desired

Like this


Blockquotes are an important feature to have. Grabbing a quote from my notes, just the first thing with quotation marks

"The reason why nuclear power is so popular with certain parties is because it requires the least amount of changes to our economic structures, to our distribution of [political] power, and distribution of wealth."
Kate Brown, link

Go ahead and get a figure tag in there, it's for the best really, just the right thing to do.


Nothing fancy, just normal pre tags

void ll_i64_reverse(ll_i64* list) {
	ll_i64 newlist = ll_i64_new();
	while(list->num > 0) {
		ll_i64_append(&newlist, ll_i64_pop(list)->val);
	*list = newlist;

Like so


Stolen from MDN to display

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric).
Name Mass (1024kg) Diameter (km) Density (kg/m3) Gravity (m/s2) Length of day (hours) Distance from Sun (106km) Mean temperature (°C) Number of moons Notes
Terrestrial planets Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our world
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 The red planet
Jovian planets Gas giants Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 -140 62
Ice giants Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14
Dwarf planets Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 Declassified as a planet in 2006, but this remains controversial.

I'm just gonna make it scrollable for too big tables, best of a not great situation. Just a little more border to indicate that there is scroll.