greenhouse

greenhouse / petal / style.css344 lines · 4290B · raw

:root {
	--bg: #0d0f0d;
	--fg: #c8cec3;
	--hi: #eef2ea;
	--dim: #6c7569;
	--faint: #1c201c;
	--leaf: #9fd47c;
	--petal: #f08fae;
	--a0: #9fd47c;
	--a1: #b9cfa8;
	--a2: #8d9689;
	--a3: #626a5f;
	--a4: #424840;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fafaf7;
		--fg: #2a2e28;
		--hi: #000;
		--dim: #7a8277;
		--faint: #ecefe8;
		--leaf: #2f6d1a;
		--petal: #b0345c;
		--a0: #2f6d1a;
		--a1: #577a47;
		--a2: #7a8277;
		--a3: #a2a89f;
		--a4: #c4c8c1;
	}
}

body {
	max-width: 980px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem 3rem;
	background: var(--bg);
	color: var(--fg);
	font: 14px/1.6 ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", monospace;
}

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

a:hover {
	color: var(--leaf);
}

#top {
	display: flex;
	gap: 2ch;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--dim);
}

#top .brand img {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.3em;
}

#top nav, header nav {
	display: flex;
	gap: 1ch;
}

#top nav a, header nav a {
	padding: 0 1ch;
	color: var(--dim);
}

#top nav a.on, header nav a.on {
	background: var(--leaf);
	color: var(--bg);
}

header {
	padding: 2.25rem 0 0;
}

h1 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--hi);
}

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

header .desc {
	margin: 0.35rem 0 0;
}

.clone {
	display: inline-block;
	margin: 1.1rem 0 0;
	padding: 0.4rem 1.5ch 0.4rem 1.25ch;
	background: var(--faint);
	border-left: 2px solid var(--leaf);
}

.clone span {
	color: var(--dim);
	user-select: none;
}

.clone span::before {
	content: "$ ";
	color: var(--leaf);
}

header nav {
	margin: 1.25rem 0 0;
}

header nav a {
	margin-left: -1ch;
	margin-right: 1ch;
}

main {
	padding-top: 1.5rem;
}

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

th {
	padding: 0 2ch 0.4rem 0;
	text-align: left;
	font-weight: normal;
	color: var(--dim);
}

td {
	padding: 0.1rem 2ch 0.1rem 0;
	white-space: nowrap;
	vertical-align: top;
}

th:last-child, td:last-child {
	padding-right: 0;
}

tbody tr:hover td {
	background: var(--faint);
}

.r {
	text-align: right;
}

.desc, .msg {
	width: 100%;
	white-space: normal;
}

.msg a {
	color: var(--fg);
}

.dir, .owner, .date, .num {
	color: var(--dim);
}

.ins { color: var(--leaf); }
.del { color: var(--petal); }
.a0 { color: var(--a0); }
.a1 { color: var(--a1); }
.a2 { color: var(--a2); }
.a3 { color: var(--a3); }
.a4 { color: var(--a4); }

header nav .ref {
	margin-left: auto;
	color: var(--dim);
}

header nav .ref a {
	margin: 0;
	padding: 0;
	color: var(--hi);
}

h2 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1em;
	color: var(--dim);
}

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

h2:not(.subject)::before {
	content: "## ";
}

.pager {
	display: flex;
	gap: 3ch;
	margin-top: 1.25rem;
	color: var(--dim);
}

.pager a {
	color: var(--leaf);
}

.path {
	margin: 0 0 1rem;
	color: var(--dim);
}

.path .info {
	float: right;
}

.mode, .num {
	color: var(--dim);
}

.dirent a {
	color: var(--leaf);
}

pre {
	margin: 0;
	font: inherit;
	overflow-x: auto;
}

.blob {
	position: relative;
	padding-left: 7ch;
}

.blob a {
	position: absolute;
	left: 0;
	width: 5ch;
	text-align: right;
	color: var(--a4);
	user-select: none;
}

.blob a:hover, .blob a:target {
	color: var(--leaf);
}

.subject {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	color: var(--hi);
}

.body {
	margin: 0 0 1.25rem;
	color: var(--fg);
	white-space: pre-wrap;
}

.meta {
	width: auto;
	margin-bottom: 1.5rem;
}

.meta td:first-child {
	color: var(--dim);
}

.stat {
	width: auto;
}

.stat td {
	padding-top: 0;
	padding-bottom: 0;
}

.bar {
	letter-spacing: -0.05em;
}

.total {
	margin: 0.5rem 0 2rem;
	color: var(--dim);
}

h3 {
	margin: 1.75rem 0 0;
	padding: 0.3rem 1ch;
	font-size: 1em;
	font-weight: normal;
	color: var(--hi);
	background: var(--faint);
}

.diff {
	padding: 0.5rem 0;
}

.diff span {
	display: block;
}

.diff .h {
	color: var(--dim);
}

.diff .i {
	color: var(--leaf);
	background: color-mix(in srgb, var(--leaf) 8%, transparent);
}

.diff .d {
	color: var(--petal);
	background: color-mix(in srgb, var(--petal) 8%, transparent);
}

@media (max-width: 640px) {
	.sm {
		display: none;
	}
}

.diff span {
	min-height: 1.6em;
}

.tree .name, .tree .dirent {
	width: 100%;
}

.refs .name {
	width: 100%;
}