Skip to content

Instantly share code, notes, and snippets.

@1f604

1f604/wikipedia toc CSS.html

Last active March 6, 2022 13:11
Show Gist options
  • Save 1f604/99eb541613607cb42c5040c07621057d to your computer and use it in GitHub Desktop.
Save 1f604/99eb541613607cb42c5040c07621057d to your computer and use it in GitHub Desktop.
Download ZIP
HTML + CSS to achieve wikipedia style table of contents
Raw
wikipedia toc CSS.html
<head>
<style>
/* CSS for wikipedia style table of contents */
html {
font-family: sans-serif;
}
.toc {
display: table;
padding: 7px;
list-style-type: none;
margin-left: 0px;
direction: ltr;
text-align: left;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
padding: 5px;
font-size: 95%;
}
.toc li {
margin-bottom: 0.1em;
display: list-item;
text-align: -webkit-match-parent;
}
.toc ul {
list-style: none;
line-height: 1.6;
padding: 0;
}
.toc ul ul {
margin: 0 0 0 2em;
text-align: left;
}
.tocnumber {
color: #202122;
text-decoration-color: #202122;
}
.toctitle {
text-align: center;
}
a {
text-decoration: none;
color: #0645ad;
background: none;
}
a:hover .tocnumber {
text-decoration: underline;
}
a:hover .toctext {
text-decoration: underline;
}
a:active .toctext {
color: orange;
}
</style>
</head>
<body>
<div id="toc" class="toc" ><div class="toctitle" ><h2>Contents</h2></div>
<ul>
<li><a href="#Timeline"><span class="tocnumber">1</span> <span class="toctext">Timeline</span></a>
<ul>
<li><a href="#2020"><span class="tocnumber">1.1</span> <span class="toctext">2020</span></a>
<ul>
<li><a href="#Dine_and_Discover"><span class="tocnumber">1.1.1</span> <span class="toctext">Dine and Discover</span></a></li>
<li><a href="#Northern_Beaches_outbreak"><span class="tocnumber">1.1.2</span> <span class="toctext">Northern Beaches outbreak</span></a></li>
</ul>
</li>
<li><a href="#2021"><span class="tocnumber">1.2</span> <span class="toctext">2021</span></a>
<ul>
<li><a href="#February"><span class="tocnumber">1.2.1</span> <span class="toctext">February</span></a></li>
<li><a href="#March"><span class="tocnumber">1.2.2</span> <span class="toctext">March</span></a></li>
<li><a href="#May"><span class="tocnumber">1.2.3</span> <span class="toctext">May</span></a></li>
<li><a href="#June"><span class="tocnumber">1.2.4</span> <span class="toctext">June</span></a></li>
<li><a href="#Eastern_Suburbs/Bondi_cluster"><span class="tocnumber">1.2.5</span> <span class="toctext">Eastern Suburbs/Bondi cluster</span></a></li>
<li><a href="#July"><span class="tocnumber">1.2.6</span> <span class="toctext">July</span></a>
<ul>
<li><a href="#Week_1"><span class="tocnumber">1.2.6.1</span> <span class="toctext">Week 1</span></a>
<ul>
<li><a href="#Lockdown_extended"><span class="tocnumber">1.2.6.1.1</span> <span class="toctext">Lockdown extended</span></a></li>
</ul>
</li>
<li><a href="#Week_2"><span class="tocnumber">1.2.6.2</span> <span class="toctext">Week 2</span></a>
<ul>
<li><a href="#Lockdown_extended_again"><span class="tocnumber">1.2.6.2.1</span> <span class="toctext">Lockdown extended again</span></a></li>
</ul>
</li>
<li><a href="#Week_3"><span class="tocnumber">1.2.6.3</span> <span class="toctext">Week 3</span></a>
<ul>
<li><a href="#Lockdown_tightened"><span class="tocnumber">1.2.6.3.1</span> <span class="toctext">Lockdown tightened</span></a></li>
<li><a href="#Lockdown_area_expanded"><span class="tocnumber">1.2.6.3.2</span> <span class="toctext">Lockdown area expanded</span></a></li>
</ul>
</li>
<li><a href="#Week_4"><span class="tocnumber">1.2.6.4</span> <span class="toctext">Week 4</span></a>
<ul>
<li><a href="#Lockdown_extended,_again"><span class="tocnumber">1.2.6.4.1</span> <span class="toctext">Lockdown extended, again</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#August"><span class="tocnumber">1.2.7</span> <span class="toctext">August</span></a>
<ul>
<li><a href="#14_August_-_Regional_NSW_in_lockdown"><span class="tocnumber">1.2.7.1</span> <span class="toctext">14 August - Regional NSW in lockdown</span></a></li>
<li><a href="#20_August_-_Sydney_lockdown_extended"><span class="tocnumber">1.2.7.2</span> <span class="toctext">20 August - Sydney lockdown extended</span></a></li>
<li class="toclevel-4 tocsection-24"><a href="#26_August_-_Regional_lockdown_extended"><span class="tocnumber">1.2.7.3</span> <span class="toctext">26 August - Regional lockdown extended</span></a></li>
</ul>
</li>
<li><a href="#September"><span class="tocnumber">1.2.8</span> <span class="toctext">September</span></a>
<ul>
<li><a href="#Regional_lockdown_partially_lifted"><span class="tocnumber">1.2.8.1</span> <span class="toctext">Regional lockdown partially lifted</span></a></li>
<li><a href="#Record_daily_deaths"><span class="tocnumber">1.2.8.2</span> <span class="toctext">Record daily deaths</span></a></li>
<li><a href="#Regional_lockdown_changes"><span class="tocnumber">1.2.8.3</span> <span class="toctext">Regional lockdown changes</span></a></li>
</ul>
</li>
<li><a href="#October"><span class="tocnumber">1.2.9</span> <span class="toctext">October</span></a>
<ul>
<li><a href="#State_lockdown_eased"><span class="tocnumber">1.2.9.1</span> <span class="toctext">State lockdown eased</span></a></li>
</ul>
</li>
<li><a href="#November"><span class="tocnumber">1.2.10</span> <span class="toctext">November</span></a></li>
<li><a href="#December"><span class="tocnumber">1.2.11</span> <span class="toctext">December</span></a></li>
</ul>
</li>
<li><a href="#2022"><span class="tocnumber">1.3</span> <span class="toctext">2022</span></a>
<ul>
<li><a href="#Restrictions_reintroduced"><span class="tocnumber">1.3.1</span> <span class="toctext">Restrictions reintroduced</span></a></li>
<li><a href="#RAT_(Rapid_Antigen_Test)_reporting"><span class="tocnumber">1.3.2</span> <span class="toctext">RAT (Rapid Antigen Test) reporting</span></a></li>
<li><a href="#Over_1,000_deaths_total"><span class="tocnumber">1.3.3</span> <span class="toctext">Over 1,000 deaths total</span></a></li>
<li><a href="#Over_1,500_deaths_total"><span class="tocnumber">1.3.4</span> <span class="toctext">Over 1,500 deaths total</span></a></li>
<li><a href="#March_2"><span class="tocnumber">1.3.5</span> <span class="toctext">March</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Statistics"><span class="tocnumber">2</span> <span class="toctext">Statistics</span></a></li>
<li><a href="#Event_cancellations"><span class="tocnumber">3</span> <span class="toctext">Event cancellations</span></a></li>
<li><a href="#See_also"><span class="tocnumber">4</span> <span class="toctext">See also</span></a></li>
<li><a href="#Notes"><span class="tocnumber">5</span> <span class="toctext">Notes</span></a></li>
<li><a href="#References"><span class="tocnumber">6</span> <span class="toctext">References</span></a></li>
<li><a href="#External_links"><span class="tocnumber">7</span> <span class="toctext">External links</span></a></li>
</ul>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment