From 52d468a46ea273def63e6440f3250503ebbd73ae Mon Sep 17 00:00:00 2001 From: Josh-Heaps Date: Sat, 7 Mar 2026 12:26:58 -0700 Subject: [PATCH] Update blog css --- JoshHeaps.Net/Pages/Blog/Post.cshtml | 6 + JoshHeaps.Net/Pages/_Layout.cshtml | 2 +- JoshHeaps.Net/wwwroot/css/blog/post.css | 21 ++- .../wwwroot/css/blog/prism-tomorrow.css | 154 ++++++++++++++++++ 4 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 JoshHeaps.Net/wwwroot/css/blog/prism-tomorrow.css diff --git a/JoshHeaps.Net/Pages/Blog/Post.cshtml b/JoshHeaps.Net/Pages/Blog/Post.cshtml index 2e4f6d7..91a1a05 100644 --- a/JoshHeaps.Net/Pages/Blog/Post.cshtml +++ b/JoshHeaps.Net/Pages/Blog/Post.cshtml @@ -29,4 +29,10 @@ @section Styles { + +} + +@section Scripts { + + } diff --git a/JoshHeaps.Net/Pages/_Layout.cshtml b/JoshHeaps.Net/Pages/_Layout.cshtml index 207e85a..d0a8f1a 100644 --- a/JoshHeaps.Net/Pages/_Layout.cshtml +++ b/JoshHeaps.Net/Pages/_Layout.cshtml @@ -1,6 +1,6 @@ @{ Layout = null; - ViewData["cssVersion"] = "1.0.2"; // <--- change this once to bust cache + ViewData["cssVersion"] = "1.0.5"; // <--- change this once to bust cache } diff --git a/JoshHeaps.Net/wwwroot/css/blog/post.css b/JoshHeaps.Net/wwwroot/css/blog/post.css index 7ac4a9e..f7db041 100644 --- a/JoshHeaps.Net/wwwroot/css/blog/post.css +++ b/JoshHeaps.Net/wwwroot/css/blog/post.css @@ -130,11 +130,30 @@ body { padding: 1.25rem 1.5rem; overflow-x: auto; margin: 0 0 1.25rem; + scrollbar-width: thin; + scrollbar-color: var(--color-border) transparent; +} + +.post-content pre::-webkit-scrollbar { + height: 6px; +} + +.post-content pre::-webkit-scrollbar-track { + background: transparent; +} + +.post-content pre::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 3px; +} + +.post-content pre[class*="language-"] { + background: var(--color-surface); } .post-content pre code { background: none; - color: var(--color-text); + color: var(--prism-text); padding: 0; font-size: 0.85rem; } diff --git a/JoshHeaps.Net/wwwroot/css/blog/prism-tomorrow.css b/JoshHeaps.Net/wwwroot/css/blog/prism-tomorrow.css new file mode 100644 index 0000000..ce18836 --- /dev/null +++ b/JoshHeaps.Net/wwwroot/css/blog/prism-tomorrow.css @@ -0,0 +1,154 @@ +/* Prism.js Tomorrow Night theme (customized) */ +/* Original: https://github.com/PrismJS/prism/blob/master/themes/prism-tomorrow.css */ + +/* ============================================ + Theme colors — edit these to restyle + ============================================ */ +:root { + --prism-background: #0a0a0a; + --prism-text: #909090; + --prism-comment: #555; + --prism-punctuation: #707070; + --prism-tag: #09ff00; + --prism-function: #fff; + --prism-boolean: #1ab815; + --prism-number: #1ab815; + --prism-property: #c8c8c8; + --prism-class: #c8c8c8; + --prism-keyword: #09ff00; + --prism-string: #43c760; + --prism-variable: #43c760; + --prism-operator: #999; + --prism-inserted: #09ff00; +} + +code[class*="language-"], +pre[class*="language-"] { + color: var(--prism-text); + background: none; + font-family: var(--font-mono); + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + tab-size: 4; + hyphens: none; +} + +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: var(--prism-background); +} + +:not(pre) > code[class*="language-"] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +/* Comments */ +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--prism-comment); +} + +/* Punctuation */ +.token.punctuation { + color: var(--prism-punctuation); +} + +/* Tags, attributes, deleted */ +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: var(--prism-tag); +} + +/* Function names */ +.token.function-name, +.token.function { + color: var(--prism-function); +} + +/* Booleans */ +.token.boolean { + color: var(--prism-boolean); +} + +/* Numbers */ +.token.number { + color: var(--prism-number); +} + +/* Properties */ +.token.property { + color: var(--prism-property); +} + +/* Classes, constants, symbols */ +.token.class-name, +.token.constant, +.token.symbol { + color: var(--prism-class); +} + +/* Keywords, selectors, builtins */ +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: var(--prism-keyword); +} + +/* Strings, chars, attr values, regex */ +.token.string, +.token.char, +.token.attr-value, +.token.regex { + color: var(--prism-string); +} + +/* Variables */ +.token.variable { + color: var(--prism-variable); +} + +/* Operators, entities, URLs */ +.token.operator, +.token.entity, +.token.url { + color: var(--prism-operator); +} + +/* Inserted */ +.token.inserted { + color: var(--prism-inserted); +} + +/* Formatting */ +.token.bold, +.token.important { + font-weight: 700; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +}