Add upload to navbar

web/static/style.css

@@ -83,10 +83,9 @@ input[type=text], input[type=password] {
 .row { display: flex; gap: 1rem; flex-wrap: wrap; }
 .row > .field { flex: 1 1 12rem; }
 
-/* The file input has to be the last part in the submitted body, so it sits at
-   the bottom of the form's markup and is lifted back to the top here. Only the
-   painting order moves; the submission order, which the server depends on, is
-   the markup's. */
+/* The file input must be the last part in the submitted body, so it sits last
+   in the markup and is lifted back to the top here. Only the painting order
+   moves; the server depends on the markup's. */
 #upload { display: flex; flex-direction: column; }
 #upload > .drop { order: -1; }
 #upload > button { align-self: flex-start; }
@@ -184,17 +183,13 @@ button.link {
   cursor: pointer;
 }
 
-/* Result card ------------------------------------------------------------ */
-
 .result .links { margin: 1.25rem 0 0; }
 .result .links .field { margin-bottom: 1rem; }
 
-/* A read-only URL with its copy button alongside. */
 .copyrow { display: flex; gap: .5rem; align-items: stretch; }
 .copyrow input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }
 .copyrow .copy { flex: 0 0 auto; }
 
-/* Keep the detail list clear of the copy buttons above it. */
 .result dl { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
 .result dl dd { margin-bottom: .25rem; }
 
@@ -205,8 +200,6 @@ button.link {
   .copyrow input { flex-basis: 100%; }
 }
 
-/* Administration --------------------------------------------------------- */
-
 header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
 header nav {
   margin-left: auto;
@@ -244,8 +237,6 @@ table.admin .nowrap { white-space: nowrap; }
 table.admin form { margin: 0; }
 table.admin .actions-cell { text-align: right; width: 1%; }
 
-/* The filename carries the link and the identifier sits under it, which saves
-   a whole column of UUID. */
 table.admin .filecell a { overflow-wrap: anywhere; font-weight: 500; }
 table.admin .filecell .id {
   display: block;
@@ -264,8 +255,8 @@ button.small { padding: .2rem .5rem; font-size: .75rem; }
   overflow: hidden;
 }
 
-/* Narrow screens get one card per row rather than a horizontal scrollbar,
-   which is unusable for picking a row and pressing a button in it. */
+/* One card per row beats a horizontal scrollbar, which is unusable for picking
+   a row and pressing a button in it. */
 @media (max-width: 46rem) {
   table.admin,
   table.admin tbody,
@@ -289,10 +280,8 @@ button.small { padding: .2rem .5rem; font-size: .75rem; }
 
 .cli code, .hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }
 
-/* Disclosure panels: the one-off token on the upload form, "Remove this file"
-   on the info page. Closed, a panel is a single line and needs nothing; open,
-   it needs an edge, or its contents read as loose page furniture and there is
-   no telling where it ends. */
+/* Disclosure panels. Open, a panel needs an edge, or there is no telling where
+   its contents end. */
 details.panel {
   border: 1px solid var(--line);
   border-radius: var(--radius);
@@ -309,20 +298,17 @@ details.panel[open] > summary {
   border-bottom: 1px solid var(--line);
   margin-bottom: .75rem;
 }
-/* The summary carries the panel's padding itself; everything else is inset to
-   match, and the panel closes the gap under the last of them. */
 details.panel > :not(summary) { padding-left: .75rem; padding-right: .75rem; }
 details.panel[open] { padding-bottom: .75rem; }
 details.panel > :last-child { margin-bottom: 0; }
 details.panel .field { max-width: 24rem; }
 
-/* A hint that introduces a control is an instruction for what follows, not a
-   caption for what came before, so it must not sit against it. */
+/* A hint before a control explains what follows, so it must not sit against
+   it. */
 .hint + form, .hint + .field { margin-top: .75rem; }
 
 .limits .hint { margin-top: .75rem; }
 .limits dl, .card dl { row-gap: .375rem; }
 
-/* Actions that mix a link-button with a form-button. */
 .actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
 .actions form { margin: 0; }