master @ 41 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ // Paper page chrome. │
│ │
│ .page { │
│ background: var(--paper); │
│ color: var(--ink); │
│ font-family: var(--mono); │
│ padding: var(--page-pad-t) var(--page-pad-r) var(--page-pad-b) var(--page-pad-l) │
│ ; │
│ position: relative; │
│ width: var(--page-w); │
│ flex-shrink: 0; │
│ min-height: 100vh; │
│ box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px -12px rgba(0,0,0,0.18); │
│ overflow: hidden; │
│ │
│ &::before { │
│ content: ""; │
│ position: absolute; │
│ left: 0; top: 0; bottom: 0; │
│ width: var(--punch-w); │
│ border-right: 1px dashed var(--ink); │
│ background-image: │
│ radial-gradient(circle at 14px 22px, var(--paper) 4px, transparent 5px), │
│ radial-gradient(circle at 14px 22px, var(--ink) 5px, transparent 6px); │
│ background-repeat: repeat-y; │
│ background-size: 28px 44px; │
│ background-position: 0 16px; │
│ } │
│ │
│ @media (max-width: 700px) { │
│ &::before { display: none; } │
│ box-shadow: none; │
│ } │
│ │
│ @media print { │
│ box-shadow: none; │
│ min-height: auto; │
│ overflow: visible; │
│ &::before { display: none; } │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ // Paper page chrome. │
│ │
│ .page { │
│ background: var(--paper); │
│ color: var(--ink); │
│ font-family: var(--mono); │
│ padding: var(--page-pad-t) var(--page-pad- │
│ r) var(--page-pad-b) var(--page-pad-l); │
│ position: relative; │
│ width: var(--page-w); │
│ flex-shrink: 0; │
│ min-height: 100vh; │
│ box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 │
│ 8px 24px -12px rgba(0,0,0,0.18); │
│ overflow: hidden; │
│ │
│ &::before { │
│ content: ""; │
│ position: absolute; │
│ left: 0; top: 0; bottom: 0; │
│ width: var(--punch-w); │
│ border-right: 1px dashed var(--ink); │
│ background-image: │
│ radial-gradient(circle at 14px 22px, v │
│ ar(--paper) 4px, transparent 5px), │
│ radial-gradient(circle at 14px 22px, v │
│ ar(--ink) 5px, transparent 6px); │
│ background-repeat: repeat-y; │
│ background-size: 28px 44px; │
│ background-position: 0 16px; │
│ } │
│ │
│ @media (max-width: 700px) { │
│ &::before { display: none; } │
│ box-shadow: none; │
│ } │
│ │
│ @media print { │
│ box-shadow: none; │
│ min-height: auto; │
│ overflow: visible; │
│ &::before { display: none; } │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET