flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
improve header, add some background
author
Florian
date
(Feb 25, 2025, 10:20 AM +0100)
commit
262fd059
262fd0597b269e3ed3e9dff6774d3ffafc8d4018
parent
5550afbf
5550afbf2a3b349af2ef392e6d04f487fbeeb741
+74
-13
+61
-4
src/components/Header.astro
+61
-4
src/components/Header.astro
···
3
3
import ThemeToggle from "./ThemeToggle.astro";
4
4
import Search from "./search/Search.svelte";
5
5
import SocialIcons from "./SocialIcons.astro";
6
+
7
+
const { fullWidth = false } = Astro.props;
6
8
---
7
9
8
-
<header class="w-full">
10
+
<header
11
+
class:list={[
12
+
"fixed top-0 right-0 left-0 z-30",
13
+
fullWidth ? "" : "lg:left-72 xl:left-80",
14
+
]}
15
+
>
9
16
<nav
10
-
class="flex items-center h-16 justify-between lg:justify-end p-2 px-6 w-full"
17
+
class="flex items-center z-10 h-16 justify-between lg:justify-end p-2 px-6 w-full"
11
18
aria-label="Global"
12
19
>
13
-
<div class="lg:hidden">
20
+
<div class="lg:hidden z-10">
14
21
<button popovertarget="mobile-menu">
15
22
<svg
16
23
xmlns="http://www.w3.org/2000/svg"
···
25
32
</svg>
26
33
</button>
27
34
</div>
28
-
<div class="flex gap-x-8 items-center">
35
+
<div class="flex gap-x-8 items-center z-10">
29
36
<div class="flex gap-x-4 items-center">
30
37
{config.SEARCH_ENABLED ? <Search client:visible /> : null}
31
38
···
36
43
</div>
37
44
</div>
38
45
</nav>
46
+
<div
47
+
class="backdrop inset-0 absolute backdrop-blur-md pointer-events-none bg-gradient-to-b from-base-50/90 via-base-50/0 dark:from-base-950/90 dark:via-base-950/0"
48
+
>
49
+
</div>
50
+
51
+
<div
52
+
class="backdrop-edge absolute left-0 right-0 bottom-0 bg-base-900/10 dark:bg-base-500/10 backdrop-blur translate-y-full pointer-events-none"
53
+
>
54
+
</div>
39
55
</header>
56
+
57
+
<style>
58
+
/** better frosted glass effect adopted from https://www.joshwcomeau.com/css/backdrop-filter/ */
59
+
header {
60
+
--thickness: 1px;
61
+
}
62
+
63
+
@supports (mask-image: none) or (-webkit-mask-image: none) {
64
+
.backdrop {
65
+
height: 200%;
66
+
-webkit-mask-image: linear-gradient(
67
+
to bottom,
68
+
black 0% 50%,
69
+
transparent 50% 100%
70
+
);
71
+
mask-image: linear-gradient(
72
+
to bottom,
73
+
black 0% 50%,
74
+
transparent 50% 100%
75
+
);
76
+
}
77
+
.backdrop-edge {
78
+
height: 100%;
79
+
inset: 0;
80
+
-webkit-mask-image: linear-gradient(
81
+
to bottom,
82
+
black 0,
83
+
black var(--thickness),
84
+
transparent var(--thickness)
85
+
);
86
+
mask-image: linear-gradient(
87
+
to bottom,
88
+
black 0,
89
+
black var(--thickness),
90
+
transparent var(--thickness)
91
+
);
92
+
93
+
filter: brightness(1.5);
94
+
}
95
+
}
96
+
</style>
+12
-6
src/layouts/DocumentationLayout.astro
+12
-6
src/layouts/DocumentationLayout.astro
···
9
9
---
10
10
11
11
<BaseLayout {title} {description} {image} {id} {headings}>
12
+
<Header />
13
+
<div
14
+
class="fixed opacity-30 left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
15
+
aria-hidden="true"
16
+
>
17
+
<div
18
+
class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-accent-300 to-accent-600 opacity-20"
19
+
style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)"
20
+
>
21
+
</div>
22
+
</div>
23
+
12
24
<div class="flex mx-1 sm:mx-4">
13
25
<div class="w-full my-1 sm:my-8 lg:ml-72 xl:ml-80">
14
26
<div class="mx-auto max-w-5xl">
···
23
35
class="fixed overflow-y-auto top-0 bottom-0 left-0 h-full -translate-x-72 lg:translate-x-0 lg:w-72 xl:w-80 z-40 border-r border-base-200 dark:border-base-300/10"
24
36
>
25
37
<Sidebar {id} {headings} />
26
-
</div>
27
-
28
-
<div
29
-
class="fixed top-0 left-0 right-0 lg:left-72 xl:left-80 h-16 z-30 border-b border-base-200 dark:border-base-300/10 backdrop-blur-sm"
30
-
>
31
-
<Header />
32
38
</div>
33
39
</div>
34
40
</BaseLayout>