initial commit

2025-08-09 18:17:23 -04:00
commit 49c870d0ea
12 changed files with 538 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="{{lang}}">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>ln -s</title>
+		<meta property="og:title" content="ln -s &lt;file&gt; &lt;link&gt;" />
+		<meta
+			property="og:description"
+			content="{{description}}"
+		/>
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="https://eunakria.com/ln-s" />
+		<meta
+			property="og:image"
+			content="https://eunakria.com/ln-s/ln-s.webp"
+		/>
+		{{alternates}}
+		<style>
+			/*@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Recursive:slnt,wght,CRSV,MONO@-15..0,300..1000,0..1,0..1&display=swap');*/
+			@font-face {
+				font-family: 'Recursive Variable';
+				font-style: oblique 0deg 15deg;
+				font-display: swap;
+				font-weight: 300 1000;
+				src: url(vendor/recursive-latin-full-normal.woff2)
+					format('woff2-variations');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+					U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+					U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+					U+FFFD;
+			}
+
+			@font-face {
+				font-family: 'Caveat Brush';
+				font-style: normal;
+				font-display: swap;
+				font-weight: 400;
+				src: url(vendor/caveat-latin-400-normal.woff2) format('woff2');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+					U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+					U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+					U+FFFD;
+			}
+
+			:root {
+				color-scheme: dark;
+				--unit: 2vw;
+			}
+
+			@media (min-aspect-ratio: 3/2) {
+				.page {
+					--unit: 3vh;
+				}
+			}
+
+			.arrow {
+				width: calc(10 * var(--unit));
+			}
+
+			body {
+				margin: 0;
+			}
+
+			.page {
+				background: #101010;
+				height: 100vh;
+				display: grid;
+				align-items: center;
+			}
+
+			.headline {
+				font-size: calc(3 * var(--unit));
+				font-weight: 800;
+				text-align: center;
+			}
+
+			code {
+				font-family: 'Recursive Variable', monospace;
+				font-variation-settings: 'MONO' 1;
+			}
+
+			.blue,
+			.red {
+				position: relative;
+				font-style: italic;
+				font-variation-settings: 'MONO' 1, 'CRSV' 1;
+			}
+
+			.soft {
+				color: #808080;
+			}
+
+			.blue {
+				color: #8080ff;
+			}
+
+			.red {
+				color: #ff8080;
+			}
+
+			svg {
+				fill: currentColor;
+			}
+
+			.above,
+			.below {
+				position: absolute;
+				font-size: calc(2 * var(--unit));
+				display: inline-flex;
+				gap: calc(1 * var(--unit));
+			}
+
+			.above {
+				bottom: 150%;
+				right: 0;
+				justify-content: end;
+			}
+
+			.below {
+				top: 150%;
+				align-items: end;
+			}
+
+			.blink {
+				color: #808080;
+				animation: blink 2s infinite;
+			}
+
+			@keyframes blink {
+				0% {
+					opacity: 1;
+				}
+
+				50% {
+					opacity: 0.5;
+				}
+
+				100% {
+					opacity: 1;
+				}
+			}
+
+			.handwritten {
+				font-family: 'Caveat Brush', cursive;
+				display: inline-block;
+				white-space: nowrap;
+			}
+
+			.deed {
+				position: absolute;
+				width: 100%;
+				bottom: 0;
+				text-align: center;
+				color: #606060;
+				font-family: 'Recursive Variable', sans-serif;
+				transition: color 0.2s;
+				font-size: min(calc(1 * var(--unit)), 16px);
+			}
+
+			a {
+				color: #909090;
+				transition: color 0.2s;
+			}
+
+			.deed:hover {
+				color: #808080;
+			}
+
+			.deed:hover a {
+				color: #c0c0c0;
+			}
+
+			a:hover,
+			.deed:hover a:hover {
+				color: white;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="page">
+			<p class="headline">
+				<code
+					><span class="soft">$ </span>ln -s
+					<span class="blue"
+						><span class="below">
+							<svg class="arrow" viewBox="0 0 40 30">
+								<path d="{{arrow_path}}" />
+							</svg>
+							<span class="handwritten"
+								>{{file_annotation}}</span
+							> </span
+						>&lt;{{file}}&gt;</span
+					>
+					<span class="red"
+						><span class="above">
+							<span class="handwritten"
+								>{{link_annotation}}</span
+							>
+							<svg class="arrow" viewBox="0 0 40 30">
+								<path
+									transform="scale(-1,-1) translate(-40,-30)"
+									d="{{arrow_path}}"
+								/>
+							</svg> </span
+						>&lt;{{link}}&gt;</span
+					><span class="blink">_</span></code
+				>
+			</p>
+
+			<div class="deed">
+				<p>{{deed}}</p>
+			</div>
+		</div>
+	</body>
+</html>