From 6f26c94308cdd29914e0cfcb4a9f4e17b22dc935 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Sat, 21 Mar 2026 13:38:42 +0100
Subject: [PATCH] article style

---
 src/components/layout/Footer.svelte | 12 +++++++++++
 src/views/About.svelte              |  6 ++++++
 src/views/Article.svelte            | 33 ++++++++++++++++++++++++-----
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index c315bb0..df49905 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -110,6 +110,10 @@
     margin-top: 5rem;
   }
 
+  :global(.article-wrapper .page-scrollable-footer) {
+    margin-left: -2.95vw;
+  }
+
   /* --- Main row --- */
   .footer-main {
     display: flex;
@@ -224,6 +228,14 @@
     :global(.collection .page-scrollable-footer) {
       margin-left: -6.2vw;
     }
+
+    :global(.about .page-scrollable-footer) {
+      margin-left: 0;
+    }
+
+    :global(.article-wrapper .page-scrollable-footer) {
+      margin-left: -2.95vw;
+    }
   }
 
   /* --- Tablet (701px–912px) --- */
diff --git a/src/views/About.svelte b/src/views/About.svelte
index c8d3021..0f3a439 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -401,6 +401,12 @@
 
   /* ── Mobile (≤700px) ── */
   @media (max-width: 700px) {
+
+    .page-container {
+      grid-area: auto;
+      width: 100vw;
+    }
+
     .about-intro {
       padding: 6rem 1.25rem 1rem;
     }
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 50b0fff..97ebb19 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -343,10 +343,14 @@
   }
 
   .article-body :global(blockquote) {
-    border-left: 4px solid var(--color-primary);
-    padding: 1.25rem 1.25rem 1.25rem 2rem;
-    margin: 2rem 0;
-    background: rgba(4, 254, 160, 0.05);
+    font-family: "Danzza", sans-serif;
+    font-size: 19px;
+    font-style: italic;
+    margin-bottom: 10px;
+    background-color: rgba(4,254,160,.05);
+    border-left: 4px solid #04fea0;
+    margin: 30px 0;
+    padding: 20px 20px 20px 30px;
   }
 
   .article-body :global(blockquote p) {
@@ -544,15 +548,34 @@
   /* --- Mobile --- */
   @media (max-width: 700px) {
     .article {
-      padding: 3rem 1.25rem 4rem;
+      padding:0 0 4rem;
+    }
+
+    .article-date {
+      font-family: "Danzza Light", sans-serif;
+      opacity: .7;
+      font-size: var(--font-size-paragraph-mobile);
+      text-wrap: nowrap;
     }
 
     .article-title {
       font-size: var(--font-size-title-section-mobile);
+      line-height: 1.4;
     }
 
     .article-intro {
+      font-family: "Danzza Light", sans-serif;
       font-size: var(--font-size-paragraph-mobile);
+	    line-height: 1.5;
+    }
+
+    .article-body {
+      padding: 0;
+    }
+
+    .article-body :global(p), 
+    .article-body :global(h3) {
+      font-family: "Danzza Light", sans-serif;
     }
 
     .article-related-grid {