code.H3RALD.com — h3rald: 5aedcc1ed58a332e8abea2cd0e0f4dbfec680657

Merge branch 'master' of git@git.sr.ht:~h3rald/h3rald

h3rald h3rald@h3rald.com

Tue, 16 Jun 2026 21:57:36 +0200

commit

5aedcc1ed58a332e8abea2cd0e0f4dbfec680657

parent

408bc0f2badae8e7f098821d6fdd3bab45d3b3c3

12 files changed, 120 insertions(+), 145 deletions(-)

jump to

assets/styles/style.css

contents/now.md

templates/_footer.mustache

templates/_header.mustache

templates/_panels.mustache

templates/article.mustache

templates/days.mustache

templates/grimoire.mustache

templates/home.mustache

templates/page.mustache

templates/project.mustache

templates/projects.mustache

M assets/styles/style.css → assets/styles/style.css

@@ -2,12 +2,13 @@ /* Theme Switcher */
 /* Credits: https://endtimes.dev/no-javascript-dark-mode-toggle/ */
 
 :root {
-
     --html-font-size: 18px;
     --base-font-size: 1rem;
-    --line-height: 1.5;
+    --line-height: 1.4rem;
     --scale-factor: 1.3333;
-    --leading: 2rem;
+    --leading: 1.6rem;
+    --quarter-leading: 0.4rem;
+    --half-leading: 0.4rem;
     --letter-spacing: 0.05em;
     --font-family-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     --font-family-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -48,42 +49,41 @@ }
 
 .navlinks {
     margin-top: 2rem;
-    text-transform: uppercase;
 }
 
 h1,
 .h1 {
     font-size: 1.8rem;
-    margin-top: calc(var(--leading) * 1);
-    margin-bottom: calc(var(--leading) * 0);
+    margin-top: var(--leading);
+    margin-bottom: 0;
 }
 
 h2,
 .h2 {
     font-size: 1.6rem;
-    margin-top: 0;
-    margin-bottom: calc(var(--leading) * 0.4);
+    margin-top: 1rem;
+    margin-bottom: var(--quarter-leading);
 }
 
 h3,
 .h3 {
     font-size: 1.4rem;
-    margin-top: calc(var(--leading) * 1);
-    margin-bottom: calc(var(--leading) * 0.4);
+    margin-top: var(--leading);
+    margin-bottom: var(--quarter-leading);
 }
 
 h4,
 .h4 {
     font-size: 1.2rem; 
-    margin-top: calc(var(--leading) * 1);
-    margin-bottom: calc(var(--leading) * 0.4);
+    margin-top: var(--leading);
+    margin-bottom: var(--quarter-leading);
 }
 
 h5,
 .h5 {
     font-size: 1.1rem;
-    margin-top: calc(var(--leading) * 1);
-    margin-bottom: calc(var(--leading) * 0.4);
+    margin-top: var(--leading);
+    margin-bottom: var(--quarter-leading);
 }
 
 p,
@@ -92,26 +92,25 @@ ol,
 pre,
 table,
 blockquote {
-    margin-top: calc(var(--leading) * 0.3);
-    margin-bottom: calc(var(--leading) * 0.3);
+    margin-top: var(--quarter-leading);
+    margin-bottom: var(--quarter-leading);
 }
 
 ul ul,
 ol ol,
 ul ol,
 ol ul {
-    margin-top: calc(var(--leading) * 0);
-    margin-bottom: calc(var(--leading) * 0);
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-a,
 b,
 i,
 strong,
 em,
 small,
 code {
-    line-height: calc(var(--leading) * 0);
+    line-height: 1rem;
 }
 
 pre,
@@ -128,11 +127,10 @@ 
 small,
 sub,
 sup,
-time,
 .panel-header,
-hr::before,
+hr,
 footer {
-    font-size: calc(var(--base-font-size) * 0.75);
+    font-size: 0.8rem;
 }
 
 sub,
@@ -149,8 +147,8 @@ bottom: -0.25em;
 }
 
 .primary-subtitle {
-    margin-top: calc(var(--leading) * 0.25);
-    line-height: calc(var(--leading) * 0.8);
+    margin-top: var(--quarter-leading);
+    line-height: var(--line-height);
 }
 
 .secondary-subtitle {
@@ -158,8 +156,8 @@ margin-top: 0;
 }
 
 .leading {
-    margin-top: calc(var(--leading) * 1);
-    margin-bottom: calc(var(--leading) * 0);
+    margin-top: var(--leading);
+    margin-bottom: 0;
 }
 
 b,
@@ -211,15 +209,15 @@ text-decoration-style: dotted;
 }
 
 .content {
-    padding: 0 calc(var(--leading) * 0.5);
-    padding-bottom: calc(var(--leading) * 0.25);
+    padding: 0 var(--half-leading);
+    padding-bottom: var(--quarter-leading);
 }
 
 .container-fluid {
-    padding: 0 calc(var(--leading) * 0);
+    padding: 0 0;
 }
 
-time {
+.date {
     text-align: right;
     display: block;
 }
@@ -266,7 +264,6 @@ 
 .main-header .navlinks {
     text-align: left;
     font-size: 14px;
-    flex-grow: 1;
     margin: 0;
     text-align: center;
 }
@@ -284,14 +281,17 @@ vertical-align: middle;
     border: none;
 }
 
-.card-footer {
-    margin: auto;
+.card-title {
+    margin-bottom: 0.2rem;
+}
+
+table.badge-container, table.card-badges {
+    margin: 0;
+    line-height: 0.8rem;
 }
 
-.card-title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+.card-footer {
+    margin: auto;
 }
 
 .badge a, .badge a:visited {
@@ -302,17 +302,8 @@ .badge a:hover {
     color: firebrick;
 }
 
-.card-footer .action {
-    margin: 0 10px;
-}
-
-.card-footer .action:first-child {
-    margin-left: 0;
-}
-
 .badge-container {
     border-collapse: collapse;
-    display: inline;
 }
 
 .badge {
@@ -321,7 +312,7 @@ border: 1px solid snow;
 }
 
 .badge-content {
-    width: 42px;
+    width: 45px;
     text-align: center;
     border: 1px solid snow;
 }
@@ -334,31 +325,31 @@ 
 .badge-bedrock {
     color: snow;
     background: royalblue;
-    width: 72px;
+    width: 75px;
 }
 
 .badge-operational {
     color: black;
     background: goldenrod;
-    width: 72px;
+    width: 75px;
 }
 
 .badge-prototype {
     color: snow;
     background: chocolate;
-    width: 72px;
+    width: 75px;
 }
 
 .badge-consolidated {
     color: snow;
     background: seagreen;
-    width: 72px;
+    width: 75px;
 }
 
 .badge-license {
     color: snow;
     background: lightslategray;
-    width: 72px;
+    width: 75px;
 }
 
 .panel,
@@ -380,7 +371,7 @@ text-align: right;
 }
 
 .panel-body {
-    margin-top: calc(var(--leading) * -1);
+    margin-top: var(--leading);
 }
 
 .panel-body header {
@@ -571,20 +562,17 @@ }
 
 /* Figures */
 
-figure {
-    display: table;
+.figure {
     background: var(--secondary-background);
     margin: auto 0;
 }
 
-figure img,
-figure figcaption {
-    display: table-row;
+.figure img,
+.figure .figcaption {
     vertical-align: bottom;
 }
 
-figcaption {
-    display: block;
+.figcaption {
     background-color: var(--secondary-background);
     border: 1px solid var(--secondary-background);
     padding: 0 4px;
@@ -601,42 +589,29 @@ padding: 0 0.5rem;
     border: 1px solid var(--secondary-background);
 }
 
-.days figure {
+.days .figure {
     margin: 0;
 }
 
-.days time {
+.days .date {
     text-align: inherit;
     display: inherit;
     font-size: inherit;
+    margin: 0.5rem 0;
 }
 
-.days figcaption {
+.days .figcaption {
     margin: 0;
     font-size: 0.9rem;
     background: var(--secondary-background);
-}
-
-.days figcaption .caption {
-    padding: 0.5rem;
 }
 
 .days img {
     border: none;
 }
 
-
 /* Used only in Glyph Book */
 
 .line-numbers {
     display: none;
-}
-
-/* iPad Fix */
-
-@media screen and (min-width: 768px) and (max-width: 768px) {
-    .col-sm-8 {
-        flex-basis: 100%;
-        max-width: 100%;
-    }
-}
+}

M contents/now.md → contents/now.md

@@ -20,7 +20,7 @@ Because I have worked as a tech writer, developer, and architect in the past, people say that I'm not the _typical_ product manager, as I tend to deep dive quite a bit into the technology and programming side of things. I love programming after all, and even if I don't get to do it at work that much, I still do it in my (very little) free time.
 
 ### H3RALD ecosystem
 
-I've recently collected what I call the _H3RALD Ecosystem_ on [code.h3rald.com](https://code.h3rald.com). It is a collection of my own tools, mainly for my personal use, that may also be useful to others. Every project is open source, and every project is either a standalone, self-contained command line tool or something equally minimal. You can obtain the source code of each of these tools via [code.h3rald.com](https://code.h3rald.com) or [GitHub](https://github.com/h3rald).
+I've recently collected what I call the _H3RALD Ecosystem_ on [code.h3rald.com](https://code.h3rald.com). It is a collection of my own tools, mainly for my personal use, that may also be useful to others. Every project is open source, and every project is either a standalone, self-contained command line tool or something equally minimal. You can obtain the source code of each of these tools via [code.h3rald.com](https://code.h3rald.com) or [Sourcehut](https://git.sr.ht/~h3rald).
 
 With not one but two young kids, I basically don't have time to work on my personal projects right now, but it doesn't mean that I don't use them myself frequently or that I don't push the occasional feature or fix when needed.

M templates/_footer.mustache → templates/_footer.mustache

@@ -2,16 +2,16 @@ <footer class="sidebar">
     <p>
       <img src="/images/logo-light.svg" alt="H3RALD" class="logo-mini"> Web Site v510-5
     </p> 
-    </p>This web site uses <a href="/conver">Convergent Versioning</a></p>
+    <p>This web site uses <a href="/conver">Convergent Versioning</a></p>
     <p>&copy; 2004&mdash;2026 &bull; <em>Fabio Cevasco</em></p>
     <div class="navlinks">
-        <a href="/about" class="navbar-link">about</a>
+        <a href="/about" class="navbar-link">ABOUT</a>
         &middot;
-        <a href="https://2c.fyi" class="navbar-link">bookmarks</a>
+        <a href="https://2c.fyi" class="navbar-link">BOOKMARKS</a>
         &middot;
-        <a href="https://nifty.tools" class="navbar-link">tools</a>
+        <a href="https://nifty.tools" class="navbar-link">TOOLS</a>
         &middot;
-        <a href="https://code.h3rald.com" class="navbar-link">code</a>
+        <a href="https://code.h3rald.com" class="navbar-link">CODE</a>
     </div>
     <div class="merveilles">
       <a href="https://webring.xxiivv.com/" target="_blank" rel="noopener" class="icon-link">
@@ -28,7 +28,7 @@ <div class="licensing">Unless stated otherwise, all the content published on this web site is licensed under
     the <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
     The source code of this web site, such as its layout, stylesheets, custom min rules and code is licensed under the terms of the 
       <a href="https://opensource.org/licenses/mit-license.php"><span class="caps">MIT</span> License</a> and it is available
-      on <a href="https://github.com/h3rald/h3rald">GitHub</a>.
+      on <a href="https://git.sr.ht/~h3rald/h3rald">Sourcehut</a>.
     </div>
     <div class="license-icons">
     :creative-commons:

M templates/_header.mustache → templates/_header.mustache

@@ -8,14 +8,14 @@ <img src="/images/logo-light.png" alt="H3RALD" class="logo">
       </a>
   </h1>
   <div class="navlinks">
-    <a href="/days/" class="navbar-link">days</a>
+    <a href="/days/" class="navbar-link">DAYS</a>
     &middot;
-    <a href="/now" class="navbar-link">now</a>
+    <a href="/now" class="navbar-link">NOW</a>
     &middot;
-    <a href="/articles" class="navbar-link">articles</a>
+    <a href="/articles" class="navbar-link">ARTICLES</a>
     &middot;
-    <a href="/projects" class="navbar-link">projects</a>
+    <a href="/projects" class="navbar-link">PROJECTS</a>
     &middot;
-    <a href="/grimoire" class="navbar-link">grimoire</a>
+    <a href="/grimoire" class="navbar-link">GRIMOIRE</a>
   </div>
 </header>

M templates/_panels.mustache → templates/_panels.mustache

@@ -3,18 +3,18 @@ <div class="panel-header">
     featured projects
   </div>
   <div class="panel-body">
-    <article>
+    <div class="article">
       <h3><a href="/min/">min</a></h3>
       <p class="secondary-subtitle">A tiny concatenative programming language and system shell, providing a small standard library with regular expression support, cryptography, file management, and more.</p>
-    </article>
-    <article> 
+    </div>
+    <div class="article"> 
       <h3><a href="/hex/">hex</a></h3>
       <p class="secondary-subtitle">A tiny, minimalist, concatenative, stack-based and slightly-esoteric programming language inspired by <em>min</em> that can run on many platforms and can be used as an embedded language, to create shell scripts, or simply to learn more about concatenative programming.</p>
-    </article>
-    <article>
+    </div>
+    <div class="article">
       <h3><a href="/litestore/">LiteStore</a></h3>
       <p class="secondary-subtitle">A self-contained, lightweight NoSQL data store, featuring a RESTful API, full-text search, JWT token validation and authorization support, server-side JavaScript middleware, and more.</p>
-    </article>
+    </div>
   </div>
 </div>
 <div class="panel">
@@ -22,17 +22,17 @@ <div class="panel-header">
     featured articles
   </div>
   <div class="panel-body">
-    <article>
+    <div class="article">
       <h3><a href="/articles/twenty-years/">This web site is 20 years old</a></h3>
       <p class="secondary-subtitle">On March 28th, 2004, H3RALD.com was born</p>
-    </article>
-    <article>
+    </div>
+    <div class="article">
       <h3><a href="/articles/10-programming-languages/">10 programming languages worth checking out</a></h3>
       <p class="secondary-subtitle">A quick comparison of 10 non-mainstream programming languages</p>
-    </article>
-    <article>
+    </div>
+    <div class="article">
       <h3><a href="/articles/10-more-programming-languages">10 more programming languages worth checking out</a></h3>
       <p class="secondary-subtitle">Another look at 10 non-mainstream programming languages, 10 years later</p>
-    </article>
+    </div>
   </div>
 </div>

M templates/article.mustache → templates/article.mustache

@@ -2,20 +2,20 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body id="top">
-    <div class="main">
+    <div class="main" role="navigation">
       <div class="header">
         {{> _header}}
       </div>
-      <div class="main-content">
-          <article class="{{content-type}} content">
+      <div class="main-content" role="main">
+          <div class="{{content-type}} content">
           {{> _page_header}}
-          <time datetime="{{date-iso8601}}"><img src="/images/icons/calendar.svg" alt="[date]" class="icon"/>&nbsp;{{date}}</time>
+          <div class="date" title="{{date-iso8601}}"><img src="/images/icons/calendar.svg" alt="[date]" class="icon"/>&nbsp;{{date}}</div>
           <div class="body-text">
             {{{contents}}}
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         <div class="col-xs-12">
           {{> _footer}}
         </div>

M templates/days.mustache → templates/days.mustache

@@ -3,11 +3,11 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         {{> _header}}
       </div>
-      <div class="main-content days">
-          <article class="{{content-type}} box content">
+      <div class="main-content days" role="main">
+          <div class="{{content-type}} box content">
           {{> _page_header}}
           <div id="body-text" class="hyphenate">
             <p>This page is my daily photo stream, inspired by 
@@ -15,22 +15,22 @@ <a href="https://rabbits.srht.site/days/" target="_blank">Hundred Rabbits's /days page</a>
             and <a href="https://img.corvid.cafe" target="_blank">img.corvid.cafe</a>.</p>
             <p>It contains <em>at most</em> one image per day.</p>
             {{#days}}
-              <h3 id="{{date}}"><time datetime="{{date}}">{{title}}</time></h3>
+              <h3 id="{{date}}"><div title="{{date}}" class="date">{{title}}</div></h3>
               {{#image}}
-              <figure>
+              <div class="figure">
                 <img src="{{image}}" alt="{{date}}" loading="lazy" />
               {{#text}}
-              <figcaption>
+              <div class="figcaption">
                 <div class="caption">{{text}}</div>
-              </figcaption>
+              </div>
               {{/text}}
-              </figure>
+              </div>
               {{/image}}
             {{/days}}
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         {{> _footer}}
       </div>
     </div>

M templates/grimoire.mustache → templates/grimoire.mustache

@@ -3,13 +3,13 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         <div class="sidebar">
           {{> _header}}
         </div>
       </div>
-      <div class="main-content">
-          <article class="{{content-type}} content">
+      <div class="main-content" role="main">
+          <div class="{{content-type}} content">
           {{> _page_header}}
           <div class="body-text">
             <p>A <em>grimoire</em> is a book of spells. If you &mdash;like me in the '90s&mdash; ever played <a href="https://en.wikipedia.org/wiki/Magic:_The_Gathering">Magic: The Gathering</a>,
@@ -26,9 +26,9 @@ <li><a href="/{{rawid}}">{{title}}</a></li>
             {{/spells}}
             </ul>
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         {{> _footer}}
       </div>
     </div>

M templates/home.mustache → templates/home.mustache

@@ -3,11 +3,11 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         {{> _header}}
       </div>
-      <div class="main-content">
-        <article class="page box content">
+      <div class="main-content" role="main">
+        <div class="page box content">
         <h2>WELCOME</h2>
         <div class="body-text">
         <p>Welcome to H3RALD.com. This site used to be a fairly active blog back in the early 2000s, but sadly I progressively lost interest in writing articles, perhaps because I didn't have anything new to write about that you couldn't find elsewhere. However, all the content is still here, so feel free to browse through the <a href="/articles">articles</a> section.</p>
@@ -16,12 +16,12 @@ <p>Last but not least, I also added a <a href="/grimoire">grimoire</a> section, where you'll find useful <em>spells</em> to cast on with your command line to solve common problems (and save some time instead of searching the web or asking AI bots or something).</p>
         <p>Enjoy your stay, and thank you for stopping by!</p>
         <p>&mdash; Fabio</p>
         </div>
-        </article>
+        </div>
       </div>
       <div class="sidebar">
         {{> _panels}}
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         {{> _footer}}
       </div>
     </div>

M templates/page.mustache → templates/page.mustache

@@ -3,18 +3,18 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         {{> _header}}
       </div>
-      <div class="main-content">
-          <article class="{{content-type}} content">
+      <div class="main-content" role="main">
+          <div class="{{content-type}} content">
           {{> _page_header}}
           <div class="body-text">
             {{{contents}}}
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         {{> _footer}}
       </div>
     </div>

M templates/project.mustache → templates/project.mustache

@@ -3,11 +3,11 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         {{> _header}}
       </div>
-      <div class="main-content">
-          <article class="{{content-type}} content">
+      <div class="main-content" role="main">
+          <div class="{{content-type}} content">
           {{> _page_header}}
           {{> _project_badges}} 
           {{#sourcehut}}
@@ -43,9 +43,9 @@ {{/github}}
           <div class="body-text">
             {{{contents}}}
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
           {{> _footer}}
       </div>
     </div>

M templates/projects.mustache → templates/projects.mustache

@@ -3,11 +3,11 @@ <html lang="en">
   {{> _head}}
   <body id="top">
     <div class="main">
-      <div class="header">
+      <div class="header" role="navigation">
         {{> _header}}
       </div>
-      <div class="main-content">
-          <article class="{{content-type}} content">
+      <div class="main-content" role="main">
+          <div class="{{content-type}} content">
           {{> _page_header}}
           <div class="body-text">
             <p>This page lists <strong>{{projects-count}}</strong> active projects that I am currently working on.</p>
@@ -29,8 +29,8 @@ <td class="badge-content badge-label">Stage</td><td class="badge-content badge-operational">operational</td>
                     </tr>
                   </table>
                 </td>
-              <tr>
               </tr>
+              <tr>
                 <td>
                   <table class="badge-container">
                     <tr class="badge">
@@ -59,9 +59,9 @@ <li><a href="{{home}}">{{code}}</a></li>
             {{/inactive-projects}}
             </ul>
           </div>
-          </article>
+          </div>
       </div>
-      <div class="footer">
+      <div class="footer" role="contentinfo">
         {{> _footer}}
       </div>
     </div>

all repos — h3rald @ 5aedcc1ed58a332e8abea2cd0e0f4dbfec680657

The source code of the h3rald.com web site.