v2.0.1: Website Visual Redesign

Complete visual redesign of gablvm.org inspired by the tradition of illuminated Islamic manuscripts, delivered as release v2.0.1. The site moved from a stock Olivero template look to a warm ivory background with deep forest green and antique gold accents, Fraunces serif headings throughout, and an editorial layout style across every public page. The release was shipped in four phases on 2026-04-10: initial design deployment, polish sweep to fix issues found during the page-by-page review, screen reader accessibility fixes after VoiceOver testing surfaced duplicate-announcement bugs from CSS pseudo-element content, and a desktop layout fix after testing on wide viewports revealed an empty social bar region stealing 90 pixels of space. Throughout the release the site maintained its zero WCAG 2.2 AA violation record, and every change was verified against AAA contrast thresholds before shipping. The eu-cookie-compliance banner was also restyled to match the new aesthetic. No user-facing downtime during the change.

• Posted: Apr 10, 2026, 18:00 UTC
• Completed: Apr 10, 2026, 22:30 UTC
• Duration: 4h 30m

Timeline

1. completed

   22:30 UTC

   Release complete. Verified every public page on both desktop at 1920 and 1440 and mobile at 375 pixels wide. All ten key surfaces (homepage, blog listing, blog article, Quran Player, Prayer Times, Islamic Calendar, Qibla Finder, Events, Resources, About, Programs and Services) render cleanly at every viewport. No content overflow, no layout shifts, no duplicate headings, no mismatched eyebrow labels, no broken tables on mobile. Fraunces and Inter both loading correctly. Gold accents and star ornaments consistent across every page. Dark green footer with gold hairlines on every page. Zero WCAG 2.2 AA regressions. Focus rings replaced with bright gold with ivory halos visible on every background. Current prayer and today date use both color and star glyph (never color alone). All motion disabled under prefers reduced motion. Caches purged at Drupal and Cloudflare. Details in the changelog under v2.0.1.

2. in progress

   22:00 UTC

   Phase 4: Desktop layout fixes. A user reported that the desktop view at wide viewport widths looked broken, with the cookie banner rendering as a narrow vertical strip and the page content squished into the left half of the screen. Investigation revealed three stacked bugs. First, Olivero ships its page wrapper element with a max width of 1570 pixels but no auto margin, which left aligned the whole site on viewports wider than 1570 pixels. Second, an empty aside element for a disabled social media region was still being rendered as a flex sibling of the main content, stealing 90 pixels of width on the left and pushing the content off center. Third, the cookie compliance popup did not have explicit pinning to the viewport edges, so on wide screens it inherited a 600 pixel width constraint from the Drupal module default and rendered as a narrow box. All three fixed by overriding the page wrapper to full width, hiding the empty social bar aside, and explicitly pinning the cookie banner to the full viewport width. Verified with precise measurements at 1920 by 1080: main content centered at x 420 width 1080 with equal 420 pixel gaps, hero section and cookie banner both at x 0 width 1920.

3. in progress

   21:30 UTC

   Phase 3: Screen reader accessibility fixes. During VoiceOver testing in linear swipe mode, a blind user reported that small caps eyebrow labels (our mission, what we do, faith, tools) were being announced twice, because they were implemented as CSS pseudo element content on the same h2 elements as the real headings. VoiceOver headings rotor navigation hid the duplication, but linear reading order exposed it. The eight point star glyphs used as section dividers were also being announced as "black four pointed star" in the middle of content flow, and the Roman numerals on the purpose cards were being announced before each card title. Fixed by applying the CSS Generated Content alternative text syntax content value slash empty string to every decorative pseudo element, which silences them in the accessibility tree while keeping them visible to sighted users. The full bismillah text (In the name of Allah, the Most Gracious, the Most Merciful) was also added and left readable because it is meaningful content, not decoration. The CSS eyebrow rules were additionally scoped to homepage only so they do not show mismatched labels above unrelated headings on the About and Programs and Services pages. Every decorative pseudo element on the site now skips screen readers.

4. in progress

   20:00 UTC

   Phase 2: Polish sweep across every public page. Found and fixed five issues: the magazine drop cap was leaking onto blog teaser cards in the listing view, the Events page table was still using the old dark green styling from the previous module CSS, the Resources list was also still using the old dark green card treatment, the About and Programs and Services pages were rendering duplicate titles because their node bodies contained their own hero sections with h2 tags matching the page title block above, and the Drupal CSS aggregator was serving stale aggregates that did not include the latest edits. Resolved the stale aggregate issue by bumping the theme library version to force filename regeneration. All five issues fixed. Every page now renders cleanly on desktop.

5. in progress

   18:30 UTC

   Phase 1: Visual redesign deployment. Background shifts from white to warm ivory. Fraunces serif loaded alongside Inter for all headings site-wide, with Inter kept for body text because it is the most accessible sans-serif for low vision users. Homepage rebuilt as alternating full-bleed bands: deep green hero with bismillah gold eyebrow, numbered editorial What We Do section with Roman numeral entries, parchment Faith section, Accessible Tools list, and a closing Dua band. Blog listing converted to a two column editorial grid with gold hairlines. Article detail pages get a magazine style reading layout with a gold drop cap on the first paragraph. The Quran Player, Prayer Times, Islamic Calendar, and Qibla Finder pages all restyled with a unified ivory surface, deep green top border with a gold hairline, and serif headings. Footer rebuilt as a deep green closing band with gold hairlines and a star ornament. Initial deployment complete.

Permalink: /incident/45