# Commander1024 2026

A clean, retro-tech inspired **classic WordPress theme** for [commander1024.de](https://www.commander1024.de/). It uses standard PHP templates rather than Full Site Editing templates, while providing a modern Gutenberg authoring experience through `theme.json` and matching editor styles.

The theme is intended for a traditional personal blog with articles, static pages, category/tag archives, search, comments, and media-rich technical content.

## Scope

This theme provides the presentation layer for WordPress. It does **not** bundle content, plugins, analytics, SEO tooling, caching, contact forms, or e-commerce functionality.

It is designed to work with WordPress’s normal post/page workflow and with the block editor. The PHP template hierarchy remains conventional and easy to maintain:

- `index.php` — posts index
- `single.php` — individual posts
- `page.php` — static pages
- `archive.php` — category, tag, date, and author archives
- `search.php` — search results
- `404.php` — custom error page
- `front-page.php` — configurable video hero and front-page content

## Features

### Site experience

- Responsive classic theme with a clean retro-computing visual language
- Sticky header that hides while scrolling down and returns while scrolling up
- Multi-level primary navigation:
  - first-level dropdowns open below their parent
  - nested dropdowns open beside their parent
  - menu hierarchy remains expanded and touch-friendly on small screens
- Expanding search panel with automatic input focus
- Three-state color-mode control:
  - **Automatic** — follows the visitor’s system preference
  - **Light**
  - **Dark**
- Color-mode preference stored in the visitor’s browser
- WordPress admin-bar offset for logged-in visitors
- Custom 404 page

### Content and taxonomy

- Wide article identity area for post/page titles, metadata, categories, tags, featured images, archive headings, pagination, and post navigation
- Readable, narrower measure for article body text
- Category/tag chips and archive support
- Responsive images, galleries, captions, embeds, and code blocks
- Threaded comments with avatars, readable metadata, and non-numbered reply hierarchy
- Previous/next post navigation with directional markers

### Front page

Configure the hero from **Appearance → Customize → Home page video hero**:

- Select a video from the WordPress Media Library
- Set a custom overlay heading
- Set optional overlay copy
- The site subtitle is shown as the hero eyebrow

### Gutenberg support

`theme.json` defines the theme’s editor design system while the site remains a classic PHP theme:

- Commander 1024 color palette, gradients, and duotone preset
- Local font-family choices
- Font-size and spacing scales
- Content width: `760px`
- Wide width: `1180px`
- Wide and full block alignments
- Buttons, tables, quotes, pullquotes, covers, galleries, Media & Text, Group, and Columns styling
- Matching block-editor canvas styles in `editor-style.css`

### Code blocks

Core Code blocks and the optional [Syntax Highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) plugin are supported.

- Berkeley Mono is used for code
- Syntax-highlighted blocks use Monokai Light in site light mode
- Syntax-highlighted blocks use conventional Monokai Dark in site dark/automatic-dark mode

The syntax-highlighting plugin is **not bundled** with this theme and must be installed separately if desired.

## Fonts and licensing

All font files are self-hosted in `fonts/` and are used by both the frontend and block editor. Monospace stacks prefer Berkeley Mono and fall back to Source Code Pro before the browser’s generic monospace face.

| Font | Usage | Files | License / redistribution status |
|---|---|---|---|
| **Alpha Lyrae** | Site headings, display titles, retro stylistic sets | `AlphaLyrae-Medium.woff2` | Free for commercial use under the [SIL Open Font License 1.1](https://openfontlicense.org/). |
| **Crimson Pro** | Body copy | `crimson-pro-latin-wght-normal.woff2`, `crimson-pro-latin-wght-italic.woff2` | [SIL Open Font License 1.1](https://openfontlicense.org/). |
| **Berkeley Mono** | Preferred code, metadata, navigation, and UI face | `BerkeleyMono-*.woff`, `BerkeleyMono-*.woff2` | Privately licensed by the site owner. It is not an open-source font and must not be redistributed or reused outside the applicable licence. |
| **Source Code Pro** | Automatic fallback for Berkeley Mono in code, metadata, navigation, and UI | `SourceCodePro-Regular.woff2`, `SourceCodePro-Bold.woff2`, `SourceCodePro-Italic.woff2`, `SourceCodePro-BoldItalic.woff2` | Downloaded from the public [Google Fonts](https://fonts.google.com/specimen/Source+Code+Pro) distribution; [SIL Open Font License 1.1](https://openfontlicense.org/). |

### Alpha Lyrae OpenType features

The supplied Alpha Lyrae font includes stylistic sets `ss01` through `ss05` and ligature support. The theme uses Alpha Lyrae as its heading face; individual features can be selected with CSS, for example:

```css
.retro-heading {
  font-family: "Alpha Lyrae", sans-serif;
  font-feature-settings: "ss01" 1, "liga" 1;
}
```

Use one stylistic set at a time. See the CSS around `.hero-title` for a live theme example.

## Installation

1. Place this directory in `wp-content/themes/`.
2. In WordPress administration, activate **Commander1024 2026** under **Appearance → Themes**.
3. Configure the custom logo under **Appearance → Customize → Site Identity**.
4. Assign the Primary and Footer menus under **Appearance → Menus**.
5. Add widgets to **Appearance → Widgets → Footer column 1–3**. When at least one column contains a widget, the responsive three-column area is displayed above the footer sitewide.
6. Optionally configure the front-page video hero in the Customizer.
7. Review block-editor palette, typography, spacing, and alignment controls when authoring content.

## Development notes

- `style.css` contains frontend styles and the WordPress theme header.
- `editor-style.css` styles the classic editor and block-editor canvas.
- `assets/js/theme.js` contains the color-mode, scroll-header, search-panel, and mobile-navigation interactions.
- `functions.php` registers theme supports, menus, editor assets, Customizer controls, and custom comment rendering.
- `theme.json` is the source of truth for Gutenberg tokens and editor controls.

The theme declares the **GNU General Public License v2 or later** in `style.css`. This applies to the theme code. Font assets remain subject to their respective licences above.

## Validation

The repository’s editor diagnostics are used for static validation. Visual testing should be performed on the local/staging WordPress environment, including both color modes, responsive navigation, nested menus, Gutenberg wide/full blocks, code blocks, and threaded comments.