/*
Theme Name: Aellen
Author: Nils Aellen
Description: Terminal-flavoured block theme for aellen.org. No build step, no external font, no script.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: MIT
Text Domain: aellen
*/

/* What theme.json cannot express: light scheme following the OS, the terminal
   window, the typing animation and the blinking cursor. Colours always go through
   the preset variables so the Site Editor palette stays the source of truth. */

@media (prefers-color-scheme: light) {
	:root {
		--wp--preset--color--base: #f6f6f3;
		--wp--preset--color--surface: #ffffff;
		--wp--preset--color--contrast: #1b1f24;
		--wp--preset--color--muted: #5b636d;
		--wp--preset--color--line: #dcdcd6;
		--wp--preset--color--accent: #1a7f37;
		--wp--preset--color--amber: #9a6700;
	}
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ---- Header prompt ---------------------------------------------------- */

.is-prompt a::before {
	content: "~/ ";
	color: var(--wp--preset--color--accent);
}

/* ---- Terminal window -------------------------------------------------- */

.terminal {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.55);
	overflow: hidden;
}

.terminal > .terminal__bar,
.terminal > .terminal__body {
	/* The flow layout adds blockGap between the bar and the body. */
	margin-block: 0;
}

.terminal__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.terminal__bar::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
	margin-right: 52px;
	flex: none;
}

.terminal__body {
	padding: clamp(20px, 4vw, 36px) !important;
	font-family: var(--wp--preset--font-family--mono);
}

.terminal__body > * {
	margin-block: 0;
}

.t-cmd {
	color: var(--wp--preset--color--muted);
}

.t-cmd::before {
	content: "$ ";
	color: var(--wp--preset--color--accent);
}

.t-out {
	margin-bottom: 1.4em !important;
}

.t-name {
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin-block: 0.1em 0.8em !important;
}

.t-name .accent {
	color: var(--wp--preset--color--accent);
}

/* Blinking block cursor, on the last prompt and after 404 text. */
.t-cursor::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 1.1em;
	margin-left: 0.15em;
	vertical-align: text-bottom;
	background: var(--wp--preset--color--accent);
	animation: aellen-blink 1.1s steps(1) infinite;
}

@keyframes aellen-blink {
	50% { opacity: 0; }
}

/* Typing effect: each command is revealed character by character, then its
   output fades in. Delays chain the lines; widths are in ch so they match the
   command length exactly (set per line with --chars). */
.terminal--typing .t-cmd {
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: aellen-type calc(var(--chars, 8) * 55ms) steps(var(--chars, 8), end) forwards;
	animation-delay: var(--delay, 0s);
}

.terminal--typing .t-cmd::before {
	/* The "$ " prompt is 2ch wide and printed before the command itself. */
	margin-right: 0;
}

.terminal--typing .t-out,
.terminal--typing .t-name,
.terminal--typing .t-last {
	opacity: 0;
	animation: aellen-show 0.25s ease-out forwards;
	animation-delay: var(--delay, 0s);
}

@keyframes aellen-type {
	to { width: calc((var(--chars, 8) + 2) * 1ch); }
}

@keyframes aellen-show {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.terminal--typing .t-cmd,
	.terminal--typing .t-out,
	.terminal--typing .t-name,
	.terminal--typing .t-last {
		animation: none;
		width: auto;
		opacity: 1;
	}
	.t-cursor::after {
		animation: none;
	}
}

/* ---- ls -la post list ------------------------------------------------- */

.ls-posts .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-posts .wp-block-post {
	margin: 0 !important;
}

.ls-row {
	display: flex;
	gap: 1.5ch;
	align-items: baseline;
	padding-block: 0.35em;
	border-bottom: 1px dashed var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
}

.ls-row::before {
	content: "-rw-r--r--";
	color: var(--wp--preset--color--muted);
	flex: none;
}

.ls-row .wp-block-post-date {
	color: var(--wp--preset--color--amber);
	flex: none;
}

.ls-row .wp-block-post-title {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	min-width: 0;
}

.ls-row .wp-block-post-title a {
	text-decoration: none;
}

.ls-row .wp-block-post-title a:hover {
	text-decoration: underline;
}

@media (max-width: 560px) {
	.ls-row::before {
		display: none;
	}
	.ls-row {
		flex-direction: column;
		gap: 0;
	}
}

/* ---- Articles ---------------------------------------------------------- */

.post-heading::before {
	content: "# ";
	color: var(--wp--preset--color--accent);
}

.wp-block-post-content :is(h2, h3, h4)::before {
	color: var(--wp--preset--color--accent);
	font-weight: 400;
}

.wp-block-post-content h2::before { content: "## "; }
.wp-block-post-content h3::before { content: "### "; }
.wp-block-post-content h4::before { content: "#### "; }

/* ---- Line timing for the typing effect -------------------------------- */

.t-l1 { --chars: 6; --delay: 0.3s; }
.t-l2 { --delay: 0.8s; }
.t-l3 { --chars: 8; --delay: 1.3s; }
.t-l4 { --delay: 1.9s; }
.t-l5 { --delay: 2.4s; }

.t-cmd,
.t-last,
.t-empty {
	font-family: var(--wp--preset--font-family--mono);
}

.t-last::before {
	content: "$";
	color: var(--wp--preset--color--accent);
}

.t-empty {
	color: var(--wp--preset--color--muted);
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
	border-top: 1px solid var(--wp--preset--color--line);
}

.site-footer__line {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.post-nav {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
}

.post-nav .wp-block-post-navigation-link a {
	margin-left: 1ch;
}

/* ---- Inline code and form fields ------------------------------------- */

:not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
}

.wp-block-search__input {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	font-family: var(--wp--preset--font-family--mono);
}