feat(child-theme): scaffold asterion-bricks v0.1.0
Initial child theme structure inheriting from Bricks parent. Token-driven, RGPD-native, mobile-first foundation ready for component and template work. What's in this commit - style.css: WP theme metadata (Template: bricks, v0.1.0) - functions.php: enqueue cascade tokens -> utilities -> components, defer-loaded main.js, font preload, theme support, image sizes (av-hero 2400x1350, av-card 800x600, av-thumb 400x300), Gutenberg default styles dequeued - theme.json: Gutenberg color/typo palette mirroring tokens - assets/css/tokens.css: full design system per Design Handoff section 2 (brand colors, neutrals, semantics, type scale + line-heights, 8pt spacing, radii, shadows, z-index, motion, prefers-reduced-motion) - assets/css/utilities.css: modern reset + .av-container, .av-skip-link, .av-sr-only, .av-stack, .av-section helpers, opinionated heading scale - assets/css/components.css: index of planned components + buttons (5 variants x 4 sizes per Design Handoff section 3.1) and links - assets/js/main.js: vanilla skeleton with header scroll, IntersectionObserver reveal, count-up, mobile drawer; respects prefers-reduced-motion - inc/cpt.php: register_post_type case_study (slug /customers/) + scenario (slug /scenarios/) + shared 'industry' taxonomy - inc/seo.php: Organization JSON-LD on home; placeholders for Product, Article, FAQPage, BreadcrumbList - assets/fonts/: Inter Variable + Italic WOFF2 self-hosted (RGPD; no Google Fonts CDN). Inter Display @font-face commented — Inter 4+ uses opsz axis from the same file. Out of scope (intentionally deferred) - Component fills: cards, forms, navigation, alerts, modals, tabs (placeholders) - Page templates: home and beyond - Bricks JSON template exports - Schema.org Product / Article / FAQPage / BreadcrumbList implementations Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
214
wp-content/themes/asterion-bricks/assets/css/utilities.css
Normal file
214
wp-content/themes/asterion-bricks/assets/css/utilities.css
Normal file
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* Asterion Bricks — Utilities
|
||||
*
|
||||
* Modern CSS reset + reusable utility classes.
|
||||
* Loaded after tokens.css, before components.css.
|
||||
*
|
||||
* Naming : prefix `av-` on every custom class.
|
||||
*/
|
||||
|
||||
/* ============================================================================
|
||||
Modern CSS reset (inspired by Andy Bell's modern-css-reset, Josh Comeau)
|
||||
============================================================================ */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
* { margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-md);
|
||||
line-height: var(--leading-body-md);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-default);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input, button, textarea, select { font: inherit; color: inherit; }
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul, ol { list-style: none; }
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
/* ============================================================================
|
||||
Heading hierarchy — opinionated defaults consumed when an element
|
||||
carries no Bricks-specific class. Bricks may override, that's expected.
|
||||
============================================================================ */
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-h1);
|
||||
line-height: var(--leading-h1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-h2);
|
||||
line-height: var(--leading-h2);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-h3);
|
||||
line-height: var(--leading-h3);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-h4);
|
||||
line-height: var(--leading-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 72ch; /* prose readability per Design Handoff section 2.2 */
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Focus visible — keyboard accessibility
|
||||
Removes outline only when focus came from the mouse; preserves it for keyboard.
|
||||
============================================================================ */
|
||||
|
||||
:focus { outline: none; }
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Skip link — first focusable element on every page (a11y)
|
||||
============================================================================ */
|
||||
|
||||
.av-skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--color-brand-navy);
|
||||
color: var(--color-text-on-dark);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
z-index: var(--z-toast);
|
||||
border-bottom-right-radius: var(--radius-md);
|
||||
}
|
||||
.av-skip-link:focus,
|
||||
.av-skip-link:focus-visible {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Visually hidden — content readable by screen readers, hidden visually
|
||||
============================================================================ */
|
||||
|
||||
.av-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Container — centred max-width with responsive padding
|
||||
============================================================================ */
|
||||
|
||||
.av-container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-padding-mobile);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.av-container { padding-inline: var(--container-padding-tablet); }
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.av-container { padding-inline: var(--container-padding-desktop); }
|
||||
}
|
||||
|
||||
.av-container--narrow {
|
||||
max-width: 800px; /* article body */
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Tap target minimum — WCAG AA / Apple HIG (44×44px)
|
||||
============================================================================ */
|
||||
|
||||
.av-tap-target {
|
||||
min-width: var(--tap-target-min);
|
||||
min-height: var(--tap-target-min);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Stack helpers — vertical rhythm via owl-selector
|
||||
============================================================================ */
|
||||
|
||||
.av-stack > * + * { margin-top: var(--av-stack-gap, var(--space-4)); }
|
||||
.av-stack--sm > * + * { margin-top: var(--space-2); }
|
||||
.av-stack--md > * + * { margin-top: var(--space-4); }
|
||||
.av-stack--lg > * + * { margin-top: var(--space-8); }
|
||||
.av-stack--xl > * + * { margin-top: var(--space-12); }
|
||||
|
||||
/* ============================================================================
|
||||
Section padding helpers (vertical rhythm between page sections)
|
||||
============================================================================ */
|
||||
|
||||
.av-section {
|
||||
padding-block: var(--space-16);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.av-section { padding-block: var(--space-20); }
|
||||
}
|
||||
|
||||
.av-section--hero {
|
||||
padding-block: var(--space-24);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.av-section--hero { padding-block: var(--space-32); }
|
||||
}
|
||||
|
||||
.av-section--dark {
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-on-dark);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Print
|
||||
============================================================================ */
|
||||
|
||||
@media print {
|
||||
.av-skip-link, .av-no-print { display: none !important; }
|
||||
body { color: #000; background: #fff; }
|
||||
a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
|
||||
}
|
||||
Reference in New Issue
Block a user