Rename main exported files
Also add a page for test purposes, and change the layout of the CSS files a bit.
This commit is contained in:
parent
5476627d41
commit
86d6783ccc
|
@ -9,7 +9,7 @@ module.exports = grunt => {
|
|||
cssmin: {
|
||||
target: {
|
||||
files: {
|
||||
"dist/bundle.css": "src/main/css/main.css",
|
||||
"dist/template.css": "src/main/css/main.css",
|
||||
"dist/nav.css": ["src/main/css/colors.css", "src/main/css/nav.css"],
|
||||
},
|
||||
},
|
||||
|
@ -36,7 +36,7 @@ module.exports = grunt => {
|
|||
output: {
|
||||
library: "fwdekker-template",
|
||||
libraryTarget: "umd",
|
||||
filename: "bundle.js",
|
||||
filename: "template.js",
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fwdekker/template",
|
||||
"version": "1.1.0",
|
||||
"version": "2.0.0",
|
||||
"description": "The base template for pages on fwdekker.com.",
|
||||
"author": "Felix W. Dekker",
|
||||
"license": "MIT",
|
||||
|
@ -12,10 +12,10 @@
|
|||
"bugs": {
|
||||
"url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
|
||||
},
|
||||
"browser": "bundle.js",
|
||||
"browser": "template.js",
|
||||
"files": [
|
||||
"dist/bundle.js",
|
||||
"dist/bundle.css"
|
||||
"dist/template.js",
|
||||
"dist/template.css"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "grunt clean",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../node_modules/normalize.css/normalize.css";
|
||||
@import "../../../node_modules/milligram/dist/milligram.css";
|
||||
@import "colors.css";
|
||||
@import "common.css";
|
||||
@import "nav.css";
|
||||
@import "overrides.css";
|
||||
@import "snippets/colors.css";
|
||||
@import "snippets/common.css";
|
||||
@import "snippets/nav.css";
|
||||
@import "snippets/overrides.css";
|
||||
|
|
|
@ -1,87 +1,2 @@
|
|||
nav {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--fwdekker-theme-color);
|
||||
font-size: 120%;
|
||||
|
||||
--padding: calc(2em / 3);
|
||||
}
|
||||
|
||||
nav * {
|
||||
z-index: 10;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: calc(var(--padding)) calc(var(--padding));
|
||||
width: 100%;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
nav .logo {
|
||||
width: calc(1em + var(--padding));
|
||||
height: calc(1em + var(--padding));
|
||||
|
||||
vertical-align: middle;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
nav div.logo {
|
||||
display: inline-block;
|
||||
margin-right: calc(1em / 3);
|
||||
}
|
||||
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
position: relative;
|
||||
background-color: var(--fwdekker-theme-color);
|
||||
}
|
||||
|
||||
nav ul li:hover,
|
||||
nav ul li:focus-within {
|
||||
cursor: pointer;
|
||||
background-color: var(--fwdekker-theme-color-very-dark);
|
||||
}
|
||||
|
||||
nav li.currentPage {
|
||||
background-color: var(--fwdekker-theme-color-dark);
|
||||
}
|
||||
|
||||
|
||||
nav ul li ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
nav ul li ul li ul {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
nav ul li:hover > ul,
|
||||
nav ul li:focus-within > ul,
|
||||
nav ul li ul:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul li {
|
||||
min-width: 7em;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@import "snippets/colors.css";
|
||||
@import "snippets/nav.css";
|
||||
|
|
|
@ -0,0 +1,87 @@
|
|||
nav {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--fwdekker-theme-color);
|
||||
font-size: 120%;
|
||||
|
||||
--padding: calc(2em / 3);
|
||||
}
|
||||
|
||||
nav * {
|
||||
z-index: 10;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: calc(var(--padding)) calc(var(--padding));
|
||||
width: 100%;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
nav .logo {
|
||||
width: calc(1em + var(--padding));
|
||||
height: calc(1em + var(--padding));
|
||||
|
||||
vertical-align: middle;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
nav div.logo {
|
||||
display: inline-block;
|
||||
margin-right: calc(1em / 3);
|
||||
}
|
||||
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
position: relative;
|
||||
background-color: var(--fwdekker-theme-color);
|
||||
}
|
||||
|
||||
nav ul li:hover,
|
||||
nav ul li:focus-within {
|
||||
cursor: pointer;
|
||||
background-color: var(--fwdekker-theme-color-very-dark);
|
||||
}
|
||||
|
||||
nav li.currentPage {
|
||||
background-color: var(--fwdekker-theme-color-dark);
|
||||
}
|
||||
|
||||
|
||||
nav ul li ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
nav ul li ul li ul {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
nav ul li:hover > ul,
|
||||
nav ul li:focus-within > ul,
|
||||
nav ul li ul:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li ul li {
|
||||
min-width: 7em;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="author" content="F.W. Dekker" />
|
||||
<meta name="application-name" content="Test" />
|
||||
<meta name="description" content="A test page" />
|
||||
<meta name="theme-color" content="#0033cc" />
|
||||
|
||||
<title>Tools | FWDekker</title>
|
||||
|
||||
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
|
||||
<link rel="stylesheet" href="../../dist/template.css" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<p style="color: red; font-weight: bold;">
|
||||
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>
|
||||
<main style="display: none;">
|
||||
<div id="nav"></div>
|
||||
<div id="contents">
|
||||
<div id="header"></div>
|
||||
|
||||
<section class="container">
|
||||
<p>These are the page contents.</p>
|
||||
|
||||
<p>These are some more contents.</p>
|
||||
</section>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</main>
|
||||
|
||||
<script src="../../dist/template.js"></script>
|
||||
<script>
|
||||
const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
|
||||
|
||||
doAfterLoad(() => {
|
||||
$("#nav").appendChild(nav("/Tools/Dice/"));
|
||||
$("#header").appendChild(header({title: "Test", description: "A test page"}));
|
||||
$("#footer").appendChild(footer({
|
||||
vcsURL: "https://git.fwdekker.com/FWDekker/tools/",
|
||||
version: "vTEST"
|
||||
}));
|
||||
showPage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue