john-okeefe
d78a182f0d
On viewports below 970px the header now collapses to a compact bar with only the Bookhoard logo and a hamburger button. Clicking the hamburger reveals a slide-down panel containing: - Full-text search input (wired to the existing debounced search API) - Navigation links (Library, All Books, Series, Collections, Progress, Devices) - Collapsible theme switcher with all 7 themes and 4 bookshelf backgrounds - User section: profile/admin/logout when logged in, inline login form when logged out Changes: - templates/header.templ: add hamburger button, mobile panel with all controls, hide desktop search/theme/user controls below nav breakpoint - web/src/header.ts: add mobileMenuOpen state to Alpine header component - web/src/search.ts: refactor initializeSearch to wire both desktop and mobile search inputs, track active input for results container placement - tailwind.config.ts: add custom 'nav' screen breakpoint at 970px so the mobile menu activates before the search bar becomes unusable - web/static/style.css: rebuilt with new nav breakpoint utility classes
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./templates/**/*.{templ,html}",
|
|
"./web/static/**/*.{html,js}",
|
|
"./web/src/**/*.ts",
|
|
],
|
|
safelist: [
|
|
"theme-tokyo-night",
|
|
"theme-dracula",
|
|
"theme-nord",
|
|
"theme-solarized-dark",
|
|
"theme-monokai",
|
|
"theme-one-dark-pro",
|
|
"theme-material-dark",
|
|
"theme-catppuccin-mocha",
|
|
"theme-catppuccin-macchiato",
|
|
"theme-catppuccin-frappe",
|
|
"theme-catppuccin-latte",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
nav: "970px",
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"sans-serif",
|
|
'"Noto Sans SC"',
|
|
'"Noto Sans TC"',
|
|
'"Noto Sans JP"',
|
|
'"Noto Sans KR"',
|
|
'"PingFang SC"',
|
|
'"Microsoft YaHei"',
|
|
'"Hiragino Sans"',
|
|
'"Apple SD Gothic Neo"',
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
],
|
|
},
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: "#7aa2f7",
|
|
50: "#f0f9ff",
|
|
100: "#e0f2fe",
|
|
200: "#bae6fd",
|
|
300: "#7dd3fc",
|
|
400: "#38bdf8",
|
|
500: "#0ea5e9",
|
|
600: "#0284c7",
|
|
700: "#0369a1",
|
|
800: "#075985",
|
|
900: "#0c4a6e",
|
|
},
|
|
"bg-primary": "var(--bg-primary)",
|
|
"bg-secondary": "var(--bg-secondary)",
|
|
"text-primary": "var(--text-primary)",
|
|
"text-secondary": "var(--text-secondary)",
|
|
accent: "var(--accent)",
|
|
border: "var(--border)",
|
|
},
|
|
backgroundImage: {
|
|
"wood-light": "url('/static/textures/wood-light.png')",
|
|
"wood-dark": "url('/static/textures/wood-dark.png')",
|
|
"wood-mahogany": "url('/static/textures/wood-mahogany.png')",
|
|
},
|
|
typography: ({ theme }) => ({
|
|
invert: {
|
|
css: {
|
|
"--tw-prose-pre-bg": "var(--bg-secondary)",
|
|
code: {
|
|
backgroundColor: "var(--bg-primary)",
|
|
color: "var(--text-primary)",
|
|
fontWeight: "400",
|
|
},
|
|
"code::before": {
|
|
content: '""',
|
|
},
|
|
"code::after": {
|
|
content: '""',
|
|
},
|
|
"pre code": {
|
|
backgroundColor: "transparent",
|
|
color: "inherit",
|
|
},
|
|
pre: {
|
|
backgroundColor: "var(--bg-secondary)",
|
|
color: "var(--text-primary)",
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
|
|
};
|
|
|
|
export default config;
|