From d6bb4e9911f662d233984704f2cba940c9cb1467 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Wed, 23 Oct 2024 19:44:42 +0200
Subject: [PATCH] make code examples horizontally scrollable

---
 static/base.css | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/static/base.css b/static/base.css
index bbdae71..933649d 100644
--- a/static/base.css
+++ b/static/base.css
@@ -5,7 +5,7 @@
     --color-error: #db344b;
 
     --color-brand-blue: #40b1f4;
-    
+
     --color-panel-border: rgba(0, 0, 0, 20%);
     --color-panel-background: #fff;
     --color-shaded-background: rgba(0, 0, 0, 5%);
@@ -18,7 +18,7 @@
     --line-height-em: 1.5em;
 }
 
-/* Reset */ 
+/* Reset */
 
 body {
     margin: 0;
@@ -36,12 +36,16 @@ body {
     font-family: var(--font-body);
 }
 
-button, textarea, input {
+button,
+textarea,
+input {
     font-size: inherit;
     font-family: inherit;
 }
 
-pre, code, textarea {
+pre,
+code,
+textarea {
     font-family: var(--font-monospace);
     line-height: var(--line-height);
 }
@@ -55,7 +59,7 @@ button {
     background-color: var(--color-panel-background);
 }
 
-/* Text areas */ 
+/* Text areas */
 
 input {
     border: none;
@@ -81,7 +85,7 @@ dialog::backdrop {
 
 /* Details */
 
-details>summary {
+details > summary {
     cursor: pointer;
 }
 
@@ -126,14 +130,13 @@ rkgk-throbber {
 
 .rkgk-panel {
     --panel-border-radius: 8px;
-    
+
     display: block;
     background: var(--color-panel-background);
     border: none;
     border-radius: var(--panel-border-radius);
-    box-shadow:
-        0 0 0 1px var(--color-panel-border);
-        /* 4px 4px 0 0 var(--color-panel-border); */
+    box-shadow: 0 0 0 1px var(--color-panel-border);
+    /* 4px 4px 0 0 var(--color-panel-border); */
     box-sizing: border-box;
 }
 
@@ -146,7 +149,8 @@ hr {
 
 /* Lists */
 
-ul, ol {
+ul,
+ol {
     padding-left: 20px;
 }
 
@@ -156,13 +160,14 @@ pre:has(code) {
     background-color: var(--color-shaded-background);
     border-radius: 8px;
     padding: 1em 1em;
+    overflow: auto;
 }
 
 /* Icons */
 
 :root {
-    --icon-rkgk-grayscale: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=');
-    --icon-external-link: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+');
+    --icon-rkgk-grayscale: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=");
+    --icon-external-link: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+");
 }
 
 .icon {
@@ -174,7 +179,10 @@ pre:has(code) {
     background-repeat: no-repeat;
     background-position: 50% 50%;
 
-    &.icon-rkgk-grayscale { background-image: var(--icon-rkgk-grayscale); }
-    &.icon-external-link { background-image: var(--icon-external-link); }
+    &.icon-rkgk-grayscale {
+        background-image: var(--icon-rkgk-grayscale);
+    }
+    &.icon-external-link {
+        background-image: var(--icon-external-link);
+    }
 }
-