UI: scale up another 1.5x, widen history page container to fit

web/static/app.css

@@ -3,7 +3,7 @@
   --bg: #241B30; --surface: #2D2340; --surface-2: #3A2D52;
   --muted: #7A6A9E; --muted-fg: #C0B2DE; --fg: #F2EDF8;
   --accent: #C4A8F0; --border: #42355C;
-  --radius: 16px;
+  --radius: 20px;
   --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
 }
@@ -21,21 +21,21 @@ body {
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
-  font-size: 16.1px;
+  font-size: 24.2px;
 }
 .topbar {
   display: flex; align-items: center; gap: 20px;
-  padding: 0 22px; height: 60px;
+  padding: 0 22px; height: 76px;
   background: var(--surface); border-bottom: 1px solid var(--border);
 }
-.logo { font-weight: 700; font-size: 18.4px; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); }
+.logo { font-weight: 700; font-size: 27.6px; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); }
 .logo em { font-style: normal; color: var(--muted-fg); font-weight: 400; }
 .topbar nav { display: flex; gap: 4px; }
-.topbar nav a { color: var(--muted-fg); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 15.5px; }
+.topbar nav a { color: var(--muted-fg); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 23.2px; }
 .topbar nav a:hover { background: var(--surface-2); color: var(--fg); }
 .topbar nav a.on { background: var(--accent); color: var(--bg); }
 .topbar .spacer { flex: 1; }
-.kbd { font-family: var(--font-mono); font-size: 12.6px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--muted-fg); }
+.kbd { font-family: var(--font-mono); font-size: 18.9px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--muted-fg); }
 
 .float {
   background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
@@ -51,27 +51,27 @@ body {
 }
 .pane-r { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-bottom: 4px; }
 .side-section { padding: 14px 16px; flex-shrink: 0; }
-.side-section h3 { font-size: 12.6px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); margin-bottom: 10px; }
+.side-section h3 { font-size: 18.9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); margin-bottom: 10px; }
 .pane-l { display: flex; flex-direction: column; }
 .editor-head {
   display: flex; align-items: center; gap: 12px; padding: 10px 16px;
   border-bottom: 1px solid var(--border);
 }
 .editor-head input {
-  border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 15.5px; flex: 1;
+  border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1;
 }
 .editor-head select {
   border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg);
-  border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 14.4px; cursor: pointer;
+  border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 21.6px; cursor: pointer;
 }
 .editor-wrap { flex: 1; display: flex; min-height: 0; }
 .gutter {
   padding: 14px 10px; text-align: right; color: var(--muted); font-family: var(--font-mono);
-  font-size: 14.4px; line-height: 1.7; user-select: none; white-space: pre; overflow: hidden;
+  font-size: 21.6px; line-height: 1.7; user-select: none; white-space: pre; overflow: hidden;
   border-right: 1px solid var(--border);
 }
 .editor {
-  flex: 1; padding: 14px 16px; font-family: var(--font-mono); font-size: 14.4px; line-height: 1.7;
+  flex: 1; padding: 14px 16px; font-family: var(--font-mono); font-size: 21.6px; line-height: 1.7;
   white-space: pre; outline: none; overflow: auto; border: none; background: transparent; color: var(--fg);
   resize: none; width: 100%;
 }
@@ -82,63 +82,63 @@ body {
 }
 .btn {
   background: var(--accent); color: var(--bg); border: none; cursor: pointer;
-  padding: 8px 18px; border-radius: 8px; font: inherit; font-size: 14.9px; font-weight: 600;
+  padding: 8px 18px; border-radius: 8px; font: inherit; font-size: 22.4px; font-weight: 600;
 }
 .btn:hover { filter: brightness(1.08); }
-.hint { font-size: 13.8px; color: var(--muted-fg); }
+.hint { font-size: 20.7px; color: var(--muted-fg); }
 .hint b { color: var(--fg); font-weight: 550; }
 .seg { display: flex; flex-direction: column; gap: 2px; }
-.seg label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 14.9px; }
+.seg label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 22.4px; }
 .seg label:hover { background: var(--surface-2); }
 .seg input { accent-color: var(--accent); }
-.toggle { display: flex; align-items: center; gap: 8px; font-size: 14.9px; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
+.toggle { display: flex; align-items: center; gap: 8px; font-size: 22.4px; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
 .toggle:hover { background: var(--surface-2); }
 .toggle input { accent-color: var(--accent); }
-.deck .row { display: flex; justify-content: space-between; align-items: center; font-size: 14.9px; padding: 4px 0; }
+.deck .row { display: flex; justify-content: space-between; align-items: center; font-size: 22.4px; padding: 4px 0; }
 .row input[type="text"] {
   border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; background: var(--bg);
-  color: var(--fg); font: inherit; font-size: 14.4px; width: 130px;
+  color: var(--fg); font: inherit; font-size: 21.6px; width: 130px;
 }
 .created-banner {
-  display: none; padding: 10px 16px; font-size: 14.9px; background: var(--surface-2);
+  display: none; padding: 10px 16px; font-size: 22.4px; background: var(--surface-2);
   border-bottom: 1px solid var(--border); word-break: break-all;
 }
 .created-banner a { color: var(--accent); }
 
 /* paste view */
 .meta-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
-.meta-bar h1 { font-size: 19.5px; font-weight: 600; }
+.meta-bar h1 { font-size: 29.2px; font-weight: 600; }
-.slug { font-family: var(--font-mono); font-size: 14.4px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: 7px; }
+.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: 7px; }
-.tag { font-size: 13.2px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
+.tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
 .meta-bar .spacer { flex: 1; }
-.iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 14.4px; cursor: pointer; text-decoration: none; }
+.iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; }
 .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
 .iconbtn.danger:hover { color: #ff8fa3; border-color: #ff8fa3; }
 .code-head {
   display: flex; align-items: center; gap: 10px; padding: 8px 16px;
-  border-bottom: 1px solid var(--border); font-size: 14.4px; color: var(--muted-fg);
+  border-bottom: 1px solid var(--border); font-size: 21.6px; color: var(--muted-fg);
 }
 .code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .code {
-  font-family: var(--font-mono); font-size: 14.9px; line-height: 1.7;
+  font-family: var(--font-mono); font-size: 22.4px; line-height: 1.7;
   padding: 14px 0; display: flex; overflow-x: auto;
 }
 .code .gutter { flex-shrink: 0; }
 .codebody { padding: 0 18px; white-space: pre; }
-.footnote { display: flex; gap: 20px; padding: 10px 18px; font-size: 13.8px; color: var(--muted-fg); border-top: 1px solid var(--border); flex-wrap: wrap; }
+.footnote { display: flex; gap: 20px; padding: 10px 18px; font-size: 20.7px; color: var(--muted-fg); border-top: 1px solid var(--border); flex-wrap: wrap; }
 
 /* history */
-.page { max-width: 860px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.page { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
 .head-row { display: flex; align-items: baseline; gap: 14px; }
-.head-row h1 { font-size: 23px; font-weight: 600; }
+.head-row h1 { font-size: 34.5px; font-weight: 600; }
 .search {
   display: flex; align-items: center; gap: 8px; background: var(--surface);
   border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; width: 260px;
 }
-.search input { border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 14.9px; width: 100%; }
+.search input { border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 22.4px; width: 100%; }
-table { width: 100%; border-collapse: collapse; font-size: 14.9px; table-layout: fixed; }
+table { width: 100%; border-collapse: collapse; font-size: 22.4px; table-layout: fixed; }
 th {
-  text-align: left; font-size: 12.6px; text-transform: uppercase; letter-spacing: .08em;
+  text-align: left; font-size: 18.9px; text-transform: uppercase; letter-spacing: .08em;
   color: var(--muted-fg); padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600;
 }
 td { padding: 10px 16px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -146,18 +146,18 @@ tr:last-child td { border-bottom: none; }
 tr.row { cursor: pointer; }
 tr.row:hover td { background: var(--surface-2); }
 tr.row:hover td a.slug { color: var(--accent); }
-td a.slug { font-family: var(--font-mono); font-size: 14.4px; color: var(--fg); text-decoration: none; }
+td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; }
 td a.slug:hover { color: var(--accent); }
-.badge { font-size: 12.6px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: 999px; padding: 1px 8px; }
+.badge { font-size: 18.9px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: 999px; padding: 1px 8px; }
 .badge.lock { color: var(--accent); border-color: var(--accent); }
 .dim { color: var(--muted-fg); white-space: nowrap; }
-.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14.4px; color: var(--muted-fg); }
+.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 21.6px; color: var(--muted-fg); }
 .pager .pg { display: flex; gap: 6px; }
-.pager button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 7px; padding: 4px 11px; font: inherit; font-size: 14.4px; cursor: pointer; }
+.pager button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: 7px; padding: 4px 11px; font: inherit; font-size: 21.6px; cursor: pointer; }
 .pager button:hover:not(:disabled) { color: var(--fg); border-color: var(--muted); }
 .pager button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
 .pager button:disabled { opacity: .4; cursor: default; }
-.empty { text-align: center; padding: 40px 16px; color: var(--muted-fg); font-size: 14.9px; }
+.empty { text-align: center; padding: 40px 16px; color: var(--muted-fg); font-size: 22.4px; }
 
 /* unlock */
 .center { display: flex; align-items: center; justify-content: center; padding: 20px; height: calc(100vh - 52px); }
@@ -165,18 +165,18 @@ td a.slug:hover { color: var(--accent); }
 .inner { padding: 28px; text-align: center; }
 .lockring {
   width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
-  background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 27.6px;
+  background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 41.4px;
 }
-.inner h1 { font-size: 19.5px; font-weight: 600; margin-bottom: 6px; }
+.inner h1 { font-size: 29.2px; font-weight: 600; margin-bottom: 6px; }
-.inner .sub { font-size: 14.9px; color: var(--muted-fg); margin-bottom: 20px; }
+.inner .sub { font-size: 22.4px; color: var(--muted-fg); margin-bottom: 20px; }
 .pwinput {
   width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 9px;
-  background: var(--bg); color: var(--fg); font: inherit; font-size: 15.5px; outline: none; text-align: center;
+  background: var(--bg); color: var(--fg); font: inherit; font-size: 23.2px; outline: none; text-align: center;
   letter-spacing: .12em;
 }
 .pwinput:focus { border-color: var(--accent); }
 .center .btn { width: 100%; margin-top: 12px; }
-.err { display: none; margin-top: 12px; font-size: 14.4px; color: #ff8fa3; }
+.err { display: none; margin-top: 12px; font-size: 21.6px; color: #ff8fa3; }
-.center .foot { font-size: 13.8px; color: var(--muted-fg); padding: 14px; border-top: 1px solid var(--border); }
+.center .foot { font-size: 20.7px; color: var(--muted-fg); padding: 14px; border-top: 1px solid var(--border); }
 
-.btn-icon { padding: 6px 10px; font-size: 16.1px; line-height: 1; }
+.btn-icon { padding: 6px 10px; font-size: 24.2px; line-height: 1; }

web/templates/history.html

@@ -8,7 +8,7 @@
   <div class="search"><input id="filter" placeholder="Search…"></div>
   <div class="float">
     <table>
-      <colgroup><col style="width:150px"><col><col style="width:104px"><col style="width:92px"><col style="width:74px"><col style="width:110px"></colgroup>
+      <colgroup><col style="width:220px"><col><col style="width:156px"><col style="width:138px"><col style="width:111px"><col style="width:165px"></colgroup>
       <thead><tr><th>Paste</th><th>Description</th><th>Language</th><th>Size</th><th>Views</th><th>Created</th></tr></thead>
       <tbody id="rows"></tbody>
     </table>