/* gotwebd(8) on chroot.dev: the chroot.dev sheet. One column of 82ch,
 * Iosevka, sections in capitals with their body indented 6ch as in man(1);
 * sepia by day, amber at night. /etc/template.apply writes it to
 * /var/www/htdocs/chroot/gotweb.css with chroot.dev got replaced by the site input. */

@font-face { font-family: "Iosevka"; src: url(/fonts/iosevka-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Iosevka"; src: url(/fonts/iosevka-latin-700-normal.woff2) format("woff2"); font-weight: 700; }

* { box-sizing: border-box; }
:root { --paper: #f4ecd8; --ink: #3e2c1c; --desk: #e2d3b4;
  --code: color-mix(in srgb, var(--ink) 7%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --paper: #1b1406; --ink: #f0b35a; --desk: #0e0a02;
    --code: color-mix(in srgb, var(--desk) 65%, var(--paper)); }
}

body { margin: 0; background: var(--desk); color: var(--ink);
  font: 16px/1.5 "Iosevka", ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
body > * { max-width: calc(82ch + 5em + 4px); margin-inline: auto; }
a { color: var(--ink); }
a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
pre, code { font: inherit; margin: 0; }
hr { display: none; }
* { scrollbar-color: var(--muted) transparent; }
::selection { background: var(--ink); color: var(--paper); }

/* brand line above the sheet: the mark and the site name, which gotwebd
 * does not show; not a link, as on chroot.dev */
#header { padding: 2em 0 .8em; }
#got_link a { display: flex; align-items: center; gap: 1ch; pointer-events: none;
  text-decoration: none; font-weight: 700; }
#got_link img { order: -1; width: 1.5em; height: 1.5em; }
#got_link a::before { content: "chroot.dev got"; }
#got_link a:hover { background: none; color: var(--ink); }

/* the sheet: breadcrumb as the man header line, then the page */
#site_path, main { background: var(--paper); border: 2px solid var(--ink); border-block: 0; padding-inline: 2.5em; }
#site_path { border-top: 2px solid var(--ink); padding-block: 1.5em 0; display: flex; justify-content: space-between; box-shadow: 8px 8px 0 var(--ink); }
#site_path::after { content: "GOTWEB(8)"; color: var(--muted); }
main { border-bottom: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding-block: 1em 2.5em; margin-bottom: 3em; }
@media (prefers-color-scheme: dark) { #site_path { box-shadow: none; } main { box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 22%, transparent); } }
#site_owner_wrapper { display: none; }

/* section names */
.subtitle h2, main h2 { font-size: 1em; font-weight: 700; text-transform: uppercase; margin: 1.8em 0 .4em; }
main h2 a { text-decoration: none; }
.subtitle + *, .summary-briefs > div, .summary-branches > div, .summary-tags > div, .summary-tree > div { margin-left: 6ch; }

/* repository list: name and age, description and links indented */
#index_header { display: none; }
.index_wrapper { display: grid; grid-template-columns: 1fr auto; margin: 1.6em 0; }
.index_project { font-weight: 700; }
.index_project_age { grid-area: 1 / 2; color: var(--muted); }
.index_project_description, .navs_wrapper { grid-column: 1 / -1; margin-left: 6ch; }
.navs { color: var(--muted); }

/* key: value headers */
dl { display: grid; grid-template-columns: 16ch 1fr; gap: .2em 1ch; margin: 1.2em 0 0; }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; }
.clone-url, #diff, #blob, #blame, main > div > pre, #tree_content > pre {
  background: var(--code); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: .6em .8em; overflow-x: auto; }
.clone-url { box-shadow: none; padding: .1em .6em; user-select: all; }
@media (prefers-color-scheme: dark) { .clone-url, #diff, #blob, #blame, #tree_content > pre { border: 0; box-shadow: none; border-radius: 3px; } }

/* briefs: one line each, links at the end */
#briefs_content { display: grid; grid-template-columns: 1fr auto; column-gap: 2ch; }
.brief { display: flex; gap: 2ch; min-width: 0; }
.brief p { margin: 0; }
.brief_meta { flex: none; color: var(--muted); }
.briefs_author { display: none; }
.briefs_log { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refs_str { color: var(--muted); }
#briefs_content .navs { font-size: .85em; }

.branches_wrapper { display: flex; gap: 2ch; }
.branches_age { color: var(--muted); }
.branch { font-weight: 700; }
#err_content { color: var(--muted); }

/* commits */
.commits_content .page_header_wrapper dl { margin-top: 2em; }
.commit { white-space: pre-wrap; margin: .4em 0 .2em 17ch; font-weight: 700; }
.commits_content .navs_wrapper { margin-left: 17ch; }

/* trees */
#tree { border-collapse: collapse; margin: 1em 0; }
.tree_line { padding: .05em 4ch .05em 0; }
.tree_line[colspan] a { font-weight: 700; }
.tree_line_blank { color: var(--muted); font-size: .85em; }
#tree_content > h2 { margin-left: -6ch; }
#tree_content > pre { white-space: pre-wrap; }

/* diffs and files */
#diff { margin-top: 1.5em; }
.diff_line { display: inline-block; min-width: 100%; }
.diff_plus { background: color-mix(in srgb, var(--ink) 14%, var(--code)); font-weight: 700; }
.diff_minus { color: var(--muted); }
.diff_meta { color: var(--muted); }
.diff_chunk_header { background: var(--ink); color: var(--paper); }
#blob, #blame { margin-top: 1.5em; }
.blob_line > a, .blame_number { display: inline-block; width: 5ch; text-align: right; margin-right: 2ch; color: var(--muted); text-decoration: none; user-select: none; }
.blob_code, .blame_code { display: inline-block; }
.blob_line:target, .blame_line:target { background: color-mix(in srgb, var(--ink) 18%, var(--code)); }
.blame_hash, .blame_date, .blame_author { color: var(--muted); margin-right: 1ch; }

@media (max-width: 640px) {
  body > * { max-width: none; }
  #site_path, main { border-inline: 0; padding-inline: .75em; }
  #site_path::after { display: none; }
  main { box-shadow: none; }
  .subtitle + *, .summary-briefs > div, .summary-branches > div, .summary-tags > div, .summary-tree > div,
  .index_project_description, .navs_wrapper { margin-left: 2ch; }
  dl { grid-template-columns: 1fr; }
  #briefs_content { grid-template-columns: 1fr; }
  .commit, .commits_content .navs_wrapper { margin-left: 0; }
}