[UI/UX] Implement Technical Code Block Container & Monospace Contrast #20

New Issue

2026-05-08T18:07:38Z

mjasin commented

2026-05-08 18:07:38 +00:00

Context: After implementing centered reader layouts, code snippets (<pre>) are illegible due to low contrast and serif font inheritance.
Role: Senior UI Engineer.
Task: Refactor the rendering of code blocks within ReaderCanvas.razor to ensure high technical readability.
Requirements:

Visual Isolation: Wrap <code> elements in a styled <pre> container with a subtle background: background-color: #f4f4f4; or a very light gray.
Typography Switch: Explicitly break inheritance by setting font-family: 'JetBrains Mono', 'Fira Code', monospace; and font-size: 0.9rem;.
Contrast & Syntax: Use a dark slate color for text (#2d3436) to ensure it stands out against the paper-white background.
Chrome & Details:
- Add a left accent border: border-left: 4px solid var(--nexus-neon);.
- Implement overflow-x: auto; to handle long code lines without breaking the 800px reader container.
- Add padding: 1.5rem; and border-radius: 8px;.
Integration: If using EpubService, ensure the sanitizer preserves <pre> and <code> tags but strips internal inline styles that might interfere with our new CSS.
DOD: Code blocks must look like distinct, readable components that feel "engineered" compared to the surrounding Merriweather text.

Sugested css code (to adding in ReaderCanvas.razor.css)

/* Celujemy w bloki kodu wewnątrz wycentrowanego kontenera */
.reader-flow-container pre {
    background-color: #2d2d2d; /* Ciemny motyw dla kodu lepiej kontrastuje z jasnym czytnikiem */
    color: #e0e0e0;
    padding: 1.25rem;
    border-radius: 8px;
    margin: 2rem 0;
    overflow-x: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #00ff99; /* Neonowy akcent Nexus */
}

.reader-flow-container code {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-variant-ligatures: contextual;
    line-height: 1.5;
    tab-size: 4;
}

/* Styl dla kodu wewnątrz linii tekstu (inline code) */
.reader-flow-container p code {
    background-color: rgba(0, 0, 0, 0.05);
    color: #d63384; /* Klasyczny wyróżnik dla inline code */
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

**Context:** After implementing centered reader layouts, code snippets (`<pre>`) are illegible due to low contrast and serif font inheritance. **Role:** Senior UI Engineer. **Task:** Refactor the rendering of code blocks within `ReaderCanvas.razor` to ensure high technical readability. **Requirements:** 1. **Visual Isolation:** Wrap `<code>` elements in a styled `<pre>` container with a subtle background: `background-color: #f4f4f4;` or a very light gray. 2. **Typography Switch:** Explicitly break inheritance by setting `font-family: 'JetBrains Mono', 'Fira Code', monospace;` and `font-size: 0.9rem;`. **Contrast & Syntax:** Use a dark slate color for text (`#2d3436`) to ensure it stands out against the paper-white background. 4. **Chrome & Details:** - Add a left accent border: `border-left: 4px solid var(--nexus-neon);`. - Implement `overflow-x: auto;` to handle long code lines without breaking the 800px reader container. - Add `padding: 1.5rem;` and `border-radius: 8px;`. 5. **Integration:** If using `EpubService`, ensure the sanitizer preserves `<pre>` and `<code>` tags but strips internal inline styles that might interfere with our new CSS. **DOD:** Code blocks must look like distinct, readable components that feel "engineered" compared to the surrounding Merriweather text. --- **Sugested css code** *(to adding in `ReaderCanvas.razor.css`)* ```css /* Celujemy w bloki kodu wewnątrz wycentrowanego kontenera */ .reader-flow-container pre { background-color: #2d2d2d; /* Ciemny motyw dla kodu lepiej kontrastuje z jasnym czytnikiem */ color: #e0e0e0; padding: 1.25rem; border-radius: 8px; margin: 2rem 0; overflow-x: auto; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #00ff99; /* Neonowy akcent Nexus */ } .reader-flow-container code { font-family: 'Cascadia Code', 'Consolas', monospace; font-variant-ligatures: contextual; line-height: 1.5; tab-size: 4; } /* Styl dla kodu wewnątrz linii tekstu (inline code) */ .reader-flow-container p code { background-color: rgba(0, 0, 0, 0.05); color: #d63384; /* Klasyczny wyróżnik dla inline code */ padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; } ```

mjasin referenced this issue from a commit

2026-05-08 18:13:46 +00:00

feat(ui/graph): optimize graph dynamics, immersive reader, and code blocks

mjasin referenced a pull request that will close this issue

2026-05-08 18:13:56 +00:00

feat(ui/arch): Optimize Graph Dynamics, Immersive Reader, and Core Stability #19

mjasin closed this issue

2026-05-08 18:16:09 +00:00

mjasin referenced this issue from a commit

2026-05-08 18:16:11 +00:00

feat(ui/arch): Optimize Graph Dynamics, Immersive Reader, and Core Stability (#19)

mjasin referenced this issue from a commit