From 4d15eb011280813b24ab57d5c571bf021c8c4002 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Sat, 5 Oct 2024 13:22:31 +0300
Subject: [PATCH] Better cards

---
 src/lib/components/ArticleTitle.svelte |  2 +-
 src/routes/blog/+layout.svelte         |  2 +-
 src/routes/blog/+page.svelte           | 13 ++++++++++---
 src/routes/blog/html-in-css/+page.svx  |  2 +-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ArticleTitle.svelte b/src/lib/components/ArticleTitle.svelte
index b46cdb1..19d471a 100644
--- a/src/lib/components/ArticleTitle.svelte
+++ b/src/lib/components/ArticleTitle.svelte
@@ -6,4 +6,4 @@
   {metadata.date}
 </div>
 
-<h1>{metadata.title}</h1>
+<h1>{@html metadata.title}</h1>
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
index 08b8f60..94b0ffc 100644
--- a/src/routes/blog/+layout.svelte
+++ b/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>
 
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index e7fdb2c..7b3a57b 100644
--- a/src/routes/blog/+page.svelte
+++ b/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>
diff --git a/src/routes/blog/html-in-css/+page.svx b/src/routes/blog/html-in-css/+page.svx
index ce1d158..03b689c 100644
--- a/src/routes/blog/html-in-css/+page.svx
+++ b/src/routes/blog/html-in-css/+page.svx
@@ -1,5 +1,5 @@
 ---
-title: "HTML in CSS: как сократить HTML-код и писать только на CSS"
+title: "HTML in CSS: как сократить HTML-код и&nbsp;писать только на CSS"
 date: "2024-08-01"
 ---