Eunakria
46f9a5665e
* Localize "file" and "link" in OGP title * Correct `dist/i18n.yml` to `res/i18n.yml` in README
215 lines
4.1 KiB
HTML
215 lines
4.1 KiB
HTML
<!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 <{{file}}> <{{link}}>"
|
|
/>
|
|
<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
|
|
><{{file}}></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
|
|
><{{link}}></span
|
|
><span class="blink">_</span></code
|
|
>
|
|
</p>
|
|
|
|
<div class="deed">
|
|
<p>{{deed}}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|