...In Characters, The Guards, Sitynur Users

Noka Zyre

This responsive base template is supposed to mimic sites like Fandom, without the bloat, for personal projects. It uses a floating table that clears everything after it so it doesn't overflow onto other elements. This code uses only HTML and CSS, even for its dropdowns.

Get the HTML here or rip it from this page. Get the CSS here. Here's a working example by me. Want something more complete and MediaWiki inspired? check out squid's Pedia, which I used alongside wikitable in the example!

This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window.

Subsection 1

The table of contents is open by default. You can make it closed by default by removing the word open from the tag.

This is a static template, so you'll have to set up the table of contents on each page manually. Add an id="headername" to each header in your code, then add a corresponding link with href="#headername" to the table of contents. IDs cannot contain spaces or begin with a number.

There's no elegant way to make sub-ordered-lists appear like 1.1, 1.2, etc. in HTMLCSS. On MediaWiki sites, they just auto generate the numbers right onto the page, which is messy and not ideal for a static site. You'll have to make do with a/b/c, sorry.

Subsection 2

Most things in this code (the notice boxes, floating images, infoboxes, etc.) can be dropped into your page wherever you want with minimal issues. Just copy and paste.

Other Features

Here are some fun extras I wanted to include:

Part of a Series Of...

Header Flair

The top of this page has a header flair that uses id="flair" to place an image or unicode character ::before.

Citations

1. Superscript can help you have a list of real (or fake!) citations.