/* Theme Name: Martin Boon Theme URI: https://martinboon.nl Author: Martin Boon Author URI: https://martinboon.nl Description: Custom block theme voor de portfoliosite van Martin Boon (UX-designer). Light/dark mode via CSS custom properties, fluid typografie en design-tokens in theme.json. Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: martinboon Tags: block-theme, full-site-editing, portfolio, dark-mode, custom-colors */ /* ------------------------------------------------------------------------- Base enhancements. Design tokens live in theme.json + assets/css/tokens.css. Keep this file lean; prefer theme.json for anything the editor should expose. ------------------------------------------------------------------------- */ /* Smoother font rendering on WebKit / macOS (thinner, less heavy anti-aliasing). */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Small text sits a touch heavier than the 300 default for legibility. !important * so it also wins over block-level weights (e.g. the project-card meta). */ .has-body-small-font-size { font-weight: 400 !important; } /* Button labels a touch heavier than the 300 default. */ .wp-element-button, .wp-block-button__link { font-weight: 400; } /* Theme switching is intentionally instant: the whole page flips in a single paint instead of some elements easing while others snap. To also stop elements that carry their own (hover) colour transitions from animating on the flip, theme.js briefly adds .mb-theme-switching to while it changes data-theme, and we disable every transition for that one frame. */ .mb-theme-switching, .mb-theme-switching *, .mb-theme-switching *::before, .mb-theme-switching *::after { transition: none !important; } /* Visible focus states in both themes (accessibility). */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--mb-focus-ring); border-radius: 0.25rem; } /* Core's "outline" button style ships a 2px border; align every button with the 1px border-width token used across the theme. The selector is specific enough to win over the core block-library rule. */ .wp-block-button.is-style-outline a.wp-block-button__link, .wp-block-button a.wp-block-button__link.wp-element-button { border-width: var(--wp--custom--border-width--1, 1px); } /* Secondary (outline) buttons follow the action-secondary design tokens: transparent until hover, then a subtle fill. Filled buttons keep the action-default tokens from theme.json. All tokens flip with light/dark. */ .wp-block-button.is-style-outline a.wp-block-button__link { background-color: var(--mb-action-secondary-background); color: var(--mb-action-secondary-foreground); border-color: var(--mb-action-secondary-border); } .wp-block-button.is-style-outline a.wp-block-button__link:hover, .wp-block-button.is-style-outline a.wp-block-button__link:focus, .wp-block-button.is-style-outline a.wp-block-button__link:focus-visible { background-color: var(--mb-action-secondary-hovered-background); color: var(--mb-action-secondary-hovered-foreground); border-color: var(--mb-action-secondary-hovered-border); } .wp-block-button.is-style-outline a.wp-block-button__link:active { background-color: var(--mb-action-secondary-pressed-background); color: var(--mb-action-secondary-pressed-foreground); border-color: var(--mb-action-secondary-pressed-border); } /* The floating light/dark toggle button is styled in a single place: assets/css/sections.css, alongside the back-to-top button it stacks with. */ /* ------------------------------------------------------------------------- Typographic widow control. The render_block widont filter (functions.php) glues the last two words with a non-breaking space so a single word never ends up alone on a line. These declarations let modern browsers additionally balance headings and prettify body wrapping; both are progressive enhancements, safely ignored where unsupported. ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .wp-block-heading { text-wrap: balance; } p, li, figcaption { text-wrap: pretty; } /* Long, unbreakable strings should wrap rather than force horizontal scroll. */ h1, h2, h3, h4, h5, h6, .wp-block-heading, p, li { overflow-wrap: break-word; } /* Smaller body copy on mobile: the 1.5rem (24px) editorial body size is large on * a phone, so drop default paragraphs and content list items to 18px. Text with * an explicit preset size (lead, body-small, etc.) keeps its own size via the * !important preset class. */ @media ( max-width: 47.99rem ) { p, .wp-block-list li { font-size: 1.25rem; } } /* Skip link for keyboard users. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--wp--preset--color--action); color: var(--wp--preset--color--on-action); } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* Visually hidden, still available to screen readers (WP core convention). Used by the homepage h1 and the carousel's aria-live status. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }