From d82ebfba0035715fdea6ad9bcc46cdcb89a9d780 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= <arnaudgs@gmail.com>
Date: Wed, 30 Oct 2024 12:04:40 +0100
Subject: [PATCH] fix lot of stuff
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
---
 content/projects/hvmi.md                      |  4 +-
 hugo.yaml                                     |  6 +-
 themes/xen-project/assets/css/base.scss       |  4 -
 .../assets/css/molecules/anchor.scss          |  7 +-
 .../assets/css/molecules/features-list.scss   |  2 +-
 .../assets/css/molecules/media-block.scss     |  2 +-
 .../assets/css/molecules/project-card.scss    |  8 +-
 themes/xen-project/assets/css/structure.scss  | 12 +++
 themes/xen-project/assets/css/typography.scss | 99 ++++++++++---------
 themes/xen-project/assets/js/latest-news.js   |  3 +-
 .../assets/js/mockup/mockup-upload.js         | 49 ++++-----
 .../xen-project/layouts/partials/aside.html   |  2 +-
 12 files changed, 114 insertions(+), 84 deletions(-)

diff --git a/content/projects/hvmi.md b/content/projects/hvmi.md
index a887847..b2f0e60 100644
--- a/content/projects/hvmi.md
+++ b/content/projects/hvmi.md
@@ -10,9 +10,9 @@ menus:
 aside: 
   - type: resource
     items:
-      - name: "**Github repository**"
+      - name: "Github repository"
         link: https://github.com/hvmi
-      - name: Documentation
+      - name: "Documentation"
         link: https://hvmi.readthedocs.io/
 ---
 
diff --git a/hugo.yaml b/hugo.yaml
index 0a6d485..ac88b1a 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -11,7 +11,11 @@ module:
 
 build:
   writeStats: true
-
+  processing:
+    css: true
+    css:
+      includePaths: []
+      sourceMap: true
 outputs:
   home:
     - HTML
diff --git a/themes/xen-project/assets/css/base.scss b/themes/xen-project/assets/css/base.scss
index e98665e..cd8de1b 100644
--- a/themes/xen-project/assets/css/base.scss
+++ b/themes/xen-project/assets/css/base.scss
@@ -37,10 +37,6 @@ address {
   display: inline;
 }
 
-strong {
-  font-weight: 600;
-}
-
 ul {
   list-style: disc;
   margin-top: var(--sp-sm);
diff --git a/themes/xen-project/assets/css/molecules/anchor.scss b/themes/xen-project/assets/css/molecules/anchor.scss
index 4c74c5e..6ac6311 100644
--- a/themes/xen-project/assets/css/molecules/anchor.scss
+++ b/themes/xen-project/assets/css/molecules/anchor.scss
@@ -2,14 +2,17 @@
   display: inline-block;
   text-decoration: none;
   color: var(--color-action-text);
-  font-size: 18px;
+  // font-size: 20px;
+  strong {
+    font-weight: 500;
+  }
 
   &::after {
     font-family: var(--font-family-icons);
     content: var(--icon-arrow-down);
     display: block;
     text-align: center;
-    margin-top: 10px;
+    margin-top: 0px;
     transition: all 0.3s ease-in-out;
     transform: translateX(0);
   }
diff --git a/themes/xen-project/assets/css/molecules/features-list.scss b/themes/xen-project/assets/css/molecules/features-list.scss
index ced3710..56a5737 100644
--- a/themes/xen-project/assets/css/molecules/features-list.scss
+++ b/themes/xen-project/assets/css/molecules/features-list.scss
@@ -77,7 +77,7 @@
     align-items: center;
     font-weight: 700;
     color: var(--color-action-fill);
-    margin: 0 0 0.75rem;
+    margin: 0 0 1.05rem;
     padding-bottom: 0.28em;
     border-bottom: 2px solid var(--color-brand-fill);
   }
diff --git a/themes/xen-project/assets/css/molecules/media-block.scss b/themes/xen-project/assets/css/molecules/media-block.scss
index db7e593..0f223b2 100644
--- a/themes/xen-project/assets/css/molecules/media-block.scss
+++ b/themes/xen-project/assets/css/molecules/media-block.scss
@@ -35,7 +35,7 @@
 
   @include tablet {
     --gap: var(--sp-xl);
-    --content-gap: var(--sp-md);
+    --content-gap: var(--sp-xs);
     --content-line-height: 1.67;
     --flex-direction: row-reverse;
     --media-max-width: 100%;
diff --git a/themes/xen-project/assets/css/molecules/project-card.scss b/themes/xen-project/assets/css/molecules/project-card.scss
index ca987f2..f0ee4aa 100644
--- a/themes/xen-project/assets/css/molecules/project-card.scss
+++ b/themes/xen-project/assets/css/molecules/project-card.scss
@@ -3,6 +3,7 @@
   --title-paddings: 0.25rem 0.5rem;
   --content-paddings: 0.75rem;
   --link-font-size: 1rem;
+  --content-line-height: 2;
   border: 0.0625rem solid var(--color-border);
   display: flex;
   flex-direction: column;
@@ -11,8 +12,9 @@
 
   @include tablet {
     --title-font-size: 1.5rem;
-    --content-paddings: 1.5rem 1rem;
-    --link-font-size: 1.25rem;
+    --content-paddings: 1.4rem 1rem;
+    --link-font-size: 1.22rem;
+    --content-line-height: 1.5;
   }
 
   &__title {
@@ -27,7 +29,7 @@
 
   &__content {
     padding: var(--content-paddings);
-    line-height: 2;
+    line-height: var(--content-line-height);
 
     p:first-child,
     p:last-child {
diff --git a/themes/xen-project/assets/css/structure.scss b/themes/xen-project/assets/css/structure.scss
index 18a510b..4f1a95b 100644
--- a/themes/xen-project/assets/css/structure.scss
+++ b/themes/xen-project/assets/css/structure.scss
@@ -9,7 +9,19 @@
   padding-bottom: 0;
 }
 
+@include tablet {
+  .page-aside {
+    width: 420px;
+  }
+}
+
 .page-single {
+  @include tablet {
+    > .article {
+      padding-top: var(--sp-xl);
+    }
+  }
+
   &.with-aside {
     display: flex;
     flex-direction: column;
diff --git a/themes/xen-project/assets/css/typography.scss b/themes/xen-project/assets/css/typography.scss
index c7bce54..4cba816 100644
--- a/themes/xen-project/assets/css/typography.scss
+++ b/themes/xen-project/assets/css/typography.scss
@@ -1,7 +1,26 @@
+:root {
+  /* Mobile font sizes (default) */
+  --font-size-base: 1.125rem; /* 18px - taille de base pour mobile */
+  --font-size-h1: 2.25rem; /* 36px */
+  --font-size-h2: 2rem; /* 32px */
+  --font-size-h3: 1.25rem; /* 20px */
+  --font-size-button: 1.125rem; /* 18px */
+  --font-size-p1: 1.125rem; /* 18px */
+  --font-size-p2: 1rem; /* 16px */
+
+  /* Line heights */
+  --line-height-heading: 60px;
+  --line-height-body: 1.5em;
+  --line-height-button: 1.2em;
+
+  /* Letter spacing */
+  --letter-spacing-p: -0.03125rem; /* -0.5px */
+}
+
 /* General Typography Styles */
 body {
   font-family: "Gotham", sans-serif;
-  font-size: 1rem; /* Base font size */
+  font-size: var(--font-size-base);
 }
 
 /* Line heights and common styles for paragraphs and buttons */
@@ -15,7 +34,7 @@ h3,
 .p1-medium-underline,
 .p1-book,
 .p1-book-underline {
-  line-height: var(--title-line-height);
+  line-height: var(--line-height-body);
 }
 
 .p1-bold,
@@ -24,7 +43,7 @@ h3,
 .p1-medium-underline,
 .p1-book,
 .p1-book-underline {
-  font-size: 1.125rem; /* 18px */
+  font-size: var(--font-size-p1);
 }
 
 .p1-medium,
@@ -35,12 +54,12 @@ h3,
 .p2-medium-underline,
 .p2-book,
 .p2-book-underline {
-  letter-spacing: -0.03125rem; /* -0.5px */
+  letter-spacing: var(--letter-spacing-p);
 }
 
 /* Headings */
 h1 {
-  font-size: var(--h1-font-size);
+  font-size: var(--font-size-h1);
   margin-top: var(--sp-md);
   margin-bottom: var(--sp-md);
   font-weight: 700;
@@ -50,7 +69,7 @@ h1 {
 
 h2 {
   font-weight: bold;
-  font-size: 2rem; /* 32px */
+  font-size: var(--font-size-h2);
   margin-top: 0.66em;
   margin-bottom: 0.66em;
   letter-spacing: -0.0194em;
@@ -58,7 +77,7 @@ h2 {
 
 h3 {
   font-weight: bold;
-  font-size: 1.25rem; /* 24px */
+  font-size: var(--font-size-h3);
   line-height: 120%;
 }
 
@@ -86,13 +105,13 @@ strong {
 /* Buttons */
 .button-medium {
   font-weight: medium;
-  font-size: 1.125rem; /* 18px */
+  font-size: var(--font-size-button);
 }
 
 .button-medium-mobile {
   font-weight: medium;
-  font-size: 1.125rem; /* 18px */
-  line-height: 1.2em;
+  font-size: var(--font-size-button);
+  line-height: var(--line-height-button);
 }
 
 /* Paragraphs */
@@ -125,29 +144,27 @@ strong {
 }
 
 /* Common Styles */
-.p2-medium {
-  font-weight: medium;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5em;
+.p2-medium,
+.p2-medium-underline,
+.p2-book,
+.p2-book-underline {
+  font-size: var(--font-size-p2);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-p);
 }
 
+.p2-medium,
 .p2-medium-underline {
   font-weight: medium;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5em;
-  text-decoration: underline;
 }
 
-.p2-book {
+.p2-book,
+.p2-book-underline {
   font-weight: book;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5em;
 }
 
+.p2-medium-underline,
 .p2-book-underline {
-  font-weight: book;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5em;
   text-decoration: underline;
 }
 
@@ -181,27 +198,15 @@ p {
 
 /* Desktop Styles */
 @media (min-width: 768px) {
-  h1 {
-    font-size: 2.5rem; /* 40px */
-    line-height: 1.2em;
-  }
-
-  h2 {
-    font-size: 2.25rem; /* 36px */
-    line-height: 1.2em;
-  }
-
-  .button-medium {
-    font-size: 1.25rem; /* 20px */
-  }
-
-  .p1-bold,
-  .p1-bold-underline,
-  .p1-medium,
-  .p1-medium-underline,
-  .p1-book,
-  .p1-book-underline {
-    font-size: 1.25rem; /* 20px */
+  :root {
+    --font-size-base: 1.25rem; /* 20px - taille de base pour desktop */
+    --font-size-h1: 2.5rem; /* 40px */
+    --font-size-h2: 2.25rem; /* 36px */
+    --font-size-h3: 1.5rem; /* 24px */
+    --font-size-button: 1.25rem; /* 20px */
+    --font-size-p1: 1.25rem; /* 20px */
+    /* P2 reste à 16px même sur desktop selon la maquette */
+    --line-height-heading: 1.2em;
   }
 }
 
@@ -209,4 +214,10 @@ p {
   h1 {
     color: var(--color-action-text);
   }
+
+  @include tablet {
+    h1 {
+      margin-top: 0;
+    }
+  }
 }
diff --git a/themes/xen-project/assets/js/latest-news.js b/themes/xen-project/assets/js/latest-news.js
index 76923fe..bc0d2a3 100644
--- a/themes/xen-project/assets/js/latest-news.js
+++ b/themes/xen-project/assets/js/latest-news.js
@@ -19,9 +19,8 @@
     };
   })();
 
-  const newsCardTemplate = createTemplate();
-
   const latestnews = async (element) => {
+    const newsCardTemplate = createTemplate();
     const container = element.querySelector(".latest-news_container");
     const { maxCards, blogFilter, tagFilter } = container.dataset;
     const blogIds = blogFilter?.split(",") || blogs.map((blog) => blog.id);
diff --git a/themes/xen-project/assets/js/mockup/mockup-upload.js b/themes/xen-project/assets/js/mockup/mockup-upload.js
index eb1c7e7..309038b 100644
--- a/themes/xen-project/assets/js/mockup/mockup-upload.js
+++ b/themes/xen-project/assets/js/mockup/mockup-upload.js
@@ -146,33 +146,36 @@ const mockupUpload = {
     async function loadSavedImages() {
       const images = await getImagesFromIndexedDB();
       savedImagesOptions.innerHTML = ""; // Clear existing options
-      images.forEach((image) => {
-        const option = document.createElement("span");
-        option.className = "custom-option";
-        option.dataset.value = image.id;
-        option.textContent = `${image.fileName.replace(/\.+?$/, "")}`;
-        savedImagesOptions.appendChild(option);
+      images
+        .sort((a, b) => (a.fileName < b.fileName ? -1 : 1))
+        .forEach((image) => {
+          const option = document.createElement("span");
+          option.className = "custom-option";
+          option.dataset.value = image.id;
+          option.textContent = `${image.fileName.replace(/\..+$/, "")}`;
+          savedImagesOptions.appendChild(option);
 
-        option.addEventListener("click", async () => {
-          const db = await openDB();
-          const transaction = db.transaction(storeName, "readonly");
-          const store = transaction.objectStore(storeName);
-          store.get(parseInt(option.dataset.value)).onsuccess = (event) => {
-            const selectedImage = event.target.result;
-            if (selectedImage.error) {
-              console.error("Error getting image from IndexedDB:", selectedImage.error);
-            } else {
-              if (selectedImage?.data) {
-                createImage(selectedImage.data); // Use the base64 data directly
-                customSelectTrigger.textContent = option.textContent;
-                customSelect.classList.remove("open");
+          option.addEventListener("click", async () => {
+            const db = await openDB();
+            const transaction = db.transaction(storeName, "readonly");
+            const store = transaction.objectStore(storeName);
+            store.get(parseInt(option.dataset.value)).onsuccess = (event) => {
+              const selectedImage = event.target.result;
+              if (selectedImage.error) {
+                console.error("Error getting image from IndexedDB:", selectedImage.error);
               } else {
-                console.error("Image data not found for ID:", option.dataset.value);
+                if (selectedImage?.data) {
+                  createImage(selectedImage.data); // Use the base64 data directly
+                  saveToLocalStorage("mockupMockupImage", selectedImage.data);
+                  customSelectTrigger.textContent = option.textContent;
+                  customSelect.classList.remove("open");
+                } else {
+                  console.error("Image data not found for ID:", option.dataset.value);
+                }
               }
-            }
-          };
+            };
+          });
         });
-      });
     }
 
     customSelectTrigger.addEventListener("click", () => {
diff --git a/themes/xen-project/layouts/partials/aside.html b/themes/xen-project/layouts/partials/aside.html
index 563fc36..cd35b71 100644
--- a/themes/xen-project/layouts/partials/aside.html
+++ b/themes/xen-project/layouts/partials/aside.html
@@ -23,7 +23,7 @@
         </div>
       {{ else if eq .type "members-list" }}
         <div class="box-members">
-          <h3 class="box-members__title">{{ .name }}</h3>
+          <h3 class="box-members__title">{{ .name | markdownify }}</h3>
           <ul>
             {{ range .items }}
               <li>
-- 
2.39.5