Refine Theme Typography and Menu Styling
Align editor and frontend typography, improve code block presentation, add leading-image spacing, and fix nested submenu positioning.
This commit is contained in:
+27
-15
@@ -50,10 +50,6 @@ body.editor-styles-wrapper {
|
||||
margin: 0 auto;
|
||||
background: #f8f5f0;
|
||||
color: #1d1b19;
|
||||
font-family: "Crimson Pro", Georgia, serif;
|
||||
font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper,
|
||||
@@ -62,7 +58,6 @@ body.editor-styles-wrapper {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* 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.
|
||||
@@ -105,7 +100,6 @@ body.editor-styles-wrapper {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
|
||||
.editor-styles-wrapper a {
|
||||
color: #c3480b;
|
||||
text-decoration-thickness: 0.08em;
|
||||
@@ -179,13 +173,20 @@ body.editor-styles-wrapper {
|
||||
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: #282623;
|
||||
color: #f5eee5;
|
||||
background: #faf8f5;
|
||||
color: #272822;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper :not(pre) > code {
|
||||
@@ -195,10 +196,11 @@ body.editor-styles-wrapper {
|
||||
background: #fffdf9;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-element-caption {
|
||||
.editor-styles-wrapper .wp-element-caption,
|
||||
.editor-styles-wrapper .wp-caption-text {
|
||||
color: #706a63;
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper hr,
|
||||
@@ -215,7 +217,7 @@ body.editor-styles-wrapper {
|
||||
background: #c3480b;
|
||||
color: #fff;
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@@ -241,10 +243,19 @@ body.editor-styles-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .wp-block-table th,
|
||||
.editor-styles-wrapper .wp-block-quote__citation,
|
||||
.editor-styles-wrapper .wp-block-pullquote__citation {
|
||||
.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,
|
||||
@@ -262,7 +273,8 @@ body.editor-styles-wrapper {
|
||||
.editor-styles-wrapper .wp-block-pullquote blockquote {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 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);
|
||||
|
||||
@@ -56,8 +56,6 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
--line: #d8d0c6;
|
||||
--accent: #c3480b;
|
||||
--accent-hover: #8f3508;
|
||||
--code-bg: #282623;
|
||||
--code-text: #f5eee5;
|
||||
/* Monokai Light tokens use darker variants for accessible contrast on a light panel. */
|
||||
--monokai-bg: #faf8f5;
|
||||
--monokai-border: #d5d0c8;
|
||||
@@ -81,8 +79,6 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
--line: #4a4540;
|
||||
--accent: #f07a3c;
|
||||
--accent-hover: #ff9d6a;
|
||||
--code-bg: #0e0e0d;
|
||||
--code-text: #f5eee5;
|
||||
--monokai-bg: #272822;
|
||||
--monokai-border: #3e3d32;
|
||||
--monokai-text: #f8f8f2;
|
||||
@@ -106,8 +102,6 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
--line: #4a4540;
|
||||
--accent: #f07a3c;
|
||||
--accent-hover: #ff9d6a;
|
||||
--code-bg: #0e0e0d;
|
||||
--code-text: #f5eee5;
|
||||
--monokai-bg: #272822;
|
||||
--monokai-border: #3e3d32;
|
||||
--monokai-text: #f8f8f2;
|
||||
@@ -321,7 +315,7 @@ input[type="submit"] {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.menu-toggle {
|
||||
@@ -396,6 +390,14 @@ h4 {
|
||||
.entry-thumbnail {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
/* Separate a leading article/page image from the body text that follows it. */
|
||||
.single .entry-thumbnail,
|
||||
.page .entry-content > .wp-block-image:first-child,
|
||||
.page .entry-content > figure:first-child,
|
||||
.page .entry-content > .wp-block-gallery:first-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.entry-thumbnail img {
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
@@ -480,14 +482,17 @@ h4 {
|
||||
padding: 1rem 1.2rem;
|
||||
overflow: auto;
|
||||
border-radius: 2px;
|
||||
background: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
font-size: 0.78em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.entry-content code {
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Prevent <code> inside <pre> from applying the compact inline-code scale twice. */
|
||||
.entry-content pre code {
|
||||
font-size: inherit;
|
||||
}
|
||||
.entry-content :not(pre) > code {
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 2px;
|
||||
@@ -573,7 +578,7 @@ h4 {
|
||||
.wp-caption-text {
|
||||
color: var(--muted);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.wp-block-separator {
|
||||
border: 0;
|
||||
@@ -585,7 +590,7 @@ h4 {
|
||||
.entry-content figcaption {
|
||||
color: var(--muted);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.wp-block-button__link,
|
||||
@@ -595,7 +600,7 @@ h4 {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -634,7 +639,7 @@ h4 {
|
||||
.wp-block-table th {
|
||||
background: var(--surface);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
|
||||
@@ -642,10 +647,12 @@ h4 {
|
||||
}
|
||||
|
||||
.wp-block-quote__citation,
|
||||
.wp-block-pullquote__citation {
|
||||
.wp-block-pullquote__citation,
|
||||
.wp-block-quote cite,
|
||||
.wp-block-pullquote cite {
|
||||
color: var(--muted);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-family: "Berkeley Mono", monospace !important;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -748,7 +755,6 @@ h4 {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--line);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
/* Archive and search pagination follows the wide page-title alignment. */
|
||||
.pagination {
|
||||
@@ -1019,9 +1025,10 @@ h4 {
|
||||
}
|
||||
}
|
||||
/* Desktop submenus are positioned from their parent; nested menus fly out to the side. */
|
||||
.primary-menu > li {
|
||||
.primary-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.primary-menu .sub-menu {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
@@ -1043,8 +1050,8 @@ h4 {
|
||||
transform 0.16s ease,
|
||||
visibility 0.16s;
|
||||
}
|
||||
.primary-menu > li:hover > .sub-menu,
|
||||
.primary-menu > li:focus-within > .sub-menu {
|
||||
.primary-menu li:hover > .sub-menu,
|
||||
.primary-menu li:focus-within > .sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
@@ -1086,8 +1093,9 @@ h4 {
|
||||
margin-left: 0.45em;
|
||||
content: "▾";
|
||||
color: var(--accent);
|
||||
font-size: 0.85em;
|
||||
vertical-align: 0.05em;
|
||||
font-size: 1.45em;
|
||||
line-height: 0.4;
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
.primary-menu .sub-menu > li.menu-item-has-children > a {
|
||||
display: flex;
|
||||
@@ -1098,19 +1106,12 @@ h4 {
|
||||
.primary-menu .sub-menu > li.menu-item-has-children > a::after {
|
||||
content: "▸";
|
||||
color: var(--accent);
|
||||
font-size: 0.9em;
|
||||
font-size: 1.45em;
|
||||
line-height: 0.4;
|
||||
}
|
||||
.primary-menu .sub-menu .sub-menu {
|
||||
top: -0.6rem;
|
||||
left: calc(100% + 0.6rem);
|
||||
}
|
||||
.primary-menu .sub-menu .sub-menu::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -0.6rem;
|
||||
width: 0.6rem;
|
||||
content: "";
|
||||
left: calc(100% - 1px);
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.primary-menu > li.menu-item-has-children > a::after,
|
||||
@@ -1123,23 +1124,7 @@ h4 {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.primary-menu li:hover > .sub-menu,
|
||||
.primary-menu li:focus-within > .sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.primary-menu > li.menu-item-has-children > a::after,
|
||||
.primary-menu .sub-menu > li.menu-item-has-children > a::after {
|
||||
font-size: 1.45em;
|
||||
line-height: 0.4;
|
||||
}
|
||||
.primary-menu .sub-menu .sub-menu {
|
||||
left: calc(100% - 1px);
|
||||
}
|
||||
.primary-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-branding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1149,9 +1134,7 @@ h4 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.primary-menu > li.menu-item-has-children > a::after {
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
|
||||
/* Keep the sticky header below WordPress's admin bar at each core bar height. */
|
||||
body.admin-bar .site-header {
|
||||
top: 32px;
|
||||
|
||||
+1
-1
@@ -135,7 +135,7 @@
|
||||
"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" }
|
||||
"typography": { "fontFamily": "var:preset|font-family|berkeley-mono", "fontSize": "1rem", "letterSpacing": "0.04em" }
|
||||
},
|
||||
"heading": {
|
||||
"typography": { "fontFamily": "var:preset|font-family|alpha-lyrae", "fontWeight": "500", "lineHeight": "1.16" }
|
||||
|
||||
Reference in New Issue
Block a user