summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--decadv-2025.html39
-rw-r--r--index.html19
-rw-r--r--style.css83
-rw-r--r--ukarpanghooth.html39
4 files changed, 146 insertions, 34 deletions
diff --git a/decadv-2025.html b/decadv-2025.html
index f4538ad..3ef2935 100644
--- a/decadv-2025.html
+++ b/decadv-2025.html
@@ -4,16 +4,20 @@
<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 @@
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>test (browser, libreoffice, harfbuzz, pango), looping back to 1-7 as needed</li>
<li>verify metadata and upload</li>
</ol>
+ </div>
</section>
</body>
</html>
diff --git a/index.html b/index.html
index 2ce4afb..7883928 100644
--- a/index.html
+++ b/index.html
@@ -4,25 +4,30 @@
<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>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f76be7b
--- /dev/null
+++ b/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;
+}
+
diff --git a/ukarpanghooth.html b/ukarpanghooth.html
index dfbefa2..87f91b3 100644
--- a/ukarpanghooth.html
+++ b/ukarpanghooth.html
@@ -4,26 +4,25 @@
<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 @@ example text, writing direction outline
<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 @@ lookup charBlock {
} charBlock;
</code>
</pre>
-
- </section>
+</div>
+</article>
</body>
</html> \ No newline at end of file