only — NOT code inside (those are syntax-highlighted
* blocks that should scroll horizontally inside themselves, not wrap). */
.entry-content :not(pre) > code,
.entry-content p code,
.entry-content li code {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Long URLs in anchor text — same fix. Restricted to anchors inside post
* content so it doesn't affect nav, sidebar widgets, etc. */
.entry-content a {
overflow-wrap: anywhere;
}
/* Code Block Pro / pre wrappers: keep horizontal overflow inside the
* block itself, never letting it push the page wider. */
.entry-content pre {
max-width: 100%;
overflow-x: auto;
}
/* ===========================================================================
* Mobile tweaks (≤ 768px)
* - FABs sit closer to the edge so they don't waste a thumb's worth of
* width on small phones.
* - Match kenta's back-to-top button so the stack stays aligned.
* =========================================================================== */
@media (max-width: 768px) {
:root {
--leons-fab-side-offset: 16px;
--leons-fab-bottom-offset: 16px;
}
.kenta-to-top.kenta-to-top-right {
right: 16px !important;
bottom: 16px !important;
}
}
/* ===========================================================================
* Cookies-banner overlap
* When kenta's accept/decline banner is showing, the FAB stack would cover
* its buttons (or vice versa). JS in custom.js toggles .has-cookies-banner
* on and sets `--leons-fab-bottom-offset-cookies` to the banner's
* height; this rule applies that offset to the stack so both stay usable.
* =========================================================================== */
body.has-cookies-banner {
--leons-fab-bottom-offset: var(--leons-fab-bottom-offset-cookies, 48px);
}
/* ===========================================================================
* Side-matter footnotes on mobile
*
* The kenta side-matter plugin positions notes alongside their markers
* in the desktop sidebar. On narrow viewports there's no sidebar, and the
* plugin's fallback is to dump the entire .widget_side_matter section at the
* bottom of the post — which (a) makes the page much longer and (b) loses
* the in-place reading context.
*
* On mobile: hide that bottom widget AND let JS bind a click-to-popup on
* each instead. The notes stay in the DOM (just visually hidden) so
* the JS can pull their HTML for the popup body.
* =========================================================================== */
@media (max-width: 1023px) {
.widget_side_matter {
display: none !important;
}
.side-matter-sup {
cursor: pointer;
/* Touch-friendly tap target — surround with a bit more clickable
* area without changing the visual size of the superscript. */
padding: 0 2px;
position: relative;
z-index: 1;
}
}
/* Side-matter popup — the modal that opens on tap. Inherits the
* shared .leons-popup frame; this block only sizes/spaces the content. */
.leons-sm-popup {
max-width: 520px;
}
.leons-sm-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.6;
margin: 0 0 8px;
}
.leons-sm-content {
font-size: 15px;
line-height: 1.55;
}
.leons-sm-content p:first-child { margin-top: 0; }
.leons-sm-content p:last-child { margin-bottom: 0; }
.leons-sm-content code {
font-size: 0.92em;
}