checkpoint

static/css/components/header.css

@@ -1,11 +1,12 @@
 .app-header {
   background: var(--card-bg);
   border-bottom: 1px solid var(--border-color);
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: var(--z-header);
-  height: 60px;
+  height: 48px; /* Reduced height */
   width: 100%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
 .header-container {
@@ -18,46 +19,105 @@
   height: 100%;
 }
 
+/* Logo and title styling */
+.header-branding {
+  display: flex;
+  align-items: center;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--text-color);
+  gap: 8px;
+}
+
+.app-logo {
+  width: 24px;
+  height: 24px;
+}
+
+.app-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Navigation styling */
 .main-nav {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .nav-item {
-  padding: 0.5rem 1rem;
-  border-radius: var(--border-radius-base);
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--border-radius-xs);
   color: var(--text-color);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
+  font-size: 0.9rem;
 }
 
-.nav-item:hover {
-  background: var(--lora-surface-hover);
+/* Header controls (formerly corner controls) */
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.nav-item.active {
-  background: var(--lora-primary);
-  color: var(--lora-text-on-primary);
+.header-controls > div {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.header-controls > div:hover {
+  background: var(--lora-accent);
+  color: white;
+  transform: translateY(-2px);
+}
+
+.theme-toggle .light-icon {
+  opacity: 0;
+}
+
+.theme-toggle .dark-icon {
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .light-icon {
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .dark-icon {
+  opacity: 0;
 }
 
 /* Mobile adjustments */
 @media (max-width: 768px) {
-  .header-container {
-    flex-direction: column;
-    padding-top: 0.5rem;
-    height: auto;
+  .app-title {
+    display: none; /* Hide text title on mobile */
   }
   
-  .app-header {
-    height: auto;
+  .header-controls {
+    gap: 4px;
   }
   
-  .main-nav {
-    width: 100%;
-    justify-content: center;
-    margin-top: 0.5rem;
+  .header-controls > div {
+    width: 28px;
+    height: 28px;
   }
-}
+}