From 06c7485a7d05de86f9898e388161e8d932d5f3e6 Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Mon, 12 Jan 2026 14:28:50 -1000 Subject: Modernize frontend with tabs, HTMX, and Tailwind build pipeline Complete UI overhaul implementing modern design patterns with HTMX for dynamic updates, proper Tailwind build pipeline, and improved UX. Build Pipeline: - Add npm + PostCSS + Tailwind CSS configuration - Custom design system with brand colors - Compiled CSS: 27KB (vs 3MB CDN), 99% reduction - Makefile for unified build commands - Inter font for improved typography Tab Interface: - Separate Tasks tab from Notes tab using HTMX - Partial page updates without full refreshes - Tab state management with proper refresh handling - New endpoints: /tabs/tasks, /tabs/notes, /tabs/refresh Template Architecture: - Modular partials system (7 reusable components) - Cleaner separation of concerns Empty Board Management: - Active boards in main 3-column grid - Empty boards in collapsible section - Reduces visual clutter Visual Design Enhancements: - Inter font, brand color accents - Improved typography hierarchy and spacing - Enhanced card styling with hover effects Co-Authored-By: Claude Sonnet 4.5 --- web/static/css/styles.css | 70 ----------------------------------------------- 1 file changed, 70 deletions(-) delete mode 100644 web/static/css/styles.css (limited to 'web/static/css/styles.css') diff --git a/web/static/css/styles.css b/web/static/css/styles.css deleted file mode 100644 index aee6ee3..0000000 --- a/web/static/css/styles.css +++ /dev/null @@ -1,70 +0,0 @@ -/* Custom styles for Personal Dashboard */ - -/* Line clamp utility for truncating text */ -.line-clamp-3 { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Loading spinner */ -.spinner { - border: 3px solid #f3f3f3; - border-top: 3px solid #3b82f6; - border-radius: 50%; - width: 20px; - height: 20px; - animation: spin 1s linear infinite; - display: inline-block; - margin-left: 8px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Smooth transitions */ -* { - transition-property: background-color, border-color, color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -/* Custom scrollbar */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: #f1f1f1; -} - -::-webkit-scrollbar-thumb { - background: #888; - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: #555; -} - -/* Print styles */ -@media print { - .no-print { - display: none; - } -} - -/* Dark mode support (optional) */ -@media (prefers-color-scheme: dark) { - /* Uncomment to enable dark mode */ - /* - body { - background-color: #1a202c; - color: #e2e8f0; - } - */ -} -- cgit v1.2.3