— zeroed rather than relying on the browser's own default
margin, which would otherwise affect its height as a flex item in
both header layouts that use it (the side design's title+tagline
row, the centered design's own stack) in ways neither controls. */
margin: 0;
font-family: var( --nonotami-font-subtitle );
font-size: var( --nonotami-size-subtitle );
color: var( --nonotami-color-subtitle );
}
/* Generic links — the nav's own colors (menu/submenu) are a separate,
more specific concern, set in site-header.css by inc/menu.php. */
a {
color: var( --nonotami-color-link );
}
a:hover {
color: var( --nonotami-color-link-hover );
}
/* List indent (left) + list right inset — content lists only (not the
Table of Contents' or the primary nav's own lists, which set their own
padding separately). Descendant selectors (not `>` direct-child) on
purpose: some plugins (e.g. the image gallery's content wrapper) put
an extra
directly inside .entry-content, so a list is rarely
actually a direct child of it — only "somewhere inside" is reliable.
"Top level" here really means "not nested inside a list item"; a
second, more specific rule (`li ul`/`li ol`, higher specificity than
`.entry-content ul` since it adds a type selector) re-targets anything
that IS nested, overriding both properties there.
Left indent: outermost list gets the configurable base; each level
nested inside any list item adds a fixed, non-configurable +1rem on
top of whatever its own ancestors already added — CSS padding on a
nested box always stacks visually on top of its ancestors' own
padding, so this override rule alone is what makes each deeper level
keep adding its own +1rem, with no need to multiply by depth here.
Right inset: a single, universal gap from the content's right edge for
the whole list block at once — deliberately NOT per nesting level, so
nested lists get it reset back to 0 instead of stacking it too. See
inc/lists.php. */
.entry-content ul,
.entry-content ol {
padding-left: var( --nonotami-list-indent-left, 2rem );
padding-right: var( --nonotami-list-inset-right, 0 );
}
.entry-content li ul,
.entry-content li ol {
padding-left: 1rem;
padding-right: 0;
}
/* Adjacent-block spacing — margin-top only, applied purely from the
settings below. No browser/theme default margin is left on these
elements for that to stack with (reset here, not relied on from
anywhere else) — the customizer is the ONLY source of this spacing.
The very first block in .entry-content is unaffected either way:
there's nothing before it for a `+` selector to match. */
.entry-content p,
.entry-content .nonotami-table-scroll,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.entry-content li {
margin: 0;
}
/* A table counts as "a paragraph" for every one of these A+B spacing
rules — :is( p, .nonotami-table-scroll ) everywhere a bare p was, not a
separate set of table-h/table-li rules to also expose: it sits in the
exact same slot a paragraph would. The SCROLL WRAPPER (below), not the
bare
, is what's actually adjacent to a sibling paragraph/
heading/list in .entry-content — inc/spacing.php's the_content filter
wraps every table in one. */
.entry-content :is( p, .nonotami-table-scroll ) + :is( p, .nonotami-table-scroll ) { margin-top: var( --nonotami-spacing-p-p ); }
.entry-content :is( p, .nonotami-table-scroll ) + :is( h1, h2, h3, h4, h5, h6 ) { margin-top: var( --nonotami-spacing-p-h ); }
.entry-content :is( h1, h2, h3, h4, h5, h6 ) + :is( p, .nonotami-table-scroll ) { margin-top: var( --nonotami-spacing-h-p ); }
.entry-content :is( h1, h2, h3, h4, h5, h6 ) + :is( h1, h2, h3, h4, h5, h6 ) { margin-top: var( --nonotami-spacing-h-h ); }
.entry-content :is( p, .nonotami-table-scroll ) + :is( ul, ol ) { margin-top: var( --nonotami-spacing-p-li ); }
.entry-content :is( ul, ol ) + :is( p, .nonotami-table-scroll ) { margin-top: var( --nonotami-spacing-li-p ); }
.entry-content :is( h1, h2, h3, h4, h5, h6 ) + :is( ul, ol ) { margin-top: var( --nonotami-spacing-h-li ); }
.entry-content :is( ul, ol ) + :is( h1, h2, h3, h4, h5, h6 ) { margin-top: var( --nonotami-spacing-li-h ); }
.entry-content li + li { margin-top: var( --nonotami-spacing-li-li ); }
/* overflow-x: auto lives on the WRAPPER div (inc/spacing.php's
the_content filter), never on the itself — a table's own
default display (table, not block) shrink-wraps its width to its own
content, which margin: 0 auto below then centers inside the wrapper
whenever that content fits; putting display:block/overflow directly on
the instead (tried first) forced it to always fill 100% of the
available width like any other block box, which defeated "centered
when it fits" entirely — a 4-column table would stretch out to fill a
5th, nonexistent column's worth of empty space rather than shrinking
and centering. The wrapper is what's allowed to overflow/scroll; once
the table truly doesn't fit, it's simply wider than its own wrapper,
flush at the wrapper's left edge, scrollable from there — nothing
explicit needed for that "falls back to left-aligned" part, it's just
what a block too narrow for its overflowing child already looks like. */
.entry-content .nonotami-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.entry-content .nonotami-table-scroll > table {
margin: 0 auto;
border-collapse: collapse;
border: var( --nonotami-table-border-width ) solid var( --nonotami-table-border-color );
}
.entry-content th,
.entry-content td {
padding: var( --nonotami-table-cell-padding );
border: var( --nonotami-table-border-width ) solid var( --nonotami-table-border-color );
}
/* Headers always centered — content cells are untouched, whatever
alignment they already have. */
.entry-content th {
text-align: center;
}
/* Tap-to-sort (js/table-sort.js) — every table's first row, th or td
alike, every table (not just ones using the block editor's "header
section" toggle, i.e. real | ). Cycles asc -> desc -> back to the
original, unsorted order. */
.entry-content table .nonotami-sortable-th {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
position: relative;
padding-right: 1.6em;
}
.entry-content table .nonotami-sortable-th::after {
content: "\2195";
position: absolute;
right: 0.5em;
opacity: 0.4;
}
.entry-content table .nonotami-sortable-th.is-sorted-asc::after {
content: "\2191";
opacity: 1;
}
.entry-content table .nonotami-sortable-th.is-sorted-desc::after {
content: "\2193";
opacity: 1;
}
/* Post excerpt — same look in both places it can appear: the post
header card (.nonotami-post-header-excerpt, post-header.css) and the
"Nonotami: Post Excerpt" sidebar widget (inc/widgets.php). Alignment
is the one thing that differs — set per-widget-instance, inline, not
here. */
.nonotami-excerpt-widget {
font-style: italic;
font-size: 0.8rem;
}
/* Table of Contents plugin links are navigation, not body-content links —
body color throughout, never the link color (on hover either). */
.nonotami-toc-list a,
.nonotami-toc-list a:hover {
color: var( --nonotami-color-body );
}
/* "Nonotami: Font Size & Dark Mode" widget (inc/font-dark-widget.php):
the -/0/+ font-size trio, plus the dark/light toggle (inc/dark-mode.php)
when enabled — flex-wrap as one row of buttons, but the dark/light
button (a separate flex child, outside .nonotami-font-size-control's
own group) wraps to its own line on its own if there isn't room for
both, e.g. in a narrow sidebar — no media query needed.
Class selectors, not ids — this widget can render twice on the same
page (the mobile menu overlay's own instance, inc/mobile-menu.php,
plus whichever sidebar it's dropped into), and an id has to be unique;
js/font-size-control.js and js/dark-mode.js wire up every instance by
class for the same reason. */
.nonotami-font-dark-widget {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.nonotami-font-size-control {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nonotami-font-size-control button,
.nonotami-dark-mode-toggle {
font: inherit;
line-height: 1;
min-width: 1.75rem;
padding: 0.25rem 0.5rem;
border: 1px solid currentColor;
background: none;
color: inherit;
cursor: pointer;
}
.nonotami-font-size-control button:hover,
.nonotami-dark-mode-toggle:hover {
opacity: 0.7;
}
/* Buttons (Customizer → Typography → Buttons) — one shared default look
for any plain button-like element that doesn't already have its own
bespoke styling. Deliberately low-specificity (plain element/attribute
selectors) so a more specific rule anywhere else in the theme (the
font-size/dark-mode buttons above, the search icon, scroll-to-top, …)
always wins regardless of CSS load order. Text size always matches body
text (never its own size here); border is a fixed 1px. */
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.comment-reply-link {
display: inline-block;
font: inherit;
font-size: 1em;
line-height: 1.4;
padding: 0.5em 1.1em;
background: var(--nonotami-button-bg, #e0e0e0);
color: var(--nonotami-button-text, #000);
border: 1px solid var(--nonotami-button-border, #000);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.comment-reply-link:hover {
background: var(--nonotami-button-bg-hover, #cfcfcf);
color: var(--nonotami-button-text, #000);
}
|