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: {
|
cssmin: {
|
||||||
target: {
|
target: {
|
||||||
files: {
|
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"],
|
"dist/nav.css": ["src/main/css/colors.css", "src/main/css/nav.css"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -36,7 +36,7 @@ module.exports = grunt => {
|
||||||
output: {
|
output: {
|
||||||
library: "fwdekker-template",
|
library: "fwdekker-template",
|
||||||
libraryTarget: "umd",
|
libraryTarget: "umd",
|
||||||
filename: "bundle.js",
|
filename: "template.js",
|
||||||
path: path.resolve(__dirname, "dist"),
|
path: path.resolve(__dirname, "dist"),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "1.1.0",
|
"version": "2.0.0",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Felix W. Dekker",
|
"author": "Felix W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -12,10 +12,10 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
|
"url": "https://git.fwdekker.com/FWDekker/fwdekker-template/issues"
|
||||||
},
|
},
|
||||||
"browser": "bundle.js",
|
"browser": "template.js",
|
||||||
"files": [
|
"files": [
|
||||||
"dist/bundle.js",
|
"dist/template.js",
|
||||||
"dist/bundle.css"
|
"dist/template.css"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "grunt clean",
|
"clean": "grunt clean",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "../../../node_modules/normalize.css/normalize.css";
|
@import "../../../node_modules/normalize.css/normalize.css";
|
||||||
@import "../../../node_modules/milligram/dist/milligram.css";
|
@import "../../../node_modules/milligram/dist/milligram.css";
|
||||||
@import "colors.css";
|
@import "snippets/colors.css";
|
||||||
@import "common.css";
|
@import "snippets/common.css";
|
||||||
@import "nav.css";
|
@import "snippets/nav.css";
|
||||||
@import "overrides.css";
|
@import "snippets/overrides.css";
|
||||||
|
|
|
@ -1,87 +1,2 @@
|
||||||
nav {
|
@import "snippets/colors.css";
|
||||||
margin: 0;
|
@import "snippets/nav.css";
|
||||||
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,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