Skip to main content

HTML_CSS

Constant HTML_CSS 

Source
const HTML_CSS: &str = r#"
:root { color-scheme: light dark; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0;
       padding: 2rem 1.25rem; line-height: 1.5; background: #fff; color: #1a1a1a; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.sub { color: #666; margin: 0 0 1.5rem; font-size: .9rem; }
.cards { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.card { border: 1px solid #e0e0e0; border-radius: 8px; padding: .75rem 1rem; min-width: 8rem; }
.card .n { font-size: 1.5rem; font-weight: 600; }
.card .l { font-size: .75rem; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #ececec;
         white-space: nowrap; }
th { position: sticky; top: 0; background: #fafafa; font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cue { white-space: normal; min-width: 16rem; }
.t3 { color: #b3261e; font-weight: 600; }
.t2 { color: #9a6700; font-weight: 600; }
.t1, .tE { color: #888; }
.tM { color: #b3261e; }
code { background: #f3f3f3; padding: .1rem .3rem; border-radius: 3px; font-size: .9em; }
@media (prefers-color-scheme: dark) {
  body { background: #14161a; color: #e6e6e6; }
  .card, th, td { border-color: #2c2f36; }
  th { background: #1b1e24; }
  .sub, .card .l, .t1, .tE { color: #9aa0a6; }
  code { background: #23262c; }
  .t3, .tM { color: #ff8a80; }
  .t2 { color: #ffd180; }
}
"#;