master @ 49 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ // Below the breakpoint the accordion carries the nav; above it, the │
│ // margin card does. The card needs (100vw - page) / 2 to fit itself │
│ // plus a gutter, which lands around 1260px at the 13px cap. │
│ .docs-nav-card { │
│ display: none; │
│ } │
│ │
│ .docs-nav-inline { │
│ margin: 0.8em 0; │
│ │
│ pre.ascii { │
│ width: auto; │
│ } │
│ } │
│ │
│ @media (min-width: 1260px) { │
│ .docs-nav-inline { │
│ display: none; │
│ } │
│ │
│ .docs-nav-card { │
│ display: block; │
│ position: fixed; │
│ top: 2.15em; │
│ // The glyph frame is the border; padding is just a thin paper edge. │
│ --card-w: calc(var(--cell-w) * var(--card-cells) + 1em); │
│ left: calc((100vw - var(--page-w)) / 2 - var(--card-w) - 1.5em); │
│ width: var(--card-w); │
│ max-height: calc(100vh - 4.3em); │
│ overflow-y: auto; │
│ padding: 0.4em 0.5em; │
│ background: var(--paper); │
│ color: var(--ink); │
│ font-size: var(--fs); │
│ line-height: var(--lh); │
│ │
│ pre.ascii { │
│ width: auto; │
│ } │
│ } │
│ } │
│ │
│ @media print { │
│ .docs-nav-card, │
│ .docs-nav-inline { │
│ display: none !important; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ // Below the breakpoint the accordion carrie │
│ s the nav; above it, the │
│ // margin card does. The card needs (100vw - │
│ page) / 2 to fit itself │
│ // plus a gutter, which lands around 1260px │
│ at the 13px cap. │
│ .docs-nav-card { │
│ display: none; │
│ } │
│ │
│ .docs-nav-inline { │
│ margin: 0.8em 0; │
│ │
│ pre.ascii { │
│ width: auto; │
│ } │
│ } │
│ │
│ @media (min-width: 1260px) { │
│ .docs-nav-inline { │
│ display: none; │
│ } │
│ │
│ .docs-nav-card { │
│ display: block; │
│ position: fixed; │
│ top: 2.15em; │
│ // The glyph frame is the border; paddin │
│ g is just a thin paper edge. │
│ --card-w: calc(var(--cell-w) * var(--car │
│ d-cells) + 1em); │
│ left: calc((100vw - var(--page-w)) / 2 - │
│ var(--card-w) - 1.5em); │
│ width: var(--card-w); │
│ max-height: calc(100vh - 4.3em); │
│ overflow-y: auto; │
│ padding: 0.4em 0.5em; │
│ background: var(--paper); │
│ color: var(--ink); │
│ font-size: var(--fs); │
│ line-height: var(--lh); │
│ │
│ pre.ascii { │
│ width: auto; │
│ } │
│ } │
│ } │
│ │
│ @media print { │
│ .docs-nav-card, │
│ .docs-nav-inline { │
│ display: none !important; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET