From 2c3cad528a247c771bca136466337877f76f280f Mon Sep 17 00:00:00 2001 From: Adam Mathes Date: Thu, 12 Feb 2026 21:59:55 -0800 Subject: Implement Frontend Feed List with tests --- frontend/src/App.css | 78 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 30 deletions(-) (limited to 'frontend/src/App.css') diff --git a/frontend/src/App.css b/frontend/src/App.css index b9d355d..57800a4 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,42 +1,60 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; +/* Resets and Base Styles */ +* { + box-sizing: border-box; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + +/* Dashboard Layout */ +.dashboard { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + /* Prevent body scroll */ } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.dashboard-header { + background: #2c3e50; + color: white; + padding: 0.75rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + flex-shrink: 0; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.dashboard-header h1 { + margin: 0; + font-size: 1.25rem; + font-weight: 600; } -.card { - padding: 2em; +.dashboard-content { + display: flex; + flex: 1; + overflow: hidden; } -.read-the-docs { - color: #888; +.dashboard-sidebar { + width: 300px; + background: #f8f9fa; + border-right: 1px solid #ddd; + display: flex; + flex-direction: column; + overflow-y: auto; } + +.dashboard-main { + flex: 1; + padding: 2rem; + overflow-y: auto; + background: #fff; +} \ No newline at end of file -- cgit v1.2.3