jgmd icon indicating copy to clipboard operation
jgmd copied to clipboard

Fix missing CSS rules for language flags (Korean, Hebrew, Romanian, Russian, Swedish)

Open Copilot opened this issue 4 months ago • 1 comments

Problem

Several language flags were not displaying on the webpage despite having flag assets available in the assets/icons/flags/ directory. The issue was reported specifically for the Korean flag, but investigation revealed that Hebrew, Romanian, Russian, and Swedish flags were also affected.

Root Cause

The flag image files existed in the repository, but the corresponding CSS rules in assets/css/style.css were missing. The CSS file defines two types of rules for each language:

  • .dropdown .XX-YY a - for 16px flags in the dropdown menu
  • #XX-YY - for 24px flags in the language switcher button

Without these CSS rules, the flags couldn't be displayed even though the image files were present.

Solution

Added CSS rules for 5 languages that had flag files but were missing CSS definitions:

  1. Korean (ko-KR)kr16.png / kr24.png
  2. Hebrew (he-IL)he-IL16.png / he-IL24.png
  3. Romanian (ro-RO)ro16.png / ro24.png
  4. Russian (ru-RU)ru16.png / ru24.png
  5. Swedish (sv-SE)sv16.png / sv24.png

Changes Made

  • Single file modified: assets/css/style.css
  • 10 new CSS rules added (5 languages × 2 sizes each)
  • No other files modified
  • No breaking changes to existing functionality

Testing

✅ Site builds successfully with Jekyll
✅ All CSS formatting checks pass (editorconfig)
✅ JSON validation passes
✅ Flags display correctly in both language switcher and dropdown menu
✅ Manually verified on Korean and Russian language pages

Screenshots

Korean language page showing flag in navigation bar:

Korean page with flag

Language dropdown showing all flags (including newly fixed ones):

Language dropdown with all flags

Russian language page showing flag in navigation bar:

Russian page with flag

All five previously missing flags now display correctly alongside the existing language flags.

Fixes #[issue_number]

Original prompt

This section details on the original issue you should resolve

<issue_title>Some flags are not showing</issue_title> <issue_description>For example, the korean flag is available in the assets folder, but it does not show up in the webpage</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes daviddavo/jgmd#186


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot avatar Oct 18 '25 08:10 Copilot