Update code blocks height

It is now the same as in my site. I found it to be surprisingly useful
but it needs a little widget like a button to make it fullscreen to make
it more accessible especially at larger screens.

CHANGELOG.adoc

@@ -22,6 +22,8 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 === Updated
 
+* The code block has maximum height for half the height of the viewport (`50vh`).
+
 * More consistent theming for the content text.
 
 

assets/scss/base.scss

@@ -102,6 +102,7 @@ pre {
   line-height: 1.5;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  max-height: var(--code-block-size);
   padding: 0.5rem;
   overflow: auto;
 }
@@ -230,5 +231,9 @@ footer {
     background: var(--base07);
     overflow: auto;
   }
+
+  pre {
+    max-height: unset;
+  }
 }
 

assets/scss/main.scss

@@ -9,6 +9,7 @@
   --mono-font-size: 0.9em;
   --vertical-rhythm: 24px;
   --content-width: 750px;
+  --code-block-size: 50vh;
 
   --border-style: var(--base06) solid 1px;
   --background: var(--base00);