387 lines
6.4 KiB
CSS
387 lines
6.4 KiB
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;
|
|
}
|
|
|
|
|
|
.codeblock {
|
|
.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 */
|
|
/* comment: hashbang */
|
|
/* comment: multiline */
|
|
/* comment: single */
|
|
/* comment: special */
|
|
/* comment: preproc */
|
|
/* comment: preproc file */
|
|
.c, .ch, .cm, .c1, .cs, .cp, .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;
|
|
}
|
|
}
|