diff --git a/web/static/css/dark-theme.css b/web/static/css/dark-theme.css
index 7396956..9d7051a 100644
--- a/web/static/css/dark-theme.css
+++ b/web/static/css/dark-theme.css
@@ -45,6 +45,12 @@
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 {
/* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
color: #b5b5b5 !important;
diff --git a/web/static/css/nonshy-prefers-dark.css b/web/static/css/nonshy-prefers-dark.css
index 29730db..6fc464f 100644
--- a/web/static/css/nonshy-prefers-dark.css
+++ b/web/static/css/nonshy-prefers-dark.css
@@ -1,3 +1,3 @@
/* Custom nonshy color overrides for Bulma's dark theme
(prefers-dark edition) */
-@import url("dark-theme.css") screen and (prefers-color-scheme: dark);
\ No newline at end of file
+@import url("dark-theme.css?nocache=1") screen and (prefers-color-scheme: dark);
\ No newline at end of file
diff --git a/web/static/css/theme.css b/web/static/css/theme.css
index 2c263d9..14cb3f4 100644
--- a/web/static/css/theme.css
+++ b/web/static/css/theme.css
@@ -100,12 +100,18 @@ img {
/* Mobile: notification badge near the hamburger menu */
.nonshy-mobile-notification {
- position: absolute;
+ position: fixed;
top: 10px;
right: 50px;
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 */
#nonshy-pwa-loader {
display: none;
diff --git a/web/templates/base.html b/web/templates/base.html
index 3ede998..2d72e74 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -23,8 +23,8 @@
{{template "title" .}} - {{ .Title }}
{{template "head-scripts" .}}
-
-