$colors: ( background: #fff, background-dark: #000, primary: #000, primary-dark: #fff ); @mixin color($property, $varName) { #{$property}: map-get($colors, $varName); #{$property}: var(--#{$varName}, map-get($colors, $varName)); } @mixin color-border($property, $val1, $val2, $varName) { #{$property}: #{$val1} #{$val2} map-get($colors, $varName); #{$property}: #{$val1} #{$val2} var(--#{$varName}, map-get($colors, $varName)); } @mixin lightmode { --background: #{map-get($colors, background)}; --primary: #{map-get($colors, primary)}; color: #000; } @mixin darkmode { --background: #{map-get($colors, background-dark)}; --primary: #{map-get($colors, primary-dark)}; color: #fff; } .sans-serif { font-family: sans-serif; } .monospace { font-family: monospace; } html { @include lightmode; @media (prefers-color-scheme: dark) { @include darkmode; } scrollbar-color: var(--primary) transparent; } body { @extend .sans-serif; @include color(background, background); line-height: 1.5; margin: 0 auto; max-width: 700px; padding: 10px; word-break: break-word; overflow-wrap: break-word; * { @include color(color, primary); max-width: 100%; } } header { @extend .border-bottom; padding: 10px 0; * { margin-top: 0; margin-bottom: 0; } } h1 a, h2 a { text-decoration: none; } img { width: 100%; } input, textarea, select, button, .button, ::file-selector-button, ::-webkit-file-upload-button { @include color-border(border, 1px, solid, primary); @include color(background, background); @include color(color, primary); @extend .sans-serif; padding: 5px 10px; border-radius: 0; box-sizing: border-box; text-decoration: none; font-size: 1rem; line-height: 1.5; } form { input, textarea, select { margin-bottom: 5px; } } .fw-form { @extend .fw; input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { @extend .fw; } } blockquote { @include color-border(border-left, 5px, solid, primary); padding-left: 20px; margin-left: 0; } pre { padding: 10px; @include color-border(border, 1px, solid, primary); white-space: pre-wrap; } :not(pre) > code { font-size: 1rem; // Invert @include color(color, background); @include color(background, primary); } code { font-family: monospace; } table { border-collapse: collapse; border-spacing: 0; } tr, td, th { @include color-border(border, 1px, solid, primary); padding: 5px; } footer { @extend .border-top; padding: 10px 0; * { margin-top: 0; margin-bottom: 0; } } .border-top { @include color-border(border-top, 1px, solid, primary); } .border-bottom { @include color-border(border-bottom, 1px, solid, primary); } .p { display: block; margin-top: 1em; margin-bottom: 1em; } .flex { display: flex; } .hide { display: none; } .in { display: inline; } .fw { width: 100%; } .ct { text-align: center; } .h400p { height: 400px; } .captchaimg { background-color: #fff; } .tal { text-align: left; } .tar { text-align: right; } /* Print */ @media print { html { @include lightmode; } body { font-family: serif; max-width: inherit; } nav, #post-actions, #related, #interactions { display: none; } }