From 477eb6f606bec51b358b71bad828bc4a9c0ebe52 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 25 Oct 2025 15:02:59 -0300 Subject: content, css: content-code overflow indicator --- src/content/dependencies/transformContent.js | 4 ++-- src/static/css/site.css | 26 +++++++++++++++++++++----- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index e6d847fa..8e902647 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -43,11 +43,11 @@ const multilineMarked = new Marked({ .replaceAll(/ {2,}/g, spaces => ' '.repeat(spaces.length))); return ( - `
` +
+        `
` +
         (lines.length > 1 ? '\n' : '') +
         lines.join('
\n') + (lines.length > 1 ? '\n' : '') + - `
` + `
` ); }, }, diff --git a/src/static/css/site.css b/src/static/css/site.css index bde7e0cc..347881a2 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1555,21 +1555,37 @@ li:not(:first-child:last-child) .tooltip:where(:not(.cover-artwork .tooltip)), } pre.content-code { - background: black; - color: white; - + position: relative; white-space: nowrap; - padding: 5px; max-width: calc(100vw - 180px); /* Welcome to heck. */ font-family: inherit; - overflow-x: scroll; border: 1px dashed var(--primary-color); } +pre.content-code span { + display: block; + overflow-x: scroll; + padding: 5px 20px 5px 5px; + background: black; + color: white; +} + +pre.content-code::before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + box-shadow: -15px 0 24px -8px black inset; + pointer-events: none; +} + pre.content-code code { font-family: "courier new", monospace; font-weight: 800; -- cgit 1.3.0-6-gf8a5