style.css (1073B)
1 :root { 2 --dark-bg: #1d2c3a; 3 --dark-fg: #acbdcf; 4 --light-bg: #def0ff; 5 --light-fg: #455564; 6 } 7 8 html { 9 font-size: 24px; 10 color: var(--light-fg); 11 background: var(--light-bg); 12 13 } 14 15 body { 16 line-height: 1.5; 17 margin: 0px auto; 18 max-width: 35rem; 19 padding: 0.75rem; 20 } 21 22 h1 { 23 font-size: 2rem; 24 } 25 26 ul > li { 27 list-style: url("/static/spiral-for-light-mode.svg") 28 } 29 30 @media (prefers-color-scheme: dark) { 31 html { 32 background: var(--dark-bg); 33 color: var(--dark-fg); 34 } 35 ul > li { 36 list-style: url("/static/spiral-for-dark-mode.svg") 37 } 38 } 39 40 .color-synth .samples { 41 display: flex; 42 max-width: 100%; 43 } 44 45 .color-synth .samples > * { 46 flex: auto; 47 min-width: 1px; 48 max-width: 8rem; 49 margin: 0 0 0.5rem 0.5rem; 50 border-radius: 0.2rem; 51 } 52 53 .color-synth .samples > *:first-child { 54 margin-left: 0; 55 } 56 57 @media (max-width: 600px) { 58 html { 59 font-size: 18px; 60 } 61 .color-synth .samples { 62 flex-wrap: wrap; 63 } 64 .color-synth .samples > * { 65 max-width: calc(50% - 0.25rem); 66 } 67 .color-synth .samples > *:nth-child(2n+1) { 68 margin-left: 0; 69 } 70 }