Eryn Wells
cb8ad426d5
Draw only one hash for headings, and place them in the gutter in wide layouts, or trailing the heading text in narrow layouts. Do this with grid in the wide version, and flexbox in the narrow layout. Add a --text-color-light CSS variable for content that should be lighter than --text-color-secondary.
368 lines
6.2 KiB
CSS
368 lines
6.2 KiB
CSS
|
|
|
|
|
|
|
|
|
|
/*********
|
|
# 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);
|
|
|
|
--background-color: var(--gray7);
|
|
--hr-color: var(--gray1);
|
|
--text-color: var(--text-color-primary);
|
|
--text-color-primary: var(--gray1);
|
|
--text-color-secondary: var(--gray4);
|
|
--text-color-light: var(--gray5);
|
|
}
|
|
@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);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1pt solid var(--hr-color);
|
|
color: var(--hr-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;
|
|
}
|
|
}
|