Add navbar shadows

Fixes #32.
This commit is contained in:
Florine W. Dekker 2022-11-23 11:59:50 +01:00
parent 4d0f1dc5b4
commit 570e9c5764
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
4 changed files with 8 additions and 4 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@fwdekker/template", "name": "@fwdekker/template",
"version": "3.3.3", "version": "3.3.4",
"description": "The base template for pages on fwdekker.com.", "description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker", "author": "Florine W. Dekker",
"license": "MIT", "license": "MIT",

View File

@ -1,6 +1,7 @@
/* Base elements */ /* Base elements */
nav.fwd-nav { nav.fwd-nav {
border-bottom: 1px solid #ccc; --fwd-nav-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
box-shadow: var(--fwd-nav-box-shadow);
} }
nav.fwd-nav > ul { nav.fwd-nav > ul {
@ -34,8 +35,9 @@ nav.fwd-nav ul ul {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
margin: 0; margin: 0;
box-shadow: var(--fwd-nav-box-shadow);
} }
nav.fwd-nav li:where(:active, :focus-within, :hover) > ul { nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {

View File

@ -221,6 +221,8 @@ function footerLink(prefix: string, text: string | null | undefined, url: string
* not a valid value as a parameter for that function, its value is considered `undefined`. * not a valid value as a parameter for that function, its value is considered `undefined`.
*/ */
doAfterLoad(() => { doAfterLoad(() => {
$("html")!.dataset["theme"] = "light";
const navTarget = $(getMetaProperty("fwd:nav:target")); const navTarget = $(getMetaProperty("fwd:nav:target"));
if (navTarget != null) { if (navTarget != null) {
navTarget.parentElement?.replaceChild( navTarget.parentElement?.replaceChild(

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />