https://lhero.org/portfolio/lh-blockerville/ Helping Organisations get organised! Mon, 12 Oct 2026 15:56:17 +0000 hourly 1 https://lhero.org/portfolio/lh-blockerville/#comment-1537245 Mon, 12 Oct 2026 15:56:17 +0000 https://lhero.org/?post_type=lh-portfolio&p=148392#comment-1537245 Accessibility and performance fixes from a Lighthouse audit. Every template now wraps its content in a main element (the main landmark), keeping the site-content id the skip link targets. The site description under the title is a paragraph instead of an h3, so headings no longer skip a level. The mobile menu button has a screen-reader label and both header toggles report whether they are open (aria-expanded). On post cards the featured image link, which duplicates the title link, is hidden from screen readers and the tab order; on image-format posts, which have no title link, it is labelled with the post title. Post card images declare their display width (sizes), so browsers download an image no larger than the card. Text links use a darker teal, #0D7F6C (4.9:1 on white), instead of the accent #13C4A5 (2.2:1); links in the dark footer keep the accent, and footer and credits text is lightened from #767676 to #a0a0a0 to meet contrast on the dark backgrounds. The theme no longer needs jQuery: assets/js/global.js is rewritten in plain JavaScript and loads deferred in the footer, so it no longer blocks rendering. FlexSlider, a jQuery plugin, now loads only on pages that show a gallery post.

]]> https://lhero.org/portfolio/lh-blockerville/#comment-1537234 Mon, 12 Oct 2026 12:08:17 +0000 https://lhero.org/?post_type=lh-portfolio&p=148392#comment-1537234 Restores the mosaic layout of posts on the blog, archive and search pages, lost in the move to block templates. The posts grid was set on the wrapper around the Query block rather than on its post list, so posts stacked in a single column. The grid now sits on the post list: three columns, two below 1040px and one below 600px, with a 30px gap. Browsers with native CSS masonry (display: grid-lanes, currently Safari 26.4 and later) lay the posts out as a mosaic natively. Elsewhere a new small script, assets/js/mosaic.js (no jQuery, loaded deferred on listing pages only), packs each post up under the one above it, keeping newest posts running left to right, and re-packs as images load or the window resizes. Without JavaScript the posts show as a plain grid. Printed listing pages show the posts one after another.

]]>