From 65821bddf4b6ac232df0a00d89e203ec551f0e95 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 25 Mar 2026 07:14:01 +0100
Subject: [PATCH] portfolio : require thumbnail and improve mobile style.
 closes #27

---
 ...png.png => scrollable-page-background.png} | Bin
 site/blueprints/pages/project.yml             |   1 +
 src/views/Portfolio.svelte                    |  18 +++++++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)
 rename assets/img/{scrollable-page-background.png.png => scrollable-page-background.png} (100%)

diff --git a/assets/img/scrollable-page-background.png.png b/assets/img/scrollable-page-background.png
similarity index 100%
rename from assets/img/scrollable-page-background.png.png
rename to assets/img/scrollable-page-background.png
diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml
index 80d2164..5945db1 100644
--- a/site/blueprints/pages/project.yml
+++ b/site/blueprints/pages/project.yml
@@ -93,6 +93,7 @@ columns:
           thumbnail:
             label: Vignette
             type: files
+            required: true
             layout: cards
             size: small
             max: 1
diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index f6c218a..7d2d58f 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -405,6 +405,11 @@
       z-index: var(--z-content);
     }
 
+    .portfolio-mockup--horizontal {
+      grid-area: 8/4 / span 8 / span 14;
+      scale: 1.2;
+    }
+
     .portfolio-mockup :global(.portfolio-mockup-img) {
       height: auto;
     }
@@ -461,10 +466,17 @@
     .portfolio-nav-item button {
       flex-direction: column;
       align-items: center;
+      transform: scale(1) !important;
+      transition: all .3s ease-in-out;
+      width: 3rem;
+      height: 3rem;
     }
 
+
+
     .portfolio-nav-item.active button {
-      transform: scale(1.15);
+      width: 4rem;
+      height: 4rem;
     }
 
     .portfolio-nav-item:hover button {
@@ -472,8 +484,8 @@
     }
 
     .portfolio-nav-item img {
-      width: 3rem;
-      height: 3rem;
+      width: 100%;
+      height: 100%;
     }
 
     .portfolio-nav-number {