Implement right-side aside
This commit is contained in:
parent
24443ac455
commit
64eb21dfb8
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.1.1",
|
"version": "3.2.0",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -38,21 +38,41 @@ a[target="_blank"]::after {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container with table of contents */
|
/* Container with aside, e.g. for table of contents */
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.container-with-toc {
|
:root {
|
||||||
|
--aside-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-with-toc,
|
||||||
|
.container-with-aside-left,
|
||||||
|
.container-with-aside-right {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
|
||||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-with-toc nav {
|
.container-with-toc,
|
||||||
max-width: 200px;
|
.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
|
||||||
|
{
|
||||||
|
max-width: var(--aside-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
@media (max-width: 576px) {
|
||||||
.container-with-toc aside {
|
.container-with-toc aside,
|
||||||
|
.container-with-aside-left aside,
|
||||||
|
.container-with-aside-right aside
|
||||||
|
{
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,17 +29,7 @@
|
||||||
</p>
|
</p>
|
||||||
</noscript>
|
</noscript>
|
||||||
<nav id="nav"></nav>
|
<nav id="nav"></nav>
|
||||||
<main class="container container-with-toc">
|
<main class="container container-with-aside-right">
|
||||||
<aside>
|
|
||||||
<nav>
|
|
||||||
<b class="hidden-no-mobile">Table of contents</b>
|
|
||||||
<ul>
|
|
||||||
<li>Item 1</li>
|
|
||||||
<li>Item 2</li>
|
|
||||||
</ul>
|
|
||||||
<hr class="hidden-no-mobile" />
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section>
|
<section>
|
||||||
<header class="fwd-header">
|
<header class="fwd-header">
|
||||||
|
@ -91,6 +81,16 @@
|
||||||
</section>
|
</section>
|
||||||
<footer id="footer"></footer>
|
<footer id="footer"></footer>
|
||||||
</div>
|
</div>
|
||||||
|
<aside>
|
||||||
|
<nav>
|
||||||
|
<b class="hidden-no-mobile">Table of contents</b>
|
||||||
|
<ul>
|
||||||
|
<li>Item 1</li>
|
||||||
|
<li>Item 2</li>
|
||||||
|
</ul>
|
||||||
|
<hr class="hidden-no-mobile" />
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!--suppress HtmlUnknownTarget -->
|
<!--suppress HtmlUnknownTarget -->
|
||||||
|
|
Loading…
Reference in New Issue