359 lines
7.3 KiB
CSS
Executable File
359 lines
7.3 KiB
CSS
Executable File
/* =========================================================
|
|
MEDIA.CSS — responsive overrides for the sidebar+tab layout
|
|
Load it AFTER style.css.
|
|
========================================================= */
|
|
|
|
/* =========================================================
|
|
SIDENOTES / MARGINNOTES — base styles
|
|
========================================================= */
|
|
|
|
.sidenote,
|
|
.marginnote {
|
|
font-size: 0.78rem;
|
|
line-height: 1.5;
|
|
color: var(--fg-dim);
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =========================================================
|
|
CUSTOM SCROLLBARS — themed throughout
|
|
========================================================= */
|
|
|
|
/* * { */
|
|
/* scrollbar-width: thin; */
|
|
/* scrollbar-color: var(--border-mid) transparent; */
|
|
/* } */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-mid);
|
|
border-radius: 2px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--fg-faint);
|
|
}
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* =========================================================
|
|
1200px — narrow enough to collapse sidenotes
|
|
========================================================= */
|
|
|
|
@media (max-width: 1200px) {
|
|
.sidenote,
|
|
.marginnote {
|
|
float: none;
|
|
clear: both;
|
|
width: auto;
|
|
display: block;
|
|
margin: 0.5rem 0 0.75rem;
|
|
padding-left: 0.75rem;
|
|
border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
|
|
margin-right: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.sidenote .mn-img,
|
|
.marginnote .mn-img {
|
|
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
|
|
}
|
|
|
|
.fullwidth {
|
|
max-width: calc(100vw - var(--sidebar-w) - 4rem);
|
|
}
|
|
|
|
#table-of-contents {
|
|
float: none;
|
|
position: static;
|
|
width: auto;
|
|
margin: 0 0 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-right: 0;
|
|
border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
|
|
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
900px — auto-hide sidebar
|
|
========================================================= */
|
|
|
|
@media (max-width: 900px) {
|
|
#sidebar:not(.expanded):not(.mobile-open) {
|
|
width: var(--rail-w);
|
|
}
|
|
|
|
.fullwidth {
|
|
max-width: calc(100vw - var(--rail-w) - 2rem);
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
768px — MOBILE: full single-column, overlay sidebar drawer
|
|
========================================================= */
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
html, body {
|
|
overflow: auto;
|
|
height: auto;
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
height: auto;
|
|
}
|
|
|
|
/* ---- Header ---- */
|
|
#preamble {
|
|
height: auto;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 300;
|
|
}
|
|
|
|
.banner-header {
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
height: auto;
|
|
min-height: var(--header-h);
|
|
}
|
|
|
|
.banner-left {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.banner-logo {
|
|
height: 26px;
|
|
width: 26px;
|
|
}
|
|
|
|
#updated { display: none; }
|
|
nav { display: none; }
|
|
.web-logo { display: none; }
|
|
|
|
.banner-search {
|
|
order: 3;
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.banner-actions {
|
|
margin-left: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---- Layout ---- */
|
|
#layout-body {
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
/* ---- Sidebar overlay drawer ---- */
|
|
#sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: min(92vw, var(--sidebar-w));
|
|
height: 100dvh;
|
|
z-index: 400;
|
|
border-right: 1px solid var(--border-mid);
|
|
overflow: hidden;
|
|
transform: translateX(-100%);
|
|
transition: transform var(--dur-mid) var(--ease-out),
|
|
box-shadow var(--dur-mid) var(--ease-out);
|
|
box-shadow: none;
|
|
}
|
|
|
|
#sidebar.mobile-open,
|
|
#sidebar.expanded {
|
|
transform: translateX(0);
|
|
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
|
|
width: min(92vw, var(--sidebar-w)) !important;
|
|
}
|
|
|
|
#sidebar-backdrop {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
z-index: 390;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#sidebar-backdrop.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* ---- Main ---- */
|
|
#main {
|
|
width: 100%;
|
|
min-height: calc(100dvh - var(--header-h));
|
|
}
|
|
|
|
#tab-bar {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* ---- Content area ---- */
|
|
#content-area {
|
|
overflow: visible;
|
|
height: auto;
|
|
min-height: calc(100dvh - var(--header-h) - var(--toolbar-h));
|
|
}
|
|
|
|
/* ---- Note content ---- */
|
|
#content,
|
|
.tab-content-inner {
|
|
padding: 1.25rem 1rem 4rem;
|
|
}
|
|
|
|
.title-section {
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.title-section .title {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.sidenote,
|
|
.marginnote {
|
|
float: none;
|
|
clear: both;
|
|
width: auto;
|
|
display: block;
|
|
margin: 0.4rem 0 0.6rem;
|
|
padding-left: 0.6rem;
|
|
border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.fullwidth {
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
#table-of-contents {
|
|
float: none;
|
|
position: static;
|
|
width: auto;
|
|
margin: 0 0 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-right: 0;
|
|
border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
|
|
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* ---- Footer ---- */
|
|
#postamble,
|
|
footer {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
/* ---- Code blocks ---- */
|
|
/* Shrink font, keep horizontal scroll — never wrap or overflow page */
|
|
.org-src-container {
|
|
/* Ensure it never escapes the viewport */
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
.org-src-container > pre,
|
|
pre.src {
|
|
font-size: 0.74rem;
|
|
padding: 1.4rem 0.7rem 0.75rem;
|
|
/* Enforce horizontal scroll; absolutely no page-overflow */
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ---- Tables ---- */
|
|
/* Wrapper-based scroll */
|
|
.table-wrapper {
|
|
margin: 0.75rem 0;
|
|
border-radius: 5px;
|
|
/* Constrain to viewport */
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
/* Bare tables (no wrapper) also scroll on mobile */
|
|
#content table {
|
|
font-size: 0.8rem;
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
#content table th,
|
|
.table-wrapper table th {
|
|
padding: 0.45rem 0.6rem;
|
|
font-size: 0.62rem;
|
|
}
|
|
|
|
#content table td,
|
|
.table-wrapper table td {
|
|
padding: 0.45rem 0.6rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* ---- Tabs ---- */
|
|
.tab {
|
|
min-width: 70px;
|
|
padding: 0 8px 0 10px;
|
|
font-size: 0.68rem;
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
400px — very small phones
|
|
========================================================= */
|
|
|
|
@media (max-width: 400px) {
|
|
.banner-header {
|
|
padding: 0.4rem 0.75rem;
|
|
}
|
|
|
|
#content,
|
|
.tab-content-inner {
|
|
padding: 1rem 0.75rem 3rem;
|
|
}
|
|
|
|
.tab {
|
|
min-width: 60px;
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.org-src-container {
|
|
max-width: calc(100vw - 1.5rem);
|
|
}
|
|
|
|
.org-src-container > pre,
|
|
pre.src {
|
|
font-size: 0.7rem;
|
|
padding: 1.3rem 0.6rem 0.6rem;
|
|
}
|
|
|
|
#content table,
|
|
.table-wrapper {
|
|
max-width: calc(100vw - 1.5rem);
|
|
}
|
|
}
|