CSS System
How id86.net is styled. This page is the authoritative inventory of every stylesheet that renders the site, where it lives, when it loads, and the rules for editing it.
Style Pipeline
The site styles in layers: GeneratePress provides the base layout theme, the id86 child theme owns all brand styling via style.css, article bodies get their own scoped stylesheet, and dark mode is applied by DarkReader JS which overrides the brand tokens at runtime.
File Inventory
| Stylesheet | Source | Loaded on | Role |
|---|---|---|---|
style.css | themes/id86/ | All pages | Brand tokens, header, hero, cards, archive, footer, search palette, subscribe bar, contact form, recommendations |
css/article-content-v2.css | themes/id86/ | is_single() only | Article body elements (H2–H4, lists, code, tables, quotes, footnotes) |
css/owl.carousel.min.css | themes/id86/ | Front page | Stories slider |
css/owl.theme.default.min.css | themes/id86/ | Front page | Stories slider theme |
assets/css/dark-mode.css | plugins/id86-darkmode/ | All pages | Dark-mode toggle button and icon swap |
assets/css/search.css | plugins/fusejs-search/ | All pages | Fuse.js command palette |
assets/css/admonitions-v2.css | plugins/opshell-docusaurus-admonitions/ | Article pages | :::note/tip/info/warning/danger blocks |
style.css + style-index.css | plugins/code-block-pro/ | Article pages (block present) | Shiki pre-rendered code blocks |
| Parent theme CSS | themes/generatepress/ | All pages | Base layout, typography, navigation |
Server file locations
All paths are on the production host GC-US-M10 (see Server Infrastructure). The WordPress root is /home/Dmg59ZFtKg6bIws1/id86net/public_html (shortened to <WP_ROOT> below).
Child theme (themes/id86/):
<WP_ROOT>/wp-content/themes/id86/style.css
<WP_ROOT>/wp-content/themes/id86/css/article-content-v2.css
<WP_ROOT>/wp-content/themes/id86/css/owl.carousel.min.css
<WP_ROOT>/wp-content/themes/id86/css/owl.theme.default.min.css
Content plugins:
<WP_ROOT>/wp-content/plugins/id86-darkmode/assets/css/dark-mode.css
<WP_ROOT>/wp-content/plugins/fusejs-search/assets/css/search.css
<WP_ROOT>/wp-content/plugins/opshell-docusaurus-admonitions/assets/css/admonitions-v2.css
<WP_ROOT>/wp-content/plugins/code-block-pro/src/front/style.css
<WP_ROOT>/wp-content/plugins/code-block-pro/build/style-index.css
Parent theme (GeneratePress — do not edit):
<WP_ROOT>/wp-content/themes/generatepress/
Canonical dev checkout (source of truth for theme edits; deploy via deploy.sh):
/home/rezriz/github/Wordpress/wp-dev/themes/develop-internally/id86/id86-child-theme/style.css
/home/rezriz/github/Wordpress/wp-dev/themes/develop-internally/id86/id86-child-theme/css/article-content-v2.css
Resolve <WP_ROOT> on the server: echo /home/Dmg59ZFtKg6bIws1/id86net/public_html.
Brand Tokens
Defined on :root in style.css (light mode):
| Token | Value | Usage |
|---|---|---|
--id86-navy | #14326c | Headings, dark text, hover states |
--id86-blue | #2273bf | Links, buttons, primary actions |
--id86-sky | #2597d5 | Lighter interaction accent, focus rings |
--id86-ink | #0b2149 | Body text, deep hero gradient |
--id86-mist | #eef7fc | Light section backgrounds (cards, subscribe bar) |
All child-theme and article CSS reference these tokens via var(--id86-*). Never hard-code brand colors in new rules — use the tokens.
Dark-mode overrides
Dark mode does not use CSS media queries. The id86-darkmode plugin runs DarkReader JS, which swaps the tokens to a light-on-dark palette at runtime (dark-mode.js):
| Token | Light | Dark |
|---|---|---|
--id86-navy | #14326c | #8fb4e8 |
--id86-blue | #2273bf | #5aa7e8 |
--id86-sky | #2597d5 | #6fc3f5 |
--id86-ink | #0b2149 | #e6eef7 |
--id86-mist | #eef7fc | #16233a |
The toggle persists state in localStorage (id86-dark-mode-enabled, default enabled). Because the swap rewrites the tokens, components using var(--id86-*) adapt to dark mode automatically — no per-component dark rules needed.
style.css Section Map
style.css is 1,743 lines organized in named sections:
| Section | Lines | Content |
|---|---|---|
| Header | 1–10 | Theme header block (name, version 1.19, template generatepress) |
| Header / Social / Breadcrumb / Main Nav Sub | 11–69 | Global header, social links, breadcrumbs, sub-navigation |
| Content Area / Owl Carousel | 70–158 | Content wrapper, stories slider |
| Archive | 159–264 | Archive grid and cards |
| Limited Title / Stories Slider / Pagination | 265–323 | Title truncation, slider, pagination |
| Comments | 324–428 | Comment list and form |
| Footer / Search Modal / Sidebar | 429–463 | Footer, search modal, sidebar |
| List Custom / Title Header / Author | 464–553 | Custom list, page titles, author blocks |
| Box Shadow / Popular Post | 554–575 | Shadows, popular posts |
| Single Post Content / Blockquote / Pre / Table | 576–651 | Single-post layout, quotes, code pre, tables |
| Featured Image Caption / Tag List | 652–678 | Captions, tag lists |
| Search Form / 404 / Limit / TOC | 679–742 | Search form, 404, TOC |
| Page Break / Sign Up Form | 743–901 | Page breaks, subscription form |
| ID86 instant documentation | 902–1174 | Hero, niche cards, reference cards, directory |
| ID86 brand alignment | 1175–1208 | :root tokens, links, hero, cards |
| Recommendations landing | 1209–1249 | Recommendations page |
| Opshell post meta | 1250–1259 | Updated date + read time |
| Search-first hero | 1260–1279 | Search as primary action above the fold |
| Fuse.js palette | 1280–1300 | Command palette styling |
| Mobile search trigger | 1301–1344 | Mobile icon-only search trigger |
| ID86 Subscribe Bar | 1345–1496 | Subscribe bar component |
| ID86 Contact Form | 1497–1589 | Contact form styling |
| Homepage rhythm / responsive | 1590–1606 | GP Elements homepage layout |
| About GenerateBlocks | 1607–1648 | About page blocks |
| Recommendations GenerateBlocks | 1649–1743 | Recommendation cards and reviews |
Bold sections are ID86-specific additions; the rest carry over from the legacy GP Personale theme.
Article CSS Contract
css/article-content-v2.css (562 lines) styles only the single-post body, scoped to .single-post .entry-content and loaded only on is_single().
| Element | Rule | Notes |
|---|---|---|
| H2 | h2 | Navy, bottom border, clamp(1.45rem, 2.4vw, 1.9rem), scroll-margin-top: 90px |
| H3 / H4 | h3 / h4 | Navy, 1.3rem / 1.1rem |
| Inline code | :not(pre) > code | Light blue chip, Courier 10 Pitch, .875em |
| Plain code block | pre:not(.shiki) | Navy background, 4px sky left border, overflow-x: auto, language label via [data-language]::before |
| Code Block Pro | .wp-block-kevinbatdorf-code-block-pro pre.shiki | Plugin styles (Shiki) + rounded border |
| Copy button | .id86-copy-btn | Absolute top-right; is-copied → sky background |
| Tables | .id86-table-scroll wrapper + table | overflow-x: auto; navy header row, white text; zebra via --id86-mist; hover row highlight |
| Blockquote | blockquote | 4px sky left border, mist background, italic |
| Images | img / figcaption | max-width: 100%, 8px radius |
| Footnotes | .footnotes / sup.footnote-ref | Top border, muted, small |
| Heading anchors | .id86-heading-anchor | Invisible until heading hover |
| Task checklists | ul.id86-task-list / li.id86-task-item | Interactive Notion-style checkboxes; card rows, state colors, progress badge + bar, dark mode. Full contract in Task Checklists. |
Mobile (max-width: 600px): tables drop to .85rem, plain code blocks to .83rem with tighter padding.
Admonition Contract
Admonitions render from the plugin stylesheet (opshell-docusaurus-admonitions/assets/css/admonitions-v2.css), not article-content-v2.css. The live style rules:
| Concern | Rule | Notes |
|---|---|---|
| Width | width: fit-content; max-width: 100% | Natural content width; short callouts stay compact, long ones expand but never overflow the column |
| Typography | .opshell-admonition__body { font-size: inherit } | Body text inherits the article body font size |
| Title | .opshell-admonition__title | Uses the per-type accent color, 700, margin-bottom: 0.45rem |
| Paragraphs | .opshell-admonition__body p { margin: 0 0 0.35em } | Tight spacing; :last-child { margin-bottom: 0 } removes trailing gap |
| Padding / margin | 10px 14px 8px 16px / margin: 0.5rem 0 | Compact desktop footprint; mobile 8px 12px 6px |
| Accent rail | 4px left border + badge | Per-type accent colors: note #6b7c93, tip #2f9e44, info #0d9488, warning #b7791f, danger #c92a2a |
| Dark mode | @media (prefers-color-scheme: dark) | Dark surface, color-mix border, white title — independent of the DarkReader token swap |
The visual system is anchored to the brand tokens (navy/blue/sky) so callouts match the rest of the article body.
Enqueue Rules
All enqueueing happens in the child theme functions.php:
owl-style+owl-theme-style— front page (priority action).fusejs-searchCSS +fusejsCDN +id86-fusejs-globalJS — all pages (priority 20).id86-article-contentCSS + JS — onlyis_single()(priority 30).- Dark mode CSS/JS — plugin enqueues itself on all pages.
- Code Block Pro — auto-enqueues
style-index.csswhen a block is present.
Editing Rules
- Make site-specific changes in the child theme, never in GeneratePress parent files.
- Use
var(--id86-*)tokens; do not hard-code brand colors. - Article body styles belong in
css/article-content-v2.css(scoped to.single-post .entry-content). - Component styles that are not article-body-specific belong in
style.cssunder a named section comment. - After any CSS change, re-run the theme deploy (
./deploy.shfrom the canonical dev checkout) and re-sync/inspect thedemo/styling-sample.mdpost. - The canonical dev checkout is
id86-child-theme(see Child Theme); production lives atwp-content/themes/id86.