ensured footer was pinned to bottom of page for new-ish billboard.html & room_scroll.html pages; introduced mobile landscape layout, incl. leftward 'navbar', rightward 'footer'; ensured z-index primacy of #id_kit_btn, which would here appear behind the kit bar when open; other fixes introduced by problems stemming largely from new landscape styling

src/static_src/scss/_base.scss

@@ -21,7 +21,7 @@ body {
         max-width: 960px;
         width: 100%;
         margin: 0 auto;
-        padding: 0 1rem;
+        // padding: 0 1rem;
         flex: 1;
 
         .navbar {
@@ -29,6 +29,7 @@ body {
             border-bottom: 0.1rem solid rgba(var(--secUser), 0.4);
 
             .navbar-brand {
+                margin-left: 1rem;
                 h1 {
                     font-size: 2rem;
                 }
@@ -38,6 +39,7 @@ body {
                 display: flex;
                 align-items: center;
                 gap: 1rem;
+                margin-right: 0.5rem;
 
                 > form { flex-shrink: 0; margin-left: auto; }
             }
@@ -172,45 +174,118 @@ body {
 }
 
 @media (orientation: landscape) and (max-width: 1023px) {
-    body .container {
-        padding: 0.4rem 1rem;
+    $sidebar-w: 4rem;
 
-        .navbar {
-            padding: 0.2rem 0;
+    // ── Sidebar layout: navbar ← left, footer → right ────────────────────────────
+    body {
+        flex-direction: row;
+    }
 
-            .navbar-brand h1 {
-                font-size: 1.2rem;
-            }
-            .btn-primary {
-                width: 3rem;
-                height: 3rem;
-                font-size: 0.75rem;
-                border-width: 0.125rem;
-            }
+    // Navbar → fixed left sidebar
+    body .container .navbar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        width: $sidebar-w;
+        padding: 0.5rem 0;
+        border-bottom: none;
+        border-right: 0.1rem solid rgba(var(--secUser), 0.4);
+        background-color: rgba(var(--priUser), 1);
+        z-index: 300;
+        overflow: hidden;
+
+        .container-fluid {
+            flex-direction: column;
+            height: 100%;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+            padding: 0 0.25rem;
+
+            > form { margin-left: 0; flex-shrink: 0; order: -1; }  // logout at top
         }
 
-        .row {
-            padding: 0.5rem 0;
+        .navbar-brand { order: 1; }  // brand at bottom
 
-            .col-lg-6 h2 {
-                font-size: 2rem;
-                margin-bottom: 0.5rem;
-                // text-justify: inter-character is Firefox-only; approximate for Safari/Chrome
-                letter-spacing: 1em;
-                text-align: center;
-                text-align-last: center;
-            }
+        .navbar-brand h1 {
+            writing-mode: vertical-rl;
+            transform: rotate(180deg);
+            font-size: 1rem;
+            line-height: 1.2;
+            white-space: nowrap;
+            margin-right: 2.75rem;
+        }
+
+        .navbar-text,
+        .navbar-link { display: none; }
+
+        .btn-primary {
+            width: 3rem;
+            height: 3rem;
+            font-size: 0.75rem;
+            border-width: 0.125rem;
+            margin-left: 0.75rem;
+        }
+
+        // Login form: email input can't fit in narrow sidebar
+        .input-group { display: none; }
+    }
+
+    // Container: fill centre, compensate for fixed sidebars on both sides
+    body .container {
+        flex: 1;
+        min-width: 0;
+        margin-left: $sidebar-w;
+        margin-right: $sidebar-w;
+        padding: 0 0.5rem;
+    }
+
+    // Header row: compact in landscape
+    body .container .row {
+        padding: 0.25rem 0;
+
+        .col-lg-6 h2 {
+            font-size: 1.5rem;
+            margin: 0 0 0.25rem;
+            letter-spacing: 0.4em;
+            text-align: center;
+            text-align-last: center;
         }
     }
 
-    #id_footer {
-        height: 3rem;
-        padding: 0.4rem 1rem;
-        gap: 0.2rem;
+    // Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)
+    // Use body #id_footer (specificity 0,1,0,1) to beat base #id_footer (0,1,0,0)
+    // which compiles later in the output and would otherwise override height: 100vh.
+    body #id_footer {
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: $sidebar-w;
+        height: 100vh;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-top: none;
+        border-left: 0.1rem solid rgba(var(--secUser), 0.3);
+        padding: 1rem 0;
+        gap: 0;
 
-        #id_footer_nav a {
-            font-size: 1.4rem;
+        #id_footer_nav {
+            flex-direction: column;
+            width: auto;
+            max-width: none;
+            gap: 1.5rem;
+
+            a {
+                font-size: 1.75rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
         }
+
+        .footer-container { display: none; }
     }
 }