diff --git a/README.md b/README.md new file mode 100644 index 0000000..5002274 --- /dev/null +++ b/README.md @@ -0,0 +1,126 @@ +# 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. Optionally configure the front-page video hero in the Customizer. +6. 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. diff --git a/fonts/SourceCodePro-Bold.woff2 b/fonts/SourceCodePro-Bold.woff2 new file mode 100644 index 0000000..d7af00c Binary files /dev/null and b/fonts/SourceCodePro-Bold.woff2 differ diff --git a/fonts/SourceCodePro-BoldItalic.woff2 b/fonts/SourceCodePro-BoldItalic.woff2 new file mode 100644 index 0000000..d26205d Binary files /dev/null and b/fonts/SourceCodePro-BoldItalic.woff2 differ diff --git a/fonts/SourceCodePro-Italic.woff2 b/fonts/SourceCodePro-Italic.woff2 new file mode 100644 index 0000000..9f97695 Binary files /dev/null and b/fonts/SourceCodePro-Italic.woff2 differ diff --git a/fonts/SourceCodePro-Regular.woff2 b/fonts/SourceCodePro-Regular.woff2 new file mode 100644 index 0000000..2e123a7 Binary files /dev/null and b/fonts/SourceCodePro-Regular.woff2 differ