master @ 66 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .accordion { │
│ font-family: var(--mono); │
│ font-size: var(--fs); │
│ line-height: var(--lh); │
│ max-width: var(--frame-w); │
│ margin: 0.4em 0; │
│ │
│ .acc-summary { │
│ cursor: pointer; │
│ list-style: none; │
│ font-weight: 700; │
│ text-transform: uppercase; │
│ white-space: pre; │
│ │
│ &::-webkit-details-marker { │
│ display: none; │
│ } │
│ │
│ &::before { │
│ content: "[+] "; │
│ font-family: var(--mono-frame); │
│ font-weight: 400; │
│ } │
│ │
│ &:hover { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ │
│ &[open] > .acc-summary::before { │
│ content: "[-] "; │
│ } │
│ │
│ .acc-body { │
│ position: relative; │
│ margin: 0.4em 0 0.8em; │
│ padding-left: 4ch; │
│ │
│ // Same glyph rail as blockquotes, seated under the marker column. │
│ &::before { │
│ content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A │
│ │\A│\A│\A│\A│\A│\A│\A│"; │
│ position: absolute; │
│ left: 1ch; │
│ top: 0; │
│ bottom: 0; │
│ font-family: var(--mono-frame); │
│ color: var(--ink); │
│ white-space: pre; │
│ overflow: hidden; │
│ } │
│ │
│ p { │
│ margin: 0 0 0.6em; │
│ } │
│ p:last-child { │
│ margin-bottom: 0; │
│ } │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .accordion { │
│ font-family: var(--mono); │
│ font-size: var(--fs); │
│ line-height: var(--lh); │
│ max-width: var(--frame-w); │
│ margin: 0.4em 0; │
│ │
│ .acc-summary { │
│ cursor: pointer; │
│ list-style: none; │
│ font-weight: 700; │
│ text-transform: uppercase; │
│ white-space: pre; │
│ │
│ &::-webkit-details-marker { │
│ display: none; │
│ } │
│ │
│ &::before { │
│ content: "[+] "; │
│ font-family: var(--mono-frame); │
│ font-weight: 400; │
│ } │
│ │
│ &:hover { │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ } │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ │
│ &[open] > .acc-summary::before { │
│ content: "[-] "; │
│ } │
│ │
│ .acc-body { │
│ position: relative; │
│ margin: 0.4em 0 0.8em; │
│ padding-left: 4ch; │
│ │
│ // Same glyph rail as blockquotes, seate │
│ d under the marker column. │
│ &::before { │
│ content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│ │
│ \A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A │
│ │\A│\A│\A│\A│\A│"; │
│ position: absolute; │
│ left: 1ch; │
│ top: 0; │
│ bottom: 0; │
│ font-family: var(--mono-frame); │
│ color: var(--ink); │
│ white-space: pre; │
│ overflow: hidden; │
│ } │
│ │
│ p { │
│ margin: 0 0 0.6em; │
│ } │
│ p:last-child { │
│ margin-bottom: 0; │
│ } │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET