blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 09:09:04 -04:00
Code Issues Projects Releases Wiki Activity

Add TOC component

Browse Source
This commit is contained in:
Jonas Duri 2019-02-03 08:49:10 +01:00
parent cf3b4de57a
commit 099ff20d2c
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/terminal.css
View File

@ -236,6 +236,31 @@ ol li:nth-child(n+10):after {
left: -7px;
}
ol.terminal-toc li {
border-bottom: 1px dotted var(--secondary-color);
padding: 0;
margin-bottom: 15px
}
ol.terminal-toc li::before {
content: counters(item, ".") ". ";
counter-increment: item;
position: absolute;
right: 0;
background: white;
padding: 4px 0 4px 4px;
bottom: -8px
}
ol.terminal-toc li a {
margin: 4px 4px 4px 0;
background: var(--background-color);
position: relative;
top: 6px;
text-align: left;
padding-right: 4px;
}
blockquote {
position: relative;
padding-left: calc(var(--global-space) * 2);

9
src/partials/components/lists.ejs
View File

@ -36,4 +36,13 @@
<dd>Description list description 02</dd>
<dd>Description list description 03</dd>
</dl>
<p>A <strong>Table of content</strong> which can be used as an index for a blog archive.</p>
<p>Unlike regular lists, The TOC <em>only supports a single depth level.</em></p>
<ol class="terminal-toc">
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
</ol>
</section>