Mandaris

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.

Texture Healing is a novel technique that evens out the density of monospaced type, bringing it closer to how proportional type has looked for centuries. Texture healing preserves the monospace grid, and works in most editors without needing new software or editor plugins.

Currently trying this font out with the Krypton variant. It's fun to read and see new fonts.

Link: 📺 The Curse (2023)

Overview

An alleged curse disturbs the relationship of a newly married couple as they try to conceive a child while co-starring on their problematic new HGTV show.

One word: Awkward.

I only saw the pilot and it was one of the most awkward things I’ve ever seen on tv. It’s supposed to be that way… I think. 126% not for kids. I don’t know if I’ll come back to see the other episodes because I don’t have Show Time, but it was intriguing enough that I did listen to a podcast about the second episode in order to find out what happens to the “cherry tomato boys”.

Here is a link to the official trailer for The Curse

I saw this one with my wife. We both love Mia Mia Rudolf and Melissa Mckartney. We thought it was in the same vein as Bridesmaids and we were rewarded with big laughs.

I saw this one with my wife. We both love Maya Rudolph and Melissa McCarthey. We thought it was in the same vein as Bridesmaids and we were rewarded with big laughs.

Update: Apparently, we don’t love them enough to get their names spelled correctly.

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.