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-decorationinspired by 12 Modern CSS One-Line Upgrades to various elements- Turn on debugging by default temporarily
- Modify cursor on
<abbr>- Adjust
line-heightto makesub,sup, andrubyelements less obtrusive- Add
accent-colortorootof CSS
As always, feel free to contact me if you have any questions or comments!