Refector css and add TOC

public/css/code.css

@@ -1,4 +1,17 @@
-code[class*="language-"], pre[class*="language-"] {
+code {
+	background-color: var(--color-gray-20);
+	border-radius: 0.3em;
+	font-size: var(--step--1);
+	padding: 0 var(--space-3xs);
+}
+@media (prefers-color-scheme: dark) {
+	code {
+		background-color: var(--card-color);
+	}
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
 	color: #f8f8f2;
 	background: none;
 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
@@ -21,10 +34,30 @@ code[class*="language-"], pre[class*="language-"] {
 	hyphens: none;
 }
 
+/* Code Fences */
+pre,
+code {
+	font-family: var(--font-family-monospace);
+}
+pre:not([class*="language-"]) {
+	margin: 0.5em 0;
+	-moz-tab-size: var(--syntax-tab-size);
+	-o-tab-size: var(--syntax-tab-size);
+	tab-size: var(--syntax-tab-size);
+	-webkit-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+}
+
 /* Code blocks */
 pre[class*="language-"] {
 	padding: var(--space-2xs);
-	margin: .5em 0;
+	margin: 0.5em 0;
 	overflow: auto;
 	border-radius: 0.3em;
 }
@@ -36,8 +69,8 @@ pre[class*="language-"] {
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
+	padding: 0.1em;
+	border-radius: 0.3em;
 	white-space: normal;
 }
 
@@ -53,7 +86,7 @@ pre[class*="language-"] {
 }
 
 .token.namespace {
-	opacity: .7;
+	opacity: 0.7;
 }
 
 .token.property,
@@ -146,7 +179,7 @@ pre[class*="language-diff-"] {
 .token.prefix.inserted,
 .token.prefix.deleted {
 	width: var(--eleventy-code-padding);
-	background-color: rgba(0,0,0,.2);
+	background-color: rgba(0, 0, 0, 0.2);
 }
 
 /* Optional: full-width background color */