Commander1024/C1024_2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine Theme Typography and Menu Styling

Browse Source 
Align editor and frontend typography, improve code block presentation,
add leading-image spacing, and fix nested submenu positioning.
This commit is contained in:
Commander1024
2026-07-27 17:25:29 +02:00
parent 7dd417c3fb
commit c58841eb81
3 changed files with 64 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+36 -53
View File
@@ -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;