User:Puxlit/Experiments/WideTwoLevelTOC

The goal is to replace the existing hard-coded tables of contents (TOCs) found in each character's synopsis and relationships subpages with the default TOC, optionally styled to match the manual TOC's design.

Here's how the manual TOCs are marked up.

Here's how they could be marked up, and what styles we'd need to add.

/* Resets (including for wrapper generated by w:c:dev:MediaWiki:FloatingToc/code.js via MediaWiki:Wikia.js) */ .toc-widetwolevel #toc-wrapper { display: block !important; margin: 0 !important; max-width: none !important; } .toc-widetwolevel nav.toc li::before { content: none; } /* Overrides */ .toc-widetwolevel nav.toc { display: block; text-align: center; } .toc-widetwolevel #toctitle h2 { font-weight: bold; } .toc-widetwolevel nav.toc ol { margin: 0; } .toc-widetwolevel nav.toc li { display: inline; } .toc-widetwolevel nav.toc li.toclevel-1 { font-weight: bold; } .toc-widetwolevel nav.toc li.toclevel-2 { font-weight: normal; } .toc-widetwolevel nav.toc li.toclevel-3, .toc-widetwolevel nav.toc li.toclevel-4, .toc-widetwolevel nav.toc li.toclevel-5, .toc-widetwolevel nav.toc li.toclevel-6 { display: none; } .toc-widetwolevel nav.toc li:not(:last-child) > a:only-child { margin-right: 1em; } .toc-widetwolevel nav.toc li:not(:last-child) > a:only-child::after { display: inline-block; width: 0; line-height: 0; position: relative; left: 0.5em; color: #3a3a3a; content: "•"; } .toc-widetwolevel nav.toc li:not(:last-child):not(:has) { content: "\00a0•\00a0"; } /* NB: The last three rules are a bit of a kludge. If we had `:has`, we could do the following, which is a lot nicer. * .toc-widetwolevel nav.toc li:has(> a:only-child):not(:last-child)::after { content: "\00a0•\00a0"; } */

NB: Unless those styles have been included, the above demo will look identical to the default TOC. To inject those styles temporarily into this page, run the following JS in your browser's console.

(function{const x=document.createElement('style');x.appendChild(document.createTextNode('.toc-widetwolevel #toc-wrapper{display:block !important;margin:0 !important;max-width:none !important}.toc-widetwolevel nav.toc li::before{content:none}.toc-widetwolevel nav.toc{display:block;text-align:center}.toc-widetwolevel #toctitle h2{font-weight:bold}.toc-widetwolevel nav.toc ol{margin:0}.toc-widetwolevel nav.toc li{display:inline}.toc-widetwolevel nav.toc li.toclevel-1{font-weight:bold}.toc-widetwolevel nav.toc li.toclevel-2{font-weight:normal}.toc-widetwolevel nav.toc li.toclevel-3,.toc-widetwolevel nav.toc li.toclevel-4,.toc-widetwolevel nav.toc li.toclevel-5,.toc-widetwolevel nav.toc li.toclevel-6{display:none}.toc-widetwolevel nav.toc li:not(:last-child) > a:only-child{margin-right:1em}.toc-widetwolevel nav.toc li:not(:last-child) > a:only-child::after{display:inline-block;width:0;line-height:0;position:relative;left:0.5em;color:#3a3a3a;content:"•"}'));document.head.appendChild(x)});

Otherwise, here's a screenshot of the manual TOC followed by the restyled default TOC.

https://puxlit.s3.amazonaws.com/misc/wikia-bnha-experiments-widetwoleveltoc-screenshot.thumb.png

What follows is filler content (so the default TOC has something to display).

Izuku Midoriya
Lorem ipsum dolor sit amet.

Shoto Todoroki
Lorem ipsum dolor sit amet.

Eijiro Kirishima
Lorem ipsum dolor sit amet.

Eraserhead
Lorem ipsum dolor sit amet.

Fumikage Tokoyami
Lorem ipsum dolor sit amet.

Mashirao Ojiro
Lorem ipsum dolor sit amet.

Denki Kaminari
Lorem ipsum dolor sit amet.

Site Navigation
Lorem ipsum dolor sit amet.