css: blockquote style, font, re-arrange & comment zola style

2 files changed, 36 insertions, 8 deletions

diff --git a/sass/_zola.scss b/sass/_zola.scss
index 01fc954..592b893 100644
--- a/sass/_zola.scss
+++ b/sass/_zola.scss
@@ -1,26 +1,40 @@
 // -- zola syntax highlighting (https://www.getzola.org/documentation/content/syntax-highlighting/#styling-codeblocks)
 
+// -- Code Block WITHOUT Line Number -------------------------------------------
+
 pre {
   padding: 0.5rem;
   overflow: auto;
-  border-radius: 0.25rem;
 }
 
-pre[data-linenos] {
-  padding: 1rem 0;
-}
+// -- Code Block WITH Line Number ----------------------------------------------
 
-pre table td {
-  padding: 0;
+// The <pre> block for blocks with line numbers (get data-linenos attribute).
+//
+// The line numbers already provide some kind of left/right padding. Hence only
+// apply top-bottom padding and overwrite left-write padding inherited from the
+// *pre* style block above.
+pre[data-linenos] {
+  padding: 0.5rem 0;
 }
 
+// The line number cells (column 1).
 pre table td:nth-of-type(1) {
   text-align: center;
   user-select: none;
+  padding: 0 0.5rem;
+}
+
+// The source code cells (column 2).
+pre table td {
+  padding: 0;
 }
 
+// Highlighted line style.
 pre mark {
+  // If you want your highlights to take the full width.
   display: block;
+  // The default background colour of a mark is bright yellow
   background-color: rgba(254, 252, 232, 0.9);
 }
 
diff --git a/sass/site.scss b/sass/site.scss
index 506e2c4..427d9ee 100644
--- a/sass/site.scss
+++ b/sass/site.scss
@@ -20,8 +20,8 @@ $color-link : #50fa7b;
 html {
   background-color: $color-bg;
   color: $color-fg;
-  font-family: "Source Code Pro", "MesloLGS NF", "Liberation Mono", monospace, sans-serif;
-  font-size: clamp(13px, 2vw, 16px);
+  font-family: "Source Code Pro", "Dejavu Sans Mono", "MesloLGS NF", "Liberation Mono", monospace, sans-serif;
+  font-size: clamp(12px, 2vw, 16px);
 }
 
 // -- body style
@@ -141,3 +141,17 @@ pre code::before, pre code::after {
 //pre {
 //  max-width: 100ch;
 //}
+
+blockquote {
+  background-color: #25282f;
+  border: dashed 1px #8c8c8c;
+  padding: 0 1ch 0 1ch;
+  margin: 0 2ch 0 2ch;
+  font-size: clamp(10px, 2vw, 14px);
+}
+
+@media (max-width: 500px) {
+  blockquote {
+    margin: 0;
+  }
+}