/* ============================================================ Achtergrondtextuur, alternatieven voor het lijnenraster. Zet data-texture="a|b|c|d" op om te wisselen. Standaard (geen attribuut) is het huidige lijnenraster van 26px. ============================================================ */ /* ---------- A. Stippenraster: zelfde ritme, rustiger ---------- */ html[data-texture="a"] .blueprint { background-image: radial-gradient(rgb(0 28 67 / 0.11) 1px, transparent 1px); background-size: 24px 24px; } html[data-texture="a"] .blueprint-dark { background-image: radial-gradient(rgb(255 255 255 / 0.13) 1px, transparent 1px); background-size: 24px 24px; } /* ---------- B. Fijne halftone, in dezelfde taal als de hand ---------- */ html[data-texture="b"] .blueprint { background-image: radial-gradient(rgb(0 28 67 / 0.14) 0.9px, transparent 0.9px); background-size: 8px 8px; } html[data-texture="b"] .blueprint-dark { background-image: radial-gradient(rgb(255 255 255 / 0.16) 0.9px, transparent 0.9px); background-size: 8px 8px; } /* ---------- C. Diagonale arcering, als schetspapier ---------- */ html[data-texture="c"] .blueprint { background-image: repeating-linear-gradient( 45deg, rgb(0 28 67 / 0.055) 0 1px, transparent 1px 13px ); background-size: auto; } html[data-texture="c"] .blueprint-dark { background-image: repeating-linear-gradient( 45deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 13px ); background-size: auto; } /* ---------- D. Alleen horizontale lijnen, als lijntjespapier ---------- */ html[data-texture="d"] .blueprint { background-image: linear-gradient(to bottom, rgb(0 28 67 / 0.06) 1px, transparent 1px); background-size: 100% 30px; } html[data-texture="d"] .blueprint-dark { background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.08) 1px, transparent 1px); background-size: 100% 30px; } /* ---------- E. Geen textuur ---------- */ html[data-texture="e"] .blueprint, html[data-texture="e"] .blueprint-dark { background-image: none; }