Resolve issues with nav size, add toc, etc.
This commit is contained in:
parent
2702e00880
commit
04095848c2
|
@ -1,5 +1,5 @@
|
|||
/* External link icon */
|
||||
a.external::after {
|
||||
a[target="_blank"]::after {
|
||||
display: inline-block;
|
||||
|
||||
width: 0.7em;
|
||||
|
@ -18,12 +18,39 @@ a.external::after {
|
|||
}
|
||||
|
||||
|
||||
/* Hide anything */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Input with button next to it */
|
||||
.input-with-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-with-button > *:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-with-button > *:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Container with table of contents */
|
||||
.container-with-toc {
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
}
|
||||
|
||||
|
||||
/* Noscript */
|
||||
noscript.fwd-jsNotice img {
|
||||
noscript.fwd-js-notice img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
noscript.fwd-jsNotice p {
|
||||
noscript.fwd-js-notice p {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -35,30 +62,6 @@ header.fwd-header h1 > a {
|
|||
}
|
||||
|
||||
|
||||
/* Generic classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.inputWithButton {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inputWithButton > *:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.inputWithButton > *:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
#fwd-toc {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
footer.fwd-footer #fwd-footer-version {
|
||||
float: right;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
/* Base elements */
|
||||
nav.fwd-nav {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
|
||||
margin: 0;
|
||||
|
@ -7,7 +8,6 @@ nav.fwd-nav {
|
|||
|
||||
background-color: var(--fwdekker-theme-color);
|
||||
border-bottom: 1px solid #cccccc;
|
||||
font-size: 120%;
|
||||
|
||||
--padding: calc(2em / 3);
|
||||
}
|
||||
|
@ -41,11 +41,9 @@ nav.fwd-nav #nav-hamburger-label {
|
|||
|
||||
nav.fwd-nav #nav-hamburger-label {
|
||||
float: right;
|
||||
font-size: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav.fwd-nav a.external::after {
|
||||
nav.fwd-nav a[target="_blank"]::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
@ -67,6 +65,7 @@ nav.fwd-nav div.logo {
|
|||
|
||||
/* First level nesting */
|
||||
nav.fwd-nav ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
@ -127,13 +126,13 @@ nav.fwd-nav input[type="checkbox"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
@media (min-width: 576px) {
|
||||
nav.fwd-nav #nav-hamburger-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 576px) {
|
||||
nav.fwd-nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -172,18 +172,21 @@ const footer = function(
|
|||
}) {
|
||||
if (author === undefined) author = "Florine W. Dekker";
|
||||
if (authorURL === undefined) authorURL = "https://fwdekker.com/";
|
||||
if (license === undefined) license = "MIT License";
|
||||
if (license === undefined) license = "MIT";
|
||||
if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/master/LICENSE`;
|
||||
if (vcs === undefined && vcsURL !== undefined) vcs = "git";
|
||||
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
||||
|
||||
return stringToHtml(
|
||||
`<footer class="fwd-footer container"><hr />` +
|
||||
`<footer class="fwd-footer container">` +
|
||||
`<hr />` +
|
||||
`<small>` +
|
||||
footerLink("Made by ", author, authorURL, ". ") +
|
||||
footerLink("Licensed under the ", license, licenseURL, ". ") +
|
||||
footerLink("Source code and issue tracker on ", vcs, vcsURL, ". ") +
|
||||
footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
|
||||
`<div id="fwd-footer-version">${version || ""}</div>` +
|
||||
footerLink("Licensed ", license, licenseURL, ". ") +
|
||||
footerLink("Source and support on ", vcs, vcsURL, ". ") +
|
||||
footerLink("Read the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
|
||||
`</small>` +
|
||||
`<div id="fwd-footer-version"><small>${version || ""}</small></div>` +
|
||||
`</footer>`,
|
||||
"footer");
|
||||
};
|
||||
|
|
|
@ -17,32 +17,40 @@
|
|||
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
|
||||
<meta name="fwd:footer:version" content="vTEST" />
|
||||
|
||||
<title>Tools | FWDekker</title>
|
||||
<title>Template test | FWDekker</title>
|
||||
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<link rel="stylesheet" href="../../dist/template.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="notFooter">
|
||||
<noscript class="fwd-jsNotice">
|
||||
<noscript class="fwd-js-notice">
|
||||
<p>
|
||||
This website does not function if JavaScript is disabled.
|
||||
Please check the <a href="https://www.enable-javascript.com/">
|
||||
instructions on how to enable JavaScript in your web browser</a>.
|
||||
</p>
|
||||
</noscript>
|
||||
<section><nav id="nav"></nav></section>
|
||||
<main class="container">
|
||||
<section>
|
||||
<header id="header"></header>
|
||||
<nav id="nav"></nav>
|
||||
<main class="container container-with-toc">
|
||||
<aside>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div role="document">
|
||||
<section>
|
||||
<header id="header"></header>
|
||||
|
||||
<p>This <a href="./" class="external">is an external link</a> in a sentence.</p>
|
||||
<p>These are some more contents.</p>
|
||||
<p>These are the page contents.</p>
|
||||
</section>
|
||||
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
|
||||
<p>These are some more contents.</p>
|
||||
<p>These are the page contents.</p>
|
||||
</section>
|
||||
<footer id="footer"></footer>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<footer id="footer"></footer>
|
||||
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<script src="../../dist/template.js"></script>
|
||||
|
|
Loading…
Reference in New Issue