diff --git a/editor-style.css b/editor-style.css index ad34145..cc69125 100644 --- a/editor-style.css +++ b/editor-style.css @@ -60,9 +60,7 @@ body.editor-styles-wrapper { font-family: "Crimson Pro", Georgia, serif; } -.editor-styles-wrapper .wp-block { - max-width: 760px; -} + /* * Gutenberg's visual editor uses this wrapper (rather than ) as its canvas. @@ -86,13 +84,12 @@ body.editor-styles-wrapper { line-height: inherit !important; } -.editor-styles-wrapper .wp-block[data-align="wide"] { - max-width: 1180px; -} +/* + * theme.json supplies contentSize and wideSize to Gutenberg's root container. + * Do not override its alignment geometry here: it also handles full-width blocks + * in the editor sidebar and other constrained editor layouts. + */ -.editor-styles-wrapper .wp-block[data-align="full"] { - max-width: none; -} .editor-styles-wrapper a { color: #c3480b; @@ -194,3 +191,82 @@ body.editor-styles-wrapper { border: 0; border-top: 1px solid #d8d0c6; } + +/* Match frontend previews for core blocks whose structure needs explicit editor styling. */ +.editor-styles-wrapper .wp-block-button__link, +.editor-styles-wrapper .wp-element-button { + border: 1px solid #c3480b; + border-radius: 2px; + background: #c3480b; + color: #fff; + font-family: "Berkeley Mono", monospace; + font-size: 0.75rem; + letter-spacing: 0.04em; +} + +.editor-styles-wrapper .is-style-outline > .wp-block-button__link { + background: transparent; + color: #c3480b; +} + +.editor-styles-wrapper .wp-block-table { + overflow-x: auto; + font-size: 0.85em; +} + +.editor-styles-wrapper .wp-block-table table { + width: 100%; + border-collapse: collapse; +} + +.editor-styles-wrapper .wp-block-table th, +.editor-styles-wrapper .wp-block-table td { + padding: 0.55em 0.7em; + border: 1px solid #d8d0c6; + text-align: left; +} + +.editor-styles-wrapper .wp-block-table th, +.editor-styles-wrapper .wp-block-quote__citation, +.editor-styles-wrapper .wp-block-pullquote__citation { + font-family: "Berkeley Mono", monospace; +} + +.editor-styles-wrapper .wp-block-table th, +.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { + background: #fffdf9; +} + +.editor-styles-wrapper .wp-block-pullquote { + padding: 2rem 0; + border-top: 2px solid #c3480b; + border-bottom: 2px solid #c3480b; + text-align: left; +} + +.editor-styles-wrapper .wp-block-pullquote blockquote { + padding: 0; + border: 0; + margin: 0; + color: #1d1b19; + font-family: "Alpha Lyrae", sans-serif; + font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem); + font-style: normal; +} + +.editor-styles-wrapper .wp-block-cover__inner-container { + max-width: 760px; +} + +.editor-styles-wrapper .wp-block-gallery .wp-element-caption { + margin: 0.5rem 0 0; +} + +.editor-styles-wrapper .wp-block-media-text { + gap: clamp(1rem, 3vw, 2.5rem); +} + +.editor-styles-wrapper .wp-block-group.has-background, +.editor-styles-wrapper .wp-block-columns.has-background { + padding: clamp(1.25rem, 4vw, 3rem); +} diff --git a/style.css b/style.css index e7e8f89..2a24ad7 100644 --- a/style.css +++ b/style.css @@ -402,6 +402,25 @@ h4 { margin-top: 0; margin-bottom: 1.3em; } + +/* Keep prose readable while allowing Gutenberg's alignment controls to escape its measure. */ +.entry-content > .alignwide, +.single .entry-thumbnail { + /* A post's featured image uses the same breakout geometry as a Wide Gutenberg block. */ + width: min(var(--wide), calc(100vw - 3rem)); + max-width: none; + margin-left: 50%; + margin-right: 0; + transform: translateX(-50%); +} + +.entry-content > .alignfull { + width: 100vw; + max-width: 100vw; + margin-left: 50%; + margin-right: 0; + transform: translateX(-50%); +} .entry-content h2 { margin-top: 2em; font-size: 1.55em; @@ -453,6 +472,111 @@ h4 { border: 0; border-top: 1px solid var(--line); } + +/* Gutenberg block treatments that need more than the shared theme.json tokens. */ +.wp-element-caption, +.entry-content figcaption { + color: var(--muted); + font-family: "Berkeley Mono", monospace; + font-size: 0.68rem; +} + +.wp-block-button__link, +.wp-element-button { + border: 1px solid var(--accent); + border-radius: 2px; + background: var(--accent); + color: #fff; + font-family: "Berkeley Mono", monospace; + font-size: 0.75rem; + letter-spacing: 0.04em; + text-decoration: none; +} + +.wp-block-button__link:hover, +.wp-block-button__link:focus, +.wp-element-button:hover, +.wp-element-button:focus { + border-color: var(--accent-hover); + background: var(--accent-hover); + color: #fff; +} + +.is-style-outline > .wp-block-button__link { + background: transparent; + color: var(--accent); +} + +.wp-block-table { + overflow-x: auto; + font-size: 0.85em; +} + +.wp-block-table table { + width: 100%; + border-collapse: collapse; +} + +.wp-block-table th, +.wp-block-table td { + padding: 0.55em 0.7em; + border: 1px solid var(--line); + text-align: left; +} + +.wp-block-table th { + background: var(--surface); + font-family: "Berkeley Mono", monospace; + font-size: 0.8em; +} + +.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { + background: var(--surface); +} + +.wp-block-quote__citation, +.wp-block-pullquote__citation { + color: var(--muted); + font-family: "Berkeley Mono", monospace; + font-size: 0.68rem; + font-style: normal; +} + +.wp-block-pullquote { + padding: 2rem 0; + border-top: 2px solid var(--accent); + border-bottom: 2px solid var(--accent); + color: var(--text); + text-align: left; +} + +.wp-block-pullquote blockquote { + max-width: var(--content); + padding: 0; + border: 0; + margin: 0 auto; + color: inherit; + font-family: "Alpha Lyrae", sans-serif; + font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem); + font-style: normal; +} + +.wp-block-cover__inner-container { + max-width: var(--content); +} + +.wp-block-gallery .wp-element-caption { + margin: 0.5rem 0 0; +} + +.wp-block-media-text { + gap: clamp(1rem, 3vw, 2.5rem); +} + +.wp-block-group.has-background, +.wp-block-columns.has-background { + padding: clamp(1.25rem, 4vw, 3rem); +} .hero { position: relative; display: grid; diff --git a/theme.json b/theme.json new file mode 100644 index 0000000..33fce3e --- /dev/null +++ b/theme.json @@ -0,0 +1,165 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.6/theme.json", + "version": 3, + "settings": { + "appearanceTools": true, + "color": { + "custom": true, + "customGradient": true, + "defaultDuotone": false, + "defaultGradients": false, + "defaultPalette": false, + "duotone": [ + { + "colors": ["#1d1b19", "#c3480b"], + "name": "Retro amber", + "slug": "retro-amber" + } + ], + "gradients": [ + { + "gradient": "linear-gradient(135deg, #c3480b 0%, #8f3508 100%)", + "name": "Signal amber", + "slug": "signal-amber" + }, + { + "gradient": "linear-gradient(135deg, #282623 0%, #171615 100%)", + "name": "Console dark", + "slug": "console-dark" + } + ], + "palette": [ + { "color": "#f8f5f0", "name": "Canvas", "slug": "canvas" }, + { "color": "#fffdf9", "name": "Surface", "slug": "surface" }, + { "color": "#1d1b19", "name": "Ink", "slug": "ink" }, + { "color": "#706a63", "name": "Muted", "slug": "muted" }, + { "color": "#c3480b", "name": "Signal amber", "slug": "signal-amber" }, + { "color": "#8f3508", "name": "Signal amber dark", "slug": "signal-amber-dark" }, + { "color": "#282623", "name": "Console", "slug": "console" } + ] + }, + "layout": { + "contentSize": "760px", + "wideSize": "1180px" + }, + "spacing": { + "blockGap": true, + "margin": true, + "padding": true, + "units": ["px", "rem", "%", "vw", "vh"], + "spacingSizes": [ + { "name": "1", "size": "0.5rem", "slug": "20" }, + { "name": "2", "size": "1rem", "slug": "30" }, + { "name": "3", "size": "1.5rem", "slug": "40" }, + { "name": "4", "size": "2.5rem", "slug": "50" }, + { "name": "5", "size": "4rem", "slug": "60" }, + { "name": "6", "size": "6rem", "slug": "70" } + ] + }, + "typography": { + "customFontSize": true, + "defaultFontSizes": false, + "dropCap": true, + "fluid": true, + "fontFamilies": [ + { + "fontFamily": "\"Alpha Lyrae\", sans-serif", + "name": "Alpha Lyrae", + "slug": "alpha-lyrae", + "fontFace": [ + { + "fontFamily": "Alpha Lyrae", + "fontStyle": "normal", + "fontWeight": "500", + "src": ["file:./fonts/AlphaLyrae-Medium.woff2"] + } + ] + }, + { + "fontFamily": "\"Crimson Pro\", Georgia, serif", + "name": "Crimson Pro", + "slug": "crimson-pro", + "fontFace": [ + { + "fontFamily": "Crimson Pro", + "fontStyle": "normal", + "fontWeight": "200 900", + "src": ["file:./fonts/crimson-pro-latin-wght-normal.woff2"] + }, + { + "fontFamily": "Crimson Pro", + "fontStyle": "italic", + "fontWeight": "200 900", + "src": ["file:./fonts/crimson-pro-latin-wght-italic.woff2"] + } + ] + }, + { + "fontFamily": "\"Berkeley Mono\", monospace", + "name": "Berkeley Mono", + "slug": "berkeley-mono", + "fontFace": [ + { + "fontFamily": "Berkeley Mono", + "fontStyle": "normal", + "fontWeight": "400", + "src": ["file:./fonts/BerkeleyMono-Regular.woff2"] + }, + { + "fontFamily": "Berkeley Mono", + "fontStyle": "normal", + "fontWeight": "700", + "src": ["file:./fonts/BerkeleyMono-Bold.woff2"] + } + ] + } + ], + "fontSizes": [ + { "name": "Small", "size": "1rem", "slug": "small" }, + { "name": "Body", "size": "1.25rem", "slug": "body" }, + { "name": "Large", "size": "1.75rem", "slug": "large" }, + { "name": "Display", "size": "2.5rem", "slug": "display" }, + { "name": "Hero", "size": "4rem", "slug": "hero" } + ], + "lineHeight": true + }, + "useRootPaddingAwareAlignments": true + }, + "styles": { + "color": { + "background": "var:preset|color|canvas", + "text": "var:preset|color|ink" + }, + "elements": { + "button": { + "border": { "radius": "2px" }, + "color": { "background": "var:preset|color|signal-amber", "text": "#ffffff" }, + "spacing": { "padding": { "top": "0.55rem", "right": "0.9rem", "bottom": "0.55rem", "left": "0.9rem" } }, + "typography": { "fontFamily": "var:preset|font-family|berkeley-mono", "fontSize": "0.75rem", "letterSpacing": "0.04em" } + }, + "heading": { + "typography": { "fontFamily": "var:preset|font-family|alpha-lyrae", "fontWeight": "500", "lineHeight": "1.16" } + }, + "link": { + "color": { "text": "var:preset|color|signal-amber" } + } + }, + "blocks": { + "core/quote": { + "border": { "color": "var:preset|color|signal-amber", "left": { "color": "var:preset|color|signal-amber", "width": "4px" } }, + "color": { "text": "var:preset|color|muted" }, + "spacing": { "padding": { "left": "1.25rem" } }, + "typography": { "fontStyle": "italic" } + }, + "core/pullquote": { + "border": { "top": { "color": "var:preset|color|signal-amber", "width": "2px" }, "bottom": { "color": "var:preset|color|signal-amber", "width": "2px" } }, + "typography": { "fontFamily": "var:preset|font-family|alpha-lyrae" } + }, + "core/table": { + "border": { "color": "var:preset|color|muted", "width": "1px" } + } + }, + "spacing": { "blockGap": "1.5rem" }, + "typography": { "fontFamily": "var:preset|font-family|crimson-pro", "fontSize": "1.25rem", "lineHeight": "1.55" } + } +}