blog fixes

src/app.css

@@ -586,3 +586,117 @@ input[type="checkbox"]:checked::before {
   --tw-prose-th-borders: var(--color-surface2);
   --tw-prose-td-borders: var(--color-surface1);
 }
+.code-block {
+  position: relative;
+
+  select {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
+}
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+  a {
+    color: #70cff8;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  pre {
+    background: #0d0d0d;
+    color: #fff;
+    font-family: "JetBrainsMono", monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+}

src/routes/blog/[title]/index.tsx

@@ -164,24 +164,24 @@ export default function PostPage() {
                       {p().title.replaceAll("_", " ")} | Michael Freno
                     </Title>
 
-                    <div class="relative overflow-x-hidden select-none">
+                    <div class="relative overflow-x-hidden">
                       {/* Fixed banner image background */}
                       <div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]">
                         <div class="absolute inset-0 h-full w-full overflow-hidden brightness-75">
                           <img
                             src={p().banner_photo || "/blueprint.jpg"}
                             alt="post-cover"
-                            class="h-full object-cover"
+                            class="h-full object-cover select-none"
                             style={{
                               width: `${centerWidth()}px`,
-                              "margin-left": `${leftBarSize()}px`
+                              "margin-left": `${leftBarSize()}px`,
+                              "pointer-events": "none"
                             }}
                           />
                         </div>
                         <div
                           class="text-shadow text-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
                           style={{
-                            "pointer-events": "none",
                             width: `${centerWidth()}px`,
                             "margin-left": `${leftBarSize()}px`
                           }}