From 4424e0b81cdec652c4aac59a8ca95ecbd7e0de51 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Thu, 13 May 2021 14:05:38 +0200
Subject: [PATCH] feat: add css variable to set max height for code blocks
 (#119)

---
 exampleSite/static/custom.css         |  4 +++
 exampleSite/static/custom.css.example |  6 ++++
 src/sass/_base.scss                   |  2 ++
 src/sass/_chroma_base.scss            | 48 +++++++++++++++++++++++++++
 src/sass/_chroma_dark.scss            | 40 +---------------------
 src/sass/_chroma_light.scss           | 40 +---------------------
 src/sass/_markdown.scss               |  3 +-
 src/sass/main.scss                    |  1 +
 8 files changed, 65 insertions(+), 79 deletions(-)
 create mode 100644 src/sass/_chroma_base.scss

diff --git a/exampleSite/static/custom.css b/exampleSite/static/custom.css
index 1cf3314..7be1537 100644
--- a/exampleSite/static/custom.css
+++ b/exampleSite/static/custom.css
@@ -1,3 +1,7 @@
+:root {
+  --code-max-height: 60rem;
+}
+
 .icon-grid {
   width: 8rem;
   height: 8rem;
diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example
index e695ec5..c0a189a 100644
--- a/exampleSite/static/custom.css.example
+++ b/exampleSite/static/custom.css.example
@@ -1,3 +1,9 @@
+/* Global customization */
+
+:root {
+  --code-max-height: 60rem;
+}
+
 /* Light mode theming */
 :root,
 :root[color-mode="light"] {
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 87d38df..0a679aa 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -1,5 +1,7 @@
 :root,
 :root[color-mode="light"] {
+  --code-max-height: auto;
+
   @include light_mode;
 }
 
diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
new file mode 100644
index 0000000..111751c
--- /dev/null
+++ b/src/sass/_chroma_base.scss
@@ -0,0 +1,48 @@
+@mixin chroma_base {
+  .chroma {
+    color: #999;
+    margin: 1rem 0;
+  }
+  .chroma code {
+    background-color: var(--code-background);
+    display: block;
+    line-height: 1.45;
+    font-size: 0.85em;
+    border-radius: $border-radius;
+  }
+  .chroma .lntable {
+    max-height: var(--code-max-height);
+
+    code {
+      max-height: none;
+    }
+  }
+  .chroma .lntable td:first-child code {
+    border-radius: 0;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+  .chroma .lntable td:nth-child(2) code {
+    border-radius: 0;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    padding-left: 0.5em;
+  }
+  .chroma .lntable td:nth-child(2) code .hl {
+    width: auto;
+    margin-left: -0.5em;
+    padding: 0 0.5em;
+  }
+
+  .highlight {
+    pre.chroma {
+      margin: 0;
+    }
+
+    > pre.chroma code {
+      padding: 1rem;
+      width: 100%;
+      overflow: auto;
+    }
+  }
+}
diff --git a/src/sass/_chroma_dark.scss b/src/sass/_chroma_dark.scss
index 3607590..4bb3bea 100644
--- a/src/sass/_chroma_dark.scss
+++ b/src/sass/_chroma_dark.scss
@@ -1,45 +1,7 @@
 @mixin chroma_dark {
   /* Theme: Dracula */
   /* Background */
-  .chroma {
-    color: #999;
-    margin: 1rem 0;
-  }
-  .chroma code {
-    background-color: var(--code-background);
-    display: block;
-    line-height: 1.45;
-    font-size: 0.85em;
-    border-radius: $border-radius;
-  }
-  .chroma .lntable td:first-child code {
-    border-radius: 0;
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-  .chroma .lntable td:nth-child(2) code {
-    border-radius: 0;
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    padding-left: 0.5em;
-  }
-  .chroma .lntable td:nth-child(2) code .hl {
-    width: auto;
-    margin-left: -0.5em;
-    padding: 0 0.5em;
-  }
-
-  .highlight {
-    pre.chroma {
-      margin: 0;
-    }
-
-    > pre.chroma code {
-      padding: 1rem;
-      width: 100%;
-      overflow: auto;
-    }
-  }
+  @include chroma_base;
 
   /* Other */
   .chroma .x {
diff --git a/src/sass/_chroma_light.scss b/src/sass/_chroma_light.scss
index e4a2e8f..ea1b252 100644
--- a/src/sass/_chroma_light.scss
+++ b/src/sass/_chroma_light.scss
@@ -1,45 +1,7 @@
 @mixin chroma_github {
   /* Theme: GitHub */
   /* Background */
-  .chroma {
-    color: #999;
-    margin: 1rem 0;
-  }
-  .chroma code {
-    background-color: var(--code-background);
-    display: block;
-    line-height: 1.45;
-    font-size: 0.85em;
-    border-radius: $border-radius;
-  }
-  .chroma .lntable td:first-child code {
-    border-radius: 0;
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-  .chroma .lntable td:nth-child(2) code {
-    border-radius: 0;
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    padding-left: 0.5em;
-  }
-  .chroma .lntable td:nth-child(2) code .hl {
-    width: auto;
-    margin-left: -0.5em;
-    padding: 0 0.5em;
-  }
-
-  .highlight {
-    pre.chroma {
-      margin: 0;
-    }
-
-    > pre.chroma code {
-      padding: 1rem;
-      width: 100%;
-      overflow: auto;
-    }
-  }
+  @include chroma_base;
 
   /* Other */
   .chroma .x {
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index a6b9082..55c9ce1 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -110,7 +110,7 @@
     }
   }
 
-  table {
+  table:not(.lntable) {
     overflow: auto;
     display: table;
     border-spacing: 0;
@@ -176,5 +176,6 @@
     padding: 1rem;
     width: 100%;
     overflow: auto;
+    max-height: var(--code-max-height);
   }
 }
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 725a112..746ed9a 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,5 +1,6 @@
 @import "_defaults";
 @import "_color_mode";
+@import "_chroma_base";
 @import "_chroma_light";
 @import "_chroma_dark";