fix: codeblock top padding default no overlap, darker inner blockquote,

bump up font-size to min of 16px

Author: micahkepe

content/code-example.md

@@ -14,7 +14,6 @@ on this article to see some code in action.
 <!-- more -->
 
 ```rust
-
 fn main() {
     println!("Hello World");
 }
@@ -39,17 +38,14 @@ fn main() {
 Python example:
 
 ```python
-
 def main():
     print("Hello, world!")
 ```
 
 This is another code block with syntax highlighting. It's pretty cool, right?
 You can also have inline code like this: `var example = true`.
 
-<!-- prettier-ignore-->
 ```js
-
 function debounce(func, wait) {
   var timeout;
 

content/latex-example.md

@@ -13,22 +13,20 @@ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
 
 <!-- more -->
 
-Some fancy math thingy:
+We can show LaTeX display math by using either the `\\[ ... \\]` or `$$ ... $$`
+environments:
 
 $$
 \frac{d}{dx} \left( \int_{0}^{x} f(u) \, du \right) = f(x)
 $$
 
-$$
-\frac{d}{dx} \left( \int_{g(x)}^{h(x)} f(u) \, du \right) = f(h(x)) h'(x) -
+\\[
+\frac{d}{dx} \left( \int\_{g(x)}^{h(x)} f(u) \, du \right) = f(h(x)) h'(x) -
 f(g(x)) g'(x)
-$$
-
-$$
-\texttt{Isn't that cool?!}
-$$
+\\]
 
----
+LaTeX can be written inline as well using the `\\( ... \\)` or `$ ... $`
+environments: $x = 25$ or \\(y = \pi\\)
 
 ## Another cool thingy
 

content/markdown-demo.md

@@ -96,7 +96,6 @@ Some other footnote that is inline[^2]. As you can see, it just blends right in!
 ## Code Blocks
 
 ```rust
-
 fn main() {
     println!("Hello, world!");
 }

sass/_vendor.scss

@@ -1,6 +1,6 @@
 /* Vendor styles */
 html {
-  font-size: 12px
+  font-size: clamp(16px, 1.2vw + 1px, 18px);
 }
 
 * {
@@ -15,7 +15,7 @@ body {
 
 body {
   font-size: 1rem;
-  line-height: 1.5rem;
+  line-height: 1.6;
   margin: 0;
   font-family:
     'JetBrains Mono', Menlo, Monaco, Lucida Console, Liberation Mono,
@@ -48,14 +48,6 @@ pre {
   overflow: auto
 }
 
-code[class*=language-],
-pre[class*=language-],
-pre code {
-  font-weight: 100;
-  text-shadow: none;
-  margin: 1.75rem 0
-}
-
 a {
   cursor: pointer;
   color: #ff2e88;
@@ -364,7 +356,7 @@ a {
 }
 
 .hack blockquote {
-  border-left: 0.15em solid var(--accent, #ff2e88);
+  border-left: 0.2em solid var(--accent, #ff2e88);
   border-top-right-radius: 0.2em;
   border-bottom-right-radius: 0.2em;
   position: relative;
@@ -394,7 +386,6 @@ a {
     }
   }
 
-
   a {
     color: #FFE4EE;
     font-weight: normal;
@@ -417,6 +408,9 @@ a {
 .dark blockquote {
   background-color: #5E667F;
 
+  blockquote {
+    background-color: #555c72;
+  }
 }
 
 .light blockquote {
@@ -430,6 +424,10 @@ a {
   code {
     background: #E8E6ED;
   }
+
+  blockquote {
+    background-color: #dcd9df;
+  }
 }
 
 .hack blockquote:after {

sass/parts/_code.scss

@@ -37,13 +37,17 @@ $language-colors: (
   $r: red($color);
   $g: green($color);
   $b: blue($color);
-  $brightness: ($r * 0.299 + $g * 0.587 + $b * 0.114);
+  $brightness: (
+    $r * 0.299 + $g * 0.587 + $b * 0.114
+  );
 
-  @if ($brightness > 128) {
-    @return #000000; // Use black for bright backgrounds
-  } @else {
-    @return #ffffff; // Use white for dark backgrounds
-  }
+@if ($brightness > 128) {
+  @return #000000; // Use black for bright backgrounds
+}
+
+@else {
+  @return #ffffff; // Use white for dark backgrounds
+}
 }
 
 // Mixin for language label styles
@@ -105,15 +109,15 @@ pre {
   border-radius: 5px;
   border: 1px solid var(--border-color);
   line-height: 1.4;
-  padding: 1em;
-  position: relative; // Make sure absolute elements like the label and button work
+  padding-top: 1.8em;
+  padding-bottom: 1em;
+  position: relative;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 
   code {
     background-color: transparent !important;
     color: inherit;
-    font-size: 100%;
     border: none;
 
     table td {
@@ -126,7 +130,6 @@ pre {
   color: #ffffff !important;
 }
 
-
 pre code table mark {
   color: unset;
   padding: 0;
@@ -157,3 +160,12 @@ code {
   color: var(--text-color);
   background-color: var(--bg-primary);
 }
+
+code,
+pre,
+kbd,
+samp {
+  font-size: 1.05em;
+  /* slightly larger than the surrounding text */
+  line-height: 1.6;
+}