/* Stylesheet for the stagit pages under /repo/.
 *
 * build-repo copies this file in as /repo/style.css and /repo/miki/style.css,
 * which is the name stagit hardcodes into every page it writes. stagit's HTML
 * is generated by C and carries none of the site's classes, so everything here
 * hangs off the bare markup it emits: the header table, #content, the #index,
 * #log, #files and #branches tables, and the <pre> blocks for commits, diffs
 * and file contents.
 *
 * The site's tokens, font and dark scheme come straight from base.css. These
 * rules sit outside its @layer stack, so they win over the base element rules
 * that assume the site's own page shell without needing to out-specify them.
 */

@import url(/css/base.css);

/* --- PAGE SHELL ---------------------------------------------------------- */

body {
  /* base.css lays the body out as the site's three-column page grid, which
     would scatter stagit's header, rule and content across those columns. */
  display: block;

  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--padding-double);
}

/* The site's link colour is --color-blue-d, which sits at about 3.3:1 on this
   background. That reads fine for the handful of links on a page elsewhere on
   the site, but a log is hundreds of links of running text, so these take the
   lighter hue of the same token pair. */
a {
  color: var(--color-blue-l);
}

a:hover {
  color: var(--color-aqua-l);
}

a:target {
  background-color: color-mix(in srgb, var(--color-yellow-d) 25%, transparent);
}

/* --- REPO HEADER --------------------------------------------------------- */

/* stagit's masthead: logo, name, description, clone URL and the nav row. */

body > table {
  width: 100%;
  margin-bottom: var(--margin);
}

body > table td {
  padding: 0 var(--padding) 0 0;
  vertical-align: middle;
}

body > table img {
  /* base.css centres and pads every img; the 32px logo wants neither. */
  padding: 0;
  margin: 0;
  justify-self: start;
  border-radius: var(--border-radius-half);
}

body > table h1 {
  /* base.css gives headings a grid box, margins and an underline. In here the
     name sits in a table cell beside the description. */
  display: inline-block;
  padding: 0;
  margin: 0;

  border: none;

  font-size: 1.25rem;
}

.desc {
  color: var(--color-theme-black-2);
}

tr.url td {
  padding-bottom: var(--padding-half);
  color: var(--color-theme-black-2);
  font-size: 0.875rem;
}

hr {
  margin: var(--margin) 0 var(--margin-double);
}

/* --- CONTENT TABLES ------------------------------------------------------ */

/* #index on /repo/, then #log, #files, #branches and #tags per repo. */

/* The refs page labels each table with an h2. base.css indents headings and
   spaces them for running text; these want to sit flush above their table. */
#content h2 {
  padding: 0 0 var(--padding-half);
  margin: var(--margin-double) 0 var(--margin);

  font-size: 1rem;
}

#content h2:first-child {
  margin-top: 0;
}

#content table {
  width: 100%;
  border-collapse: collapse;
}

#content table td {
  padding: var(--padding-half) var(--padding);

  vertical-align: top;
  white-space: nowrap;
}

#content table thead td {
  border-bottom: 1px solid var(--color-theme-black-2);
  color: var(--color-theme-black-2);
  font-weight: bold;
}

/* The description and subject columns are prose and may wrap; the rest are
   dates, names and counts, which are easier to scan on one line each. */
#index tr td:nth-child(2),
#log tr td:nth-child(2),
#tags tr td:nth-child(3),
#branches tr td:nth-child(3) {
  white-space: normal;
}

#index tbody tr:hover td,
#log tbody tr:hover td,
#files tbody tr:hover td,
#branches tbody tr:hover td,
#tags tbody tr:hover td {
  background-color: color-mix(in srgb, var(--color-white-1) 8%, transparent);
}

td.num {
  text-align: right;
}

/* --- COMMITS AND DIFFS --------------------------------------------------- */

#content pre {
  padding: var(--padding) 0;
  margin: 0;

  overflow-x: auto;

  font-family: "JetBrains Mono", ui-monospace, monospace;
  line-height: 1.5;
}

/* The diffstat table is nested inside the commit's <pre>, so it inherits the
   surrounding padding and needs none of the full-width table treatment. */
#content pre table {
  width: auto;
}

#content pre table td {
  padding: 0 var(--padding) 0 0;
}

/* Hunk headers, then added and deleted lines, in the diff body. */
pre a.h {
  color: var(--color-aqua-l);
}

.A,
span.i,
pre a.i {
  color: var(--color-mint-l);
}

.D,
span.d,
pre a.d {
  color: var(--color-red-l);
}

/* Diffstat status letters: the rest of git's set, which stagit emits but its
   own stylesheet leaves in the body colour. */
.M {
  color: var(--color-yellow-d);
}

.R,
.C {
  color: var(--color-purple-l);
}

a.d,
a.h,
a.i,
a.line {
  text-decoration: none;
}

/* --- FILE VIEW ----------------------------------------------------------- */

/* The name and size line above a blob. */
#content p {
  margin: 0 0 var(--margin-half);
  color: var(--color-theme-black-2);
}

#blob {
  padding: var(--padding);

  background-color: color-mix(in srgb, var(--color-black) 25%, transparent);
  border: 1px solid var(--color-theme-black-2);
  border-radius: var(--border-radius-half);
}

/* Line numbers are scaffolding, not content, so they stay out of the way
   until they are pointed at or linked to. */
#blob a {
  color: var(--color-black-2);
}

#blob a:hover,
#blob a:target {
  color: var(--color-yellow-d);
}