Replace tiny logo with full-width hero banner across all pages by Copilot · Pull Request #916 · Hack23/riksdagsmonitor

Copilot · 2026-03-07T12:40:16Z

The hero section displayed a tiny 80-120px logo above the full-width banner image — redundant since the banner already contains the Riksdagsmonitor branding. Dashboard language files (13), the news index template, and news article pages were also missed in the initial cleanup.

Changes

Remove .hero-logo-link from all 14 main index files + dashboard — banner image IS the branding
Update 13 dashboard language files — replace old site-logo header with hero-banner + hero-header-text + page-nav pattern matching dashboard/index.html
Update news index template — swap riksdagsmonitornews-logo.webp (100×100) for riksdagsmonitornews-banner.webp (1536×1024)
Update article template + all 1022 existing articles — replace tiny article-site-logo with full-width riksdagsmonitornews-banner.webp hero banner
Smooth banner height scaling — single clamp(130px, 28vw, 380px) replaces 3 breakpoint-specific clamps that caused layout jumps at 768px and 480px
Remove .hero-logo-link CSS — dead code cleanup

Before (dashboard language file):

<a href="../index_sv.html">
  <img src="../images/riksdagsmonitor-logo.webp" class="site-logo" width="120" height="120">
</a>
<h1>CIA Underrättelsepanel</h1>

After:

<div class="hero-banner">
  <img src="../images/riksdagsmonitor-banner.webp" alt="" class="hero-banner-bg" width="1536" height="1024">
</div>
<div class="hero-header-text">
  <h1>Riksdagsmonitor Underrättelsepanel</h1>
  <p class="tagline">...</p>
</div>

Main page

Desktop	Dark mode	Mobile

Dashboard (Swedish) / News index / Article page

Dashboard	News	Article

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

… logo sizing and text readability - Increase backdrop-filter blur from 1px to 6px to obscure baked-in banner text - Increase overlay gradient opacity (light: 0.45-0.72, dark: 0.55-0.82) - Increase site-logo max size from 80-140px to 100-160px with responsive breakpoints - Add responsive logo sizing (80px on mobile, 100px on tablet) - Add light-theme text-shadow overrides for hero banner h1 and tagline - Improve dark mode text shadows for better readability - Fix mobile content overflow by constraining logo height at smaller viewports - Increase gap from xs to sm for better spacing between hero elements Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

…tle below banner - Remove hero-banner-overlay: no more text placed over the banner image - Move logo above banner in its own .hero-logo-link container - Move h1 and tagline below banner in new .hero-header-text container - Banner image now displays clean without any overlay or blur - Update all 14 language index files + dashboard/index.html - Replace overlay CSS with clean layout CSS for logo, banner, and text sections - Add responsive breakpoints for new layout (480px, 768px) - Reduce banner height since it no longer needs to contain text - All 2682 tests pass, HTMLhint validation clean Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

- Remove .hero-logo-link from all 14 language index files + dashboard - Remove .hero-logo-link CSS (no longer needed) - Increase banner height from clamp(180px,28vw,300px) to clamp(220px,32vw,380px) - Banner displays the full Riksdagsmonitor branding prominently - h1 + tagline remain below banner for SEO/accessibility - HTMLhint 0 errors, 2682 tests pass Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-07T13:20:24Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

…template - Replace tiny site-logo with full hero-banner in all 13 dashboard language files - Update news index template to use riksdagsmonitornews-banner.webp - Add localized page-nav (Home/News links) to all dashboard pages - HTMLhint 0 errors (1314 files), all 2682 tests pass Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

github-actions · 2026-03-07T14:02:26Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Copilot

Pull request overview

This PR standardizes the site’s hero area by removing the redundant small logo and relying on the full-width banner image as the primary branding element, applying the same hero/banner + title pattern across main index pages, dashboard language variants, and the news index template.

Changes:

Refactors hero markup across main index*.html and dashboard/index*.html files to remove the overlay/logo block and place the title/tagline below the banner.
Updates the news index generator template to use the full-width riksdagsmonitornews-banner.webp hero banner instead of the small news logo.
Adjusts styles.css hero banner sizing and removes overlay-related CSS; adds more responsive .site-logo sizing rules.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
styles.css	Updates hero banner sizing and switches styling from overlay-based hero text to below-banner `.hero-header-text`; adjusts `.site-logo` responsiveness.
scripts/generate-news-indexes/template.ts	Updates generated news index header to use a hero banner + below-banner title block.
index.html	Removes hero overlay/logo and moves title/tagline into `.hero-header-text` below the banner.
index_ar.html	Same hero refactor as `index.html` for Arabic homepage.
index_da.html	Same hero refactor as `index.html` for Danish homepage.
index_de.html	Same hero refactor as `index.html` for German homepage.
index_es.html	Same hero refactor as `index.html` for Spanish homepage.
index_fi.html	Same hero refactor as `index.html` for Finnish homepage.
index_fr.html	Same hero refactor as `index.html` for French homepage.
index_he.html	Same hero refactor as `index.html` for Hebrew homepage.
index_ja.html	Same hero refactor as `index.html` for Japanese homepage.
index_ko.html	Same hero refactor as `index.html` for Korean homepage.
index_nl.html	Same hero refactor as `index.html` for Dutch homepage.
index_no.html	Same hero refactor as `index.html` for Norwegian homepage.
index_sv.html	Same hero refactor as `index.html` for Swedish homepage.
index_zh.html	Same hero refactor as `index.html` for Chinese homepage.
dashboard/index.html	Removes hero overlay/logo and places dashboard title/tagline below the banner.
dashboard/index_ar.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_da.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_de.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_es.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_fi.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_fr.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_he.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_ja.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_ko.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_nl.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_no.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_sv.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
dashboard/index_zh.html	Replaces old header logo/title block with hero banner + below-banner title + page nav.
.gitignore	Ignores before/after screenshot artifacts and a news article check image.

Copilot

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Copilot · 2026-03-07T15:00:31Z

 @media (max-width: 768px) {
  .hero-banner {
-    height: clamp(200px, 50vw, 300px);
+    height: clamp(160px, 35vw, 260px);
  }
-  .hero-banner-overlay {
-    padding: var(--spacing-sm);
+  .hero-header-text {
+    padding: var(--spacing-sm) var(--spacing-sm) 0;
  }
 }

 @media (max-width: 480px) {
  .hero-banner {
-    height: clamp(180px, 55vw, 260px);
+    height: clamp(130px, 40vw, 200px);
+  }


The hero banner height values jump up at the responsive breakpoints (e.g., at 768px and 480px wide the max-width media queries switch to a larger vw factor / clamp range). This can cause noticeable layout shifts when resizing or rotating devices. Consider adjusting the clamp ranges so height changes smoothly/monotonically across breakpoints (or rely on a single clamp without breakpoint overrides).

Copilot · 2026-03-07T15:00:32Z

+      <!-- Hero Banner -->
+      <div class="hero-banner">
+        <img src="../images/riksdagsmonitornews-banner.webp" alt="" class="hero-banner-bg" width="1536" height="1024" loading="eager" aria-hidden="true">
+      </div>
+      <!-- Hero Title -->
+      <div class="hero-header-text">
+        <h1>${escapeHtml(lang.title)}</h1>
+        <p class="subtitle">${lang.subtitle}</p>
+      </div>


This updates the news index header to use the hero banner, but the generated news article pages (and scripts/article-template/template.ts) still reference riksdagsmonitornews-logo.webp / .article-site-logo. If the PR goal is “full-width hero banner across all pages”, consider updating the article template + regenerating articles as well, or adjust the PR title/description to clarify that only the news index pages were updated.

pethers · 2026-03-07T15:08:54Z

@copilot apply changes based on the comments in this thread

- Replace 3 breakpoint-specific hero-banner height clamps with single smooth clamp(130px, 28vw, 380px) to eliminate layout jumps at 768px and 480px breakpoints - Update article template to use riksdagsmonitornews-banner.webp hero banner instead of tiny 100x100 logo - Update all 1022 existing news article files to use hero banner - HTMLhint 0 errors, all 2682 tests pass Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Copilot · 2026-03-07T15:17:30Z

@copilot apply changes based on the comments in this thread

Applied both review comments in commit 4ee6ded:

Breakpoint jumps fixed — replaced 3 breakpoint-specific clamp() values with a single smooth clamp(130px, 28vw, 380px) that scales monotonically across all viewports. Text size breakpoints (768px/480px) are kept but the banner height no longer jumps.
Article template + all 1022 existing articles updated — swapped riksdagsmonitornews-logo.webp (100×100) for riksdagsmonitornews-banner.webp (1536×1024) hero banner. Zero article-site-logo references remain.

Copilot

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

github-actions · 2026-03-07T15:42:07Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Signed-off-by: James Pether Sörling <pethers@users.noreply.github.com>

Copilot

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

github-actions · 2026-03-07T23:25:16Z

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

Initial plan

1cb110d

Copilot AI assigned Copilot and pethers Mar 7, 2026

Copilot started work on behalf of pethers March 7, 2026 12:40 View session

Copilot AI and others added 4 commits March 7, 2026 12:44

Initial analysis of hero banner/logo text overlap issues

4851952

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Remove screenshot artifacts, update gitignore

619a564

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Analyse and improve UI/UX for banners and logos~~ Fix hero banner: remove text overlay, place logo above and title below banner Mar 7, 2026

Copilot finished work on behalf of pethers March 7, 2026 12:58

Copilot started work on behalf of pethers March 7, 2026 13:09 View session

Copilot AI changed the title ~~Fix hero banner: remove text overlay, place logo above and title below banner~~ Remove redundant logo from hero banner — banner image IS the branding Mar 7, 2026

Copilot finished work on behalf of pethers March 7, 2026 13:17

github-actions Bot added dashboard Interactive dashboards (Chart.js/D3.js) html-css HTML/CSS changes i18n Internationalization/localization translation Translation updates rtl RTL language support (Arabic, Hebrew) size-l Large change (250-1000 lines) labels Mar 7, 2026

Copilot started work on behalf of pethers March 7, 2026 13:21 View session

Copilot AI changed the title ~~Remove redundant logo from hero banner — banner image IS the branding~~ Replace tiny logo with full-width hero banner across all pages Mar 7, 2026

Copilot finished work on behalf of pethers March 7, 2026 13:32

pethers requested a review from Copilot March 7, 2026 14:01

github-actions Bot added the refactor Code refactoring label Mar 7, 2026

Copilot started reviewing on behalf of pethers March 7, 2026 14:04 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

pethers requested a review from Copilot March 7, 2026 14:55

Copilot started reviewing on behalf of pethers March 7, 2026 14:56 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

Copilot started work on behalf of pethers March 7, 2026 15:09 View session

Copilot finished work on behalf of pethers March 7, 2026 15:18

pethers requested a review from Copilot March 7, 2026 15:41

Copilot AI reviewed Mar 7, 2026

github-actions Bot added news News articles and content generation size-xl Extra large change (> 1000 lines) and removed size-xl Extra large change (> 1000 lines) labels Mar 7, 2026

Merge branch 'main' into copilot/analyse-improve-ui-ux

d6cfdcc

Signed-off-by: James Pether Sörling <pethers@users.noreply.github.com>

pethers requested a review from Copilot March 7, 2026 23:24

Copilot AI reviewed Mar 7, 2026

pethers marked this pull request as ready for review March 7, 2026 23:36

pethers approved these changes Mar 7, 2026

View reviewed changes

pethers merged commit 8294383 into main Mar 7, 2026
26 checks passed

pethers deleted the copilot/analyse-improve-ui-ux branch March 7, 2026 23:37

Uh oh!

Uh oh!

Conversation

Copilot AI commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Main page

Dashboard (Swedish) / News index / Article page

Uh oh!

github-actions Bot commented Mar 7, 2026

🔍 Lighthouse Performance Audit

Uh oh!

github-actions Bot commented Mar 7, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

pethers commented Mar 7, 2026

Uh oh!

Copilot AI commented Mar 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 7, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 7, 2026

🔍 Lighthouse Performance Audit

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 7, 2026 •

edited

Loading