From e3a577fc3073cdcac082eecce1ebaf0fc69b8534 Mon Sep 17 00:00:00 2001 From: Niklan Date: Fri, 29 Aug 2025 19:55:39 +0500 Subject: [PATCH 1/2] feat(theme): improve code element styling - Blend background color with foreground for natural appearance - Add box-decoration-break for better long line visuals --- app/themes/laszlo/assets/css/02-element/code.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css index 092b6dac..08f38050 100644 --- a/app/themes/laszlo/assets/css/02-element/code.css +++ b/app/themes/laszlo/assets/css/02-element/code.css @@ -3,8 +3,9 @@ color: var(--color-on-surface-variant); border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-1); - background: var(--color-surface-container-lowest); + background: color-mix(in sRGB, var(--color-surface-container-lowest), transparent); font: var(--typography-code); + box-decoration-break: clone; } pre > code { From 08a9447e7c21fec2d63ce6778aa86f827f4d8232 Mon Sep 17 00:00:00 2001 From: Niklan Date: Fri, 29 Aug 2025 20:01:04 +0500 Subject: [PATCH 2/2] feat(theme): improve code element styling - Blend background color with foreground for natural appearance - Add box-decoration-break for better long line visuals --- app/themes/laszlo/assets/css/02-element/code.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css index 08f38050..87059b21 100644 --- a/app/themes/laszlo/assets/css/02-element/code.css +++ b/app/themes/laszlo/assets/css/02-element/code.css @@ -3,9 +3,13 @@ color: var(--color-on-surface-variant); border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-1); - background: color-mix(in sRGB, var(--color-surface-container-lowest), transparent); - font: var(--typography-code); + background: color-mix( + in sRGB, + var(--color-surface-container-lowest), + transparent + ); box-decoration-break: clone; + font: var(--typography-code); } pre > code {