Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Remove custom CSS from docs template

Browse Source 
Remove <style> tags with sidebar transitions, scrollbars, and mobile
responsive styles from docs template. Convert to TailwindCSS utility
classes for transitions and transforms.
This commit is contained in:
john-okeefe
2026-02-02 10:27:56 -05:00
parent fa16a3d78a
commit d0c180446c
1 changed files with 4 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/docs.templ
+4 -97
View File
@@ -37,48 +37,6 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
} }
} }
</script> </script>
<style>
/* Only custom CSS for dynamic values and theming */
.sidebar {
transition: transform 0.3s ease-in-out;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1a1b26;
}
::-webkit-scrollbar-thumb {
background: #414868;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7aa2f7;
}
/* Search results overlay animation */
#search-results {
transition: opacity 0.2s ease-in-out;
}
/* Mobile responsive sidebar */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
}
</style>
</head> </head>
<body class="bg-background-primary text-text-primary font-sans antialiased"> <body class="bg-background-primary text-text-primary font-sans antialiased">
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
@@ -93,10 +51,10 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
</button> </button>
<!-- Search Results Overlay --> <!-- Search Results Overlay -->
<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8"></div> <div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out"></div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0"> <div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
<!-- Search --> <!-- Search -->
<div class="p-4 border-b border-border"> <div class="p-4 border-b border-border">
<input <input
@@ -366,57 +324,6 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
} }
} }
</script> </script>
<style>
/* Only custom CSS for dynamic values and theming */
.sidebar {
transition: transform 0.3s ease-in-out;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1a1b26;
}
::-webkit-scrollbar-thumb {
background: #414868;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7aa2f7;
}
/* Search results overlay animation */
#search-results {
transition: opacity 0.2s ease-in-out;
}
/* Mobile responsive sidebar */
@media (max-width: 1024px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
}
/* Mobile TOC */
@media (max-width: 768px) {
.toc {
position: static;
margin-bottom: 1rem;
padding: 1rem;
}
}
</style>
</head> </head>
<body class="bg-background-primary text-text-primary font-sans antialiased"> <body class="bg-background-primary text-text-primary font-sans antialiased">
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
@@ -431,10 +338,10 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
</button> </button>
<!-- Search Results Overlay --> <!-- Search Results Overlay -->
<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8"></div> <div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8 transition-opacity duration-200 ease-in-out"></div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0"> <div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
<!-- Search --> <!-- Search -->
<div class="p-4 border-b border-border"> <div class="p-4 border-b border-border">
<input <input