Improve nav, fix some inconsistencies
This commit is contained in:
parent
04095848c2
commit
8d5b6ef101
|
@ -23,6 +23,18 @@ a[target="_blank"]::after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.hidden-no-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.hidden-on-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Input with button next to it */
|
/* Input with button next to it */
|
||||||
.input-with-button {
|
.input-with-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -39,10 +51,18 @@ a[target="_blank"]::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container with table of contents */
|
/* Container with table of contents */
|
||||||
|
@media (min-width: 576px) {
|
||||||
.container-with-toc {
|
.container-with-toc {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.container-with-toc aside {
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Noscript */
|
/* Noscript */
|
||||||
|
|
|
@ -44,6 +44,7 @@ nav.fwd-nav #nav-hamburger-label {
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.fwd-nav a[target="_blank"]::after {
|
nav.fwd-nav a[target="_blank"]::after {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -108,7 +108,7 @@ const unpackEntry = function(entry, path = "/", highlightPath = "") {
|
||||||
if (entry.entries.length === 0)
|
if (entry.entries.length === 0)
|
||||||
return "" +
|
return "" +
|
||||||
`<li ${shouldHighlight ? "class=\"currentPage\"" : ""}>` +
|
`<li ${shouldHighlight ? "class=\"currentPage\"" : ""}>` +
|
||||||
`<a href="${entry.link}" ${isExternalLink ? "class=\"external\"" : ""}>${entry.name}</a>` +
|
`<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
|
||||||
`</li>`;
|
`</li>`;
|
||||||
|
|
||||||
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
|
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
|
||||||
|
@ -178,7 +178,7 @@ const footer = function(
|
||||||
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
||||||
|
|
||||||
return stringToHtml(
|
return stringToHtml(
|
||||||
`<footer class="fwd-footer container">` +
|
`<footer class="fwd-footer">` +
|
||||||
`<hr />` +
|
`<hr />` +
|
||||||
`<small>` +
|
`<small>` +
|
||||||
footerLink("Made by ", author, authorURL, ". ") +
|
footerLink("Made by ", author, authorURL, ". ") +
|
||||||
|
|
|
@ -34,10 +34,12 @@
|
||||||
<main class="container container-with-toc">
|
<main class="container container-with-toc">
|
||||||
<aside>
|
<aside>
|
||||||
<nav>
|
<nav>
|
||||||
|
<b class="hidden-no-mobile">Table of contents</b>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Item 1</li>
|
<li>Item 1</li>
|
||||||
<li>Item 2</li>
|
<li>Item 2</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<hr class="hidden-no-mobile" />
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
<div role="document">
|
<div role="document">
|
||||||
|
|
Loading…
Reference in New Issue