1 files changed, 138 insertions, 0 deletions
diff --git a/assets/css/components/code.css b/assets/css/components/code.css
new file mode 100644
index 0000000..4cdc57b
--- /dev/null
+++ b/assets/css/components/code.css
@@ -0,0 +1,138 @@
+/* code.css */
+pre {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 6px;
+  padding: 1rem;
+  overflow-x: auto;
+  position: relative;
+  margin: 1.5rem 0;
+}
+
+pre code {
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+/* Chroma syntax highlighting */
+.highlight {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 6px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  position: relative;
+}
+
+.highlight code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+/* Chroma color overrides for dark theme */
+.highlight .k { color: #f59e0b; }
+.highlight .kn { color: #f59e0b; }
+.highlight .kp { color: #f59e0b; }
+.highlight .kr { color: #f59e0b; }
+.highlight .kt { color: #a855f7; }
+.highlight .n { color: #c4d6e8; }
+.highlight .na { color: #38bdf8; }
+.highlight .nb { color: #38bdf8; }
+.highlight .nc { color: #a855f7; }
+.highlight .no { color: #00ff88; }
+.highlight .nd { color: #f59e0b; }
+.highlight .ni { color: #a855f7; }
+.highlight .ne { color: #f59e0b; }
+.highlight .nf { color: #38bdf8; }
+.highlight .nl { color: #a855f7; }
+.highlight .nn { color: #a855f7; }
+.highlight .nt { color: #f59e0b; }
+.highlight .nv { color: #c4d6e8; }
+.highlight .s { color: #00ff88; }
+.highlight .sa { color: #00ff88; }
+.highlight .sb { color: #00ff88; }
+.highlight .sc { color: #00ff88; }
+.highlight .s1 { color: #00ff88; }
+.highlight .s2 { color: #00ff88; }
+.highlight .se { color: #f59e0b; }
+.highlight .sh { color: #00ff88; }
+.highlight .si { color: #f59e0b; }
+.highlight .sx { color: #00ff88; }
+.highlight .sr { color: #00ff88; }
+.highlight .ss { color: #00ff88; }
+.highlight .m { color: #38bdf8; }
+.highlight .mb { color: #38bdf8; }
+.highlight .mf { color: #38bdf8; }
+.highlight .mh { color: #38bdf8; }
+.highlight .mi { color: #38bdf8; }
+.highlight .il { color: #38bdf8; }
+.highlight .mo { color: #38bdf8; }
+.highlight .o { color: #c4d6e8; }
+.highlight .ow { color: #a855f7; }
+.highlight .c { color: #7a9bb8; }
+.highlight .c1 { color: #7a9bb8; }
+.highlight .ch { color: #7a9bb8; }
+.highlight .cm { color: #7a9bb8; }
+.highlight .cp { color: #f59e0b; }
+.highlight .cpf { color: #f59e0b; }
+
+html.theme-light .highlight {
+  background: var(--surface);
+  border-left-color: var(--accent);
+}
+
+html.theme-light .highlight .c { color: #6a7fa0; }
+
+/* Copy button for code blocks */
+.code-copy-btn {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: var(--transition);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.highlight:hover .code-copy-btn,
+pre:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  background: var(--accent2);
+  color: var(--bg);
+}
+
+.code-copy-btn.copied {
+  background: var(--accent2);
+}
+
+/* Inline code */
+code {
+  font-family: var(--font-mono);
+  background: var(--surface);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: var(--accent2);
+}
+
+p code {
+  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+}