hugo-theme-termlite/assets/css/010_colors.css

{{/*
  colors.css
  Eryn Wells <eryn@erynwells.me>
  vim: set sw=2 sts=2:
*/}}




/*********
 # COLORS
 *********/

:root {
  --gray1: rgb(14 16 27);
  --gray2: rgb(28 33 49);
  --gray3: rgb(52 59 82);
  --gray4: rgb(87 94 120);
  --gray5: rgb(138 144 166);
  --gray6: rgb(200 204 217);
  --gray7: rgb(249 251 255);

  --light-blue: rgb(69 212 243);
  --blue: rgb(28 168 239);
  --dark-blue: rgb(63 46 231);
  --lilac: rgb(187 121 245);
  --purple: rgb(197 141 244);

  --light: var(--gray7);
  --dark: var(--gray1);

  --background-color: var(--light);
  --hr-color: var(--dark);
  --text-color: var(--dark);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Reverse the grayscale ramp in dark mode. */
    --gray7: rgb(17 19 28);
    --gray6: rgb(28 32 48);
    --gray5: rgb(53 59 82);
    --gray4: rgb(86 96 121);
    --gray3: rgb(139 144 164);
    --gray2: rgb(206 207 214);
    --gray1: rgb(255 253 249);

    --background-color: var(--dark);
    --hr-color: var(--light);
    --text-color: var(--light);
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

hr {
  border: 0;
  border-top: 1pt solid var(--hr-color);
  color: var(--hr-color);
}

.content {
  .heading__anchor {
    color: var(--gray5);
    transition: 1s color;
  }

  .heading__anchor:hover {
    color: var(--text-color);
  }
}





/***********
 # GRADIENT
 ***********/

.text-color--gradient {
  background:
    radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
    radial-gradient(circle at 30% 30%, var(--light-blue), var(--blue) 20%, transparent 80%),
    radial-gradient(ellipse at 95% 20%, var(--dark-blue), var(--blue) 70%, transparent 80%),
    radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
    radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
    radial-gradient(ellipse at 50% 50%, var(--dark-blue), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  a[href] {
    color: inherit;
  }
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-color--gradient {
    --color1: rgb(103 128 229);
    --color2: rgb(130 90 227);
    --color3: rgb(135 101 228);
    --color4: rgb(125 115 229);
    --color5: rgb(107 130 230);
    --color6: rgb(77 153 232);
    --color7: rgb(74 136 230);
    --color8: rgb(71 128 228);
    --color9: rgb(65 80 224);
    --color10: rgb(61 58 223);

    span:nth-child(10n + 1) { color: var(--color1); }
    span:nth-child(10n + 2) { color: var(--color2); }
    span:nth-child(10n + 3) { color: var(--color3); }
    span:nth-child(10n + 4) { color: var(--color4); }
    span:nth-child(10n + 5) { color: var(--color5); }
    span:nth-child(10n + 6) { color: var(--color6); }
    span:nth-child(10n + 7) { color: var(--color7); }
    span:nth-child(10n + 8) { color: var(--color8); }
    span:nth-child(10n + 9) { color: var(--color9); }
    span:nth-child(10n)     { color: var(--color10); }
  }
}





/**********************
 # SYNTAX HIGHLIGHTING
 **********************/

.color-theme__dracula {
  --background: #282A36;
  --foreground: #f8f8f2;
  --selection: #44475A;
  --comment: #6272A4;
  --red: #ff5555;
  --orange: #ffB86C;
  --yellow: #F1FA8C;
  --green: #50FA7B;
  --purple: #BD93F9;
  --cyan: #8BE9FD;
  --pink: #FF79C6;
}


.content {
  .codeblock {
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--gray6);

    .err {
      color: var(--red);
    }

    /* line link */
    .lnlinks {
      outline: none;
      text-decoration: none;
      color: inherit;
    }

    .line {
      display: flex;
    }

    /* keyword */
    .k {
      color: var(--purple);
    }

    /* keyword: constant */
    /* keyword: declaration */
    /* keyword: pseudo */
    /* keyword: reserved */
    .kc, .kd, .kp, .kr {
      color: var(--orange);
    }

    /* keyword: namespace */
    .kn {
      color: var(--yellow);
    }

    /* keyword: type */
    .kt {
      color: var(--yellow);
      font-weight: bolder;
    }

    /* line highlight */
    .hl {
      background-color: var(--selection);
    }

    /* line numbers */
    .ln {
      white-space: pre;
      -webkit-user-select: none;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #7f7f7f;
    }

    /* NameAttribute */
    .na {
      color: #a6e22e;
    }

    /* NameClass */
    .nc {
      color: #a6e22e;
    }

    /* NameConstant */
    .no {
      color: #66d9ef;
    }

    /* name: decorator */
    .nd {
      color: #a6e22e;
    }

    /* name: exception */
    .ne {
      color: var(--green);
      font-weight: bolder;
    }

    /* NameFunction */
    .nf {
      color: var(--green);
    }

    /* NameOther */
    .nx {
      color: #a6e22e;
    }

    /* NameTag */
    .nt {
      color: #f92672;
    }

    /* Literal */
    .l {
      color: #ae81ff;
    }

    /* LiteralDate */
    .ld {
      color: #e6db74;
    }

    /* LiteralString */
    .s {
      color: #e6db74;
    }

    /* LiteralStringBacktick */
    .sb {
      color: #e6db74;
    }

    /* LiteralStringChar */
    .sc {
      color: #e6db74;
    }

    /* LiteralStringDelimiter */
    .dl {
      color: #e6db74;
    }

    /* LiteralNumberIntegerLong */
    .il {
      color: #ae81ff;
    }

    /* literal: number */
    /* literal: number, bin */
    /* literal: number, float */
    /* literal: number, hex */
    /* literal: number, integer */
    .m, .mb, .mf, .mh, .mi {
      color: var(--purple);
      font-weight: bolder;
    }

    /* LiteralNumberOct */
    .mo {
      color: #ae81ff;
    }

    /* name: built-in */
    .nb {
      color: var(--green);
    }

    /* Operator */
    .o {
      color: var(--orange);
    }

    /* OperatorWord */
    .ow {
      color: #f92672;
    }

    /* LiteralStringDoc */
    .sd {
      color: #e6db74;
    }

    /* LiteralStringDouble */
    .s2 {
      color: #e6db74;
    }

    /* LiteralStringEscape */
    .se {
      color: #ae81ff;
    }

    /* LiteralStringHeredoc */
    .sh {
      color: #e6db74;
    }

    /* LiteralStringInterpol */
    .si {
      color: #e6db74;
    }

    /* LiteralStringOther */
    .sx {
      color: #e6db74;
    }

    /* literal: string, regex */
    .sr {
      color: var(--green);
    }

    /* literal: string, affix */
    /* literal: string, single */
    /* literal: string, symbol */
    .sa, .s1, .ss {
      color: var(--yellow);
    }

    /* Comment */
    .c {
      color: #75715e;
    }

    /* CommentHashbang */
    .ch {
      color: #75715e;
    }

    /* CommentMultiline */
    .cm {
      color: #75715e;
    }

    /* CommentSingle */
    .c1 {
      color: #75715e;
    }

    /* CommentSpecial */
    .cs {
      color: #75715e;
    }

    /* CommentPreproc */
    .cp {
      color: #75715e;
    }

    /* CommentPreprocFile */
    .cpf {
      color: #75715e;
    }

    /* GenericDeleted */
    .gd {
      color: #f92672;
    }

    /* GenericEmph */
    .ge {
      font-style: italic;
    }

    /* GenericInserted */
    .gi {
      color: #a6e22e;
    }

    /* GenericStrong */
    .gs {
      font-weight: bold;
    }

    /* GenericSubheading */
    .gu {
      color: #75715e;
    }
  }
}