1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 14:08:29 -04:00
jarv.is/assets/sass/components/_syntax.scss
Jake Jarvis 363b4edf1c
shift asset processing to webpack (#424)
also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
2021-06-19 17:19:01 -04:00

244 lines
3.3 KiB
SCSS

// all code
code {
font-size: 0.925em;
letter-spacing: 0;
page-break-inside: avoid; // stylelint-disable-line plugin/no-unsupported-browser-features
}
// inline code in paragraphs/elsewhere (single backticks)
:not(pre) > code {
padding: 0.075em 0.325em;
margin: 0 0.1em;
border: 1px solid;
}
// allow for inline code in post/page titles -- override above styles and match title
.title code {
font-size: 1em;
background: none !important;
border: 0 !important;
margin: 0 0.075em !important;
padding: 0 !important;
color: inherit !important;
}
h1.title code {
font-weight: 600;
}
// code fences
div.highlight {
line-height: 1.6;
max-width: 100%;
overflow-x: scroll;
margin: 1em 0;
border: 1px solid;
pre {
padding-left: 1.5em;
margin: 1em 0;
}
// code fences without syntax highlighting
> pre > code {
padding-right: 1.5em;
}
}
// global table styles for line numbers and font styles
.chroma {
.lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block;
}
// columns
.lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
// add right padding to second column (the code) when fence overflows
&:nth-of-type(2) {
padding-right: 1em;
}
}
// line numbers
.ln,
.lnt {
user-select: none;
}
.gh,
.gi,
.gu {
font-weight: bold;
}
.kd,
//.nb,
//.nl,
//.nv,
.vc,
.vg,
.vi,
.ge {
font-style: italic;
}
.gl {
text-decoration: underline;
}
}
/*! Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
body.light {
div.highlight,
:not(pre) > code {
color: #313131;
background-color: #fbfbfb;
border-color: #d5d5d5;
}
.chroma {
.k,
.kc,
.kd,
.kp,
.kr,
.kt,
.no {
color: #029cb9;
}
.na,
.nc,
.nd,
.ne,
.nf,
.nx {
color: #70a800;
}
.nt,
.o,
.ow,
.kn {
color: #f92672;
}
.l,
.se,
.m,
.mb,
.mf,
.mh,
.mi,
.il,
.mo {
color: #ae81ff;
}
.ld,
.s,
.sa,
.sb,
.sc,
.dl,
.sd,
.s2,
.sh,
.si,
.sx,
.sr,
.s1,
.ss {
color: #d88200;
}
.c,
.ch,
.cm,
.c1,
.cs,
.cp,
.cpf {
color: #75715e;
}
.lnt {
color: #8a8a8a;
}
}
}
/*! Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
body.dark {
div.highlight,
:not(pre) > code {
color: #e4e4e4;
background-color: #252525;
border-color: #535353;
}
.chroma {
.k,
.kc,
.kd,
.kp,
.kr,
.kt,
.no {
color: #3b9dd2;
}
.na,
.nc,
.nd,
.ne,
.nf,
.nx {
color: #78df55;
}
.nt,
.o,
.ow,
.kn {
color: #f95757;
}
.l,
.se,
.m,
.mb,
.mf,
.mh,
.mi,
.il,
.mo {
color: #d588fb;
}
.ld,
.s,
.sa,
.sb,
.sc,
.dl,
.sd,
.s2,
.sh,
.si,
.sx,
.sr,
.s1,
.ss {
color: #fd992a;
}
.c,
.ch,
.cm,
.c1,
.cs,
.cp,
.cpf {
color: #929292;
}
.lnt {
color: #b1b1b1;
}
}
}