This release is mostly centered around cleaning up different edge cases in the theme. This the first time in several point releases where I’ve made a change to the HTML structure. The release before (V1.3.07) was an addition to the theme that we won’t be seeing on Micro.blog until we update Hugo. I feel a bit of accomplishment in the fact that I didn’t see a need to.

Here are all the changes from the README.md that I haven’t blogged about.

v1.3.08

• Adjust fonts
• Make the a.no-decoration more accessible by changing contrast
• Add FloatLeft css class
• Add ::selection background color to match up with theme
• Add scrolling for debug output
• Change the title and aria-label for microposts to include the date and time. In the local copy of Hugo, an empty string title is automatically added.
• Add styling to the top of the list.html to make it stand out.
• Change the date format for the time used for published times.
• Rearrange reply order options to be Micro.blog, Mastodon, and then email
• Add articleSection to list of classes for category tags on a post
• Update README.md on previous releases

v1.3.07

• Add partials for upcoming mathematics support in Hugo. This can be seen when you toggle the math parameter. This has been defaulted to false until v0.122 is available. Demos can be seen on the MathJax demo page.
• Use Modern Font Stacks. Matt Langford discussed this on the Tiny Theme page on fonts. I really liked his implementation and you should check it out!

v1.3.06

• Change the li marker color to --text-alt in order to match header color
• Change padding of body to utilize more space on smaller screens
• add text-shadow to a.no-decoration
• Change logic for the debug flags
• Create stub for theme example folder
• Temporarily add the rsvp shortcode to theme to remove extra whitespace when post is cross posted to mastodon

If you’ve come to my site, you’ve seen it. Or rather, seen that it isn’t there. Most site have them, whether it’s a big banner or image that lets you know that you are on a webpage. I’m referring to the header; usually the first h1 element in the html. Open any book on HTML and it’s one of the top five elements that you learn about.

But, if this element is so basic and used so often, then how why do I not use this in my theme?

No guarantee on structure

There are different tools that you can use to write posts for micro.blog. You can post from the website, MarsEdit, Ulysses, drafts, etc. These tools usually allow the end user to write in some form of Markdown syntax. If you look up the syntax for Markdown on Markdown Guide Basics Syntax or on the DaringFireball Markdown Basics page, you will see that the first thing they point out is the # used to make a heading. The tools will use the convention of taking the first # header and using it as the title for a post.

Most of the websites that I’ve come across will use title of a post as an h2 in order to denote that its semantically lower than the h1 they would have in the header of the page.

But, what about posts without a title? What about the person who isn’t familiar or not thinking about these details as they type away on their keyboards on that great post that will finally prove that whether pancakes or waffles are the superior breakfast item¹.

Other than testing whether the content has a title, the theme does not make any adjustments. It can’t automatically change all the headers and assume that the writer meant ### instead of ## for the sub-header.

Also, If we only navigate by headers and headers are only on titled posts, then what about the micro posts that micro.blog uses?

I’m not an accessibility expert, I just hope that whoever is using the theme, will be able to navigate using the different articles and aria-labels. I really hope that not having the headers isn’t a deterrent from reading the site. If you know of someone, please send me their information so that I can improve this site.

What would it take to change?

I was thinking about changing the structure of the theme to match the convention that I had seen with other themes. I’d make the articles have h2 and just go through all my posts to make sure everything had the proper heading.

In my local testing, I found that I ran into another problem where the built in table of contents feature of Hugo defaults to using h2 and h3 tags to create its content.

It’s documented on how to change the start and end levels but this would mean that users of the theme would see a change after an update. I can’t count on them reading the readme, being able to test it before hand, or going back to a previous version.

Ten Times the Technical Transform

About a month ago, I asked @help how many people were using this theme. Manton said 10.

I was shocked!

That’s 9 more than I was expecting.

I hope these people are happy with the theme - or so I imagine - and I don’t want to change that.

Withdrawn on the World Wide Web

The last reason is more personal.

I’m on the web, but I would rather you start reading what I wrote than read about me. Based off of my own web-surfing habits and the site traffic I get, I assume that when someone comes to the site they are coming from a direct link to an article. If that is the case, I want you to get to reading as quickly as possible.

The website has a title that is read by accessibility readers and shows up in the tab of your browser.

I don’t know how much of my traffic is people new to the site, but I do have an about me at the bottom of the page. It’s kind of a “find out more from this author” that you would see in the back of a book.

For me, this is more comfortable because I have trouble writing about myself. Ask anyone who has written a resumé, and they might say its easier to express how you think of feel about different things than it is to write about how you are really good at TPS reports.

Let’s head this off

This is not an attack on sites that use h1 for the title and have it at the top. I love those sites and the people that make them. This is just me explaining the theories of my own site. It’s not conventional and sometimes I look at it and want to start over.

It’s because of that burning feeling, I continue working on it.

Just running forward.

Without a head.

I just pushed a point release of the theme to GitHub. The majority of the changes are related to colors and line adjustments based off of reading 12 Modern CSS One-Line Upgrades by Stephanie Eckles.

Crossing the line

Years ago, I read an article stating that although it’s good to underline links, it can be difficult in some circumstance because certain characters like q, j, p will touch the line. Some developers used box-shadow get around this and I had taken that route for this theme.

When I read Stephanie’s article, I came across a section I learned about text-underline-offset. I also checked that I can use it in most browsers before I let myself get excited. I spent the last couple of days refactoring my CSS to use this finally posted it.

There are still instances where the text intersects the line, but during writing this post, I came across this article on styling with underlines by Ollie Williams. In it, he mentions that the property text-decoration-skip-ink is on by default.

…

Well, I’m hoping that this understanding of how these things work lead to a better site in the future. Although, I still use box-shadow as a makeshift highlight for hovering over links, removing it from link underlining reduces complexity.

The space between us

Other than that, I’m doing some adjustments to line-height. Elements such as ruby, rt, sub, and sup can cause the linespacing not to be uniform within a paragraph. I adjusted the spacing by doing this in the root element but I do not like the way that it added space between all the other block elements on the page.

I pushed this change but it’s probably moving to the top of the list of priorities after I do some more research on the rhythm of line spacing.

Another coat of paint

I’ve decided to change the color for the headings so that it is closer to the basic font. This will increase the contrast ratio and make it easier to read.

For this, I learned to let go of trying to make everything pop out at you and let my readers enjoy reading the site.

The ReadMe

When I do a point release, I update the README.md on the GitHub project page.

Here are the release notes for this point release.

• Improve h* tags by changing color to --text-alt
• Make changes to text-decoration inspired by 12 Modern CSS One-Line Upgrades to various elements
• Turn on debugging by default temporarily
• Modify cursor on <abbr>
• Adjust line-height to make sub, sup, and ruby elements less obtrusive
• Add accent-color to root of CSS

As always, feel free to contact me if you have any questions or comments!

In my last post about the labarum theme, I ranted about how I wasn’t going to re-invent the wheel. In this post, I’ll be talking about how I made some minor tweaks and decided to update the version to 1.3!

This post is mostly a “why did I do this” versus a “how did I do it”.

On the Edge of obscure

When I first started working with static site generators, I used a tool called Pelican. The site is still up at https://mandaris.github.io, but I had messed up the layout in the last couple of commits and haven’t gone back to fix.

I have a tendency to focus on details that don’t really matter to 90% of most readers and (I’m assuming) most writers of HTML.

If you were to look at a list of personal blogs, I doubt that you’d find more than a handful that use esoteric tags such as <dt> or <rt>.

I continued this trend with this release by adding some tweaks to <ins>, <del>, and <s>.

At this point, the changes are direct by me loading the page up and making adjustments in the browsers inspector.

Part of the reason that I keep looking into this is that goldmark/commonmark define strikethrough as a delete in the resultant HTML.

Obscure Examples

Here are some example paragraphs with the styling mentioned above.

This is a paragraph with deleted text.

This is a paragraph with inserted text.

This is a paragraph with strikethrough.

And just for giggles here is a ruby(ruby) example.

Toggling Debug

Early on in this project, I enabled some debugging from Hugo. It was really useful when making the theme, and hidden by default.

As the template has become more stable, I want to reduce the amount of text that is being sent over. Yes, I know that text is almost negligible but why generate it if I’m not using it.

As a user, you don’t need to do anything. Generating the debug output is optional and toggled off by default.

I’ve added the following to the plugin.json file to make it an option.

"field": "params.themeDebug",
"label": "Generate the debug information",
"type": "boolean"

And then I have if statement in front of the corresponding debug code

{{ if .Params.themeDebug }}

Can I has?

This is the most exciting part of this release for me!

During the discussion of implementing the table of contents, I had written that I about using has but couldn’t because it wasn’t supported in Firefox.

Well, the feature is now available to anyone using version 121 or newer of Firefox and other popular browsers¹!

This came at a great time as I wanted to better integrate the plugins that Micro.blog offers. I wrote about the plugins late last year. That solution seemed to work for a while, but the <div> would sometimes render when it was empty. I was counting on Hugo’s handling of whitespace to remove any spaces and thus making the browser skip over rendering it.

I created a class in my CSS that would default to hiding things.

.optional {
  display: hidden;
}

I then follow this directly with code that makes it a block element if it has certain elements in it.

.optional:has(a, p, img) {
  display: block;
  margin-top: 1rem;
  padding: 5px;
}

After that, I added the optional class to the <div>in _default/single.html that contains plugins.

<div class="[ style-box ] [ optional ] [ text-center ]">

Next steps?

I don’t know.

Seriously.

I could add some styling to the optional components. Some of the other themes make those components look really good and was tempted to use something similar.

But, I don’t have the energy anymore and I want to focus on my writing. In fact, this release was mostly done a while ago and I’ve just been waiting to write up the changes.

If you have anything that you’d like to comment on, please feel free to email me at info@MandarisMoore.com.

I’ve been working on this theme for a while. Marking things off and adding things to a list in my head of different things that I want to do in order to scratch my own itch.

The truth of the matter is that I may never be done done with this. There are edge cases that I can envision, those that I never thought of, and those that are so minute that it’s not worth putting the effort into.

With that being said, I can’t do everything.

In fact, I should not do everything.

Case in point, I was looking into getting my mastodon account verified and I was attempting to pull the host and username from the metadata that Micro.blog provides.

Otávio created a plugin [GitHub Repo] that references $.Params.mastodon.hostname but this is only available on the post level. I’d like it in the head so that I can get associated accounts validated and for other tools like browser extensions.

I sent an email to @manton and he verified this behavior. I put some code into the theme and it will eventually work without users having to do anything more.

But, what can I do until then?

I thought about making my own plugin that a user can put in the values for hostname and username. I could make my own separate branch of the theme that would have this hard coded. Since I’m working on this, maybe I could also add a separate piece to add more control over avatars and images.

I could … I could … I could …

No.

I know that I’m not the only one who feels that they could implement things to make things better. But, this isn’t my specialty. This is a fun project.

I quick search of plugins and I found the Meta tags plugin [GitHub Repo] by Manton.

I put the snippet that I wanted in and boom!

Problem solved.

The lesson?

I, you, and everyone out there don’t need to make everything.

Don’t let your perfect vision of what things are supposed to be stop you. Use the time that you have now to make and do something else.

Happy Holidays.

A small but pretty cool v1.2.18 of Labarum. This will allow the Reply by email for Micro.blog, Reply on Mastodon, and Conversation on Micro.blog plugins to look like they belong on the page.

The next step will be to add a little more padding to the <div> that contains the links and to get the embed for the Tinylytics-for-Micro.blog plug to work correctly as well.

How does labarum add optionals?

There are truly great web designers here on Micro.blog and one of them is Matt Langford. He’s got a wonderful theme called Tiny Theme.

In it, he has different logic to test whether a certain plugin is installed and then perform logic for it.

{{ if templates.Exists "partials/reply-by-email.html" }}
  <li>{{ partial "reply-by-email.html" . }}</li>
{{ end }}

With labarum, I place these all in one <div> and hope that the underlying plugin doesn’t decide to add multiple lines some day in the future.

I’m using the browsers nature of not rendering the empty block elements.

What about tinylytics for labarum?

I ran into an issue when I attempted to add the tinylytics plugin for Micro.blog to the theme like the other plugins. Most likely a user error on my end caused by a conflict between when I initially added tinylytics and this plugin.

I didn’t want to have this update halted while I attempted to fix this.

As always, feel free to contact me with any and all feedback.

The other day, I wrote a micropost about how I was deliberating on <a><h1>...</h1></a> versus <h1><a>...</a></h1>. I joked and said that I was only thinking about it for 59 seconds and as you are reading this post it has been a lot more than that.

Strictly HTML 4 speaking, headers are block elements and anchors are inline elements. But, in practice, I’ve seen anchors around headers in links and images for just as long.

But which one do I want to use?

I decided that I would do some experiments in my test environment and saw that the touch targets would be just a little larger if I switch the anchor to be outside of the header. Unfortunately, this would also mean that I would have to do a minor rewrite of the CSS.

Another question that I had is what is more accessible?. I didn’t want to put effort into this if it meant that it would be a problem for people. So I enabled voiceover and navigated the page using the keyboard to get a sense of what it would sound like.

After listening to the two different versions, I created two rules to match up with what I had previously. I ran into a small snag as header is a block element that spans the width of the container.

I then set width: fit-content to make it fit. As a draw back the box-shadow that I was using to underline the link only shows up on the last line and make long titles look a little weird to me. I considered added a span within the header but that feels like too much work.

I updated the styling of comments individual posts. I actually rolled this out while ago but haven’t written about it yet.

Background history (feel free to skip)

Every once in a while, I get a response to one of my posts on Micro.blog. The Micro.blog service manages the comments for me and allows me to include them by adding conversation.js to the theme.

The first iterations of the Labarum theme would have the comments of a post show up on the index page. This was nice when I had a couple comments, but I had a few posts that had a dozen replies as part of a conversation.

I decided that if I have new people coming to an index or category list, they would be better served to see what I’m writing about first and then see the comments when they are looking at the individual post.

I moved the comments to load in single.html and was ok with them being indented a little bit to denote that they were comments.

You can find an example of a post with a reply in this post about how I lost my journal.

Promoting the comments

After living with the change for a couple of months, I’ve changed my mind about this design and want the comments to stand out as much as the article. The first step was to change margin to margin-top in the CSS rule for the comment.

The conversation.js places the structure like the following into the final rendering of the webpage

<div class="microblog_conversation">
	<div class="microblog_post">
		<div class="microblog_user">
			<img class="microblog_avatar" src="https://avatars.micro.blog/avatars/Number/Number.jpg" width="20" height="20" style="max-width: 20px;">
			<span class="microblog_fullname">Some User</span>		
		</div>
		<div class="microblog_text">
			<p> Some Text </p>
		</div>
		<div class="microblog_time">
			<a href="https://micro.blog/UserName/UniqueIDNumber">Date</a>
		</div>
	</div>
</div>

The name and numbers have been changed to protect the guilty.

Next, we have to add more styling for the avatar picture. It’s hardcoded to be 20 with no units and a max-width but thankfully, it has a class that we can add rules to.

.microblog_avatar {
/*     border-radius: .5rem; */
}

I had a stub for this in the style.css but only had a comment there for future/present me to fix. Thanks for nothing past me. I then did a search and past me actually defined this rule twice!

.microblog_avatar {
	display: inline;
	margin-left: inherit;
}

I’m letting you, the reader, know this because I’m going to invest some time into learning how to clean up the CSS and to show that pobody’s nerfect.

The last comment of this post

After identifying the different components, I played around with the idea of making it looks similar to the way I have the author information at the end of the page. I decided not to at this point in time to focus on the some of the other aspects of the site.

I’m at the point where I’m looking at contrived examples and edge cases where my theme has issues. I don’t write like this but there might be someone who does. In the above picture, I see to problems the first is that the horizontal rule doesn’t really match up with the colors of the site. The second more egregious is that the line is ducking underneath the image.

I used the Inspect feature of the browser to check out what was determining the behavior of the line and saw that the ducking was caused by setting overflow: visible in the normalize.css. This isn’t the first time that I’ve run into an issue with something like this. As the browsers move closer and closer to interoperability, I’ve been questioning whether having normalize.css as part of the theme is important.

Ultimately, I decided to add the following css rule to fix the issues and will have to reevaluate later.

hr {
  color: var(--accent);
  overflow: auto;
} 

Feeding the Robots

I’ve been reevaluating the meta tags I had defined in a previous post. I was happy that it passes the validation tests but I’ve been thinking about how I share my writing.

Original, I truncated the description fields because I read that it’s better for SEO. But why? Search is results are getting worse and worse. It’s ultimately up to whatever social network to take the information and display it. Going forward, I am using the .Summary for the description.

I also added a property that allows you to set your mastodon username if you’re using something other than micro.blog.

I tested putting all the meta comments into one line to reduce repetition as in the following.

<meta property="og:title" itemprop="name" 
  content="MicroPost - &#123;&#123; .Site.Title}}" />

Unfortunately, the W3 validator marks it as invalid. I switch it to having multiple lines that use the same content. I thought about contacting the people who set the criteria for the test, but decided not to at this time.

Tuesday, I released a post with and version bump of Labarum. I then went on and recorded a podcast stating that theme was now “feature complete”.

Well, I was wrong.

I went to the Homebrew Website Club to do some socializing and shared my site with the others. I pride myself on having a site that is pretty accessible. Turns out that the color contrast on my links isn’t good enough. I knew I had tested the basic font, but had misattributed the links not passing the contrast test as an issue with the test itself.

Definitely, I needed an intervention.

So, I spent about an hour going through all the accessibility issues and HTML validation errors. Some of them I can’t change at this time because the code is generated by Hugo/Goldmark. For example, if you have multiple articles on a page (index or list) and they each have a set of footnotes or use a table of contents, you will get an error about them using the same ids for those items.

I’m not going to put the time or energy into that.

Other issues such as a warning about using a trailing slash in the HTML did make me pause for a moment. For example the following from site-head.html:

<meta name="viewport" content="width=device-width, initial-scale=1" />

And

<img 
  src="https://cdn.uploads.micro.blog/661/2023/children-who-are-wrong.jpg" 
  alt="Principal Skinner thinks the children  are wrong"
  title="Self Reflection can be hard."/>

I decided to keep examples like these and ignore the issue for now.

Other accessible issues that I’m not going to put more energy into at this point are the code blocks. Some of the contrast colors for keywords were flagged, and the tabindex="0" can make keyboard navigation more difficult than it needs to be.

The most egregious issue is that I use the colors in the headers and links at the very top of the page. I’ve since changed it in both light and dark mode to be something closer to the basic font color but still within the Nord color scheme.

Since I’m changing the colors, I’ll have to redo the images that I have in the README.md which will probably make me think of other things to change. I’m both dreading and excited by doing that as I’ve learned more about what makes for a good demonstration of Labarum.

What is the next opportunity for Labarum?

My favorite part about this post and this point release is that I’m writing about what I’m not going to do.

Sure, there are places that the theme needs improvement¹, but I have never been more confident and happy with where it is. I looked at the git history and the first commit was February 21st, 2022. That’s a significant amount of time.

I want to spend more time putting stuff on the blog and less time on what it looks like.

There are going to be changes in the future.

But at this point, it will be focused on changes that are related to the content that I’m creating.