kurotych / kurotych/programming-python-1sem
Низький контраст тексту в блоці "Машинний код" на діаграмі "Рівні мов програмування"
- 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)
Симптом: у вузлі "Машинний код двійкові інструкції процесора" (темний фон #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;
}
```
Це правило прямо застосовується до `
` і має !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