Commander1024
c58841eb81
Align editor and frontend typography, improve code block presentation, add leading-image spacing, and fix nested submenu positioning.
300 lines
7.7 KiB
CSS
300 lines
7.7 KiB
CSS
/*
|
|
* Editor canvas styles for Commander 1024 2026.
|
|
* These font URLs are relative to this stylesheet in the theme root.
|
|
*/
|
|
@font-face {
|
|
font-family: "Alpha Lyrae";
|
|
src: url("fonts/AlphaLyrae-Medium.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("fonts/crimson-pro-latin-wght-normal.woff2") format("woff2");
|
|
font-weight: 200 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("fonts/crimson-pro-latin-wght-italic.woff2") format("woff2");
|
|
font-weight: 200 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Berkeley Mono";
|
|
src: url("fonts/BerkeleyMono-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Berkeley Mono";
|
|
src: url("fonts/BerkeleyMono-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Match the frontend's light canvas. The admin chrome is intentionally untouched. */
|
|
body.editor-styles-wrapper {
|
|
/* The canvas may be wide; theme.json constrains normal blocks to contentSize. */
|
|
max-width: var(--wp--style--global--wide-size, 1180px);
|
|
padding: 2rem;
|
|
margin: 0 auto;
|
|
background: #f8f5f0;
|
|
color: #1d1b19;
|
|
}
|
|
|
|
.editor-styles-wrapper,
|
|
.editor-styles-wrapper .wp-block {
|
|
font-family: "Crimson Pro", Georgia, serif;
|
|
}
|
|
|
|
|
|
/*
|
|
* Gutenberg's visual editor uses this wrapper (rather than <body>) as its canvas.
|
|
* Apply the frontend reading scale here so blocks do not inherit the admin's 16px UI size.
|
|
*/
|
|
.editor-styles-wrapper {
|
|
color: #1d1b19;
|
|
font-family: "Crimson Pro", Georgia, serif !important;
|
|
font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem) !important;
|
|
font-weight: 400;
|
|
line-height: 1.55 !important;
|
|
}
|
|
|
|
/* Core block controls may set an admin UI face and size instead of inheriting from the canvas. */
|
|
.editor-styles-wrapper .wp-block-paragraph,
|
|
.editor-styles-wrapper .wp-block-paragraph .block-editor-rich-text__editable,
|
|
.editor-styles-wrapper .wp-block-list,
|
|
.editor-styles-wrapper .wp-block-list .block-editor-rich-text__editable {
|
|
font-family: "Crimson Pro", Georgia, serif !important;
|
|
font-size: inherit !important;
|
|
line-height: inherit !important;
|
|
}
|
|
|
|
/*
|
|
* theme.json supplies contentSize and wideSize to Gutenberg's root container.
|
|
* Do not override block alignment geometry here: it also handles full-width blocks
|
|
* in the editor sidebar and other constrained editor layouts.
|
|
*/
|
|
|
|
/* The post-title control sits outside Gutenberg's root block container. */
|
|
.editor-post-title,
|
|
.editor-post-title__block {
|
|
width: 100%;
|
|
max-width: var(--wp--style--global--wide-size, 1180px) !important;
|
|
margin-right: auto !important;
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.editor-post-title__input {
|
|
width: 100%;
|
|
max-width: none !important;
|
|
}
|
|
|
|
.editor-styles-wrapper a {
|
|
color: #c3480b;
|
|
text-decoration-thickness: 0.08em;
|
|
text-underline-offset: 0.14em;
|
|
}
|
|
|
|
.editor-styles-wrapper a:hover,
|
|
.editor-styles-wrapper a:focus {
|
|
color: #8f3508;
|
|
}
|
|
|
|
.editor-styles-wrapper h1,
|
|
.editor-styles-wrapper h2,
|
|
.editor-styles-wrapper h3,
|
|
.editor-styles-wrapper h4,
|
|
.editor-styles-wrapper .editor-post-title__input,
|
|
.editor-post-title__input,
|
|
.editor-post-title .editor-post-title__input,
|
|
.editor-styles-wrapper .wp-block-heading .block-editor-rich-text__editable,
|
|
.editor-styles-wrapper .wp-block-heading [contenteditable="true"] {
|
|
/* Gutenberg assigns editor UI font families to these controls unless overridden. */
|
|
font-family: "Alpha Lyrae", sans-serif !important;
|
|
font-weight: 500;
|
|
line-height: 1.16;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.editor-styles-wrapper h1 {
|
|
font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
|
|
}
|
|
|
|
.editor-styles-wrapper h2 {
|
|
margin-top: 2em;
|
|
font-size: 1.55em;
|
|
}
|
|
|
|
.editor-styles-wrapper h3 {
|
|
margin-top: 1.8em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.editor-styles-wrapper p,
|
|
.editor-styles-wrapper ul,
|
|
.editor-styles-wrapper ol,
|
|
.editor-styles-wrapper figure {
|
|
margin-top: 0;
|
|
margin-bottom: 1.3em;
|
|
}
|
|
|
|
.editor-styles-wrapper ul,
|
|
.editor-styles-wrapper ol {
|
|
padding-left: 1.3em;
|
|
}
|
|
|
|
.editor-styles-wrapper blockquote {
|
|
padding: 0.35rem 1.25rem;
|
|
border-left: 4px solid #c3480b;
|
|
margin-left: 0;
|
|
color: #706a63;
|
|
font-style: italic;
|
|
}
|
|
|
|
.editor-styles-wrapper code,
|
|
.editor-styles-wrapper pre,
|
|
.editor-styles-wrapper .wp-block-code textarea,
|
|
.editor-styles-wrapper .wp-block-code .block-editor-rich-text__editable,
|
|
.editor-styles-wrapper .wp-block-code .block-editor-plain-text,
|
|
.editor-styles-wrapper .wp-block-preformatted .block-editor-rich-text__editable {
|
|
/* Code blocks use editable controls rather than a rendered <code> element. */
|
|
font-family: "Berkeley Mono", monospace !important;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Mirror the frontend rule: block-code text should not receive two relative reductions. */
|
|
.editor-styles-wrapper pre code,
|
|
.editor-styles-wrapper .wp-block-code code {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
.editor-styles-wrapper pre,
|
|
.editor-styles-wrapper .wp-block-code {
|
|
padding: 1rem 1.2rem;
|
|
overflow: auto;
|
|
border: 1px solid #d5d0c8;
|
|
border-radius: 2px;
|
|
background: #faf8f5;
|
|
color: #272822;
|
|
}
|
|
|
|
.editor-styles-wrapper :not(pre) > code {
|
|
padding: 0.1em 0.3em;
|
|
border: 1px solid #d8d0c6;
|
|
border-radius: 2px;
|
|
background: #fffdf9;
|
|
}
|
|
|
|
.editor-styles-wrapper .wp-element-caption,
|
|
.editor-styles-wrapper .wp-caption-text {
|
|
color: #706a63;
|
|
font-family: "Berkeley Mono", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.editor-styles-wrapper hr,
|
|
.editor-styles-wrapper .wp-block-separator {
|
|
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: 1rem;
|
|
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 {
|
|
font-family: "Berkeley Mono", monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.editor-styles-wrapper .wp-block-quote__citation,
|
|
.editor-styles-wrapper .wp-block-pullquote__citation,
|
|
.editor-styles-wrapper .wp-block-quote cite,
|
|
.editor-styles-wrapper .wp-block-pullquote cite {
|
|
color: #706a63;
|
|
font-family: "Berkeley Mono", monospace !important;
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.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;
|
|
max-width: var(--wp--style--global--content-size, 760px);
|
|
margin: 0 auto;
|
|
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);
|
|
}
|