Labarum: All the colors in the theme

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!

Categories:

✍️ Reply by email ✴️ Also on Micro.blog 🐘 Reply on Mastodon
An IndieWeb Webring 🕸💍