feat: macos esque page

Author: johanwulf

src/layouts/BaseLayout.astro

@@ -560,13 +560,20 @@ const iconPaths = {
       const isMaximized = windowElement.hasAttribute('data-maximized');
 
       if (isMaximized) {
-        // Restore window
+        // Restore window with smooth animation
+        windowElement.style.transition = 'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
         const originalData = JSON.parse(windowElement.getAttribute('data-original-size'));
+        windowElement.style.position = 'absolute';
         windowElement.style.top = originalData.top;
         windowElement.style.left = originalData.left;
+        windowElement.style.right = 'auto'; // Reset right constraint
+        windowElement.style.bottom = 'auto'; // Reset bottom constraint
         windowElement.style.width = originalData.width;
         windowElement.style.height = originalData.height;
+        windowElement.style.margin = '';
+        windowElement.style.maxWidth = '';
         windowElement.style.resize = 'both';
+        windowElement.style.borderRadius = ''; // Restore rounded corners
         windowElement.removeAttribute('data-maximized');
         windowElement.removeAttribute('data-original-size');
       } else {
@@ -580,12 +587,19 @@ const iconPaths = {
         windowElement.setAttribute('data-original-size', JSON.stringify(originalData));
         windowElement.setAttribute('data-maximized', 'true');
 
-        // Maximize window
+        // Maximize window with smooth animation
+        windowElement.style.transition = 'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        windowElement.style.position = 'fixed';
         windowElement.style.top = '28px'; // Below menu bar
         windowElement.style.left = '0px';
+        windowElement.style.right = '0px'; // Ensure it goes to right edge
+        windowElement.style.bottom = '120px'; // Above dock
         windowElement.style.width = '100vw';
-        windowElement.style.height = 'calc(100vh - 28px - 100px)'; // Menu bar + dock space
+        windowElement.style.height = 'calc(100vh - 28px - 120px)'; // Menu bar + dock space
+        windowElement.style.margin = '0';
+        windowElement.style.maxWidth = 'none';
         windowElement.style.resize = 'none';
+        windowElement.style.borderRadius = '0px'; // Remove rounded corners in fullscreen
       }
 
       this.focusWindow(windowElement);

src/styles/globals.css

@@ -203,29 +203,51 @@
 
   /* Widgets Panel */
   .widgets-panel {
-    @apply fixed top-8 right-4 w-80 z-40;
-    @apply p-6;
+    position: fixed;
+    top: 32px;
+    right: 16px;
+    width: 320px;
+    z-index: 9999; /* Above everything */
+    padding: 24px;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.95) translateY(-10px);
     transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
+    pointer-events: none; /* Don't interfere when hidden */
   }
 
   .widgets-panel.active {
     opacity: 1;
     visibility: visible;
     transform: scale(1) translateY(0);
+    pointer-events: auto; /* Enable interactions when shown */
   }
 
   .widget {
-    @apply bg-white/30 backdrop-blur-xl rounded-2xl p-4 mb-4 border border-white/40;
+    @apply rounded-2xl p-4 mb-4 border border-white/40;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     box-shadow: 
-      0 8px 32px rgba(0, 0, 0, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+      0 10px 40px rgba(0, 0, 0, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.2) inset,
+      0 2px 8px rgba(0, 0, 0, 0.2);
+    color: white;
   }
 
   .weather-widget {
-    @apply bg-gradient-to-br from-blue-500/30 to-purple-500/30;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(147, 51, 234, 0.9));
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    color: white;
+  }
+  
+  .weather-widget .text-white\/60 {
+    color: rgba(255, 255, 255, 0.8) !important;
+  }
+  
+  .weather-widget .text-white\/70 {
+    color: rgba(255, 255, 255, 0.9) !important;
   }
 
   .widgets-toggle {