Style tables of contents

This commit is contained in:
Salt 2020-08-22 21:13:20 -05:00
parent 1f2af6eac6
commit aaad2e271d
2 changed files with 27 additions and 16 deletions

View File

@ -10,24 +10,26 @@
<div class="content"> <div class="content">
<div class="section"> <div class="section">
<h1>What is Matrix?</h1> <h1>What is Matrix?</h1>
<div class="toc">
<h2>Contents</h2>
<ul>
<li><a href="#gettingstarted">Getting Started</a></li>
<li><a href="#darkmode">Dark Mode</a></li>
<li>Using Matrix</li>
<ul>
<li><a href="#voicechat">Voice Chat</a></li>
<li><a href="#communities">Communities</a></li>
</ul>
<li>Miscellaneous</li>
<ul>
<li><a href="#rules">Rules</a></li>
<li><a href="#federation">Federation</a></li>
<li><a href="#contact">Contact an Admin</a></li>
</ul>
</ul>
</div>
<p>Matrix is a communication platform. Think Discord, but hosted here and without <a href="https://cadence.moe/blog/2020-06-06-why-you-shouldnt-trust-discord">its problems</a>.</p> <p>Matrix is a communication platform. Think Discord, but hosted here and without <a href="https://cadence.moe/blog/2020-06-06-why-you-shouldnt-trust-discord">its problems</a>.</p>
<p>To get up and running, you only need to read the <a href="#gettingstarted">Getting Started</a> section. Everything else here is just in case you want or need it.</p> <p>To get up and running, you only need to read the <a href="#gettingstarted">Getting Started</a> section. Everything else here is just in case you want or need it.</p>
<h2>On This Page:</h2>
<ul>
<li><a href="#gettingstarted">Getting Started</a></li>
<li><a href="#darkmode">Dark Mode</a></li>
<li>Using Matrix</li>
<ul>
<li><a href="#voicechat">Voice Chat</a></li>
<li><a href="#communities">Communities</a></li>
</ul>
<li>Miscellaneous</li>
<ul>
<li><a href="#rules">Rules</a></li>
<li><a href="#federation">Federation</a></li>
<li><a href="#contact">Contact an Admin</a></li>
</ul>
</ul>
</div> </div>
<div class="section" id="gettingstarted"> <div class="section" id="gettingstarted">
<h1>Getting Started</h1> <h1>Getting Started</h1>

View File

@ -138,6 +138,15 @@ img.bigimg {
margin: 1em 0; margin: 1em 0;
padding: 1em; padding: 1em;
} }
.toc {
background: var(--background-bright);
border-radius: 4px;
box-shadow: 5px 5px var(--shadow);
display: inline-block;
margin: 0 1em 1em 1em;
padding: 0 1em;
width: auto;
}
/* FOOTER */ /* FOOTER */
.footer { .footer {