feature: Home Page & Footer Mobile Friendly

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor

@@ -4,5 +4,5 @@
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
-    <div class="deepdrft-footer-copy">© 2026 Deep DRFT — Charleston, SC</div>
+    <div class="deepdrft-footer-copy">© 2026 Deep DRFT</div>
 </footer>

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css

@@ -47,15 +47,20 @@
     color: var(--deepdrft-muted);
 }
 
-@media (max-width: 599px) {
+@media (max-width: 440px) {
     .deepdrft-footer {
         padding: 1.5rem;
-        flex-wrap: wrap;
+        /*flex-wrap: wrap;*/
         gap: 1rem;
     }
+    
+    .deepdrft-footer-links {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
 
     .deepdrft-footer-copy {
-        width: 100%;
-        text-align: right;
+        /*width: 100%;*/
+        justify-self: right;
     }
 }

DeepDrftPublic.Client/Layout/MainLayout.razor

@@ -21,10 +21,12 @@
                 </MudContainer>
             </MudMainContent>
             <DeepDrftFooter />
-            <AudioPlayerBar />
+            <AudioPlayerBar OnMinimized="ToggleAudioPlayerMinimized" />
             
-            @* Spacer to prevent content overlap *@
-            <div class="player-spacer"></div>
+            @* Spacer to prevent content overlap. Height tracks the fixed player
+               dock's live size via the --player-height var the player publishes
+               (see AudioPlayerBar / Interop/layout/spacer.ts). *@
+            <div class="player-spacer @_audioPlayerClass"></div>
         </AudioPlayerProvider>
     </MudLayout>
 </div>
@@ -37,6 +39,7 @@
 </div>
 
 @code {
+    private string _audioPlayerClass = "minimized";
     private const string DarkModeKey = "darkMode";
     private bool _isDarkMode = false;
     private PersistingComponentStateSubscription _persistingSubscription;
@@ -76,6 +79,12 @@
     {
         _persistingSubscription.Dispose();
     }
+
+    private void ToggleAudioPlayerMinimized(bool isMinimized)
+    {
+        _audioPlayerClass = isMinimized ? "minimized" : "expanded";
+    }
+
 }
 
 

DeepDrftPublic.Client/Layout/MainLayout.razor.css

@@ -1,10 +1,17 @@
 /* Spacer to prevent content overlap */
 .player-spacer {
-    height: 100px;
     width: 100%;
     flex-shrink: 0;
 }
 
+.player-spacer.expanded {
+    height: var(--player-height, 60px);
+}
+
+.player-spacer.minimized {
+    height: 60px;
+}
+
 #blazor-error-ui {
     color-scheme: light only;
     background: lightyellow;