Bootstrap: Web Log Configuration

Summary

A static web log (HTML/CSS) has been configured to document the educational development of the Viboy Color project. The structure has been created full directory directory, shared styles with light/dark mode support, Base template for future entries, main index, and first entry bootstrap. The entire system is completely offline and without external dependencies.

Hardware Concept

This step does not implement hardware, but rather documentation infrastructure. However, it is important to maintain the educational integrity of the project.

The static web log allows you to document in a structured and educational way every step of emulator development. Being static and offline, it guarantees Full portability (Windows/Linux/macOS) and does not require a server or dependencies external, complying with the principles of portability and simplicity of the project.

Implementation

A complete static web log structure has been created with the following components:

Directory structure

docs/logbook/
├── assets/
│ └── style.css # Shared styles (CSS variables, dark mode)
├── entries/
│ └── YYYY-MM-DD__NNNN__name.html
├── _entry_template.html # Base template for new entries
└── index.html # Main index

Features implemented

• CSS style system:CSS variables for colors, automatic light/dark mode support viaprefers-color-scheme
• Reusable components:Cards, meta information, tags, code, tables, blocks of educational integrity
• Responsive design:Adaptation to mobile devices through media queries
• System typography:Use ofsystem-uiregardless of external sources
• Relative links:All links are relative to work offline
• Clean-room notice:Banner visible on all pages remembering the principles of the project

Semantic structure of entries

Each entry follows a strict structure with the following sections:

1. Summary (2-4 lines)
2. Hardware concept (educational explanation)
3. Implementation (what was done and why)
4. Affected Files (list with paths)
5. Tests and Verification (pytest/logs/test ROMs)
6. Sources consulted (technical references)
7. Educational Integrity (what I understand / what is missing / hypothesis)
8. Next Steps (checklist)

Affected Files

• docs/logbook/assets/style.css- Full Shared Styles (new)
• docs/bitacora/_entry_template.html- Base template for tickets (new)
• docs/bitacora/index.html- Main log index (new)
• docs/bitacora/entries/2025-12-16__0000__bootstrap.html- First bootstrap entry (new)

Tests and Verification

Validation performed:

• HTML verification:Valid and semantic HTML5 structure
• Relative links:All links work correctly from any location
• CSS:Styles applied correctly, CSS variables working
• Dark mode:Automatic support viaprefers-color-scheme: darkverified
• Portability:Files open correctly offline in modern browsers
• Responsive:Verified adaptive layout with different screen widths

Note:Unit tests are not required for static HTML/CSS files. Validation is carried out by manual inspection and opening in a browser.

Sources consulted

• MDN Web Docs - CSS Variables:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• MDN Web Docs - prefers-color-scheme:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• Semantic HTML5 - Document Structure: General knowledge of semantic HTML5

Implementation based on web standards (HTML5, CSS3) without the use of frameworks or external libraries, meeting the requirement of zero dependencies.

Educational Integrity

Next Steps

• [x] Create log directory structure
• [x] Implement shared CSS styles with light/dark mode
• [x] Create base template for entries
• [x] Create main index (index.html)
• [x] Create first bootstrap entry
• [ ] Document upcoming hardware implementations using this log
• [ ] Keep the log updated with each significant step of the project