new mobile fix
This commit is contained in:
parent
e005380362
commit
03babfb02a
|
|
@ -283,6 +283,75 @@ nav.site-nav {
|
|||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
/* Mobile TOC bar — hidden by default; revealed whenever the desktop
|
||||
TOC sidebar is hidden (see layout.css: #toc hides at ≤900px).
|
||||
Declared here (before the media queries) so source-order cascade
|
||||
lets the mobile rules win. */
|
||||
#toc-mobile-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Mobile TOC bar (≤900px — mirrors #toc hide breakpoint) ──────────
|
||||
Fixed bottom strip: progress line + current section label.
|
||||
toc.js sets --toc-progress and syncs the label. Uses (max-width)
|
||||
rather than (pointer: coarse) so Android's "request desktop site"
|
||||
mode — which fakes a ~980px viewport — correctly shows the desktop
|
||||
sidebar TOC instead of this bar.
|
||||
──────────────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
/* Bottom padding so the last content line isn't hidden
|
||||
behind the fixed mobile TOC bar. */
|
||||
body {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
#toc-mobile-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2.25rem;
|
||||
background: var(--bg-nav);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0 1rem;
|
||||
z-index: 90;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Progress track (faint full-width line at top of bar) */
|
||||
#toc-mobile-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
/* Progress fill — grows with scroll via --toc-progress */
|
||||
#toc-mobile-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
width: calc(var(--toc-progress, 0) * 100%);
|
||||
background: var(--text-muted);
|
||||
transition: width 0.12s ease;
|
||||
}
|
||||
|
||||
.toc-mobile-label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
font-variant-caps: all-small-caps;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-faint);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mobile nav (≤540px) ─────────────────────────────────────────────
|
||||
Controls are position:absolute on desktop (out of flex flow, pinned
|
||||
right). On narrow viewports they collide with the primary links.
|
||||
|
|
@ -342,59 +411,6 @@ nav.site-nav {
|
|||
.nav-portals a {
|
||||
padding: 0.3rem 0.55rem;
|
||||
}
|
||||
|
||||
/* Extra bottom padding so the last content line isn't hidden
|
||||
behind the fixed mobile TOC bar. */
|
||||
body {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
/* Mobile TOC bar — fixed bottom strip: progress line + current
|
||||
section label. toc.js sets --toc-progress and syncs the label. */
|
||||
#toc-mobile-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2.25rem;
|
||||
background: var(--bg-nav);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0 1rem;
|
||||
z-index: 90;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Progress track (faint full-width line at top of bar) */
|
||||
#toc-mobile-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
/* Progress fill — grows with scroll via --toc-progress */
|
||||
#toc-mobile-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
width: calc(var(--toc-progress, 0) * 100%);
|
||||
background: var(--text-muted);
|
||||
transition: width 0.12s ease;
|
||||
}
|
||||
|
||||
.toc-mobile-label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
font-variant-caps: all-small-caps;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-faint);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* Row 2: portal links — hidden until nav.js adds .is-open */
|
||||
|
|
@ -436,12 +452,6 @@ nav.site-nav {
|
|||
and the --toc-progress custom property for the progress bar.
|
||||
============================================================ */
|
||||
|
||||
/* Mobile TOC bar — hidden on all viewports by default; the ≤540px
|
||||
media query below makes it visible on mobile only. */
|
||||
#toc-mobile-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toc {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.85rem;
|
||||
|
|
|
|||
|
|
@ -147,3 +147,39 @@
|
|||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MOBILE (≤540px)
|
||||
The desktop layout packs [badge | title ... date] in a
|
||||
single flex row. On narrow phones the date's nowrap width +
|
||||
title min-content + gap overflows the viewport, pushing
|
||||
titles off the right edge. Stack title-over-date and shrink
|
||||
the badge so .new-entry-main gets real room.
|
||||
============================================================ */
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.new-entry {
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.new-entry-kind {
|
||||
min-width: 0;
|
||||
padding: 0.15em 0.4em;
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.new-entry-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.new-entry-title {
|
||||
font-size: 0.95rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.new-entry-date {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue