Skip to content

plan.md

Latest commit

 

History

History
546 lines (444 loc) · 39.1 KB

plan.md

File metadata and controls

546 lines (444 loc) · 39.1 KB

LRMD WordPress Theme – Implementation Plan

Terminology Note

The deliverable is a WordPress theme, not a plugin. All references to "plugin" in session notes should be read as "theme." If a companion plugin is needed for extended functionality (e.g. ARDF results shortcode, QSL bureau form), it will be a separate deliverable scoped after the theme is complete.

Source Site Analysis

Development target: Clean WordPress 6.9.4 installation. The existing lrmd.lt site is used as a design and content reference only — no data is exported, migrated, or imported from it.
Current theme (reference only): lrmdclassic (custom WordPress theme)
Target audience: Aged males, average IT literacy – prioritize large text, clear navigation, no ambiguity

Actual Current Layout (from style.css)

┌──────────────────────────────────────────────────┐
│  [900 px centered #main]                         │
│  ┌────────────────────────────────────────────┐  │
│  │  #header (100 px tall)                     │  │
│  │  logo (abs, left:80px top:32px)            │  │
│  │  lang selector (abs, right)                │  │
│  └────────────────────────────────────────────┘  │
│  ┌──────────────┐  ┌──────────────────────────┐  │
│  │ .sidebar     │  │ .mainContent (635 px)    │  │
│  │ (265 px)     │  │                          │  │
│  │ ─────────    │  │  article / page content  │  │
│  │ .nav         │  │                          │  │
│  │ (vertical,   │  │                          │  │
│  │  231px/item) │  │                          │  │
│  │ ─────────    │  │                          │  │
│  │ .navi        │  │                          │  │
│  │ (section     │  │                          │  │
│  │  submenu,    │  │                          │  │
│  │  170px/item) │  │                          │  │
│  └──────────────┘  └──────────────────────────┘  │
│  ┌────────────────────────────────────────────┐  │
│  │  #footer (40 px)                           │  │
│  └────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────┘

Key insight: both menus are VERTICAL, stacked in the left sidebar — not horizontal bars. The new theme must decide whether to keep that or convert to horizontal top navigation.

Old Site Color Palette (from style.css, for reference)

The old theme used 18+ colour values — purple-indigo nav chrome, multiple red/orange/pink accent colours, and a blue table header that clashes with the logo. These are documented here for migration reference only; the new theme does not carry them forward.

Notable values that informed the new palette:

  • Old link gold: #C09700 → new gold is brighter, taken directly from logo
  • Old nav indigo: #36268D → replaced; logo blue is a cleaner royal blue, less purple
  • Old body text: #141010 → retained unchanged
  • Old form surface: #F5F0E7 → retained as warm page background
  • Old muted text: #706b6b → retained unchanged

New Theme Palette (logo-derived, 6 tokens)

The logo contains exactly two colours: a royal blue diamond and a bright gold outline/lettering. The theme palette is built from these two tones plus three neutrals.

Token Hex Source Usage
blue #1B40A8 Logo fill (royal blue) Nav bars, heading bands, table headers, links on light backgrounds
gold #FFB800 Logo border & letters Hover/active nav, CTA buttons, accent borders, text on dark backgrounds
navy #0F2660 Logo fill darkened Footer, dark heading bands, deep backgrounds
text #141010 Old site, retained All body text on light backgrounds
surface #d8d2c6 example/option-a Page background (warm grey)
muted #706b6b Old site, retained Meta text on light backgrounds only — never on navy/blue
white #ffffff — Text/icons on blue backgrounds
light-blue #c8dcf8 example/option-a Nav link text on blue header background
pale-blue #90b0d8 example/option-a Secondary text / section nav links on navy
footer-text #6080a8 example/option-a Copyright / meta text on navy footer

Typography (from style.css)

  • Body: Arial / Helvetica, 0.875 em (~14 px), line-height 1.25
  • Navigation: Verdana, 18 px (primary), 14 px (section submenu)
  • h1/h2: 24 px, white, rendered over a 468 × 51 px image banner (title-bg.png)
  • h4: 18 px, #d30d33
  • Footer: 14 px

Navigation Structure (two-menu system)

  1. Primary menu (.nav) – vertical list in left sidebar, 18 px Verdana, white text on nav-bg1.png, items 231 × 25 px: Naujienos · Kas mes esame? · Valdyba · QSL biuras · Archyvas · Sąskrydžiai · Jaunimas · Nuorodos · TB trafikai · LY QTC · Silent Key
  2. Section submenu (.navi) – vertical list below .nav, 14 px Verdana, white on nav-bg4.png, items 170 × 20 px, context-sensitive per section:
    • ARDF: Apie ARDF · Varžybos · Treniruotės · Įranga · Klubai · ARDF pasaulyje
    • UTB: FD · LY UTB čempionatas · IARU R1 · Švyturiai · Bangų sklidimas · MS · Palydovai
    • Diplomai: Vytis · Baltic Way · WAL · LY Trophy · Švyturių diplomas · Radijo klubas Švyturys · Biržų diplomas · LPT
    • TB: DXCC · TB trafikai · LY TB čempionatai · PC programos

Active Plugins (discovered via page source + REST API)

Plugin Evidence Impact on theme
Polylang Confirmed by site owner HIGH – all menus, strings, and language switcher must integrate with Polylang; EN content is a subset of LT
GDPR Cookie Compliance Script/image at wp-content/plugins/gdpr-cookie-compliance/ LOW – plugin injects its own UI; theme must not override its z-index or positioning
Redux Framework REST namespace redux/descriptors/v1 exposed MEDIUM – currently used for theme/plugin options; new FSE theme does not use Redux; verify no active plugin depends on it
Block Editor REST namespace wp-block-editor/v1 POSITIVE – Gutenberg is active; FSE fully supported on confirmed WP 6.9.4
WP oEmbed oembed/1.0 namespace LOW – standard; embedded media (YouTube, Google Forms) must render inside content width

WordPress version: 6.9.4 (confirmed by site owner). PHP: 8.2 (confirmed). FSE and theme.json v2 are fully supported.

Site Assets Confirmed

Asset Location Details
logo.png img/logo.png 110 × 215 px, RGBA PNG, portrait orientation (diamond shape)
body-bg.gif img/body-bg.gif Downloaded; not used in new theme
style.css style.css Full old theme CSS, analysed

Logo note: The logo is 215 px tall × 110 px wide (portrait). At a 68 px header height, the logo renders at ~34 px wide. Header height must be increased to 80 px minimum to give the diamond shape room to breathe without pixelation.

Site Sections (from sitemap)

Section Sub-pages
News / Naujienos Numbered posts + named announcements
ARDF 6 sub-pages + competition archives by year
UTB (UHF/Microwave) 8 sub-pages
TB (HF / Contests) 4 sub-pages
Diplomai 9 diploma programs
Sąskrydžiai Annual gatherings (2021–2026)
Valdyba / Organisation Board, protocols, secretary, treasurer
Community Clubs, Youth, Silent Key, Supporters, Repeaters
Resources Links, Privacy, Logos, Payments, Application

Theme Design – Horizontal Nav Block Theme

Philosophy: Convert the vertical sidebar navigation to a sticky horizontal top bar — the layout pattern every modern reader expects — while keeping the two-menu concept intact as primary + section nav strips. Built as a WordPress FSE block theme.

Layout

┌──────────────────────────────────────────────────────┐
│  LOGO  [Primary Nav: 11 items horizontal]  [Search]  │ ← sticky (block template part)
├──────────────────────────────────────────────────────┤
│  [Section submenu – 6–9 items, shown inside sections] │ ← second nav strip, indigo bg
├──────────────────────────────────────────────────────┤
│                                                      │
│   Main content  (max 960 px centered)                │
│                                                      │
├──────────────────────────────────────────────────────┤
│  Footer: contacts · privacy · cookie notice          │
└──────────────────────────────────────────────────────┘
Mobile (≤768 px): primary nav collapses to hamburger (native WP Navigation block)

Key Design Decisions

  • FSE block theme – theme.json is single source of truth for all colours, type scale, and spacing; no CSS edits needed for branding changes
  • Color palette in theme.json (6 tokens, logo-derived):
    • blue → #1B40A8 (primary — nav bars, heading bands, table headers, body links)
    • gold → #FFB800 (accent — hover, CTA buttons, active underlines)
    • navy → #0F2660 (dark — footer, deep heading bands)
    • text → #141010 (body copy)
    • surface → #d8d2c6 (page background, warm grey)
    • muted → #706b6b (meta, captions)
  • Two-menu system via two Navigation blocks:
    1. Primary nav: Navigation block in sticky header.html template part, horizontal, white text on blue (#1B40A8) background, active item underlined in gold
    2. Section nav: Navigation block in section-nav.html template part, horizontal, white text on navy (#0F2660) background; included only in section-specific page templates
  • Typography scale in theme.json:
    • Body: 16 px / 1.6 line-height / Arial, Helvetica, sans-serif
    • Nav: 16 px / Verdana
    • h1: 26 px / white on navy heading band
    • h2: 20 px / white on navy heading band (lighter variant)
    • h3: 17 px / blue (#1B40A8)
    • h4: 15 px / navy (#0F2660), font-weight normal
    • Small: 13 px
  • Homepage template – Query Loop block: date · title (linked) · excerpt · "Skaityti daugiau" link; list layout, no thumbnails
  • Block patterns – annual contest archive row, diploma card, board member card, event announcement, QSL table row
  • No sidebar in default templates; section-index pages can optionally add a right Info column via block editor
  • UI framework – theme may bundle a lightweight CSS utility layer (assets/css/app.css) for utility classes (spacing helpers, responsive grid) not available via theme.json; no external CDN dependency, no React-based framework; keep under 20 KB minified
  • Mobile – Navigation block collapses natively; no custom JS required
  • Accessibility – WCAG AA enforced by theme.json palette; skip-to-content link; focus rings on all interactive elements

Visual Design Standards (reference: examples/option-a/index.html)

These rules must be respected in all templates and CSS additions. The example file is the authoritative visual reference.

Color on dark backgrounds — critical contrast rules:

  • Text on blue (#1B40A8): use light-blue (#c8dcf8) for body copy, white for site title, gold (#FFB800) for hover/active states
  • Text on navy (#0F2660): use pale-blue (#90b0d8) for secondary text, footer-text (#6080a8) for footer copy, gold for links
  • Never use muted (#706b6b) on navy or blue backgrounds — contrast ratio fails WCAG AA

Layout:

  • Content column: max-width: 1100px, margin-inline: auto, padding-inline: 24px (min)
  • Header inner content constrained to 1100px via padding-inline: max(24px, calc((100% - 1100px) / 2))
  • Page body background: #d8d2c6 (surface token)

Header:

  • Sticky, blue (#1B40A8) background, box-shadow 0 2px 10px rgba(0,0,0,.3)
  • Nav links: #c8dcf8, hover: #FFB800 + no underline
  • Active nav item: #FFB800 + border-bottom: 3px solid #FFB800
  • Mobile: hamburger overlay uses #1B40A8 background

Hero band:

  • Background: linear-gradient(135deg, #1B40A8 0%, #0F2660 60%, #132B70 100%)
  • Headings: white, Verdana; body text: #c8dcf8; meta text: #90b0d8
  • Applied via CSS class .hero-band so the gradient overrides the block's solid navy fallback

Section nav strip:

  • Sticky at top: 80px, navy background
  • Nav links: #90b0d8, hover/active: #FFB800
  • On mobile (≤768px): reverts to static position

Footer:

  • Navy background, border-top: 3px solid #1B40A8
  • Single compact row: copyright left (color #6080a8), nav links right (color #FFB800)
  • Font: Verdana 13px

Typography:

  • Body: Arial 16px / 1.6 line-height
  • Nav, section labels, headings in hero: Verdana
  • Section labels: 11px, uppercase, letter-spacing: 0.1em, blue bottom border

Theme File Structure

Theme slug: lrmd-theme. Complete file tree for the FSE block theme deliverable.

lrmd-theme/
├── style.css                              # Theme header comment only (no design CSS)
├── theme.json                             # Design tokens, global styles, block settings (v2 format)
├── screenshot.png                         # 1200×900 px – generate from index.html example
├── functions.php                          # Menu registration, theme supports, GA tracking, Polylang string setup
│
├── templates/                             # Page templates (FSE – HTML with block markup)
│   ├── index.html                         # Required fallback
│   ├── home.html                          # Front page: hero + Query Loop news list
│   ├── single.html                        # Single post (with right sidebar widget area)
│   ├── page.html                          # Standard static page (with right sidebar)
│   ├── archive.html                       # Post date/category archive
│   ├── 404.html                           # Not found page
│   ├── search.html                        # Search results
│   ├── page-section-ardf.html             # ARDF section – includes section-nav-ardf part
│   ├── page-section-utb.html              # UTB section – includes section-nav-utb part
│   ├── page-section-tb.html               # TB/HF section
│   ├── page-section-diplomai.html         # Diploma programs section
│   └── page-section-saskrydziai.html      # Sąskrydžiai (annual gatherings) section
│
├── parts/                                 # Reusable template parts
│   ├── header.html                        # Sticky header + primary Navigation block
│   ├── footer.html                        # Footer with contact info + footer menu
│   ├── post-meta.html                     # Date · author · category row
│   ├── section-nav-ardf.html              # ARDF section nav (6 items)
│   ├── section-nav-utb.html               # UTB section nav (7 items)
│   ├── section-nav-tb.html                # TB section nav (4 items)
│   ├── section-nav-diplomai.html          # Diplomai nav (9 items)
│   └── section-nav-saskrydziai.html       # Sąskrydžiai nav (years list)
│
├── patterns/                              # Reusable block patterns (PHP for i18n)
│   ├── hero-event.php                     # Full-width event CTA banner
│   ├── news-query-loop.php                # Date-column news list (Query Loop)
│   ├── contest-archive-row.php            # Year-filtered results table
│   ├── diploma-card.php                   # Diploma program card (2-column grid)
│   ├── board-member-row.php               # Board member table row
│   └── event-announcement.php            # Upcoming event box
│
├── assets/
│   ├── img/
│   │   └── logo.png                       # 110×215 px source logo (RGBA PNG)
│   └── css/
│       └── silent-key.css                 # Overrides for Silent Key section (no animations)
│
├── assets/css/
│   └── app.css                            # Optional lightweight utility CSS (theme-owned; PostCSS or plain CSS)
└── languages/
    └── lrmd-theme.pot                     # Translatable strings template (Polylang-compatible)

Menus to register in functions.php

register_nav_menus([
    'primary'              => 'Pagrindinis meniu',
    'section-ardf'         => 'ARDF skyrelio meniu',
    'section-utb'          => 'UTB skyrelio meniu',
    'section-tb'           => 'TB skyrelio meniu',
    'section-diplomai'     => 'Diplomų skyrelio meniu',
    'section-saskrydziai'  => 'Sąskrydžių meniu',
    'footer'               => 'Apatinis meniu',
]);

With Polylang active, per-language menu instances are configured in Polylang → Languages → Menus (not WPML). Each registered location appears in Polylang's menu assignment grid; assign one menu per language per location — 7 locations × 2 languages = 14 menu assignments in WP Admin.

Section Nav Binding — Concrete Mechanism

Problem: FSE templates are HTML; they cannot contain PHP conditionals to decide which section nav to show.

Solution: One page template per section. Each template hardcodes its own section nav template part. The WordPress editor assigns the correct template to each page via the Template dropdown in the sidebar.

Section Template file Part included
ARDF pages page-section-ardf.html parts/section-nav-ardf.html
UTB pages page-section-utb.html parts/section-nav-utb.html
TB pages page-section-tb.html parts/section-nav-tb.html
Diplomai pages page-section-diplomai.html parts/section-nav-diplomai.html
Sąskrydžiai pages page-section-saskrydziai.html parts/section-nav-saskrydziai.html
All other pages page.html (no section nav)

Editor action required once: open each section's index page in WP Admin → Template dropdown → select the correct section template.

Blockers & Mitigations

BLOCKER 1 — WordPress version unconfirmed ⚠️ HIGH ✅ RESOLVED

Confirmed: WordPress 6.9.4. FSE block themes and theme.json v2 are fully supported. No fallback classic theme needed.

BLOCKER 2 — Multilingual integration strategy ⚠️ HIGH ✅ RESOLVED (Polylang)

Confirmed: Site uses Polylang (not WPML). EN content is a reduced subset of LT — not all posts or pages will have an EN translation.

Strategy:

  1. Wrap all PHP-output strings in __( 'string', 'lrmd-theme' ) / _e() — standard WordPress i18n, works with Polylang.
  2. Register theme-specific UI strings with Polylang's API in functions.php: 
    pll_register_string( 'lrmd-theme', 'Read more', 'lrmd-theme' );
  3. Generate languages/lrmd-theme.pot via WP-CLI: wp i18n make-pot . languages/lrmd-theme.pot.
  4. Language switcher in header.html: use a Custom HTML block with <?php pll_the_languages(); ?> rendered via a template tag, or add Polylang's Language Switcher widget to the header sidebar area.
  5. Per-language menus: configure in Polylang → Languages → Menus — assign a menu per language for each of the 7 registered locations.
  6. Pages/posts with no EN translation: Polylang redirects to the LT version by default (configurable in Polylang Settings → URL modifications). No theme action required.
  7. Template parts (header.html, footer.html) are language-agnostic — language-specific content lives in the menu items and post/page content, not in template files.

BLOCKER 3 — Redux Framework ⚠️ MEDIUM ✅ N/A (clean install)

Resolution: Clean WordPress installation starts with no plugins. Redux Framework is not installed. The new theme does not use Redux. If Redux is required by any plugin installed later, it will coexist without conflict — the FSE theme has no dependency on it.

BLOCKER 4 — Logo portrait aspect ratio vs header height ⚠️ MEDIUM

Problem: Logo is 110×215 px (portrait). At the planned 68 px header height, the logo renders at 35 px wide — too narrow for the diamond text (L, R, M, D) to remain legible.

Mitigation:

  • Set header height to 80 px in theme.json (styles.elements.header.spacing).
  • Render logo at 54 px tall × 28 px wide (maintaining aspect ratio).
  • The CSS diamond approximation in the examples must be recalculated to match.
  • Alternatively, display the logo at full height and allow it to overflow the header slightly (negative margin); common for tall logo marks.

BLOCKER 5 — Section nav sticky stacking on mobile ⚠️ MEDIUM

Problem: Two sticky elements (header at top: 0, section nav at top: 80px) consume 120–140 px of screen height on mobile before any content appears. On a 375 px tall phone in landscape mode this is severe.

Mitigation:

  • On mobile (≤ 768 px): section nav scrolls with content (not sticky) — position: relative.
  • Primary header stays sticky; section nav reverts to normal flow.
  • CSS media query in assets/css/silent-key.css and a global style.css supplement.
  • Implement via @media (max-width: 768px) { #section-nav { position: relative; top: auto; } }.

BLOCKER 6 — Silent Key section styling not specified ⚠️ LOW

Problem: Plan says "no hover animations, no colour accents" but provides no concrete CSS rules. Without a spec, implementation will be inconsistent.

Mitigation — concrete Silent Key rules (assets/css/silent-key.css):

/* Applied when body has class .page-template-page-section-silent-key */
.silent-key-content a          { color: #141010; }
.silent-key-content a:hover    { color: #706b6b; text-decoration: underline; }
.silent-key-content *          { transition: none !important; }
.silent-key-content h3         { color: #141010; }  /* override blue */
.silent-key-content .callsign  { color: #706b6b; font-weight: normal; }

Silent Key needs its own page template page-section-silent-key.html (no section nav, no gold accents).

BLOCKER 7 — screenshot.png missing ⚠️ LOW

Problem: WordPress theme directory requires a 1200×900 px screenshot.png. Without it the theme shows a blank card in the admin.

Mitigation: Open examples/option-a/index.html in a browser, resize window to 1200 px wide, take a screenshot, crop to 1200×900 px, save as lrmd-theme/screenshot.png.

BLOCKER 8 — Development environment ⚠️ MEDIUM ✅ RESOLVED

Solution: compose.yml in the repo root fully automates WordPress 6.9.4 + PHP 8.2 + plugin setup via WP-CLI. Run podman-compose up -d. No LocalWP or Docker Desktop needed.

BLOCKER 9 — Content/widget migration ⚠️ MEDIUM ✅ N/A (clean install)

Resolution: Clean installation has no prior widget assignments or classic theme state. Footer contact info, nav links, and all other content areas are authored fresh directly in FSE template parts (parts/footer.html, etc.) and via the Site Editor.

BLOCKER 10 — QSL Bureau page URL ⚠️ LOW ✅ N/A (clean install)

Resolution: On a clean installation, all page slugs are created from scratch. The QSL Bureau page will be created with the slug /qsl-biuras/ (or whatever the site owner decides). Primary nav links to the page by ID — slug does not affect the theme.

Open Questions (require admin access to resolve)

# Question Status
1 What is the exact WordPress version? ✅ 6.9.4 — FSE fully supported
2 What is the server PHP version? ✅ 8.2 — exceeds minimum
3 Is Redux Framework owned by the current theme or a plugin? ✅ N/A — clean install; Redux not present
4 What is the WPML version? ✅ N/A — Polylang is used, not WPML
5 Does the EN language version have full content, or is it minimal/empty? ✅ EN is a subset — not all pages/posts will have EN translations; Polylang handles gracefully
6 Are there custom post types (CPTs) beyond standard posts and pages? ✅ No CPTs — only standard posts and pages; existing templates cover all cases
7 What tracking / analytics scripts are loaded? ✅ Google Analytics — theme will inject GA tracking (see Requirements → Technical)
8 Is there a staging/development environment available? ✅ compose.yml in repo root — podman-compose up -d spins up WP 6.9.4 + PHP 8.2 with plugins pre-installed
9 What is the deployment method? ✅ N/A — theme hosted on public git server; deployment out of scope
10 Are there any shortcodes embedded in page content? ✅ N/A — content authored fresh on clean install; shortcodes used only if deliberately added

Requirements

Functional

  • Cookie consent (GDPR Cookie Compliance plugin) must remain functional — theme must not override its z-index or CSS reset
  • QSL Bureau and Mokejimai pages must be reachable from the primary nav
  • Theme must register no custom rewrite rules — all permalink structures are configured by the site owner in WP Admin → Settings → Permalinks
  • Language switcher (LT / EN) must appear in the header and function via Polylang
  • Pages without an EN translation fall back to LT — Polylang setting, no theme code needed
  • Google Forms / iframes embedded in page content must render within the content column width

Design

  • Silent Key section: transition: none, muted link colours, no gold accents (see Blocker 6 CSS spec)
  • Body font size ≥ 16 px; minimum tap target 44 × 44 px on mobile
  • WCAG AA contrast on all text/background combinations (verified: #1B40A8 on white = 7:1 ✓; #FFB800 on #0F2660 = 4.8:1 ✓; #141010 on #F5F0E7 = 16:1 ✓)

Technical

  • Confirmed WordPress: 6.9.4 / PHP: 8.2
  • theme.json format v2 (fully supported on WP 6.9.4)
  • No page builder dependency
  • Theme may bundle a lightweight CSS utility framework (theme-owned; no external CDN)
  • All PHP strings wrapped in __( 'string', 'lrmd-theme' ) for Polylang compatibility; UI strings additionally registered via pll_register_string()
  • languages/lrmd-theme.pot generated before handoff
  • Google Analytics: inject gtag.js via wp_head hook; GA Measurement ID stored as a define( 'LRMD_GA_ID', '' ) constant in wp-config.php (or via a theme option) — theme outputs the snippet only when the constant is set
  • Child-theme-ready (no hardcoded paths; use get_template_directory_uri())

Image Assets from lrmd.lt

All images are downloaded to img/ folder:

Essential

File Purpose Note
logo.png LRMD logo in header Source of truth for brand colours
body-bg.gif Background logo Page background (tiled)

Not needed (replaced by CSS)

The old image sprites (nav-bg1.png, nav-bg4.png, title-bg.png, background GIFs, box-corner PNGs) are not carried over — the new theme reproduces all visual effects with CSS gradients and borders.

Icons

File Purpose Note
marker2.gif List bullet for .list1 Replace with CSS ::before pseudo-element
line-ver.html Vertical divider (CSS bug – likely .gif) Investigate actual filename on server

Implementation Order

Phases 0–4 are largely complete. Open work and outstanding alignment gaps are tracked in Visual Alignment TODOs below and Remaining Phases at the end.

Phase 0 — Prerequisites (Done except where noted)

  • ✅ WP 6.9.4 / PHP 8.2 confirmed; FSE fully supported.
  • ✅ compose.yml automates WordPress + Polylang + GDPR Cookie Compliance install at http://localhost:8081.
  • ✅ Sample content seeded by compose-scripts/seed-test-data.sh — pages for every primary nav item (with section templates pre-assigned for ARDF/UTB/TB/Diplomai/Sąskrydžiai), 5 sample posts, and Main Menu + Quick Links menus. Idempotent; runs from the setup service.

Phase 1 — Theme scaffold ✅ DONE

  • style.css header, theme.json (6-token palette, typography, content/wide widths, templateParts + customTemplates registry).
  • functions.php (7 nav locations, theme supports, Polylang string registration, GA wp_head hook, breadcrumb shortcode, logo auto-import on activation).
  • templates/index.html, parts/header.html, parts/footer.html.

Phase 2 — Core templates ✅ DONE

templates/home.html, single.html, page.html, archive.html, search.html, 404.html all in place. single.html and section templates now include the [lrmd_breadcrumb] shortcode in the title band.

Phase 3 — Section system ✅ DONE

  • parts/section-nav-{ardf,utb,tb,diplomai,saskrydziai}.html with inline LT items, sticky styling via theme.css.
  • templates/page-section-{ardf,utb,tb,diplomai,saskrydziai}.html — header → section nav → title band (breadcrumb + gold h1) → post content → footer.
  • ⬜ Editor must still assign each section's index page to the corresponding template via the WP Admin Template dropdown (manual, post-content creation).

Phase 4 — Block patterns ✅ DONE

patterns/hero-event.php, news-query-loop.php, contest-archive-row.php, diploma-card.php, board-member-row.php, event-announcement.php.

Visual Alignment TODOs (current theme vs. examples/option-a/)

This is the active TODO list. Each row identifies a concrete divergence between the live theme and the corresponding example file. Already-resolved bugs from prior reviews have been removed.

Global (apply across all templates)

# Item Files Status
G1 Add wp:page-list (or other) fallback inside the primary Navigation block so the header is not empty until a menu is assigned parts/header.html open
G2 Add skip-to-content anchor (<a class="skip-link screen-reader-text" href="#main">Pereiti į turinį</a>) before the header group parts/header.html open
G3 ✅ Language switcher exposed as [lrmd_language_switcher] shortcode (uses pll_the_languages); rendered in header right-side flex group, styled .lrmd-lang to match example functions.php, parts/header.html, assets/css/theme.css done
G4 Override WP-core has-background padding-inline on title bands and footer (zero out so navy bands span full width) assets/css/theme.css open
G5 Verify gold h1 actually renders on localhost:8081 after WP global-styles cache flush (wp transient delete --all) — current report shows dark h1 runtime needs verification

Header (parts/header.html vs. example header)

# Item Status
H1 Render LRMD logo + label + tagline at example sizes (logo 40×48 diamond visual, label 15px Verdana white, tagline 10px light-blue) — current logo block height target 53px is shorter than example 68px open
H2 Primary nav items must underline (3px gold border-bottom) on hover/current and use light-blue (#c8dcf8) idle text — already wired in theme.css; confirm visually once navigation has items open
H3 Logo invisible on desktop / "Request desktop site" mode (mobile mode is fine). Investigation findings, ranked by confidence: ⓐ The previous fix (@media (min-width: 600px) block in theme.css that drops height: 53px !important for min-height: 68px, removes the translateY() stack, clamps img to height: 56px; width: auto) is being served — confirmed via curl /wp-content/themes/lrmd-theme/assets/css/theme.css?ver=1777728643; specificity wins over WP core inline .wp-block-site-logo img { height: auto; max-width: 100% } because mine has !important and an extra .site-header class. ⓑ The logo asset is fine — wp option get site_logo returns 5, body has wp-custom-logo class, the rendered DOM has <img width="54" height="105" src=".../lrmd-logo-1.png" class="custom-logo">, file confirmed 110×215 RGBA. So this is not an import or CSS-not-loading problem. ⓒ Root cause (new finding): theme.css:69 sets .site-header .header-actions { flex-shrink: 0 }. The site-header is flex-wrap: nowrap. On desktop the Navigation block's responsive container becomes display: block; position: relative; width: 100% (WP core CSS at min-width: 600px), so the nav renders all 11 menu items inline — natural width ≈ 880 px, plus the language switcher ≈ 40 px. With header-actions pinned at flex-shrink: 0, the only item that can absorb the overflow is .logo-group (default flex-shrink: 1). At a 980 px desktop-request viewport with 48 px padding the content area is 932 px while the right cluster is ≈ 920 px — leaving ~12 px for the logo-group. The wrapper compresses to near-zero width, the img inside collapses with it (or the diamond is pushed off-screen behind header-actions), and the user sees no logo. On mobile the nav collapses to a hamburger so header-actions is ~50 px, pressure disappears, logo-group stays at natural width — that's why mobile looks correct. ⓓ Secondary contributor: the bundled logo's centre is a blue diamond that colour-matches the #1B40A8 header background, so even partial occlusion / extreme down-scaling makes the gold border the only visible cue and easy to miss. Proposed fix when implementing: (1) add flex-shrink: 0 to .logo-group and let header-actions shrink instead (remove its flex-shrink: 0 or set to 1); (2) at narrower breakpoints (e.g. 600–900 px) reduce nav item padding/font-size or hide the language switcher to relieve the squeeze; (3) optionally clamp the logo image to a larger fixed width (40–48 px) so the diamond pattern stays legible against the blue band. Verification commands that proved the above: podman exec lrmd-wpng_wordpress_1 sh -c 'ls /var/www/html/wp-content/uploads/2026/05/', wp option get site_logo, curl -s http://localhost:8081/ | grep custom-logo, curl -s '...theme.css?ver=...' | grep -n flex-shrink. Applied fix: swapped flex-shrink between the two header children — added flex-shrink: 0 to .site-header .logo-group and replaced flex-shrink: 0 with min-width: 0 on .site-header .header-actions. Logo-group now keeps its natural width while the right cluster (nav + language switcher) absorbs all the overflow pressure on desktop. assets/css/theme.css

Home (templates/home.html vs. examples/option-a/index.html)

# Item Status
F1 Hero band: replace placeholder with patterns/hero-event.php content — eyebrow text, h1 (gold), location meta line, paragraph, dual CTAs (Registruotis / Žiūrėti programą), date badge widget on the right open
F2 News list: switch query-loop item layout from stacked to two-column grid (90px date column + content), with day big (24px Verdana blue) and "Mėn. YYYY" small caps below open
F3 Add "Visos naujienos →" link below the loop (pattern or static block) open
F4 Section label "Paskutinės naujienos" — 11px Verdana uppercase, blue bottom-border 2px (matches .section-label in example) open

Single (templates/single.html vs. single-post.html)

# Item Status
S1 Add right sidebar widget area (260–280px) with "Naujausios žinios" + "Naudingi skyreliai" widgets — example uses .post-layout 1fr / 280px grid open
S2 Style content h2 as a navy gradient strip (linear-gradient(to right, #0F2660 0%, #0F2660 55%, transparent 100%), white, padded, full-bleed within content column) open
S3 Style blockquote with 4px gold left border, italic muted text, light-cream background open
S4 Style content tables: blue <th> row with gold border-bottom, striped tbody (#F3F3EA even), .callsign blue Verdana bold open
S5 Post-meta row inside content: date · author · category icons (📅 ✏️ 📁 or equivalent) — currently only date + category open

Page (templates/page.html vs. page-about.html)

# Item Status
P1 Add right sidebar with member-CTA card (gradient blue/navy, gold heading, white-on-blue paragraph, gold "Tapti nariu" button) and "Greitos nuorodos" widget open
P2 Reusable info-box pattern — cream background, gold left border, blue uppercase title, <dl> with bold blue <dt> open
P3 Reusable content-list style — gold ❯ marker via ::before, bottom-border list separators open
P4 Reusable contact-box pattern — solid blue background, gold heading, light-blue body text, gold links open

Section pages (templates/page-section-*.html vs. archive-ardf.html)

# Item Status
N1 Add a section-nav-title label cell in each parts/section-nav-*.html (e.g. "ARDF", "UTB", "TB", "Diplomai", "Sąskrydžiai") shown left of the inline nav, 10px Verdana uppercase letter-spaced open
N2 Section-intro pattern (gold left-border cream box) for top of each section index open
N3 subsection-grid pattern — 3-column responsive card grid (white card, blue top-border, h3 title link, muted summary) open
N4 year-tabs pattern — horizontal year-filter tabs (active = blue bg / gold text) for archive pages open
N5 Results table styling (extends S4) with td.pos 1/2/3 medal coloring (pos-gold #b8860b, pos-silver #777, pos-bronze #8b4513) open

Footer (parts/footer.html vs. example)

# Item Status
FT1 Confirm copyright text uses footer-text (#6080a8) and footer-links use gold (#FFB800) — both classes are wired; verify after sample menu is assigned open
FT2 Update copyright year to dynamic (<?php echo date('Y'); ?>) instead of hard-coded "2025" open

Remaining Phases

Phase 5 — Polylang + i18n

  • Run wp i18n make-pot . languages/lrmd-theme.pot.
  • Add Polylang language switcher to header (G3 above).
  • Assign menus per language in Polylang → Languages → Menus (7 locations × 2 languages).
  • Verify untranslated pages fall back to LT (Polylang Settings → URL modifications).
  • Test language switch on every template type.

Phase 6 — Silent Key + accessibility

  • templates/page-section-silent-key.html — no gold accents, muted-only links.
  • assets/css/silent-key.css with rules from Blocker 6.
  • axe / WAVE audit on all templates.
  • Verify skip-to-content (G2), focus rings, and 44px tap targets.

Phase 7 — Screenshot

  • Generate 1200×900 screenshot.png from examples/option-a/index.html and place at lrmd-theme/screenshot.png.