A new template for me to make less terrible webpages with

Asides

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

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

Footnotes

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.

Images

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

Quotes

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."

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

Code

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

Tables

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.