feat(ui): optimize landing page and showcase for mobile (hamburger nav, 2-col grid, compact lightbox)

app/static/style.css

@@ -302,26 +302,48 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
     .detail-grid { grid-template-columns: 1fr; }
     .card-grid { grid-template-columns: 1fr; }
     .postcard-row-info { flex-wrap: wrap; gap: .35rem; }
-    .navbar { padding: .5rem 1rem; }
+
-    .nav-links { gap: .75rem; }
+    /* Navbar */
-    .nav-links a { font-size: .8rem; }
+    .navbar { padding: .5rem .75rem; }
-    .container { margin: 1rem auto; padding: 0 1rem; }
+    .nav-brand { font-size: .9rem; }
+    .nav-links { gap: .5rem; }
+    .nav-links a { font-size: .78rem; }
+    .nav-links .btn-sm { padding: .3rem .6rem; font-size: .75rem; }
+
+    .container { margin: 1rem auto; padding: 0 .75rem; }
+
+    /* Dashboard */
     .dash-stats { display: grid; grid-template-columns: 1fr 1fr; }
     .dash-stat-card { min-width: 0; }
     .dash-sections { grid-template-columns: 1fr; }
     .recent-meta > span:nth-child(-n+2) { display: none; }
     .recent-meta .recent-time { display: inline; }
     .recent-item { gap: .5rem; padding: .5rem; }
-    .section-header { flex-direction: column; gap: .75rem; }
+
+    /* Section header */
+    .section-header { flex-direction: column; gap: .5rem; text-align: center; }
     .section-header .btn { width: auto; }
+
+    /* Detail */
     .detail-title-row h1 { font-size: 1.2rem; }
     .btn-back { padding: .25rem .5rem; font-size: .85rem; }
+
+    /* Profiles */
     .profile-grid { grid-template-columns: 1fr; }
     .profile-card-stats { gap: .75rem; flex-wrap: wrap; }
-    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
+
-    .showcase-card-meta { flex-wrap: wrap; }
+    /* Showcase / Landing grid — 2 columns on mobile */
-    .detail-title-row h1 { font-size: 1.2rem; }
+    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
-    .btn-back { padding: .25rem .5rem; font-size: .85rem; }
+    .showcase-card-body { padding: .5rem; }
+    .showcase-card-meta { font-size: .72rem; flex-wrap: wrap; gap: .25rem; }
+
+    /* Lightbox — tighter on mobile */
+    .lightbox-content { max-width: 95vw; }
+    .lightbox-content img { max-width: 95vw; max-height: 75vh; }
+    .lightbox-prev, .lightbox-next { font-size: 1.4rem; padding: .4rem .6rem; }
+    .lightbox-prev { left: .5rem; }
+    .lightbox-next { right: .5rem; }
+    .lightbox-close { top: .5rem; right: .75rem; font-size: 1.6rem; }
 }
 
 /* Admin invite form */

app/templates/index.html

@@ -3,6 +3,7 @@
 {% block nav %}
 <nav class="navbar">
     <a href="/" class="nav-brand">{{ 'brand'|t(lang) }}</a>
+    <button class="nav-hamburger" onclick="this.nextElementSibling.classList.toggle('open')">☰</button>
     <div class="nav-links">
         <div class="lang-switcher" id="langSwitcher">
             <button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
@@ -12,15 +13,15 @@
                 {% endfor %}
             </div>
         </div>
-        <a href="/login" class="btn btn-sm" style="margin-left:.5rem">{{ 'index.go_login'|t(lang) }}</a>
+        <a href="/login" class="btn btn-sm">{{ 'index.go_login'|t(lang) }}</a>
         <a href="/register" class="btn btn-primary btn-sm">{{ 'index.go_register'|t(lang) }}</a>
     </div>
 </nav>
 {% endblock %}
 {% block content %}
-<div class="section-header">
+<div class="section-header" style="text-align:center">
-    <h1>📮 {{ 'index.title'|t(lang) }}</h1>
+    <h1 style="font-size:1.3rem">📮 {{ 'index.title'|t(lang) }}</h1>
-    <p style="color:var(--text-muted);margin-top:.25rem">{{ 'index.subtitle'|t(lang) }}</p>
+    <p style="color:var(--text-muted);font-size:.85rem;margin-top:.15rem">{{ 'index.subtitle'|t(lang) }}</p>
 </div>
 
 {% set visible = [] %}

app/templates/showcase.html

@@ -12,8 +12,8 @@
         </div>
     </div>
 </div>
-<div class="section-header">
+<div class="section-header" style="text-align:center">
-    <h1>📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
+    <h1 style="font-size:1.3rem">📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
 </div>
 
 {% set sent_visible = [] %}