kurotych / kurotych/programming-python-1sem

Низький контраст тексту в блоці "Машинний код" на діаграмі "Рівні мов програмування"

Open
#1 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Сторінка: module1/01-intro-lecture/, розділ "Рівні мов програмування".
Точка проблеми: [docs/module1/01-intro-lecture.md?plain=1#L293-L301](https://github.com/kurotych/programming-python-1sem/blob/main/docs/module1/01-intro-lecture.md?plain=1#L293-L301)

Image

Симптом: у вузлі "Машинний код двійкові інструкції процесора" (темний фон #495057) текст практично невидимий, хоча mermaid-код явно задає color:#fff.

Причина (підтверджено через DevTools):
Текст рендериться у `` → `

...

` (бо мітка вузла багаторядкова, з `
`, тому mermaid використовує HTML-лейбл через foreignObject, а не SVG ).

Для самого `

` спрацьовує CSS-правило теми:
```
#_mermaid_6 .nodeLabel, #_mermaid_6 .nodeLabel p {
color: var(--md-mermaid-label-fg-color) !important;
}
```

Image

Це правило прямо застосовується до `

` і має !important, тому воно перебиває успадкований від span колір, навіть попри !important на span. У підсумку колір тексту визначає глобальна CSS-змінна теми --md-mermaid-label-fg-color, а не колір, вказаний у самій mermaid-діаграмі — тобто інлайнові стилі кольору тексту (color:...) в mermaid-вузлах з багаторядковими мітками (з `
`) на цьому сайті взагалі не працюють, коли фон вузла темний, а --md-mermaid-label-fg-color — темний.

Кроки для відтворення:
1. Відкрити сторінку module1/01-intro-lecture/.
2. Прогорнути до "Рівні мов програмування".
3. У DevTools подивитись на `span.nodeLabel > p` у вузлі "Машинний код" — застосоване правило color: var(--md-mermaid-label-fg-color) !important з джерелом inline:1, а не інлайновий style="color:#fff" з mermaid.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with docs/module1/01-intro-lecture.md at lines 293-301 and reproduce the "Машинний код" diagram on module1/01-intro-lecture/. Inspect the span.nodeLabel > p element and the theme rule using --md-mermaid-label-fg-color. Done means multiline Mermaid labels remain readable and the node's intended text color is honored.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.