Rename main exported files

Also add a page for test purposes, and change the layout of the CSS files a bit.
v3 v2.0.0
Florine W. Dekker 2 years ago
parent 5476627d41
commit 86d6783ccc
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
  1. 4
      Gruntfile.js
  2. 8
      package.json
  3. 8
      src/main/css/main.css
  4. 89
      src/main/css/nav.css
  5. 0
      src/main/css/snippets/colors.css
  6. 0
      src/main/css/snippets/common.css
  7. 87
      src/main/css/snippets/nav.css
  8. 0
      src/main/css/snippets/overrides.css
  9. 53
      src/test/index.html

@ -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…
Cancel
Save