kepr.css

1/* Kepr 3: Kepr 2's look (kepr.uk, gold theme), ported only as far as the pages that exist use it. */23:root {4	--bg: #090706;5	--bg-surface: #0e0c09;6	--bg-elevated: #1b1710;7	--border: #2a2018;8	--text: #c8b898;9	--text-secondary: #7a6a50;10	--text-muted: #7a6a50;11	--text-faint: #4a3a28;12	--text-heading: #e8d8b8;13	--accent: #c89a5a;14	--accent-bright: #d9b88c;15	--accent-dim: #85663c;16	--accent-flash: #5a88c8;17	--accent-tint-04: rgba(200, 154, 90, 0.04);18	--accent-tint-12: rgba(200, 154, 90, 0.12);19	--sage: #7a9a68;20	--sans: "Quicksand", system-ui, sans-serif;21	--mono: "Martian Mono", ui-monospace, monospace;22}2324* {25	box-sizing: border-box;26	scrollbar-width: thin;27	scrollbar-color: var(--border) transparent;28}2930html,31body {32	margin: 0;33	padding: 0;34	background: var(--bg);35	color: var(--text);36	font-family: var(--sans);37	font-size: 16px;38	line-height: 1.6;39	overflow-x: hidden;40}4142a {43	color: inherit;44	text-decoration: none;45}46a:hover {47	text-decoration: underline;48	text-decoration-color: var(--accent);49	text-decoration-thickness: 1px;50	text-underline-offset: 4px;51}5253/* ----- top bar ------------------------------------------------------------ */5455body > nav {56	display: flex;57	align-items: center;58	padding: 24px 48px;59	font-size: 0.6875rem;60	letter-spacing: 0.04em;61}62.wordmark {63	display: flex;64	color: var(--accent);65}66.wordmark:hover {67	text-decoration: none;68}69.wordmark-icon {70	display: block;71	width: 32px;72	height: 32px;73	color: var(--accent);74}75.wordmark-icon polygon {76	fill: none;77	stroke: currentColor;78	stroke-linejoin: round;79}80.tri-outer polygon {81	stroke-width: 2;82}83.tri-inner polygon {84	stroke-width: 1.5;85}86.tri-outer,87.tri-inner {88	transform-origin: 16px 16px;89}90.tri-outer {91	animation:92		tri-ccw 12s linear infinite,93		accent-flash 9s ease-in-out infinite;94}95.tri-inner {96	animation:97		tri-cw 8s linear infinite,98		accent-flash 6.7s ease-in-out infinite;99}100@keyframes tri-ccw {101	to {102		transform: rotate(-360deg);103	}104}105@keyframes tri-cw {106	to {107		transform: rotate(360deg);108	}109}110@keyframes accent-flash {111	0%,112	84%,113	100% {114		color: var(--accent);115	}116	92% {117		color: var(--accent-flash);118	}119}120.wordmark-by {121	margin-left: 10px;122	font-size: 0.625rem;123	color: var(--text-faint);124	letter-spacing: 0.03em;125}126.nav-links {127	margin-left: auto;128	display: inline-flex;129	gap: 28px;130	font-family: var(--mono);131}132.nav-links a {133	color: var(--text-secondary);134}135136main {137	max-width: 980px;138	margin: 0 auto;139	padding: 24px 48px 120px;140}141142footer {143	text-align: center;144	padding: 80px 24px 48px;145}146footer .credit {147	font-family: var(--mono);148	font-size: 0.6875rem;149	color: var(--text-muted);150}151152.mono {153	font-family: var(--mono);154	font-size: 0.8125rem;155	color: var(--text-secondary);156}157.muted {158	color: var(--text-muted);159}160161@keyframes fadeUp {162	from {163		opacity: 0;164		transform: translateY(6px);165	}166	to {167		opacity: 1;168		transform: translateY(0);169	}170}171@keyframes fadeIn {172	from {173		opacity: 0;174	}175}176177/* ----- repo header -------------------------------------------------------- */178179.repo-head {180	margin: 20px 0 24px;181}182.repo-name {183	font-family: "Comfortaa", var(--sans);184	font-weight: 700;185	font-size: 4rem;186	line-height: 1.05;187	margin: -0.1em 0 10px;188	color: var(--text);189	overflow-wrap: anywhere;190	animation: fadeUp 280ms ease both;191}192.repo-contributor {193	margin: 4px 0 0;194	font-size: 0.8125rem;195	animation: fadeUp 280ms 40ms ease both;196}197.repo-contributor a:hover {198	color: var(--accent);199}200.repo-desc,201.repo-homepage {202	margin: 0 0 10px;203	font-size: 1.0625rem;204	color: var(--text-secondary);205	line-height: 1.75;206	animation: fadeUp 280ms 30ms ease both;207}208.repo-desc p {209	margin: 12px 0 0;210}211.repo-desc a,212.repo-homepage a {213	color: var(--accent);214}215.repo-desc code {216	font-family: var(--mono);217	font-size: 0.85em;218	color: var(--accent);219}220.lang-badges {221	display: flex;222	flex-wrap: wrap;223	gap: 6px;224	margin: 8px 0 6px;225}226.lang-badge {227	font-family: var(--mono);228	font-size: 0.6875rem;229	color: var(--accent-dim);230	background: var(--bg-surface);231	border: 1px solid var(--border);232	border-radius: 3px;233	padding: 1px 7px;234	letter-spacing: 0.02em;235}236.repo-meta {237	margin: 0;238	font-size: 0.875rem;239	color: var(--text-muted);240	line-height: 1.7;241	animation: fadeUp 280ms 60ms ease both;242}243.repo-tabbar {244	display: flex;245	align-items: center;246	justify-content: space-between;247	flex-wrap: wrap;248	gap: 14px 20px;249	margin-top: 22px;250}251.repo-tabs {252	display: flex;253	gap: 24px;254	flex-wrap: wrap;255	font-family: var(--mono);256	animation: fadeUp 280ms 90ms ease both;257}258.repo-tab {259	font-size: 0.6875rem;260	color: var(--text-muted);261	padding: 0 0 11px;262	border-bottom: 1px solid transparent;263	transition:264		color 140ms,265		border-color 140ms;266}267.repo-tab:hover {268	color: var(--accent);269	text-decoration: none;270}271.install-lines {272	display: flex;273	flex-direction: column;274	align-items: flex-end;275	gap: 6px;276	max-width: 100%;277	margin-left: auto;278	animation: fadeUp 280ms 120ms ease both;279}280.install-line {281	display: flex;282	align-items: center;283	gap: 12px;284	max-width: 100%;285	font-family: var(--mono);286	font-size: 0.75rem;287	color: var(--text-muted);288	background: var(--bg-surface);289	border: 1px solid var(--border);290	border-radius: 3px;291	padding: 5px 11px;292}293.install-line code {294	white-space: pre;295	overflow-x: auto;296	font-family: inherit;297}298.copy-btn {299	background: none;300	border: 0;301	padding: 0;302	cursor: pointer;303	font: inherit;304	font-size: 0.625rem;305	color: var(--text-faint);306	letter-spacing: 0.04em;307}308.copy-btn:hover,309.copy-btn.copied {310	color: var(--accent);311}312313/* ----- sections ----------------------------------------------------------- */314315.repo-section {316	margin: 36px 0 0;317	animation: fadeIn 320ms 80ms ease both;318}319.repo-section-toggle > summary,320.repo-details-toggle > summary {321	list-style: none;322	cursor: pointer;323	user-select: none;324}325.repo-section-toggle > summary::-webkit-details-marker,326.repo-details-toggle > summary::-webkit-details-marker {327	display: none;328}329.section-head {330	display: flex;331	align-items: baseline;332	gap: 12px;333	padding-bottom: 8px;334	border-bottom: 1px solid var(--border);335	margin-bottom: 4px;336}337.section-head::after,338.repo-details-head::after {339	content: "▸";340	font-size: 0.5625rem;341	opacity: 0.4;342	transition: transform 120ms;343}344.section-head::after {345	margin-left: auto;346}347details[open] > .section-head::after,348details[open] > .repo-details-head::after {349	transform: rotate(90deg);350}351.section-label {352	font-size: 0.6875rem;353	letter-spacing: 0.12em;354	color: var(--text-secondary);355	text-transform: uppercase;356}357.section-count {358	font-family: var(--mono);359	font-size: 0.6875rem;360	color: var(--accent);361}362363/* ----- timeline ----------------------------------------------------------- */364365.timeline {366	display: block;367	margin: 18px 0 4px;368	overflow: visible;369}370.timeline-line {371	stroke: var(--text-faint);372	stroke-width: 1;373	stroke-dasharray: 4 4;374}375.timeline .dot circle {376	fill: var(--accent);377	transition:378		fill-opacity 120ms,379		r 120ms;380}381.timeline .d0 circle {382	fill: var(--accent-dim);383	fill-opacity: 0.45;384}385.timeline .d1 circle {386	fill-opacity: 0.55;387}388.timeline .d2 circle {389	fill-opacity: 0.8;390}391.timeline .d3 circle {392	fill: var(--accent-bright);393	fill-opacity: 1;394}395.timeline .dot:hover circle,396.timeline .dot:focus circle {397	fill: var(--accent-bright);398	fill-opacity: 1;399}400.timeline-legend {401	margin: 0 0 14px;402	font-size: 0.625rem;403	color: var(--text-faint);404}405.timeline-tip {406	position: fixed;407	z-index: 200;408	max-width: 340px;409	padding: 0.45rem 0.7rem;410	background: #0f0c08;411	border: 1px solid var(--border);412	border-radius: 4px;413	pointer-events: none;414	line-height: 1.5;415}416.timeline-tip .tip-id {417	font-family: var(--mono);418	font-size: 12px;419	color: var(--accent);420}421.timeline-tip .tip-msg {422	margin-top: 3px;423	font-style: italic;424	font-size: 15px;425	color: var(--text-heading);426}427.timeline-tip .tip-meta {428	margin-top: 4px;429	font-family: var(--mono);430	font-size: 10px;431	color: var(--text-muted);432}433434/* ----- history ------------------------------------------------------------ */435436.history-row {437	position: relative;438	display: grid;439	grid-template-columns: 110px 1fr auto;440	align-items: baseline;441	gap: 0 10px;442	padding: 9px 8px;443	border-bottom: 1px solid var(--border);444	transition: background 100ms;445}446.history-row::before {447	content: "";448	position: absolute;449	left: 0;450	top: 0;451	bottom: 0;452	width: 2px;453	background: var(--accent);454	transform: scaleY(0);455	transition: transform 120ms ease;456}457.history-row:hover {458	background: var(--accent-tint-04);459	text-decoration: none;460}461.history-row:hover::before {462	transform: scaleY(1);463}464.history-id {465	font-family: var(--mono);466	font-size: 0.75rem;467	color: var(--text-secondary);468}469.history-msg {470	min-width: 0;471	line-height: 1.7;472	overflow: hidden;473	text-overflow: ellipsis;474	white-space: nowrap;475	transition: color 100ms;476}477.history-row:hover .history-msg {478	color: var(--accent);479}480.history-when {481	font-family: var(--mono);482	font-size: 0.6875rem;483	color: var(--text-muted);484	white-space: nowrap;485}486.pager {487	display: flex;488	justify-content: space-between;489	margin: 14px 0 0;490	font-size: 0.6875rem;491}492.pager a:last-child {493	margin-left: auto;494}495.pager a:hover {496	color: var(--accent);497}498499/* ----- README and rendered Markdown --------------------------------------- */500501.repo-details {502	margin: 36px 0 0;503	animation: fadeIn 320ms 80ms ease both;504}505.repo-details-toggle {506	border-bottom: 1px solid var(--border);507	padding-bottom: 24px;508}509.repo-details-head {510	display: flex;511	align-items: center;512	gap: 6px;513	padding: 8px 0;514	font-family: var(--mono);515	font-size: 0.6875rem;516	letter-spacing: 0.12em;517	color: var(--text-secondary);518	text-transform: uppercase;519}520.markdown {521	font-size: 1.05rem;522	line-height: 1.7;523	overflow-wrap: break-word;524}525.markdown h1,526.markdown h2,527.markdown h3,528.markdown h4 {529	font-weight: 400;530	margin: 1.4em 0 0.4em;531	color: var(--text-heading);532}533.markdown h1 {534	font-size: 1.5rem;535}536.markdown h2 {537	font-size: 1.3rem;538}539.markdown h3 {540	font-size: 1.15rem;541}542.markdown p {543	margin: 0.8em 0;544}545.markdown ul,546.markdown ol {547	margin: 0.8em 0 0.8em 1.5em;548	padding: 0;549}550.markdown a {551	color: var(--accent);552}553.markdown code {554	font-family: var(--mono);555	font-size: 0.82em;556	color: var(--accent);557	background: var(--bg-surface);558	padding: 0.15em 0.35em;559	border-radius: 3px;560}561.markdown pre {562	background: var(--bg-surface);563	border-radius: 4px;564	padding: 1em 1.2em;565	overflow-x: auto;566	margin: 1em 0;567}568.markdown pre code {569	background: none;570	padding: 0;571	color: var(--text);572	font-size: 0.85em;573}574.markdown blockquote {575	border-left: 3px solid var(--border);576	margin: 1em 0;577	padding: 0.1em 1em;578	color: var(--text-secondary);579}580.markdown hr {581	border: none;582	border-top: 1px solid var(--border);583	margin: 1.5em 0;584}585.markdown img {586	max-width: 100%;587}588.markdown table {589	border-collapse: collapse;590	display: block;591	overflow-x: auto;592}593.markdown th,594.markdown td {595	border: 1px solid var(--border);596	padding: 4px 10px;597}598599/* ----- file viewer -------------------------------------------------------- */600601.breadcrumb {602	margin: 0 0 4px;603	font-size: 0.75rem;604	overflow-wrap: anywhere;605}606.breadcrumb a:hover {607	color: var(--accent);608}609.file-page-title {610	font-size: 1.75rem;611	font-weight: 400;612	margin: 4px 0 12px;613	overflow-wrap: anywhere;614}615.file-meta,616.file-toggle {617	margin: 0 0 12px;618	font-size: 0.6875rem;619}620.file-meta a,621.file-toggle a.active {622	color: var(--accent);623}624.file-image img {625	max-width: 100%;626	background: var(--bg-surface);627	border: 1px solid var(--border);628}629.file-view {630	border: 1px solid var(--border);631	background: var(--bg-surface);632	overflow-x: auto;633}634.code {635	margin: 0;636	padding: 16px 0;637	font-family: var(--mono);638	font-size: 0.8125rem;639	line-height: 1.65;640	tab-size: 4;641}642/* A grid, so tab stops count from the start of the code rather than the line number. */643.code .line {644	display: grid;645	grid-template-columns: 6em 1fr;646	padding-right: 24px;647	scroll-margin-top: 40vh;648}649.code .line:target,650.code .line.hl {651	background: var(--accent-tint-12);652}653.code .lc {654	white-space: pre;655}656.code .ln {657	padding-right: 1.5em;658	text-align: right;659	color: var(--text-faint);660	user-select: none;661}662.code .ln:hover {663	color: var(--accent);664	text-decoration: none;665}666667/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */668.tk-comment {669	color: var(--text-muted);670	font-style: italic;671}672.tk-keyword {673	color: var(--accent);674}675.tk-string,676.tk-string-expression {677	color: var(--sage);678}679.tk-constant {680	color: var(--accent-bright);681}682.tk-function {683	color: var(--accent);684}685.tk-parameter {686	color: var(--text);687}688.tk-punctuation {689	color: var(--text-secondary);690}691.tk-link {692	color: var(--accent);693	text-decoration: underline;694}695.tk-inserted {696	color: var(--sage);697}698.tk-deleted {699	color: #c45c5c;700}701.tk-i {702	font-style: italic;703}704705/* ----- phone -------------------------------------------------------------- */706707@media (max-width: 768px) {708	body > nav {709		padding: 20px 16px;710	}711	.nav-links {712		gap: 18px;713	}714	main {715		padding: 16px 16px 80px;716	}717	.repo-name {718		font-size: 2.75rem;719	}720	.install-lines {721		align-items: stretch;722		margin-left: 0;723		width: 100%;724	}725	.history-row {726		grid-template-columns: 1fr auto;727	}728	.history-id {729		grid-column: 1 / -1;730	}731	.code .line {732		grid-template-columns: 4.5em 1fr;733	}734	.code .ln {735		padding-right: 1em;736	}737}738739/* Later in the file than every animation it stops, so it wins without !important. */740@media (prefers-reduced-motion: reduce) {741	.tri-outer,742	.tri-inner,743	.repo-name,744	.repo-contributor,745	.repo-desc,746	.repo-homepage,747	.repo-meta,748	.repo-tabs,749	.install-lines,750	.repo-section,751	.repo-details {752		animation: none;753	}754}