parent
570e9c5764
commit
dc50ad5859
|
@ -12,6 +12,7 @@ All JavaScript functionalities are exposed using the `window.fwdekker` object.
|
|||
Some functionalities are automatically executed after configuring some `<meta>` tags in the HTML.
|
||||
For example, set `<meta name="fwd:nav:target" content="#nav" />` to automatically put the navigation bar in the `#nav`
|
||||
element.
|
||||
All meta-tag behaviour is opt-in.
|
||||
|
||||
Read the files' individual documentation for more information.
|
||||
|
||||
|
|
|
@ -38,41 +38,25 @@ a[target="_blank"]::after {
|
|||
}
|
||||
}
|
||||
|
||||
/* Container with aside, e.g. for table of contents */
|
||||
@media (min-width: 576px) {
|
||||
/* Container with sidebar, e.g. for table of contents */
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--aside-width: 200px;
|
||||
}
|
||||
|
||||
.container-with-toc,
|
||||
.container-with-aside-left,
|
||||
.container-with-aside-right {
|
||||
.grid-with-sidebar {
|
||||
display: grid;
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
}
|
||||
|
||||
.container-with-toc,
|
||||
.container-with-aside-left {
|
||||
grid-template-columns: var(--aside-width) auto;
|
||||
}
|
||||
|
||||
.container-with-aside-right {
|
||||
grid-template-columns: auto var(--aside-width);
|
||||
}
|
||||
|
||||
.container-with-toc nav,
|
||||
.container-with-aside-left nav,
|
||||
.container-with-aside-right nav
|
||||
{
|
||||
.grid-with-sidebar aside {
|
||||
max-width: var(--aside-width);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.container-with-toc aside,
|
||||
.container-with-aside-left aside,
|
||||
.container-with-aside-right aside
|
||||
{
|
||||
@media (max-width: 992px) {
|
||||
.grid-with-sidebar aside {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,7 +29,10 @@
|
|||
</p>
|
||||
</noscript>
|
||||
<nav id="nav"></nav>
|
||||
<main class="container">
|
||||
<main class="container grid-with-sidebar">
|
||||
<aside>
|
||||
Table of contents test
|
||||
</aside>
|
||||
<div role="document">
|
||||
<section>
|
||||
<header class="fwd-header">
|
||||
|
|
Loading…
Reference in New Issue