From fcd2cbd61509d590b87f3b7eef18b0ca2e1c7864 Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Fri, 22 Nov 2024 08:44:16 -0800 Subject: [PATCH] Fixed top nav bar --- web/static/css/dark-theme.css | 6 ++++++ web/static/css/nonshy-prefers-dark.css | 2 +- web/static/css/theme.css | 8 +++++++- web/templates/base.html | 4 ++-- 4 files changed, 16 insertions(+), 4 deletions(-) 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" .}} - -