From d2067078db48cfea6425b01a0a84d8f09d5bcec0 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Wed, 24 Apr 2024 17:28:26 +1000
Subject: [PATCH] Update components

---
 src/lib/components/ArticleHeader.svelte | 24 +++++++-
 src/routes/style.css                    | 82 ++++++++++++++++++++++++-
 2 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ArticleHeader.svelte b/src/lib/components/ArticleHeader.svelte
index 02a7730..4c8e704 100644
--- a/src/lib/components/ArticleHeader.svelte
+++ b/src/lib/components/ArticleHeader.svelte
@@ -6,12 +6,24 @@
 <svelte:head>
     {#if $page.data.header}
         <meta property="og:image" content={$page.data.header} />
+        {#if $page.data.header_alt}
+            <meta property="og:image:alt" content={$page.data.header_alt} />
+        {/if}
     {/if}
 </svelte:head>
 
 <header id="main-content">
     {#if $page.data.header}
-        <img src={$page.data.header} alt="header" class="header" />
+        <figure>
+            <img
+                src={$page.data.header}
+                alt={$page.data.header_alt || "header"}
+                class="header"
+            />
+            {#if $page.data.header_caption}
+                <figcaption>{$page.data.header_caption}</figcaption>
+            {/if}
+        </figure>
     {/if}
 
     <h1>{$page.data.title}</h1>
@@ -32,6 +44,16 @@
 </header>
 
 <style>
+    figure {
+        margin: 0;
+        width: 100%;
+    }
+
+    figcaption {
+        font-size: small;
+        text-align: center;
+    }
+
     img.header {
         width: 100%;
     }
diff --git a/src/routes/style.css b/src/routes/style.css
index 970c1b7..45e6e46 100644
--- a/src/routes/style.css
+++ b/src/routes/style.css
@@ -276,7 +276,87 @@ pre code {
     padding: 0.5rem;
     overflow-x: scroll;
 
-    border: 1px solid var(--accent);
+    background-color: #1a1b26;
+    color: #c0caf5;
+    border: 1px solid #c0caf5;
+}
+
+/* Code highlighting */
+.token.comment,
+.token.doctype,
+.token.cdata {
+    color: #565f89;
+    font-style: italic;
+}
+
+.token.prolog,
+.token.builtin {
+    color: #f7768e;
+}
+
+.token.punctuation {
+    color: #bb9af7;
+}
+
+.namespace {
+    opacity: 0.7;
+}
+
+.token.property,
+.token.keyword {
+    color: #9d7cd8;
+}
+
+.token.class-name {
+    color: #ffffb6;
+    text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+    color: #ff9e64;
+}
+
+.token.symbol,
+.token.deleted {
+    color: #2ac3de;
+}
+
+.token.number {
+    color: #ff73fd;
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.tag,
+.token.inserted {
+    color: #9ece6a;
+}
+
+.token.attr-name {
+    color: rgb(241, 250, 140);
+}
+
+.token.variable {
+    color: #c0caf5;
+}
+
+.token.operator {
+    color: #89ddff;
+}
+
+.token.function {
+    color: #7aa2f7;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
 }
 
 details {