flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
3.5 kB
128 lines
1---
2import BaseHead from "../components/BaseHead.astro";
3import Sidebar from "../components/Sidebar.astro";
4
5const { title, description, image, id, headings } = Astro.props;
6---
7
8<!doctype html>
9<html lang="en" class="h-full antialiased dark">
10 <head>
11 <BaseHead title={title} description={description} image={image} />
12
13 <script is:inline>
14 let dark = false;
15 if (localStorage.getItem("darkMode")) {
16 dark = JSON.parse(localStorage.getItem("darkMode") ?? "false");
17 } else {
18 dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
19 }
20
21 var root = document.getElementsByTagName("html")[0];
22 if (dark) {
23 root.classList.add("dark");
24 } else {
25 root.classList.remove("dark");
26 }
27 </script>
28
29 <style is:global>
30 html.dark .astro-code,
31 html.dark .astro-code span {
32 color: var(--shiki-dark);
33 }
34
35 html:not(dark) .astro-code,
36 html:not(dark) .astro-code span {
37 color: var(--shiki-light);
38 }
39
40 pre {
41 @apply overflow-hidden !important;
42 @apply border border-base-300 dark:border-base-800 bg-base-200/50 dark:bg-base-900/50 rounded-2xl !important;
43 }
44
45 .line.highlighted {
46 margin: 0 -24px;
47 padding: 0 24px;
48 position: relative;
49
50 display: inline-block;
51 width: calc(100% + 48px);
52 }
53 .line.highlighted {
54 @apply bg-accent-500/20 dark:bg-accent-700/20;
55 }
56
57 ::selection {
58 @apply bg-accent-300/50 dark:bg-accent-900/40;
59 }
60
61 lite-youtube {
62 @apply rounded-2xl border border-base-300 dark:border-base-800;
63 }
64
65 .prose mark {
66 @apply bg-accent-200 dark:bg-accent-900 text-black dark:text-white;
67 }
68 .MathJax svg {
69 display: inline !important;
70 }
71 :target {
72 scroll-margin-top: 80px;
73 }
74
75 .mobileMenuPopover {
76 /* Closed state transformed off the screen */
77 transform: translateX(-110%);
78 transition:
79 transform 0.1s,
80 overlay 0.1s ease-out;
81 inset: unset;
82
83 /* Styles while the menu is open */
84 &:popover-open {
85 transform: translateX(0);
86 }
87
88 /* Backdrop that overlays other content */
89 &::backdrop {
90 background-color: rgba(0, 0, 0, 0.5);
91 }
92 }
93 </style>
94 </head>
95
96 <body
97 class="bg-base-50 dark:bg-base-950 transition-all duration-150 h-[100dvh]"
98 >
99 <slot />
100
101 <div
102 popover
103 id="mobile-menu"
104 class="mobileMenuPopover bg-base-100 dark:bg-base-900 left-0 top-0 h-[100dvh] w-72 block shadow-lg border-r border-base-300 dark:border-base-800"
105 >
106 <button
107 popovertarget="mobile-menu"
108 popovertargetaction="hide"
109 class="absolute top-4 right-4 text-base-600 dark:text-base-400 hover:text-base-800 dark:hover:text-base-200"
110 >
111 <span class="sr-only">Close Menu</span>
112 <svg
113 xmlns="http://www.w3.org/2000/svg"
114 viewBox="0 0 24 24"
115 fill="currentColor"
116 class="size-6"
117 >
118 <path
119 fill-rule="evenodd"
120 d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
121 clip-rule="evenodd"></path>
122 </svg>
123 </button>
124
125 <Sidebar {id} {headings} />
126 </div>
127 </body>
128</html>