style.css - stagit - static page generator for git

stagit/style.css (9023B)
/* cgit-flavoured style for stagit's unmodified HTML. */

:root {
	--fg: #333;
	--bg: #fff;
	--muted: #777;
	--link: #00e;
	--rule: #ccc;
	--row: #eee;
	--target: #ffa;
	--add: #080;
	--del: #c00;
	--hunk: #009;
	--lineno: #999;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #ccc;
		--bg: #111;
		--muted: #888;
		--link: #6af;
		--rule: #444;
		--row: #222;
		--target: #443;
		--add: #5c5;
		--del: #e66;
		--hunk: #99f;
		--lineno: #666;
	}
}

body {
	margin: 0;
	padding: 4px 8px;
	font: 9pt var(--mono);
	color: var(--fg);
	background: var(--bg);
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:target {
	background: var(--target);
}

img {
	border: 0;
	vertical-align: middle;
}

/* Header: logo, name, description, clone URL and menu. */

body > table:first-of-type td {
	padding: 0.1em 0.4em;
}

h1 {
	margin: 0;
	font-size: 160%;
	font-weight: normal;
}

.desc {
	color: var(--muted);
}

/* The index page has a lone description instead of a repo name. */
.desc:only-child {
	font-size: 160%;
	color: var(--fg);
}

.subtitle {
	color: var(--muted);
}

tr.url td {
	color: var(--muted);
	overflow-wrap: anywhere;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
}

body > hr {
	border-top-width: 3px;
}

/* Lists: index, log, files, branches and tags. */

#content {
	padding: 0 0.4em;
	overflow-x: auto;
}

#content table {
	border-collapse: collapse;
}

#index,
#log,
#files,
#branches,
#tags {
	width: 100%;
}

#content td {
	padding: 0.1em 0.5em;
	vertical-align: top;
	white-space: nowrap;
}

#content thead td {
	background: var(--row);
}

#content tbody tr:hover td {
	background: var(--row);
}

#index td:nth-child(2),
#log td:nth-child(2),
#files td:nth-child(2),
#branches td:nth-child(3),
#tags td:nth-child(3) {
	width: 100%;
	white-space: normal;
}

td.num {
	text-align: right;
}

#log tbody td:nth-child(5) {
	color: var(--add);
}

#log tbody td:nth-child(6) {
	color: var(--del);
}

#files td:first-child {
	color: var(--muted);
}

h2 {
	margin: 1em 0 0.3em;
	font-size: 110%;
}

h2:first-child {
	margin-top: 0.5em;
}

/* Commits and files. */

/* Tab stops count from the start of the line, so on file pages they line up
 * because the line number gutter (#blob a.line) is 8ch wide. */
pre {
	font: 9pt/1.4 var(--mono);
	tab-size: 4;
}

#blob a.line {
	display: inline-block;
	width: 7ch;
	margin-right: 1ch;
	text-align: right;
	color: var(--lineno);
}

/* generated content isn't part of a copied selection */
#blob a.line::before {
	content: attr(data-n);
}

#blob a.line:hover {
	color: var(--link);
	text-decoration: none;
}

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

pre a.h {
	color: var(--hunk);
}

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

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

/* README front page. */

/* Rendered markdown stays proportional; a plain README is a <pre>. */
#readme {
	max-width: 60em;
	font: 10pt/1.5 sans-serif;
}

#readme h1,
#readme h2,
#readme h3,
#readme h4 {
	margin: 1.2em 0 0.5em;
	font-weight: bold;
	line-height: 1.25;
}

#readme h1:first-child,
#readme h2:first-child {
	margin-top: 0.5em;
}

#readme h1,
#readme h2 {
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--rule);
}

#readme h1 {
	font-size: 160%;
}

#readme h2 {
	font-size: 130%;
}

#readme h3 {
	font-size: 115%;
}

#readme h4 {
	font-size: 100%;
}

#readme code {
	padding: 0.1em 0.3em;
	font: 9pt var(--mono);
	background: var(--row);
}

#readme pre {
	padding: 0.6em 0.8em;
	overflow-x: auto;
	background: var(--row);
}

#readme pre code {
	padding: 0;
	font: inherit;
	background: none;
}

#readme img {
	max-width: 100%;
}

#readme blockquote {
	margin: 0;
	padding: 0 1em;
	color: var(--muted);
	border-left: 3px solid var(--rule);
}

#readme th,
#readme td {
	padding: 0.2em 0.6em;
	white-space: normal;
	border: 1px solid var(--rule);
}

#readme th {
	background: var(--row);
}

/* checklists: ul.task-list from pandoc, li.task-list-item from md4c */
#readme .task-list,
#readme .task-list-item {
	list-style: none;
}

/*
 * Syntax highlighting on file pages. Generated with
 * `chroma --html-styles --style=github` (github-dark for dark mode),
 * without the background and line number rules, and with .chroma
 * replaced by #blob. Each theme sits in its own media query, so a token
 * one theme leaves unstyled doesn't keep the other theme's colour.
 */

@media (prefers-color-scheme: light) {
	#blob .k { color: #cf222e }
	#blob .kc { color: #cf222e }
	#blob .kd { color: #cf222e }
	#blob .kn { color: #cf222e }
	#blob .kp { color: #cf222e }
	#blob .kr { color: #cf222e }
	#blob .kt { color: #cf222e }
	#blob .na { color: #1f2328 }
	#blob .nc { color: #1f2328 }
	#blob .no { color: #0550ae }
	#blob .nd { color: #0550ae }
	#blob .ni { color: #6639ba }
	#blob .nl { color: #990000; font-weight: bold }
	#blob .nn { color: #24292e }
	#blob .nx { color: #1f2328 }
	#blob .nt { color: #0550ae }
	#blob .nb { color: #6639ba }
	#blob .bp { color: #6a737d }
	#blob .nv { color: #953800 }
	#blob .vc { color: #953800 }
	#blob .vg { color: #953800 }
	#blob .vi { color: #953800 }
	#blob .vm { color: #953800 }
	#blob .nf { color: #6639ba }
	#blob .fm { color: #6639ba }
	#blob .s { color: #0a3069 }
	#blob .sa { color: #0a3069 }
	#blob .sb { color: #0a3069 }
	#blob .sc { color: #0a3069 }
	#blob .dl { color: #0a3069 }
	#blob .sd { color: #0a3069 }
	#blob .s2 { color: #0a3069 }
	#blob .se { color: #0a3069 }
	#blob .sh { color: #0a3069 }
	#blob .si { color: #0a3069 }
	#blob .sx { color: #0a3069 }
	#blob .sr { color: #0a3069 }
	#blob .s1 { color: #0a3069 }
	#blob .ss { color: #032f62 }
	#blob .m { color: #0550ae }
	#blob .mb { color: #0550ae }
	#blob .mf { color: #0550ae }
	#blob .mh { color: #0550ae }
	#blob .mi { color: #0550ae }
	#blob .il { color: #0550ae }
	#blob .mo { color: #0550ae }
	#blob .o { color: #0550ae }
	#blob .ow { color: #0550ae }
	#blob .or { color: #0550ae }
	#blob .p { color: #1f2328 }
	#blob .c { color: #57606a }
	#blob .ch { color: #57606a }
	#blob .cm { color: #57606a }
	#blob .c1 { color: #57606a }
	#blob .cs { color: #57606a }
	#blob .cp { color: #57606a }
	#blob .cpf { color: #57606a }
	#blob .gd { color: #82071e; background-color: #ffebe9 }
	#blob .ge { color: #1f2328 }
	#blob .gi { color: #116329; background-color: #dafbe1 }
	#blob .go { color: #1f2328 }
	#blob .gl { text-decoration: underline }
	#blob .w { color: #ffffff }
}

@media (prefers-color-scheme: dark) {
	#blob .k { color: #ff7b72 }
	#blob .kc { color: #79c0ff }
	#blob .kd { color: #ff7b72 }
	#blob .kn { color: #ff7b72 }
	#blob .kp { color: #79c0ff }
	#blob .kr { color: #ff7b72 }
	#blob .kt { color: #ff7b72 }
	#blob .nc { color: #f0883e; font-weight: bold }
	#blob .no { color: #79c0ff; font-weight: bold }
	#blob .nd { color: #d2a8ff; font-weight: bold }
	#blob .ni { color: #ffa657 }
	#blob .ne { color: #f0883e; font-weight: bold }
	#blob .nl { color: #79c0ff; font-weight: bold }
	#blob .nn { color: #ff7b72 }
	#blob .py { color: #79c0ff }
	#blob .nt { color: #7ee787 }
	#blob .nv { color: #79c0ff }
	#blob .vc { color: #79c0ff }
	#blob .vg { color: #79c0ff }
	#blob .vi { color: #79c0ff }
	#blob .vm { color: #79c0ff }
	#blob .nf { color: #d2a8ff; font-weight: bold }
	#blob .fm { color: #d2a8ff; font-weight: bold }
	#blob .l { color: #a5d6ff }
	#blob .ld { color: #79c0ff }
	#blob .s { color: #a5d6ff }
	#blob .sa { color: #79c0ff }
	#blob .sb { color: #a5d6ff }
	#blob .sc { color: #a5d6ff }
	#blob .dl { color: #79c0ff }
	#blob .sd { color: #a5d6ff }
	#blob .s2 { color: #a5d6ff }
	#blob .se { color: #79c0ff }
	#blob .sh { color: #79c0ff }
	#blob .si { color: #a5d6ff }
	#blob .sx { color: #a5d6ff }
	#blob .sr { color: #79c0ff }
	#blob .s1 { color: #a5d6ff }
	#blob .ss { color: #a5d6ff }
	#blob .m { color: #a5d6ff }
	#blob .mb { color: #a5d6ff }
	#blob .mf { color: #a5d6ff }
	#blob .mh { color: #a5d6ff }
	#blob .mi { color: #a5d6ff }
	#blob .il { color: #a5d6ff }
	#blob .mo { color: #a5d6ff }
	#blob .o { color: #ff7b72; font-weight: bold }
	#blob .ow { color: #ff7b72; font-weight: bold }
	#blob .or { color: #ff7b72; font-weight: bold }
	#blob .c { color: #8b949e; font-style: italic }
	#blob .ch { color: #8b949e; font-style: italic }
	#blob .cm { color: #8b949e; font-style: italic }
	#blob .c1 { color: #8b949e; font-style: italic }
	#blob .cs { color: #8b949e; font-weight: bold; font-style: italic }
	#blob .cp { color: #8b949e; font-weight: bold; font-style: italic }
	#blob .cpf { color: #8b949e; font-weight: bold; font-style: italic }
	#blob .gd { color: #ffa198; background-color: #490202 }
	#blob .ge { font-style: italic }
	#blob .gr { color: #ffa198 }
	#blob .gh { color: #79c0ff; font-weight: bold }
	#blob .gi { color: #56d364; background-color: #0f5323 }
	#blob .go { color: #8b949e }
	#blob .gp { color: #8b949e }
	#blob .gs { font-weight: bold }
	#blob .gu { color: #79c0ff }
	#blob .gt { color: #ff7b72 }
	#blob .gl { text-decoration: underline }
	#blob .w { color: #6e7681 }
}
	stagit static page generator for git
	git clone https://github.com/michaelneuper/stagit.git
	README \| Files \| Log \| Refs \| LICENSE