day 02: housekeeping mostly separated the stylesheet. tweaked it to look like acme(1). added navbar, need to think what links could be added there.
la-ninpre aaoth@aaoth.xyz
Tue, 02 Dec 2025 22:16:50 +0300
4 files changed,
146 insertions(+),
34 deletions(-)
M
decadv-2025.html
→
decadv-2025.html
@@ -4,16 +4,20 @@ <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2025 december adventure — aaoth.xyz</title> - <style> - html{background:#777} - body{margin:1em auto;max-width:850px;color:#000;background:#fff;padding:0.5em;border:4px solid #5aa} - a{color:#005;} - img{max-width:100%} - </style> + <link href="style.css" rel="stylesheet"/> </head> <body> + <nav> + <ul> + <li><a href="/">home</a></li> + </ul> + </nav> <section> <h1>december adventure 2025</h1> + <div class="win"> + <p><a href="https://eli.li/december-adventure">december adventure</a> + is a <b>low key</b> thingy by eli oat. the goal is to choose a project + and work on it in a relaxed pace.</p> <p>in this year's decadv i want to work on a project that i've been postponing for too long now. i'm fascinated by scripts and writing aystems, both natural and@@ -23,8 +27,28 @@ time to document them, but this year i want to try to
change this.</p> <p>in particular, i want not only to document each writing system, but to make a computer font for each one.</p> + </div> <h2 id="log">the log</h2> - <h3>2025-12-01</h3> + <div class="win"> + <p>here will be some log entries, in reverse chronological order.</p> + </div> + <!-- + <h3 id="2025-12-xx">2025-12-xx</h3> + <div class="win"> + <p> + </p> + </div> + --> + <h3 id="2025-12-02">2025-12-02</h3> + <div class="win"> + <p>today i mostly tweaked the website. decided to make it look + like <a href="https://acme.cat-v.org">acme</a> window in which i'm currently writing this sentence :D</p> + <p>css is a bit questionable, but i'll tweak it more as i go.</p> + <p>as a sidenote, it's a bit challenging to work on something while also having + to go to a $dayjob...</p> + </div> + <h3 id="2025-12-01">2025-12-01</h3> + <div class="win"> <p>started working on <a href="ukarpanghooth.html">ukarpanghooth</a> description. couldn't do images today, sorry...</p> <p>also came up with a rough scheme on how to make each font:</p> <ol>@@ -38,6 +62,7 @@ <li>compile (fontmake/fontc)</li>
<li>test (browser, libreoffice, harfbuzz, pango), looping back to 1-7 as needed</li> <li>verify metadata and upload</li> </ol> + </div> </section> </body> </html>
M
index.html
→
index.html
@@ -4,25 +4,30 @@ <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aaoth.xyz</title> - <style> - html{background:#777} - body{margin:1em auto;max-width:850px;color:#000;background:#fff;padding:0.5em;border:4px solid #5aa} - a{color:#005;} - img{max-width:100%} - </style> + <link href="style.css" rel="stylesheet"/> </head> <body> <section> <h1>hi, i'm la ninpre</h1> + <div class="win"> <p>i'm doing many different things, this website is meant to collect and display some of them.</p> - <p>in year 2025 i want to participate in <a href="https://eli.li/december-adventure">december adventure</a>. here's a link to my log: <a href="decadv-2025.html">december adventure 2025</a></p> + </div> + <h2>quick links</h2> + <div class="win"> + <p>a list of most interesting pages at the moment.</p> + <ul> + <li><a href="decadv-2025.html">my 2025 december adventure log</a>.</li> + </ul> + </div> <h2>contacts</h2> + <div class="win"> <p>here are some ways to contact me.</p> <ul> <li><b>fediverse</b>: @la_ninpre@merveilles.town or @lbr@snac.aaoth.xyz</li> <li><b>xmpp</b>: la_ninpre@aaoth.xyz</li> <li><b>mail</b>: aaoth at aaoth dot xyz</li> </ul> + </div> </section> </body> </html>
A
style.css
@@ -0,0 +1,83 @@
+html { + background:#777; +} +body { + margin:1em auto; + max-width:850px; + color:#000; + background:#ffffea; + border:4px solid #5aa +} +a { + color:#005; +} +img { + max-width:100% +} +pre { + overflow-x:scroll; +} +.nobreak { + white-space:nowrap; +} +h1::before, h2::before, h3::before, nav::before { + display: inline-block; + background: #88c; + border: 0.15rem solid #88c; + border-bottom: 0.10rem solid #88c; + width: 1rem; + height: 2rem; + content: ""; + margin-right: 0.25em; + vertical-align: bottom; +} +nav::before { + background: none; + border-color: transparent; +} +h2::before, h3::before { + height: 1em; + background: none; +} +h1, nav { + margin: 0; + border-bottom: 0.1em solid black; + line-height: 1; + background: #eaffff; +} +h2, h3 { + margin: 0; + border-top: 0.2rem solid black; + background: #eaffff; + line-height: 1; +} +h1 + h2 { + border-top: initial; +} +nav { + font-size: 2em; +} +nav ul, nav ul li { + display: inline; +} +nav ul { + padding: 0; +} +.win { + margin-top: -0.1rem; + margin-left: 1.12rem; + padding: 0.5em; + border-top: 0.1rem solid #88c; + border-left: 0.15em solid #88884c; +} +.win *:first-child { + margin-top: 0; +} +.win *:last-child { + margin-bottom: 0; +} +h1 + .win { + border-top: initial; + margin-top: initial; +} +
M
ukarpanghooth.html
→
ukarpanghooth.html
@@ -4,26 +4,25 @@ <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ukarpanghooth — aaoth.xyz</title> - <style> - html{background:#777} - body{margin:1em auto;max-width:850px;color:#000;background:#fff;padding:0.5em;border:4px solid #5aa} - a{color:#005;} - img{max-width:100%} - pre{overflow:scroll} - </style> + <link href="style.css" rel="stylesheet"/> </head> <body> - <section> - <h1>ukarpanghooth</h1> + <nav> + <ul> + <li><a href="/">home</a></li> + </ul> + </nav> +<article> +<h1>ukarpanghooth</h1> <h2>overview</h2> - +<div class="win"> <p>the first writing system i'm going to talk about is ukarpanghooth -(meaning 'angular cut', IPA: /ɤ.kaɾ.pan.ɡʱə.uːtʰ/). it was actually +(meaning 'angular cut', <span class="nobreak">IPA: /ɤ.kaɾ.pan.ɡʱə.uːtʰ/</span>). it was actually my first attempt to create a writing system. it's main purpose was just to be unreadable by others (steganography? security by obscurity?).</p> - +</div> <h2>description</h2> - +<div class="win"> <p>this is a simple alphabetic script based on latin alphabet. some letter shapes are also influenced by runic scripts. the first version (proto-ukarpangooth) was actually very similar to the latin alphabet,@@ -60,13 +59,13 @@ -->
<p>the name of the script suggests that one can cut it on something (wood, stone, etc.), as only straight line segments are used.</p> - +</div> <h2>usage</h2> - +<div class="win"> <p>as mentioned before, script's main purpose was to hide some information (i once used it to cheat on a test in a physics class :D). mainly i wrote english text. some time later i used it to write my unfinished -conlang named aihnth (IPA: /a.ji.ən.tʰə/).</p> +conlang named aihnth (<span class="nobreak">IPA: /a.ji.ən.tʰə/</span>).</p> <p>the script has some ornamental potential, as its glyphs are pretty simple and use only straight lines.</p>@@ -79,9 +78,9 @@ st peter's cross with "hd un'nuhrthh fah'deelhrhu khotghu koth'h" written on it.
</figcaption> </figure> --> - +</div> <h2>font</h2> - +<div class="win"> <p>actually, at first, i didn't think that it would be possible to replicate this script's peculiar writing order in a computer font. however, after reading some specs, decompiling some fonts and@@ -117,7 +116,7 @@ sub @full' lookup full2half @full' lookup full2half;
} charBlock; </code> </pre> - - </section> +</div> +</article> </body> </html>