css tweaks

src/lib/Post.svelte

@@ -13,6 +13,13 @@
     export const draft = false;
 </script>
 
+<style>
+    .subtitle {
+        font-size: 0.9em;
+        font-style: italic;
+    }
+</style>
+
 <svelte:head>
     <title>{title}</title>
     <link rel="stylesheet" href="/prism-dracula.css" />
@@ -20,6 +27,6 @@
 
 <div id="post">
     <h1 id="{makeSlug(title)}">{title}</h1>
-    <p><em>{formatDate(date)}</em></p>
+    <p class="subtitle">{formatDate(date)}</p>
     <slot></slot>
 </div>

static/style.css

@@ -7,12 +7,18 @@
     font-display: block;
 }
 
+:root {
+    --content-size: 1.25rem;
+    --content-line-height: 1.3;
+    --content-color: #1e1e1e;
+}
+
 html {
     font-family: 'Tajawal', sans-serif;
-    font-size: 20px;
-    line-height: 1.3;
+    font-size: var(--content-size);
+    line-height: var(--content-line-height);
     letter-spacing: -0.005em;
-    color: #1e1e1e;
+    color: var(--content-color);
 }
 
 body {