Description
Overview
wexa.css is a CSS framework intended to be as simple as possible to make accessible web content, and to minimize the use of CSS classes for enhancing the readability of HTML code, like it should always be! wexa.css is the main CSS framework of Whakerexa.
book.css is a CSS framework designed to make HTML content resemble a book. It includes features for implementing chapters, sections, and subsections, along with an auto-numbering function.
This page includes an extended feature of book.css: the automatically generated Table of Content.
Let's do it
This page shows how a website looks like if this code is added to the <head>:
<link
rel="stylesheet"
href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/wexa.css?format=raw"
media="all" />
<link
rel="stylesheet"
href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/book.css?format=raw"
media="all" />
<style>
:root { --toc-width: 18rem; }
</style>
<script src="../statics/js/purejs-tools/OnLoadManager.js" type="application/javascript"></script>
<script src="../statics/js/book.js" type="application/javascript"></script>
<script type="application/javascript">
OnLoadManager.addLoadFunction(() => {
let book = new Book("main-content");
book.fill_table();
});
</script>
And the following is added somewhere in the HTML document:
<nav><ul id="toc"></ul></nav>