Better cards

src/lib/components/ArticleTitle.svelte

@@ -6,4 +6,4 @@
   {metadata.date}
 </div>
 
-<h1>{metadata.title}</h1>
+<h1>{@html metadata.title}</h1>

src/routes/blog/+layout.svelte

@@ -8,7 +8,7 @@ import Navbar from "$lib/components/Navbar.svelte";
   </div>
 </Navbar>
 
-<article class="px-2 py-8 md:px-8 max-w-[980px] mx-auto text-lg">
+<article class="px-2 py-8 md:px-8 max-w-[800px] mx-auto text-lg">
   <slot />
 </article>
 

src/routes/blog/+page.svelte

@@ -2,19 +2,26 @@
   export let data;
 </script>
 
-<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
+<section class="px-2 md:px-8 mb-16 mx-auto">
   <h2 class="text-4xl mb-10 md:text-5xl">
     Статьи
   </h2>
 
-  <div class="flex flex-col gap-14">
+  <div class="flex flex-col gap-8">
     {#each data.posts as post}
       <a
         href={post.href}
+        class="card bg-slate-800 p-6 rounded-xl hover:bg-slate-700"
       >
         <div class="text-sm">{post.date}</div>
-        <h4 class="text-2xl md:text-3xl">{post.title}</h4>
+        <h4 class="text-2xl md:text-3xl">{@html post.title}</h4>
       </a>
     {/each}
   </div>
 </section>
+
+<style lang="postcss">
+  .card {
+    text-decoration: none;
+  }
+</style>

src/routes/blog/html-in-css/+page.svx

@@ -1,5 +1,5 @@
 ---
-title: "HTML in CSS: как сократить HTML-код и писать только на CSS"
+title: "HTML in CSS: как сократить HTML-код и писать только на CSS"
 date: "2024-08-01"
 ---