Mobile responsiveness: media query for 375-640px across topbar, deck, history, paste view, unlock (#45)

2026-09-08 21:45:42 -05:00
parent ebcf7eec80
commit 9c4689e6de
2 changed files with 66 additions and 0 deletions
@@ -306,3 +306,69 @@ th.sortable:hover { color: var(--fg); }
 .sort-ind { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; }
 th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
 th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); }
+
+/* ============================================================
+   Mobile responsiveness (#45) — desktop above is unchanged
+   ============================================================ */
+@media (max-width: 640px) {
+  body { font-size: 16px; }
+
+  /* topbar: tighten so logo + nav + gear fit */
+  .topbar { gap: 10px; padding: 0 12px; height: 56px; }
+  .logo { font-size: 17px; white-space: nowrap; }
+  .logo em { display: none; }
+  .topbar nav { gap: 2px; flex-shrink: 0; }
+  .topbar nav a { padding: 5px 8px; font-size: 15px; }
+  .iconbtn.gear { padding: 4px 7px; flex-shrink: 0; }
+  .iconbtn.gear svg { width: 18px; height: 18px; }
+
+  /* new paste: stack editor above sidebar, natural page height */
+  .deck {
+    display: flex; flex-direction: column;
+    height: auto; min-height: calc(100vh - 56px);
+    padding: 12px; gap: 12px;
+  }
+  .pane-l-col { order: 0; }
+  .pane-r { order: 1; overflow-y: visible; }
+  .editor-wrap { min-height: 45vh; }
+  .editor { font-size: 15px; }
+  .gutter { font-size: 15px; }
+  .editor-head input { min-width: 0; font-size: 16px; }
+  .editor-head select { max-width: 120px; font-size: 14px; }
+  .actionbar { flex-wrap: wrap; }
+  .actionbar .btn { padding: 12px 22px; }
+  .hint { font-size: 13px; }
+
+  /* history: horizontal-scroll table inside its card */
+  .page { padding: 12px; }
+  .head-row { flex-wrap: wrap; }
+  .head-row h1 { font-size: 22px; }
+  .search { width: 100%; }
+  .search input { font-size: 16px; }
+  .float { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  table { min-width: 720px; }
+  th { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
+  td { padding: 8px 10px; font-size: 14px; }
+  .pager { flex-wrap: wrap; gap: 8px; font-size: 13px; }
+
+  /* paste view */
+  .paste-title-bar { padding: 10px 12px; gap: 8px; }
+  .paste-title-bar h1 { font-size: 18px; }
+  .slug { font-size: 13px; word-break: break-all; }
+  .stats-head { font-size: 13px; }
+  .stats-grid { font-size: 13px; padding: 10px 12px; }
+  .code { font-size: 13px; }
+  .codebody { padding: 0 12px; }
+  .footnote { font-size: 12px; padding: 8px 12px; gap: 10px; }
+  .created-banner { font-size: 13px; }
+  .iconbtn { font-size: 13px; padding: 6px 10px; }
+
+  /* unlock card */
+  .center { height: auto; min-height: calc(100vh - 56px); padding: 16px; }
+  .center .float { width: 100%; }
+  .inner { padding: 20px 16px; }
+  .inner h1 { font-size: 20px; }
+  .inner .sub { font-size: 14px; }
+  .unlock-err { font-size: 13px; }
+  .center .foot { font-size: 13px; }
+}