diff --git a/site/_includes/css/prism.css b/site/_includes/css/prism.css index 3d643b7..858194b 100644 --- a/site/_includes/css/prism.css +++ b/site/_includes/css/prism.css @@ -23,7 +23,11 @@ pre[class*="language-"] { padding: 0.1em; } pre[class*="language-"] { - background: color-mix(in lch, var(--c-text-background-light) 20%, transparent); + background: color-mix( + in lch, + var(--c-text-background-light) 20%, + transparent + ); > code { white-space: pre-wrap; word-break: break-all; @@ -34,12 +38,18 @@ pre[class*="language-"] { box-shadow: inset 0 0 6rem -2rem var(--c-highlight); counter-reset: lineNumber; --places: 1; - &:has(.highlight-line:nth-child(10)) { --places: 2 } - &:has(.highlight-line:nth-child(100)) { --places: 3 } - &:has(.highlight-line:nth-child(1000)) { --places: 4 } + &:has(.highlight-line:nth-child(10)) { + --places: 2; + } + &:has(.highlight-line:nth-child(100)) { + --places: 3; + } + &:has(.highlight-line:nth-child(1000)) { + --places: 4; + } --lineNumWidth: calc(1em + var(--places) * 1ch); &::before { - content: ''; + content: ""; position: absolute; height: 100%; top: 0; @@ -69,56 +79,81 @@ p:has(+ pre[class*="language-"]) > code { border-radius: none; background: none; } -p:has(>code) + pre[class*="language-"] { +p:has(> code) + pre[class*="language-"] { margin-top: 0; } [class*="language-"] .namespace { opacity: 0.7; } -.token.id { font-weight: bold; } -.token.important { font-weight: bold; } +.token.id { + font-weight: bold; +} +.token.important { + font-weight: bold; +} @media screen { - pre[class*="language-"] { color: var(--c-text-dim); } + pre[class*="language-"] { + color: var(--c-text-dim); + } .language-css > code, .language-sass > code, .language-scss > code { - color: #fd9170; + color: oklch(85% 0.139 37.8); + } + .token.comment, + .token.doctype, + .token.prolog { + font-weight: 700; + opacity: 0.75; + } + .token.deleted, + .token.entity, + .token.selector, + .token.tag, + .token.url, + .token.variable { + color: oklch(85% 0.275 23.2); + } + .token.number, + .token.unit { + color: oklch(85% 0.201 37.8); + } + .token.attr-name, + .token.builtin, + .token.class { + color: oklch(85% 0.128 81.1); + } + .token.class-name, + .token.hexcode, + .token.regex { + color: oklch(85% 0.214 113.5); + } + .token.attr-value, + .token.attribute, + .token.pseudo-class, + .token.pseudo-element, + .token.string { + color: oklch(85% 0.201 129.4); + } + .token.cdata, + .token.char, + .token.inserted, + .token.property { + color: oklch(85% 0.075 188.2); + } + .token.operator, + .token.punctuation { + color: oklch(85% 0.094 225.9); + } + .token.atrule, + .token.boolean, + .token.constant, + .token.function, + .token.id, + .token.important, + .token.keyword, + .token.symbol { + color: oklch(85% 0.214 311.1); } - .token.atrule { color: #c792ea; } - .token.attr-name { color: #ffcb6b; } - .token.attr-value { color: #a5e844; } - .token.attribute { color: #a5e844; } - .token.boolean { color: #c792ea; } - .token.builtin { color: #ffcb6b; } - .token.cdata { color: #80cbc4; } - .token.char { color: #80cbc4; } - .token.class { color: #ffcb6b; } - .token.class-name { color: #f2ff00; } - .token.comment { color: #616161; } - .token.constant { color: #c792ea; } - .token.deleted { color: #ff6666; } - .token.doctype { color: #616161; } - .token.entity { color: #ff6666; } - .token.function { color: #c792ea; } - .token.hexcode { color: #f2ff00; } - .token.id { color: #c792ea; } - .token.important { color: #c792ea; } - .token.inserted { color: #80cbc4; } - .token.keyword { color: #c792ea; } - .token.number { color: #fd9170; } - .token.operator { color: #89ddff; } - .token.prolog { color: #616161; } - .token.property { color: #80cbc4; } - .token.pseudo-class { color: #a5e844; } - .token.pseudo-element { color: #a5e844; } - .token.punctuation { color: #89ddff; } - .token.regex { color: #f2ff00; } - .token.selector { color: #ff6666; } - .token.string { color: #a5e844; } - .token.symbol { color: #c792ea; } - .token.tag { color: #ff6666; } - .token.unit { color: #fd9170; } - .token.url { color: #ff6666; } - .token.variable { color: #ff6666; } }