feat: add css variable to set max height for code blocks (#119)

exampleSite/static/custom.css

@@ -1,3 +1,7 @@
+:root {
+  --code-max-height: 60rem;
+}
+
 .icon-grid {
   width: 8rem;
   height: 8rem;

exampleSite/static/custom.css.example

@@ -1,3 +1,9 @@
+/* Global customization */
+
+:root {
+  --code-max-height: 60rem;
+}
+
 /* Light mode theming */
 :root,
 :root[color-mode="light"] {

src/sass/_base.scss

@@ -1,5 +1,7 @@
 :root,
 :root[color-mode="light"] {
+  --code-max-height: auto;
+
   @include light_mode;
 }
 

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;
+    }
+  }
+}

src/sass/_chroma_dark.scss

@@ -1,45 +1,7 @@
 @mixin chroma_dark {
   /* Theme: Dracula */
   /* Background */
-  .chroma {
+  @include chroma_base;
-    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;
-    }
-  }
 
   /* Other */
   .chroma .x {

src/sass/_chroma_light.scss

@@ -1,45 +1,7 @@
 @mixin chroma_github {
   /* Theme: GitHub */
   /* Background */
-  .chroma {
+  @include chroma_base;
-    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;
-    }
-  }
 
   /* Other */
   .chroma .x {

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);
   }
 }

src/sass/main.scss

@@ -1,5 +1,6 @@
 @import "_defaults";
 @import "_color_mode";
+@import "_chroma_base";
 @import "_chroma_light";
 @import "_chroma_dark";