Fixed top nav bar

This commit is contained in:
Noah Petherbridge 2024-11-22 08:44:16 -08:00
parent 63471e2e9b
commit fcd2cbd615
4 changed files with 16 additions and 4 deletions

View File

@ -45,6 +45,12 @@
color: rgb(26, 0, 5) !important; color: rgb(26, 0, 5) !important;
} }
/* glassy background for fixed nav bar when you scroll other elements under it */
nav.navbar {
background-color: rgba(0, 0, 0, .75) !important;
backdrop-filter: blur(5px);
}
.has-text-dark { .has-text-dark {
/* note: this css file otherwise didn't override this, dark's always dark, brighten it! */ /* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
color: #b5b5b5 !important; color: #b5b5b5 !important;

View File

@ -1,3 +1,3 @@
/* Custom nonshy color overrides for Bulma's dark theme /* Custom nonshy color overrides for Bulma's dark theme
(prefers-dark edition) */ (prefers-dark edition) */
@import url("dark-theme.css") screen and (prefers-color-scheme: dark); @import url("dark-theme.css?nocache=1") screen and (prefers-color-scheme: dark);

View File

@ -100,12 +100,18 @@ img {
/* Mobile: notification badge near the hamburger menu */ /* Mobile: notification badge near the hamburger menu */
.nonshy-mobile-notification { .nonshy-mobile-notification {
position: absolute; position: fixed;
top: 10px; top: 10px;
right: 50px; right: 50px;
z-index: 1000; z-index: 1000;
} }
/* glassy background for fixed nav bar when you scroll other elements under it */
nav.navbar {
background-color: rgba(255, 255, 255, .75);
backdrop-filter: blur(5px);
}
/* PWA: loading indicator in the corner of the page */ /* PWA: loading indicator in the corner of the page */
#nonshy-pwa-loader { #nonshy-pwa-loader {
display: none; display: none;

View File

@ -23,8 +23,8 @@
<title>{{template "title" .}} - {{ .Title }}</title> <title>{{template "title" .}} - {{ .Title }}</title>
{{template "head-scripts" .}} {{template "head-scripts" .}}
</head> </head>
<body> <body class="has-navbar-fixed-top">
<nav class="navbar" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/"> <a class="navbar-item" href="/">
{{ PrettyTitle }} {{ PrettyTitle }}