◊; SPDX-License-Identifier: BlueOak-1.0.0
◊; This file is licensed under the Blue Oak Model License 1.0.0.
<!DOCTYPE html>
<html lang="en">
◊html$-page-head["The Local Yarn" #f]
<style>
header#front-page {
text-align: center;
}
header#front-page > div {
display: inline-block;
width: auto;
margin: 0 auto;
overflow: hidden;
}
#front-page h1 {
font-feature-settings: "smcp" on;
text-transform: lowercase;
font-weight: normal;
font-size: 2.5em;
/* 24fps slide-in from right edge of text, just like in GRAND BUDAPEST HOTEL */
animation: slideFromRight 1s steps(24);
}
@keyframes slideFromRight {
0% { margin-right: -200%; }
100% { margin-right: 0%; }
}
#front-page-logo {
shape-outside: url(web-extra/mark.svg);
/* filter: brightness(0) saturate(100%) invert(20%) sepia(16%) saturate(903%) hue-rotate(153deg)
* brightness(93%) contrast(90%); */
shape-margin: 1rem;
float: left;
margin-left: -4rem;
margin-right: 1rem;
max-width: 8rem;
height: auto;
}
#intro {
max-width: 20rem;
margin: 0 auto;
}
#front-page-logo {
margin-top: -0.3rem;
}
@media (min-width: 667px) {
}
main {
background: transparent;
line-height: 1.2em;
}
</style>
</head>
<body style="overflow-x:hidden; hyphens: auto">
<header id="front-page"><div>
<h1 class="site-title">The Local Yarn</h1>
</div></header>
<main>
◊(cache-index-entries-only! "Home page" here doc)
<div id="intro"> ◊(->html doc #:splice? #t) </div>
<div style="text-align: center">
<br><span class="caps"><a href="/blog-pg1.html">The Blog</a> ·
<a href="/keyword-index.html">Keyword Index</a></span>
</div>
◊(html$-series-list)
</main>
<footer id="main" style="text-align: right;">
<a href="/code"><code style="font-size: 0.6em;">◊"◊"SOURCE CODE</code></a>
</footer>
</body> </html>