Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add backdrop blur for nav bar (#53)

Browse Source
This commit is contained in:
Xin 2023-09-13 05:02:38 -04:00 committed by GitHub
parent f70ba59ca0
commit 76ac694542
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1210 additions and 1942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3128
assets/css/compiled/main.css
View File

File diff suppressed because it is too large Load Diff

8
assets/css/components/navbar.css
View File

@ -4,6 +4,14 @@ nav {
}
}
@supports (
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.nav-container-blur {
@apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
}
}
.hamburger-menu svg {
g {
@apply origin-center;

6
assets/css/styles.css
View File

@ -1,3 +1,5 @@
@import "tailwind.css";
@import "typography.css";
@import "highlight.css";
@import "components/cards.css";
@ -6,10 +8,6 @@
@import "components/sidebar.css";
@import "components/navbar.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
@apply text-base antialiased;
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;

3
assets/css/tailwind.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

3
exampleSite/hugo_stats.json
View File

@ -407,6 +407,8 @@
"mx-auto",
"my-1.5",
"my-2",
"nav-container",
"nav-container-blur",
"next-error-h1",
"no-underline",
"not-prose",
@ -428,7 +430,6 @@
"p-2",
"p-4",
"p-6",
"pb-6",
"pb-8",
"pb-[env(safe-area-inset-bottom)]",
"pb-px",

4
layouts/partials/navbar.html
View File

@ -5,8 +5,8 @@
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
<div class="sticky top-0 z-20 w-full bg-transparent print:hidden">
<div class="pointer-events-none absolute z-[-1] h-full w-full bg-white shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:bg-dark dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
<div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">