2022-05-02

Plenty of clean-up around here!

  • Simplified tag code to use a single partial.
    • Was previously duplicating code in article-summary.html (used for listing pages), post-content.html (used for individual posts) and project.html (used for individual projects).
    • Article summaries were using a different location in for loop call than the other two.
    • The individual project page does not use an additional class selector used on the other two.
    • Streamlined to a single tags.html partial using a variable to set the location in the for loop.
    • The location is set using Nunjucks set in the template, allowing all instances to use the same code with different locations.
    • Added conditional class selectors via if statement based on whether or not /projects/ is present in the page’s url (Note: made a small update to simplify and remove “else”).
<!-- tags.html -->
<span class="visually-hidden">A list of tags for this post.</span>
<ul class="tag-list{% if not '/projects/' in page.url %} tag-list-summary{% endif %}" role="list">
{% for tag in tagLocation %}
<li>
<a href="/tag/{{ tag | slug }}/">
<span role="presentation">#</span>{{ tag | replace(' ', '-') | lower }}
</a>
</li>
{% endfor %}
</ul>

<!-- In article-summary.html -->
{% set tagLocation = item.data.tags %}

<!-- In post-content.html and project.html -->
{% set tagLocation = tags %}
  • Reworked the homepage hero to be less micromanage-y and over-coded.
    • The original layout used a grid to set the two columns (image and text), but had a flex fallback. In hindsight the grid allowed for more control but it was not needed to get roughly the same effect.
    • Removed the grid and enhanced the flex layout.
    • Removed some of the pixel-futzing code and used existing utilities (e.g., .full-bleed).
    • Drastically reduced use of media queries for things that could be handled with clamp() and other more resilient approaches.
    • Did keep one media query (resizing the image) and added a new one (centering the text) because I couldn’t figure out how to handle them otherwise, but I’m OK with that for now.
  • Other stuff…
    • Did a bit of clean-up in Projects, removing the need for class selectors in the hero.
    • A variety of little template tweaks to support some of the CSS changes.
    • Added clamp() to the menu font-size to make better use of space on smaller screens. Tricky to balance good space with tap target sizing, legibility and layout. Think the update manages all the concerns across the wide variety of devices and screen sizes, at least it looks that way using Sizzy!

Hoping to continue with some rearchitecting and code clean-up without succumbing to a full-on redesign. Wish me luck!