fix styling of code blocks

Signed-off-by: Robert Günzler <r@gnzler.io>

3 files changed, 42 insertions, 48 deletions

diff --git a/links/main.css b/links/main.css
index 2773b3f..013f7e5 100644
--- a/links/main.css
+++ b/links/main.css
@@ -9,6 +9,8 @@
   --body-spacing: 45px;
   --body-line-height: 1.3;
   --body-inline-padding: 15px;
+
+  --dashed: 1px dashed color-mix(in srgb, var(--bg) 80%, var(--fg));
 }
 
 ::selection {
@@ -141,24 +143,24 @@ main>q {
   margin-left: 30px;
 }
 
-main>pre {
+main pre {
   background: color-mix(in srgb, var(--bg) 95%, var(--fg));
-  border: 1px dashed color-mix(in srgb, var(--bg) 80%, var(--fg));
-  font-family: monospace;
+  border: var(--dashed);
   padding: var(--body-inline-padding);
+  margin-bottom: 30px;
+  overflow-x: scroll;
 }
 
-main>code {
+main code {
   font-family: monospace;
-  margin-bottom: 30px;
-  display: block;
-  background: var(--fg);
-  color: var(--bg);
-  padding: var(--body-inline-padding);
-  white-space: pre
 }
 
-main>code comment {
+main p>code {
+  border: var(--dashed);
+  padding: 1px 4px;
+}
+
+main code comment {
   color: #777
 }
 
diff --git a/site/unicode-range.html b/site/unicode-range.html
index a15a7f4..3e0b9ca 100644
--- a/site/unicode-range.html
+++ b/site/unicode-range.html
@@ -33,28 +33,25 @@
 </header>
 <main>
 <p>While working on my custom
-    <a href="https://apps.ankiweb.net/" target="_blank">Anki</a>
-    cards for learning Japanese
+  <a href="https://apps.ankiweb.net/" target="_blank">Anki</a>
+  cards for learning Japanese
     and Turkish, I
     found that my font of choice for Japanese -
-    <a href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" target="_blank">IPAex</a>
-    - was not
+  <a href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" target="_blank">IPAex</a>
+  - was not
     properly supporting glyphs used by
     Turkish, like
-    <a href="https://en.wikipedia.org/wiki/%C4%9E" target="_blank">ğ</a>.
-</p>
+  <a href="https://en.wikipedia.org/wiki/%C4%9E" target="_blank">ğ</a>.</p>
 <figure>
-    <img src="/media/content/unicode-range/before.jpg" alt="before">
-    <figcaption aria-hidden="true">before</figcaption>
+  <img src="/media/content/unicode-range/before.jpg" alt="before">
+  <figcaption aria-hidden="true">before</figcaption>
 </figure>
 <p>To fix this i am using a property of the
-    <code>@font-face</code>
-    rule
+  <code>@font-face</code>
+  rule
     which limits custom fonts to source their glyphs from a subset of the
-    unicode range and force fallback to the next font in the set.
-</p>
-<pre><code>
-@font-face {
+    unicode range and force fallback to the next font in the set.</p>
+<pre><code>@font-face {
     font-family: "IPAexGothic";
     src:
         local("IPAexGothic"),
@@ -73,15 +70,14 @@
         IPAexGothic,
         Noto Sans,
         sans;
-}
-</code></pre>
+}</code></pre>
 <figure>
-    <img src="/media/content/unicode-range/after.jpg" alt="after">
-    <figcaption aria-hidden="true">after</figcaption>
+  <img src="/media/content/unicode-range/after.jpg" alt="after">
+  <figcaption aria-hidden="true">after</figcaption>
 </figure>
 </main>
 <footer>
-Edited on 2025-05-01 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/unicode-range.htm" target="_blank">[src]</a>
+Edited on 2025-11-22 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/unicode-range.htm" target="_blank">[src]</a>
 <a href="mailto:~robertgzr/public-inbox@lists.sr.ht">[comments]</a>
 <br>
 <b>robertgzr</b>
diff --git a/src/inc/unicode-range.htm b/src/inc/unicode-range.htm
index 727f596..1bfaa5d 100644
--- a/src/inc/unicode-range.htm
+++ b/src/inc/unicode-range.htm
@@ -1,26 +1,23 @@
 <p>While working on my custom
-    <a href="https://apps.ankiweb.net/" target="_blank">Anki</a>
-    cards for learning Japanese
+  <a href="https://apps.ankiweb.net/" target="_blank">Anki</a>
+  cards for learning Japanese
     and Turkish, I
     found that my font of choice for Japanese -
-    <a href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" target="_blank">IPAex</a>
-    - was not
+  <a href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" target="_blank">IPAex</a>
+  - was not
     properly supporting glyphs used by
     Turkish, like
-    <a href="https://en.wikipedia.org/wiki/%C4%9E" target="_blank">ğ</a>.
-</p>
+  <a href="https://en.wikipedia.org/wiki/%C4%9E" target="_blank">ğ</a>.</p>
 <figure>
-    <img src="/media/content/unicode-range/before.jpg" alt="before">
-    <figcaption aria-hidden="true">before</figcaption>
+  <img src="/media/content/unicode-range/before.jpg" alt="before">
+  <figcaption aria-hidden="true">before</figcaption>
 </figure>
 <p>To fix this i am using a property of the
-    <code>@font-face</code>
-    rule
+  <code>@font-face</code>
+  rule
     which limits custom fonts to source their glyphs from a subset of the
-    unicode range and force fallback to the next font in the set.
-</p>
-<pre><code>
-@font-face {
+    unicode range and force fallback to the next font in the set.</p>
+<pre><code>@font-face {
     font-family: "IPAexGothic";
     src:
         local("IPAexGothic"),
@@ -39,9 +36,8 @@
         IPAexGothic,
         Noto Sans,
         sans;
-}
-</code></pre>
+}</code></pre>
 <figure>
-    <img src="/media/content/unicode-range/after.jpg" alt="after">
-    <figcaption aria-hidden="true">after</figcaption>
+  <img src="/media/content/unicode-range/after.jpg" alt="after">
+  <figcaption aria-hidden="true">after</figcaption>
 </figure>