diff options
Diffstat (limited to 'public/static/style.css')
| -rw-r--r-- | public/static/style.css | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/public/static/style.css b/public/static/style.css new file mode 100644 index 0000000..e698993 --- /dev/null +++ b/public/static/style.css @@ -0,0 +1,282 @@ +:root { + color-scheme: light dark; + scrollbar-color: var(--border-color) var(--body-background); + + --body-background: light-dark( + oklch(95% 0.01 250), + oklch(20% 0.01 250) + ); + + --text-color: light-dark( + oklch(5% 0.01 250), + oklch(90% 0.01 250) + ); + + --border-color: light-dark( + oklch(80% 0.01 250), + oklch(40% 0.01 250) + ); + + --shade-background: light-dark( + oklch(90% 0.01 250), + oklch(30% 0.01 250) + ); + + --link-color: light-dark( + oklch(50% 0.15 250), + oklch(60% 0.15 250) + ); + + --pl-c: light-dark(#6e7781, #8b949e); + --pl-c1: light-dark(#0550ae, #79c0ff); + --pl-e: light-dark(#6639ba, #d2a8ff); + --pl-en: light-dark(#0550ae, #d2a8ff); + --pl-k: light-dark(#cf222e, #ff7b72); + --pl-s: light-dark(#0a3069, #a5d6ff); + --pl-v: light-dark(#953800, #ffa657); +} + +body { + margin: 1rem; + font-family: Helvetica, Arial, sans-serif; + background: var(--body-background); + color: var(--text-color); +} + +a { + text-decoration: none; + color: var(--link-color); +} + +h1, h2, h3, h4, h5, h6, +p, pre, ul, ol { + margin: .5em 0; +} + +input, select, button { + background-color: var(--body-background); + color: var(--text-color); + border: 1px solid var(--border-color); +} + +table { + width: 100%; + border-collapse: collapse; +} + +tr { + border: 1px solid var(--border-color); +} + +td { + padding: .25rem; + vertical-align: top; + &:first-child { + padding-left: .5rem; + } + &:last-child { + padding-right: .5rem; + } +} + +nav { + display: flex; + margin: .5em 0; + > a { + display: block; + padding-right: .5rem; + + a { + padding-left: .5rem; + border-left: 1px solid var(--border-color); + } + &:last-child { + padding-right: 0; + } + } +} + +section { + margin: 1rem 0; +} + +.box { + --box-padding: .5rem; + + margin: 1rem 0; + border: 1px solid var(--border-color); + padding: var(--box-padding); + + > *:first-child { + margin-top: 0; + } + > *:last-child { + margin-bottom: 0; + } + + > header:first-child { + margin: calc(-1 * var(--box-padding)); + margin-bottom: 0; + padding: .5rem; + border-bottom: 1px solid var(--border-color); + } + + > footer:last-child { + margin: 0 calc(-1 * var(--box-padding)); + padding: .5rem; + border-top: 1px solid var(--border-color); + } +} + +body > footer { + margin-top: 1rem; + text-align: center; +} + +.icon { + height: 1lh; + vertical-align: text-bottom; +} + +@media (prefers-color-scheme: dark) { + .icon { + filter: brightness(0) invert(1); + } +} + +.repo { + font-size: 120%; + font-weight: bold; +} + +.avatar { + float: right; + clip-path: circle(); +} + +.branch { + display: inline-block; + margin-right: 1rem; + padding: .2rem; + border: 1px solid var(--border-color); +} + +.repo-info { + .description { + margin-bottom: .2rem; + } + + .detail { + white-space: nowrap; + } + + div.detail { + overflow-x: hidden; + text-overflow: ellipsis; + } + + span.detail + span.detail { + margin-left: 1rem; + } +} + +pre.box { + /* Instead of scrolling overflow for long lines, grow the box. */ + width: fit-content; +} + +.overview, .release { + overflow-wrap: break-word; + + /* This is a bit convoluted: we want the effect of padding but using margins + * vertically so we get margin collapsing. */ + --box-padding: 1rem; + padding-top: 0; + padding-bottom: 0; + > header:first-child { + margin-top: 0; + } + > :first-child, > header:first-child + * { + margin-top: 1rem; + } + > :last-child { + margin-bottom: 1rem; + } + + a { + text-decoration: underline; + } + + h1, h2 { + border-bottom: 1px solid var(--border-color); + } + + img, video { + max-width: 100%; + } + + code, pre { + background: var(--shade-background); + } + + pre { + overflow-x: auto; + scrollbar-color: var(--border-color) var(--shade-background); + } +} + +.overview > header { + font-weight: bold; +} + +.release > header { + display: flex; + align-items: baseline; + > :first-child { + flex-grow: 1; + font-weight: bold; + } +} + +.timestamp { + white-space: nowrap; + font-size: .8rem; +} + +.commit { + display: flex; + justify-content: space-between; + padding: 0.5rem; + border: 1px solid var(--border-color); + + .commit { + border-top: none; + } +} + +.commit-author { + font-size: 0.8rem; + margin-top: 0.2rem; +} + +.commit-sha { + align-self: center; + font-size: 0.8rem; +} + +/* TODO Strip permalinks? */ +svg.octicon-link { + display: none; +} + +.pl-c { color: var(--pl-c); } +.pl-c1 { color: var(--pl-c1); } +.pl-e { color: var(--pl-e); } +.pl-en { color: var(--pl-en); } +.pl-k { color: var(--pl-k); } +.pl-s { color: var(--pl-s); } +.pl-v { color: var(--pl-v); } +.pl-ent { color: var(--pl-k); } +.pl-mh { font-weight: bold; color: var(--pl-en); } +.pl-bu { color: var(--pl-k); } +.pl-ii { color: var(--text-color); background-color: var(--pl-k); } +.pl-pds { color: var(--pl-s); } +.pl-smi { color: var(--text-color); } |
