From b5234910c90a3bfa7ac842b1e5f6c4f77ebbda58 Mon Sep 17 00:00:00 2001 From: Marc Pervaz Boocha Date: Sun, 29 Jun 2025 19:30:55 +0530 Subject: Improved prism theme --- includes/base.html | 3 +- includes/main.css | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 150 insertions(+), 3 deletions(-) (limited to 'includes') diff --git a/includes/base.html b/includes/base.html index 27c13cb..7aabdf5 100644 --- a/includes/base.html +++ b/includes/base.html @@ -23,7 +23,6 @@ - @@ -35,7 +34,7 @@ - Git + Git
diff --git a/includes/main.css b/includes/main.css index 92fcf5c..b618b5a 100644 --- a/includes/main.css +++ b/includes/main.css @@ -37,9 +37,14 @@ canvas, audio, iframe, embed, +table, +pre[class*="language-"], object { - max-inline-size: 100%; display: block; + margin-left: auto; + margin-right: auto; + width: fit-content; + max-width: 90%; } h1 { @@ -68,6 +73,111 @@ td { border: 1px solid; } +th, +td { + padding: 1rem; +} + +th { + background: darkred; + color: white; +} + +code { + font-size: 0.9rem; + font-family: monospace; +} + +code[class*="language-"], +pre[class*="language-"] { + line-height: 1.5; + white-space: pre; +} + +pre[class*="language-"] { + border: solid; + padding: 1rem; + border-radius: 0.25rem; + min-width: 70%; +} + +.token { + &:is(.comment, .prolog, .doctype, .cdata) { + color: darkgreen; + font-style: italic; + + @media (prefers-color-scheme: dark) { + color: lightgreen; + } + } + + &.punctuation { + color: dimgray; + + @media (prefers-color-scheme: dark) { + color: lightgray; + } + } + + &:is(.property, .tag, .constant, .symbol, .deleted) { + color: firebrick; + + @media (prefers-color-scheme: dark) { + color: lightgray; + } + } + + &:is(.boolean, .number) { + color: teal; + + @media (prefers-color-scheme: dark) { + color: cyan; + } + } + + &:is(.selector, .attr-name, .string, .char, .builtin, .inserted) { + color: saddlebrown; + + @media (prefers-color-scheme: dark) { + color: wheat; + } + } + + &:is(.operator, .entity, .url, .variable) { + color: darkmagenta; + + @media (prefers-color-scheme: dark) { + color: orchid; + } + } + + &:is(.atrule, .attr-value, .keyword) { + color: darkred; + font-weight: bold; + + @media (prefers-color-scheme: dark) { + color: tomato; + } + } + + &:is(.function, .class-name) { + color: mediumblue; + font-weight: bold; + + @media (prefers-color-scheme: dark) { + color: dodgerblue; + } + } + + &:is(.regex, .important) { + color: chocolate; + + @media (prefers-color-scheme: dark) { + color: goldenrod; + } + } +} + @media screen { * :any-link:hover, @@ -129,12 +239,16 @@ td { border: 2px solid; } + th, aside { border: 2px solid; } } @media print { + * { + print-color-adjust: exact; + } header, footer { @@ -151,4 +265,38 @@ td { break-inside: avoid; break-before: auto; } + + h2, + h3, + th { + page-break-after: avoid; + } + + a[href]:after { + content: " <" attr(href) "> "; + } + + abbr[title]:after { + content: " (" attr(title) ") "; + } + + abbr { + text-decoration: none; + } + + pre[class*="language-"] { + background: none; + color: black; + border: solid black; + box-shadow: none; + page-break-inside: avoid; + } + + pre[class*="language-"] { + background: none; + color: black; + border: solid black; + box-shadow: none; + page-break-inside: avoid; + } } -- cgit v1.2.3-70-g09d2