site

style.css

(6367B)

 :root {
 	--gray-50: #131314;
 	--gray-100: #414142;
 	--gray-200: #b2b2b3;
 	--gray-300: #e3e3e3;
 	--blue-50: #0b1422;
 	--blue-100: #2d4264;
 	--blue-200: #89b4fa;
 	--blue-300: #cce7ff;
 	--green-50: #0c170c;
 	--green-100: #2f482d;
 	--green-200: #88c084;
 	--green-300: #b7f2b2;
 	--red-50: #240d14;
 	--red-100: #663141;
 	--red-200: #fc93b0;
 	--red-300: #ffdae7;
 	--teal-50: #0e1614;
 	--teal-100: #2e4642;
 	--teal-200: #7dbfb4;
 	--teal-300: #beede5;
 
 	--font-mono: monospace;
 	--font-sans: ui-sans-serif, system-ui, sans-serif;
 	
 	--spacing: 0.25rem;
 	--container: 80rem;
 
 	--text-base: 1rem;
 	--text-xs: 0.75rem;
 	--text-sm: 0.875rem;
 	--text-lg: 1.125rem;
 
 	--lineheight-base: 1.25;
 	--lineheight-lg: calc(var(--lineheight-base) * 1.2);
 
 	color-scheme: light dark;
 }
 
 @supports (color: oklch(0% 0 0)) {
 	:root {
 		--gray-50: oklch(0.1872 0.002 286.2);
 		--gray-100: oklch(0.3757 0.0017 286.32);
 		--gray-200: oklch(0.7639 0.0014 286.37);
 		--gray-300: oklch(0.9158 0 0);
 		--blue-50: oklch(0.1904 0.0317 258.97);
 		--blue-100: oklch(0.3781 0.0644 259.71);
 		--blue-200: oklch(0.7664 0.1113 259.88);
 		--blue-300: oklch(0.9158 0.0436 245.12);
 		--green-50: oklch(0.19 0.0271 144.42);
 		--green-100: oklch(0.373 0.0547 142.66);
 		--green-200: oklch(0.7535 0.1026 142.89);
 		--green-300: oklch(0.9048 0.1048 142.71);
 		--red-50: oklch(0.1977 0.0402 2.11);
 		--red-100: oklch(0.3881 0.0782 2.21);
 		--red-200: oklch(0.7813 0.1298 2.77);
 		--red-300: oklch(0.9229 0.0443 354.83);
 		--teal-50: oklch(0.1913 0.0127 177.82);
 		--teal-100: oklch(0.3731 0.0305 183.11);
 		--teal-200: oklch(0.7572 0.0692 182.78);
 		--teal-300: oklch(0.911 0.0495 183.71);
 	}
 }
 
 :root {
 	--color-bg: var(--gray-50);
 	--color-fg: var(--gray-300);
 	--color-border: var(--gray-100);
 	--color-accent: var(--blue-200);
 	--color-green: var(--green-200);
 	--color-red: var(--red-200);
 	--color-teal: var(--teal-200);
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color-bg: var(--gray-300);
 		--color-fg: var(--gray-50);
 		--color-border: var(--gray-200);
 		--color-accent: var(--blue-100);
 		--color-green: var(--green-100);
 		--color-red: var(--red-100);
 		--color-teal: var(--teal-100);
 	}
 }
 
 *,
 ::after,
 ::before,
 ::backdrop,
 ::file-selector-button {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 	border: 0 solid;
 }
 
 html,
 :host {
 	line-height: var(--lineheight-base);
 	-webkit-text-size-adjust: 100%;
 	tab-size: 4;
 	font-family: var(--font-mono);
 	font-feature-settings: normal;
 	font-variation-settings: normal;
 	font-size: var(--text-base);
 	-webkit-tap-highlight-color: transparent;
 }
 
 hr {
 	height: 0;
 	color: inherit;
 	border-top-width: 1px;
 	margin-top: calc(var(--spacing) * 4);
 	margin-bottom: calc(var(--spacing) * 4);
 	border-color: var(--color-border);
 }
 
 abbr:where([title]) {
 	-webkit-text-decoration: underline dotted;
 	text-decoration: underline dotted;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-size: inherit;
 	display: block;
 	font-weight: 700;
 	letter-spacing: calc(var(--spacing) / 6);
 }
 
 h1,
 h2 {
 	text-transform: uppercase;
 	text-wrap: balance;
 	max-inline-size: 50ch;
 	line-height: var(--lineheight-lg);
 }
 
 a {
 	color: var(--color-accent);
 	-webkit-text-decoration: underline;
 	text-decoration: underline;
 	cursor: pointer;
 }
 
 b,
 strong {
 	font-weight: 600;
 }
 
 code,
 kbd,
 samp,
 pre {
 	font-family: var(--font-mono);
 	font-feature-settings: normal;
 	font-variation-settings: normal;
 	font-size: var(--text-base);
 }
 
 small {
 	font-size: 80%;
 }
 
 sub,
 sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
 }
 
 sub {
 	bottom: calc(-1 * var(--spacing));
 }
 
 sup {
 	top: calc(-2 * var(--spacing));
 }
 
 table {
 	text-indent: 0;
 	border-color: inherit;
 	border-collapse: collapse;
 }
 
 :-moz-focusring {
 	outline: auto;
 }
 
 progress {
 	vertical-align: baseline;
 }
 
 summary {
 	display: list-item;
 }
 
 ol,
 ul,
 menu {
 	list-style: none;
 }
 
 img,
 svg,
 video,
 canvas,
 audio,
 iframe,
 embed,
 object {
 	display: block;
 	vertical-align: middle;
 }
 
 img,
 video {
 	max-width: 100%;
 	height: auto;
 }
 
 ::selection {
 	background-color: var(--color-accent);
 	color: var(--color-bg);
 }
 
 ::-moz-selection {
 	background-color: var(--color-accent);
 	color: var(--color-bg);
 }
 
 body {
 	background-color: var(--color-bg);
 	color: var(--color-fg);
 	max-width: var(--container);
 	margin-inline: auto;
 	padding: calc(2 * var(--spacing));
 }
 
 header.main {
 	border-bottom: var(--color-border) 1px solid;
 	padding-bottom: calc(2 * var(--spacing));
 	margin-bottom: calc(2 * var(--spacing));
 
 	& > :not(h1) {
 		font-size: var(--text-xs);
 	}
 }
 
 nav ul {
 	display: flex;
 
 	& > li::after {
 		content: "|";
 		margin: 0 calc(2 * var(--spacing));
 	}
 
 	& > li:last-child::after {
 		content: "";
 		margin: 0;
 	}
 }
 
 nav[aria-label="Main"] {
 	& > .nav-inner {
 		display: flex;
 		margin-bottom: calc(4 * var(--spacing));
 	}
 
 	& > .nav-inner::after {
 		content: '';
 		background: repeating-linear-gradient(
 		90deg, var(--color-accent), var(--color-accent)
 		1px, transparent 0, transparent 8px);
 		display: block;
 		width: 100%;
 		margin-left: var(--text-base);
 	}
 
 	ul > li:first-child {
 		display: inline-flex;
 
 		a {
 			display: inline-flex;
 			align-items: center;
 			gap: 8px;
 		}
 	}
 }
 
 main ol > li,
 main ul > li {
 	margin: var(--spacing) 0;
 }
 
 main.blog-posts, main.git-repos {
 	article {
 		margin-bottom: calc(8 * var(--spacing));
 
 		p {
 			margin-top: calc(4 * var(--spacing));
 			margin-left: calc(4 * var(--spacing));
 			font-size: var(--text-sm);
 		}
 
 		time {
 			font-size: var(--text-sm);
 		}
 	}
 }
 
 main.git {
 	table {
 		font-size: var(--text-sm);
 	}
 
 	a.d,
 	a.h,
 	a.i,
 	a.line {
 		text-decoration: none;
 	}
 
 	#blob a {
 		color: var(--color-border);
 	}
 
 	#blob a:hover,
 	#blob a:target {
 		color: var(--color-accent);
 	}
 
 	table thead td {
 		font-weight: bold;
 	}
 
 	table td {
 		padding: 0 0.4em;
 	}
 
 	table td {
 		vertical-align: top;
 		white-space: nowrap;
 		padding-top: 0.1em;
 	}
 
 	#index tr td:nth-child(2),
 	#tags tr td:nth-child(3),
 	#branches tr td:nth-child(3),
 	#log tr td:nth-child(2) {
 		white-space: normal;
 	}
 
 	td.num {
 		text-align: right;
 	}
 
 	pre {
 		font-size: var(--text-sm);
 	}
 
 	pre a.h {
 		color: var(--color-teal);
 		font-weight: bold;
 	}
 
 	.A,
 	span.i,
 	pre a.i {
 		color: var(--color-green);
 	}
 
 	.D,
 	span.d,
 	pre a.d {
 		color: var(--color-red);
 	}
 
 	section.git-file {
 		padding-top: calc(2 * var(--spacing));
 
 		p {
 			font-size: var(--text-sm);
 		}
 	}
 }