User:Puxlit/Experiments/WideTwoLevelTOC

The goal is to replace the existing manual tables of contents (TOCs) found in each character's synopsis and relationships subpages with the automatic TOC, styled to match the manual TOC's design. A full list of affected pages (with a few false positives) can be found here.

Here's an example of a manual TOC.

Markup Rendered

Here's an example of how we could match that design with automatic TOCs.

Markup CSS /* Wide two-level TOC: 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; } /* Wide two-level TOC: 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"; } */ Rendered

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.