` elements - ❌ DO NOT add vertical padding to sections manually - ✅ Let the UJ theme handle section spacing automatically **The ONLY exception:** Add padding if the user EXPLICITLY requests it for a specific section. ## Theme-Adaptive Classes **DO NOT USE:** `bg-light`, `bg-dark`, `text-light`, `text-dark` Ultimate Jekyll supports both light and dark modes. Use adaptive classes instead: **Backgrounds:** - `bg-body` — Primary background - `bg-body-secondary` — Secondary background - `bg-body-tertiary` — Tertiary background **Text:** - `text-body` — Body text color **Buttons:** - `btn-adaptive` — Adaptive button - `btn-outline-adaptive` — Adaptive outline button These classes automatically adapt to the current theme mode. See [docs/appearance.md](appearance.md) for the dark/light mode switching system. ## Cards Inside Colored Sections When placing cards inside sections with `bg-body-secondary` or `bg-body-tertiary`, cards will blend in because they share the same background color by default. **Solution:** Add `bg-body` to cards to create visual contrast: ```html

...

``` **Rule:** When a section uses `bg-body-secondary` or `bg-body-tertiary`, always add `bg-body` to child cards to ensure proper visual hierarchy. ## HTML Element Attributes The `` element has data attributes for JavaScript/CSS targeting: | Attribute | Values | |-----------|--------| | `data-theme-id` | Theme ID (e.g., `classy`) | | `data-theme-target` | `frontend`, `backend`, `docs` | | `data-bs-theme` | `light`, `dark` | | `data-page-path` | Page permalink (e.g., `/about`) | | `data-asset-path` | Custom asset path or empty | | `data-environment` | `development`, `production` | | `data-platform` | `windows`, `mac`, `linux`, `ios`, `android`, `chromeos`, `unknown` | | `data-browser` | `chrome`, `firefox`, `safari`, `edge`, `opera`, `brave` | | `data-device` | `mobile` (<768px), `tablet` (768-1199px), `desktop` (>=1200px) | | `data-runtime` | `web`, `browser-extension`, `electron`, `node` | | `aria-busy` | `true` (loading), `false` (ready) | **Detection source:** `web-manager/src/modules/utilities.js`