feat: Redo code blocks

sass/_main.scss

@@ -62,7 +62,7 @@ body {
   }
 }
 
-// LAYOUT
+// Layout
 .container {
   width: 80%;
   margin-left: auto;
@@ -71,7 +71,7 @@ body {
 }
 
 @media only screen and (max-device-width: 480px) {
-  // MOBILE
+  // Mobile
   .container {
     width: 90%;
   }
@@ -201,15 +201,13 @@ details {
   }
 }
 
-// TABLES
+// Tables
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 table {
-  display: block;
-  width: 100%;
   overflow: auto;
   word-break: normal;
   word-break: keep-all;
@@ -230,12 +228,12 @@ th {
   padding: 0;
 }
 
-// MAKE TABLES VERTICALLY ALIGNED TO THE TOP
+// Make tables vertically aligned to the top
 tbody td {
   vertical-align: top;
 }
 
-/* Media */
+// Media
 img,
 video {
   display: block;
@@ -256,7 +254,7 @@ img:not(.no-hover):hover {
 }
 
 @media only screen and (max-device-width: 480px) {
-  // MOBILE
+  // Mobile
   img:not(.no-hover):hover {
     transform: scale(110%);
   }
@@ -267,7 +265,7 @@ img:not(.no-hover):hover {
 }
 
 .pixels {
-  image-rendering: crisp-edges; /* older firefox browsers */
+  image-rendering: crisp-edges; // older firefox browsers
   image-rendering: pixelated;
 }
 
@@ -276,7 +274,7 @@ img:not(.no-hover):hover {
   box-shadow: none;
 }
 
-// NAVBAR
+// Navbar
 .site-nav {
   position: sticky;
   top: 1rem;
@@ -355,7 +353,7 @@ img:not(.no-hover):hover {
   }
 }
 
-/* Footer */
+// Footer
 .site-footer {
   text-align: center;
   padding: 3rem 0 3rem;
@@ -369,7 +367,7 @@ img:not(.no-hover):hover {
   }
 }
 
-// LINK ARROWS
+// Link arrows
 .link-page::after {
   content: " →";
 }
@@ -378,14 +376,14 @@ img:not(.no-hover):hover {
   content: " ↗";
 }
 
-// CENTER LINK ICONS VERTICALLY
+// Center link icons vertically
 .link-icon {
   height: 1rem;
   width: 1rem;
   vertical-align: middle;
 }
 
-// BUTTONS
+// Buttons
 .dialog-buttons {
   display: flex;
   flex-direction: row;
@@ -403,6 +401,70 @@ img:not(.no-hover):hover {
   color: var(--text);
 }
 
+// Code
+code {
+  font-family: "JetBrains Mono", monospace;
+  padding: 2px 6px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--fg-07);
+  color: var(--red-fg);
+}
+
+pre code {
+  background-color: unset;
+  border-radius: unset;
+  color: unset;
+  padding: unset;
+}
+
+pre * {
+  font-family: "JetBrains Mono", monospace;
+}
+
+pre {
+  line-height: normal;
+  padding: 1rem;
+  margin: 1rem 0 1rem;
+  border-radius: var(--border-radius);
+  max-width: 100vw;
+  box-shadow: var(--shadow);
+  overflow: auto;
+}
+
+// The line numbers already provide some kind of left/right padding
+pre[data-linenos] {
+  padding: 1rem 0;
+}
+
+pre table td {
+  padding: 0;
+  border: none;
+}
+
+// The line number cells
+pre table td:nth-of-type(1) {
+  text-align: center;
+  user-select: none;
+}
+
+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: var(--fg-07);
+  // Set color from accent color to text color
+  color: var(--text);
+  // Unset code block border radius
+  border-radius: 0;
+  // Unset mark padding
+  padding: 0;
+}
+
+pre table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
 // CRT
 .crt {
   margin: 1rem 0 1rem;
@@ -416,9 +478,6 @@ img:not(.no-hover):hover {
     padding: 1rem 1rem;
     margin: unset;
     background-color: unset;
-    background-image: unset;
-    background-size: unset;
-    background-position: unset;
     box-shadow: unset;
   }
   
@@ -444,42 +503,7 @@ img:not(.no-hover):hover {
   }
 }
 
-// CODE
-pre,
-code {
-  font-family: "JetBrains Mono", monospace;
-}
-
-pre {
-  line-height: normal;
-  margin: 1rem 0 1rem;
-  padding: 1rem 1rem;
-  border-radius: var(--border-radius);
-  max-width: 100vw;
-  overflow-x: auto;
-  box-shadow: var(--shadow);
-  background-image: linear-gradient(var(--fg-03) 1px, transparent 1px),
-    linear-gradient(90deg, var(--fg-03) 1px, transparent 1px);
-  background-size: 10px 10px, 10px 10px;
-  background-position: -1px -1px, -1px -1px;
-}
-
-pre code {
-  background-color: unset;
-  border-radius: unset;
-  color: unset;
-  padding: unset;
-}
-
-code {
-  padding: 2px 6px;
-  border-radius: var(--border-radius-small);
-  background-color: var(--fg-05);
-  color: var(--red-fg);
-  box-shadow: none;
-}
-
-// STATEMENTS
+// Statements
 .statement-container {
   margin: 1rem 0 1rem;
   padding: 1rem 1rem;