Made navbar responsive
This commit is contained in:
52
.air.toml
Normal file
52
.air.toml
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
root = "."
|
||||||
|
testdata_dir = "testdata"
|
||||||
|
tmp_dir = "tmp"
|
||||||
|
|
||||||
|
[build]
|
||||||
|
args_bin = []
|
||||||
|
bin = "./tmp/main"
|
||||||
|
cmd = "go build -o ./tmp/main ."
|
||||||
|
delay = 1000
|
||||||
|
exclude_dir = []
|
||||||
|
exclude_file = []
|
||||||
|
exclude_regex = ["_test.go"]
|
||||||
|
exclude_unchanged = false
|
||||||
|
follow_symlink = false
|
||||||
|
full_bin = ""
|
||||||
|
include_dir = []
|
||||||
|
include_ext = ["go", "templ"]
|
||||||
|
include_file = []
|
||||||
|
kill_delay = "0s"
|
||||||
|
log = "build-errors.log"
|
||||||
|
poll = false
|
||||||
|
poll_interval = 0
|
||||||
|
post_cmd = []
|
||||||
|
pre_cmd = []
|
||||||
|
rerun = false
|
||||||
|
rerun_delay = 500
|
||||||
|
send_interrupt = false
|
||||||
|
stop_on_error = false
|
||||||
|
|
||||||
|
[color]
|
||||||
|
app = ""
|
||||||
|
build = "yellow"
|
||||||
|
main = "magenta"
|
||||||
|
runner = "green"
|
||||||
|
watcher = "cyan"
|
||||||
|
|
||||||
|
[log]
|
||||||
|
main_only = false
|
||||||
|
silent = false
|
||||||
|
time = false
|
||||||
|
|
||||||
|
[misc]
|
||||||
|
clean_on_exit = false
|
||||||
|
|
||||||
|
[proxy]
|
||||||
|
app_port = 3333
|
||||||
|
enabled = true
|
||||||
|
proxy_port = 3000
|
||||||
|
|
||||||
|
[screen]
|
||||||
|
clear_on_rebuild = false
|
||||||
|
keep_scroll = true
|
||||||
9
Makefile
9
Makefile
@@ -3,19 +3,16 @@
|
|||||||
|
|
||||||
BINARY_NAME=projectreshoot
|
BINARY_NAME=projectreshoot
|
||||||
|
|
||||||
# build builds the tailwind css sheet, and compiles the binary into a usable thing.
|
|
||||||
build:
|
build:
|
||||||
go mod tidy && \
|
go mod tidy && \
|
||||||
templ generate && \
|
templ generate && \
|
||||||
go generate && \
|
go generate && \
|
||||||
go build -ldflags="-w -s" -o ${BINARY_NAME}
|
go build -ldflags="-w -s" -o ${BINARY_NAME}
|
||||||
|
|
||||||
# dev runs the development server where it builds the tailwind css sheet,
|
|
||||||
# and compiles the project whenever a file is changed.
|
|
||||||
dev:
|
dev:
|
||||||
npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch &\
|
templ generate --watch &\
|
||||||
templ generate --watch --cmd="go generate" &\
|
air &\
|
||||||
templ generate --watch --cmd="go run ."
|
tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch
|
||||||
|
|
||||||
clean:
|
clean:
|
||||||
go clean
|
go clean
|
||||||
|
|||||||
1448
package-lock.json
generated
1448
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"devDependencies": {
|
|
||||||
"tailwindcss": "^3.4.17"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"franken-ui": "^1.1.0",
|
|
||||||
"postcss": "^8.5.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: [
|
|
||||||
require('tailwindcss'),
|
|
||||||
require('franken-ui/postcss/sort-media-queries')({
|
|
||||||
sort: 'mobile-first'
|
|
||||||
}),
|
|
||||||
require('franken-ui/postcss/combine-duplicated-selectors')({
|
|
||||||
removeDuplicatedProperties: true
|
|
||||||
})
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@@ -1,67 +1,111 @@
|
|||||||
@tailwind base;
|
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||||
@tailwind components;
|
@import "tailwindcss";
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-rosewater: var(--rosewater);
|
||||||
|
--color-flamingo: var(--flamingo);
|
||||||
|
--color-pink: var(--pink);
|
||||||
|
--color-mauve: var(--mauve);
|
||||||
|
--color-red: var(--red);
|
||||||
|
--color-maroon: var(--maroon);
|
||||||
|
--color-peach: var(--peach);
|
||||||
|
--color-yellow: var(--yellow);
|
||||||
|
--color-green: var(--green);
|
||||||
|
--color-teal: var(--teal);
|
||||||
|
--color-sky: var(--sky);
|
||||||
|
--color-sapphire: var(--sapphire);
|
||||||
|
--color-blue: var(--blue);
|
||||||
|
--color-lavender: var(--lavender);
|
||||||
|
--color-text: var(--text);
|
||||||
|
--color-subtext1: var(--subtext1);
|
||||||
|
--color-subtext0: var(--subtext0);
|
||||||
|
--color-overlay2: var(--overlay2);
|
||||||
|
--color-overlay1: var(--overlay1);
|
||||||
|
--color-overlay0: var(--overlay0);
|
||||||
|
--color-surface2: var(--surface2);
|
||||||
|
--color-surface1: var(--surface1);
|
||||||
|
--color-surface0: var(--surface0);
|
||||||
|
--color-base: var(--base);
|
||||||
|
--color-mantle: var(--mantle);
|
||||||
|
--color-crust: var(--crust);
|
||||||
|
}
|
||||||
:root {
|
:root {
|
||||||
--warning: 34.95 76.98% 49.41%;
|
--rosewater: hsl(11, 59%, 67%);
|
||||||
--warning-foreground: 240 22.73% 8.63%;
|
--flamingo: hsl(0, 60%, 67%);
|
||||||
--success: 109.23 57.64% 39.8%;
|
--pink: hsl(316, 73%, 69%);
|
||||||
--success-foreground: 240 22.73% 8.63%;
|
--mauve: hsl(266, 85%, 58%);
|
||||||
--chart-green: 109.23 57.64% 39.8%;
|
--red: hsl(347, 87%, 44%);
|
||||||
--chart-blue: 197.07 96.57% 45.69%;
|
--maroon: hsl(355, 76%, 59%);
|
||||||
--chart-yellow: 34.95 76.98% 49.41%;
|
--peach: hsl(22, 99%, 52%);
|
||||||
--chart-orange: 21.98 99.18% 51.96%;
|
--yellow: hsl(35, 77%, 49%);
|
||||||
--chart-red: 347.08 86.67% 44.12%;
|
--green: hsl(109, 58%, 40%);
|
||||||
--background: 220 23.08% 94.9%;
|
--teal: hsl(183, 74%, 35%);
|
||||||
--foreground: 233.79 16.02% 35.49%;
|
--sky: hsl(197, 97%, 46%);
|
||||||
--card: 220 21.95% 91.96%;
|
--sapphire: hsl(189, 70%, 42%);
|
||||||
--card-foreground: 233.79 16.02% 35.49%;
|
--blue: hsl(220, 91%, 54%);
|
||||||
--popover: 220 20.69% 88.63%;
|
--lavender: hsl(231, 97%, 72%);
|
||||||
--popover-foreground: 233.79 16.02% 35.49%;
|
--text: hsl(234, 16%, 35%);
|
||||||
--primary: 219.91 91.49% 53.92%;
|
--subtext1: hsl(233, 13%, 41%);
|
||||||
--primary-foreground: 0 0% 96.08%;
|
--subtext0: hsl(233, 10%, 47%);
|
||||||
--secondary: 226.67 12.16% 70.98%;
|
--overlay2: hsl(232, 10%, 53%);
|
||||||
--secondary-foreground: 240 22.73% 8.63%;
|
--overlay1: hsl(231, 10%, 59%);
|
||||||
--muted: 225 13.56% 76.86%;
|
--overlay0: hsl(228, 11%, 65%);
|
||||||
--muted-foreground: 240 21.05% 14.9%;
|
--surface2: hsl(227, 12%, 71%);
|
||||||
--accent: 230.94 97.2% 71.96%;
|
--surface1: hsl(225, 14%, 77%);
|
||||||
--accent-foreground: 240 22.73% 8.63%;
|
--surface0: hsl(223, 16%, 83%);
|
||||||
--destructive: 0 84.2% 60.2%;
|
--base: hsl(220, 23%, 95%);
|
||||||
--destructive-foreground: 210 40% 98%;
|
--mantle: hsl(220, 22%, 92%);
|
||||||
--border: 233.79 16.02% 35.49%;
|
--crust: hsl(220, 21%, 89%);
|
||||||
--input: 226.67 12.16% 70.98%;
|
|
||||||
--ring: 197.07 96.57% 45.69%;
|
|
||||||
--radius: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 240 21.05% 14.9%;
|
--rosewater: hsl(10, 56%, 91%);
|
||||||
--foreground: 226.15 63.93% 88.04%;
|
--flamingo: hsl(0, 59%, 88%);
|
||||||
--card: 0 0% 7.84%;
|
--pink: hsl(316, 72%, 86%);
|
||||||
--card-foreground: 226.15 63.93% 88.04%;
|
--mauve: hsl(267, 84%, 81%);
|
||||||
--popover: 240 22.73% 8.63%;
|
--red: hsl(343, 81%, 75%);
|
||||||
--popover-foreground: 226.15 63.93% 88.04%;
|
--maroon: hsl(350, 65%, 77%);
|
||||||
--primary: 217.17 91.87% 75.88%;
|
--peach: hsl(23, 92%, 75%);
|
||||||
--primary-foreground: 240 22.73% 8.63%;
|
--yellow: hsl(41, 86%, 83%);
|
||||||
--secondary: 232.5 12% 39.22%;
|
--green: hsl(115, 54%, 76%);
|
||||||
--secondary-foreground: 226.15 63.93% 88.04%;
|
--teal: hsl(170, 57%, 73%);
|
||||||
--muted: 236.84 16.24% 22.94%;
|
--sky: hsl(189, 71%, 73%);
|
||||||
--muted-foreground: 226.15 63.93% 88.04%;
|
--sapphire: hsl(199, 76%, 69%);
|
||||||
--accent: 115.45 54.1% 76.08%;
|
--blue: hsl(217, 92%, 76%);
|
||||||
--accent-foreground: 240 22.73% 8.63%;
|
--lavender: hsl(232, 97%, 85%);
|
||||||
--destructive: 343 81.2% 74.9%;
|
--text: hsl(226, 64%, 88%);
|
||||||
--destructive-foreground: 240 22.73% 8.63%;
|
--subtext1: hsl(227, 35%, 80%);
|
||||||
--border: 236.84 16.24% 22.94%;
|
--subtext0: hsl(228, 24%, 72%);
|
||||||
--input: 232.5 12% 39.22%;
|
--overlay2: hsl(228, 17%, 64%);
|
||||||
--ring: 189.18 71.01% 72.94%;
|
--overlay1: hsl(230, 13%, 55%);
|
||||||
--radius: 0.5rem;
|
--overlay0: hsl(231, 11%, 47%);
|
||||||
--warning: 223.64 89.19% 92.75%;
|
--surface2: hsl(233, 12%, 39%);
|
||||||
--warning-foreground: 0 0% 0%;
|
--surface1: hsl(234, 13%, 31%);
|
||||||
--success: 223.73 91.09% 51.57%;
|
--surface0: hsl(237, 16%, 23%);
|
||||||
--success-foreground: 221.74 92% 95.1%;
|
--base: hsl(240, 21%, 15%);
|
||||||
--chart-green: 115.45 54.1% 76.08%;
|
--mantle: hsl(240, 21%, 12%);
|
||||||
--chart-blue: 198.5 75.95% 69.02%;
|
--crust: hsl(240, 23%, 9%);
|
||||||
--chart-yellow: 41.35 86.05% 83.14%;
|
}
|
||||||
--chart-orange: 22.96 92% 75.49%;
|
.ubuntu-mono-regular {
|
||||||
--chart-red: 343.27 81.25% 74.9%;
|
font-family: "Ubuntu Mono", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-mono-bold {
|
||||||
|
font-family: "Ubuntu Mono", serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-mono-regular-italic {
|
||||||
|
font-family: "Ubuntu Mono", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-mono-bold-italic {
|
||||||
|
font-family: "Ubuntu Mono", serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,78 +0,0 @@
|
|||||||
import franken from "franken-ui/shadcn-ui/preset-quick";
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
presets: [
|
|
||||||
franken({
|
|
||||||
customPalette: {
|
|
||||||
".ux-theme-catppuccin": {
|
|
||||||
"--background": "220 23.08% 94.9%",
|
|
||||||
"--foreground": "233.79 16.02% 35.49%",
|
|
||||||
"--card": "220 21.95% 91.96%",
|
|
||||||
"--card-foreground": "233.79 16.02% 35.49%",
|
|
||||||
"--popover": "220 20.69% 88.63%",
|
|
||||||
"--popover-foreground": "233.79 16.02% 35.49%",
|
|
||||||
"--primary": "219.91 91.49% 53.92%",
|
|
||||||
"--primary-foreground": "0 0% 96.08%",
|
|
||||||
"--secondary": "226.67 12.16% 70.98%",
|
|
||||||
"--secondary-foreground": "240 22.73% 8.63%",
|
|
||||||
"--muted": "225 13.56% 76.86%",
|
|
||||||
"--muted-foreground": "240 21.05% 14.9%",
|
|
||||||
"--accent": "230.94 97.2% 71.96%",
|
|
||||||
"--accent-foreground": "240 22.73% 8.63%",
|
|
||||||
"--destructive": "0 84.2% 60.2%",
|
|
||||||
"--destructive-foreground": "210 40% 98%",
|
|
||||||
"--border": "233.79 16.02% 35.49%",
|
|
||||||
"--input": "226.67 12.16% 70.98%",
|
|
||||||
"--ring": "197.07 96.57% 45.69%",
|
|
||||||
},
|
|
||||||
".dark.ux-theme-catppuccin": {
|
|
||||||
"--background": "240 21.05% 14.9%",
|
|
||||||
"--foreground": "226.15 63.93% 88.04%",
|
|
||||||
"--card": "0 0% 7.84%",
|
|
||||||
"--card-foreground": "226.15 63.93% 88.04%",
|
|
||||||
"--popover": "240 22.73% 8.63%",
|
|
||||||
"--popover-foreground": "226.15 63.93% 88.04%",
|
|
||||||
"--primary": "217.17 91.87% 75.88%",
|
|
||||||
"--primary-foreground": "240 22.73% 8.63%",
|
|
||||||
"--secondary": "232.5 12% 39.22%",
|
|
||||||
"--secondary-foreground": "226.15 63.93% 88.04%",
|
|
||||||
"--muted": "236.84 16.24% 22.94%",
|
|
||||||
"--muted-foreground": "226.15 63.93% 88.04%",
|
|
||||||
"--accent": "115.45 54.1% 76.08%",
|
|
||||||
"--accent-foreground": "240 22.73% 8.63%",
|
|
||||||
"--destructive": "343 81.2% 74.9%",
|
|
||||||
"--destructive-foreground": "240 22.73% 8.63%",
|
|
||||||
"--border": "236.84 16.24% 22.94%",
|
|
||||||
"--input": "232.5 12% 39.22%",
|
|
||||||
"--ring": "189.18 71.01% 72.94%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
content: ["./view/**/*.templ"],
|
|
||||||
safelist: [
|
|
||||||
{
|
|
||||||
pattern: /^uk-/,
|
|
||||||
},
|
|
||||||
"ProseMirror",
|
|
||||||
"ProseMirror-focused",
|
|
||||||
"tiptap",
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
warning: "hsl(var(--warning))",
|
|
||||||
"warning-foreground": "hsl(var(--warning-foreground))",
|
|
||||||
success: "hsl(var(--success))",
|
|
||||||
"success-foreground": "hsl(var(--success-foreground))",
|
|
||||||
"chart-green": "hsl(var(--chart-green)",
|
|
||||||
"chart-blue": "hsl(var(--chart-blue)",
|
|
||||||
"chart-yellow": "hsl(var(--chart-yellow)",
|
|
||||||
"chart-orange": "hsl(var(--chart-orange)",
|
|
||||||
"chart-red": "hsl(var(--chart-red)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
@@ -1,5 +1,90 @@
|
|||||||
package component
|
package component
|
||||||
|
|
||||||
templ Navbar() {
|
type NavItem struct {
|
||||||
<nav>Test</nav>
|
name string
|
||||||
|
href string
|
||||||
|
}
|
||||||
|
|
||||||
|
func getNavItems() []NavItem {
|
||||||
|
return []NavItem{
|
||||||
|
{
|
||||||
|
name: "Movies",
|
||||||
|
href: "/movies",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Navbar() {
|
||||||
|
<div x-data="{ open: false }">
|
||||||
|
<header class="bg-crust">
|
||||||
|
<div
|
||||||
|
class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
|
||||||
|
px-4 sm:px-6 lg:px-8"
|
||||||
|
>
|
||||||
|
<a class="block" href="#">
|
||||||
|
<span class="text-3xl font-bold transition hover:text-green">
|
||||||
|
<span class="hidden sm:inline">Project</span> Reshoot
|
||||||
|
</span>
|
||||||
|
<!-- logo here -->
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-1 items-center justify-end sm:justify-between">
|
||||||
|
<nav aria-label="Global" class="hidden sm:block">
|
||||||
|
<ul class="flex items-center gap-6 text-xl">
|
||||||
|
for _, item := range getNavItems() {
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="text-subtext1 hover:text-green
|
||||||
|
transition"
|
||||||
|
href={ templ.SafeURL(item.href) }
|
||||||
|
>
|
||||||
|
{ item.name }
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="sm:flex sm:gap-2">
|
||||||
|
<a
|
||||||
|
class="hidden rounded-lg px-4 py-2 sm:block
|
||||||
|
bg-green hover:bg-green/75 text-mantle transition"
|
||||||
|
href="/login"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="hidden rounded-lg px-4 py-2 sm:block
|
||||||
|
bg-blue text-mantle hover:bg-blue/75 transition"
|
||||||
|
href="/register"
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="open = !open"
|
||||||
|
class="block rounded-lg p-2.5 sm:hidden transition
|
||||||
|
bg-surface0 text-subtext0 hover:text-overlay2/75"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Toggle menu</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="size-5"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M4 6h16M4 12h16M4 18h16"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
@sideNav(getNavItems())
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
47
view/component/sidenav.templ
Normal file
47
view/component/sidenav.templ
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
package component
|
||||||
|
|
||||||
|
templ sideNav(navItems []NavItem) {
|
||||||
|
<div
|
||||||
|
x-show="open"
|
||||||
|
x-transition
|
||||||
|
class="absolute w-full bg-mantle sm:hidden"
|
||||||
|
>
|
||||||
|
<div class="px-4 py-6">
|
||||||
|
<ul class="space-y-1">
|
||||||
|
for _, item := range navItems {
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={ templ.SafeURL(item.href) }
|
||||||
|
class="block rounded-lg px-4 py-2 text-lg
|
||||||
|
bg-surface0 text-text transition hover:bg-surface2"
|
||||||
|
>
|
||||||
|
{ item.name }
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 pb-6">
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li class="flex justify-center items-center gap-2">
|
||||||
|
<a
|
||||||
|
class="w-26 px-4 py-2 rounded-lg
|
||||||
|
bg-green text-mantle transition hover:bg-green/75
|
||||||
|
text-center"
|
||||||
|
href="/login"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="w-26 px-4 py-2 rounded-lg
|
||||||
|
bg-blue text-mantle transition hover:bg-blue/75
|
||||||
|
text-center"
|
||||||
|
href="/register"
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
@@ -11,33 +11,29 @@ templ Global() {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Project Reshoot</title>
|
<title>Project Reshoot</title>
|
||||||
<link href="/static/css/output.css" rel="stylesheet" />
|
<link href="/static/css/output.css" rel="stylesheet" />
|
||||||
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/core.iife.js" type="module"></script>
|
|
||||||
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/icon.iife.js" type="module"></script>
|
|
||||||
<script src="https://unpkg.com/htmx.org@2.0.4"
|
<script src="https://unpkg.com/htmx.org@2.0.4"
|
||||||
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
|
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/alpinejs" defer></script>
|
||||||
<script>
|
<script>
|
||||||
const htmlElement = document.documentElement;
|
document.documentElement.classList.toggle(
|
||||||
|
"dark",
|
||||||
if (
|
localStorage.currentTheme === "dark" ||
|
||||||
localStorage.getItem("mode") === "dark" ||
|
(
|
||||||
(!("mode" in localStorage) &&
|
!("theme" in localStorage) &&
|
||||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
) {
|
),
|
||||||
htmlElement.classList.add("dark");
|
|
||||||
} else {
|
|
||||||
htmlElement.classList.remove("dark");
|
|
||||||
}
|
|
||||||
|
|
||||||
htmlElement.classList.add(
|
|
||||||
localStorage.getItem("theme") || "uk-theme-catppuccin",
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
//localStorage.currentTheme = "light";
|
||||||
|
//localStorage.currentTheme = "dark";
|
||||||
|
//localStorage.removeItem("theme");
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-background text-foreground">
|
<body class="bg-base text-text ubuntu-mono-regular">
|
||||||
@component.Navbar()
|
@component.Navbar()
|
||||||
<h1 class="text-3xl text-foreground font-bold underline">Hello world! </h1>
|
<h1 class="text-3xl font-bold underline">Hello world! </h1>
|
||||||
{ children... }
|
{ children... }
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user