A drop's page is centred and its header clearer (closes #283) 8bf3010760d7

- **A drop's page is centred and its header clearer (#283):** the page ran the full width with everything against the left edge; it is now centred like other pages, with the title, description and details on the left, EDIT and DELETE together on the right (DELETE only for whoever may delete it), the clone line with a copy button under them, and a Markdown file filling its box.

<div class="drop-head">

  <div class="drop-id">

    <h1>{{ title }}{% if !at_default %} <small>at {{ target }}</small>{% endif %}</h1>

    {% if !description.is_empty() %}<p class="drop-desc">{{ description }}</p>{% endif %}

    <p class="small mute">A drop by <a href="/{{ repo.owner }}">{{ repo.owner }}</a> · {{ files.len() }} file{% if files.len() != 1 %}s{% endif %} · created <time title="{{ created_ms|when_i }}">{{ created_ms|ago_i }}</time> · updated <time title="{{ updated_ms|when_i }}">{{ updated_ms|ago_i }}</time> · <a href="{{ repo.url }}/changes/{{ repo.default_bookmark }}">history</a></p>

  </div>

  {% if can_edit || can_delete %}<div class="drop-actions">{% if can_edit %}<a class="go" href="{{ repo.url }}/edit">EDIT</a>{% endif %}{% if can_delete %}<form class="inline" method="post" action="{{ repo.url }}/delete" data-confirm="Delete this drop and its history? Its address stops working."><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button type="submit" class="danger-btn">DELETE</button></form>{% endif %}</div>{% endif %}

<div class="drop-clone"><label for="clone">Clone</label><input type="text" id="clone" class="code" readonly value="oxy clone {{ clone_url }}" data-select><button type="button" class="small" data-copy="oxy clone {{ clone_url }}">copy</button></div>

/* A drop's page (#283): what it is on the left, what you can do on the

   right, the clone line under them; a Markdown file fills its box. */

.drop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; margin: 6px 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--band); border-image: linear-gradient(90deg, var(--acc), var(--acc-2)) 1; }

.drop-id { flex: 1 1 320px; min-width: 0; }

.drop-id h1 { font-size: 30px; font-weight: 300; color: var(--ink); margin: 0 0 6px; overflow-wrap: anywhere; }

.drop-id h1 small { font-size: 13px; color: var(--acc); font-weight: 400; }

.drop-id .drop-desc { margin: 0 0 6px; font-size: 15px; }

.drop-id p.small { margin: 0; }

.drop-actions { display: flex; gap: 8px; align-items: stretch; }

.drop-actions form { margin: 0; display: flex; }

.drop-actions a.go { display: inline-flex; align-items: center; }

.drop-clone { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; }

.drop-clone label { color: var(--mute); }

.drop-clone input { flex: 0 1 640px; min-width: 0; }

.drop-filebox article.doc { max-width: none; margin: 0; border: 0; }