Removed semantic tags.
@@ -61,7 +61,7 @@
h2, .h2 { font-size: 1.6rem; - margin-top: 0; + margin-top: 1rem; margin-bottom: var(--quarter-leading); }@@ -127,7 +127,6 @@
small, sub, sup, -time, .panel-header, hr, footer {@@ -218,7 +217,7 @@ .container-fluid {
padding: 0 0; } -time { +.date { text-align: right; display: block; }@@ -563,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;@@ -593,24 +589,21 @@ 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 {
@@ -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>
@@ -7,13 +7,13 @@ <div class="header">
{{> _header}} </div> <div class="main-content"> - <article class="{{content-type}} content"> + <div class="{{content-type}} content"> {{> _page_header}} - <time datetime="{{date-iso8601}}"><img src="/images/icons/calendar.svg" alt="[date]" class="icon"/> {{date}}</time> + <div class="date" title="{{date-iso8601}}"><img src="/images/icons/calendar.svg" alt="[date]" class="icon"/> {{date}}</div> <div class="body-text"> {{{contents}}} </div> - </article> + </div> </div> <div class="footer"> <div class="col-xs-12">
@@ -7,7 +7,7 @@ <div class="header">
{{> _header}} </div> <div class="main-content days"> - <article class="{{content-type}} box content"> + <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,20 +15,20 @@ <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"> {{> _footer}}
@@ -9,7 +9,7 @@ {{> _header}}
</div> </div> <div class="main-content"> - <article class="{{content-type}} content"> + <div class="{{content-type}} content"> {{> _page_header}} <div class="body-text"> <p>A <em>grimoire</em> is a book of spells. If you —like me in the '90s— ever played <a href="https://en.wikipedia.org/wiki/Magic:_The_Gathering">Magic: The Gathering</a>,@@ -26,7 +26,7 @@ <li><a href="/{{rawid}}">{{title}}</a></li>
{{/spells}} </ul> </div> - </article> + </div> </div> <div class="footer"> {{> _footer}}
@@ -7,7 +7,7 @@ <div class="header">
{{> _header}} </div> <div class="main-content"> - <article class="page box content"> + <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,7 +16,7 @@ <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>— Fabio</p> </div> - </article> + </div> </div> <div class="sidebar"> {{> _panels}}
@@ -7,12 +7,12 @@ <div class="header">
{{> _header}} </div> <div class="main-content"> - <article class="{{content-type}} content"> + <div class="{{content-type}} content"> {{> _page_header}} <div class="body-text"> {{{contents}}} </div> - </article> + </div> </div> <div class="footer"> {{> _footer}}
@@ -7,7 +7,7 @@ <div class="header">
{{> _header}} </div> <div class="main-content"> - <article class="{{content-type}} content"> + <div class="{{content-type}} content"> {{> _page_header}} {{> _project_badges}} {{#sourcehut}}@@ -43,7 +43,7 @@ {{/github}}
<div class="body-text"> {{{contents}}} </div> - </article> + </div> </div> <div class="footer"> {{> _footer}}
@@ -7,7 +7,7 @@ <div class="header">
{{> _header}} </div> <div class="main-content"> - <article class="{{content-type}} content"> + <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>@@ -59,7 +59,7 @@ <li><a href="{{home}}">{{code}}</a></li>
{{/inactive-projects}} </ul> </div> - </article> + </div> </div> <div class="footer"> {{> _footer}}