homepage fix

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>

diff --git a/content/_index.md b/content/_index.md
index 8595ae5ebdde5669c38571d1fd80f0c481743f2e..be24a57a07eb22add60d520e98eee1fc40a9730a 100644 (file)
--- a/content/_index.md
+++ b/content/_index.md
@@ -11,10 +11,12 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor,
     title="Bring the power of **open virtualization** everywhere."
     titleLevel="1"
     titleClass="title-with-gradient-underline"
-    media="/img/flatline/screen-with-xen-logo.webp"
-    alt="Illustration of a computer monitor displaying bar charts with Xen Project Logo"
+    media=`<div class="animated-home-screen-container">
+      <img src="/img/flatline/screen-with-xen-logo.webp" class="animated-home-screen" alt="Illustration of a computer monitor displaying bar charts with Xen Project Logo">
+    <img class="animated-home-shadow-screen" src="/img/decorative/screen-with-wire.svg" alt=""/>
+    </div>
+    `
     mediaPosition="right"
-    mobileMediaPosition="bottom"
   >}}
   {{<md>}}
   The Xen Project team is a global open source community that develops the Xen
@@ -26,7 +28,7 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor,
   {{</md>}}
   {{</media-block>}}
   <img class="animated-home-server" src="/img/decorative/home-servers.webp" alt=""/>
-  <img class="animated-home-shadow-screen" src="/img/decorative/screen-with-wire.svg" alt=""/>
+  
 {{</section>}}
 
 

diff --git a/content/template.md b/content/template.md
index 315e1821b80963bd456e8d61158e3083835ca6b4..f2399d276711f6b0031bdfeb1302d8a2c4a218dd 100644 (file)
--- a/content/template.md
+++ b/content/template.md
@@ -13,7 +13,7 @@ menus:
 <!-- Section block : Content must always be between section -->
 {{<section>}}
 
-{{<section>}}
+{{</section>}}
 
 
 <!-- Mediablock : block with image and text, refer to the doc "docs/components/media-block.md" -->

diff --git a/hugo_stats.json b/hugo_stats.json
index 913f2c751ffeca397ce5ddca093072a16c57c1d3..a76275c90c3be8a390b135bb038e5f3550431f03 100644 (file)
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -50,13 +50,13 @@
       "align-flex-start",
       "all-pages",
       "ancestor",
+      "animated-home-screen",
+      "animated-home-screen-container",
       "animated-home-server",
       "animated-home-shadow-screen",
       "article",
       "background-curve-reverse-top",
-      "bg-light",
       "block-space",
-      "border-rounded",
       "box-resources",
       "box-resources__title",
       "btn",
@@ -129,7 +129,6 @@
       "features-list",
       "features-list--cols-2",
       "features-list--cols-3",
-      "flex",
       "footer",
       "footer-content",
       "footer__col",
@@ -149,7 +148,6 @@
       "image-small",
       "images-in-circle",
       "join-button",
-      "justify-center",
       "latest-news",
       "latest-news-template",
       "latest-news_container",
@@ -181,7 +179,6 @@
       "mg-v-xxl",
       "mob-mg-v-xl",
       "mt-2",
-      "mt-4",
       "next",
       "no-mt",
       "p1-book",
@@ -208,7 +205,6 @@
       "socials",
       "socials-footer",
       "tag",
-      "text-primary",
       "title-external-link",
       "title-with-gradient-underline",
       "txt-c",
@@ -220,7 +216,6 @@
       "youtube-video-container"
     ],
     "ids": [
-      "a-remarkable-innovation",
       "a-virtualization-revolution",
       "advisory-board",
       "archivation-review",

diff --git a/themes/xen-project/assets/css/animation/home-animation.scss b/themes/xen-project/assets/css/animation/home-animation.scss
index 33e264051ceeb923fc97d34e0aeae9b1c1467ca0..c8f5b970894e8c7455723e163a50e4a383b3eaf3 100644 (file)
--- a/themes/xen-project/assets/css/animation/home-animation.scss
+++ b/themes/xen-project/assets/css/animation/home-animation.scss
@@ -1,21 +1,12 @@
 :root {
-  --home-shadow-screen-left: -45%;
   --home-server-top: -104%;
-  --home-shadow-screen-bottom: 170px;
-  --home-hero-padding-bottom: 180px;
-  @include tablet {
-    --home-shadow-screen-left: 140px;
-    --home-hero-padding-bottom: 320px;
-  }
-
-  @include desktop {
-    --home-shadow-screen-left: 54px;
-  }
+  --home-hero-padding-bottom: 0; //clamp(170px, 45%, 337px);
 }
 
 .home-hero-animated {
   position: relative;
   overflow: hidden;
+  padding-bottom: 10%;
   margin-left: calc(var(--content-padding-horizontal) * -1);
   margin-right: calc(var(--content-padding-horizontal) * -1);
 
@@ -26,47 +17,57 @@
 
   .media-block {
     position: relative;
-    z-index: 10;
   }
 
-  .animated-home-server,
+  .media-block__media {
+    position: relative;
+    padding: 0 40px;
+    align-self: flex-end;
+    @include tablet {
+      padding: 0;
+    }
+  }
+
+  .animated-home-screen-container {
+    position: relative;
+  }
+
   .animated-home-shadow-screen {
     position: absolute;
     z-index: 1;
   }
 
   .animated-home-server {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    position: relative;
+    margin: 0 auto;
+    display: block;
+    transform: translateY(100%);
     z-index: 3;
     opacity: 0;
     animation: homeFadeInUp 1s ease forwards;
     animation-delay: 0.5s;
     width: 80%;
-    @include tablet {
-      width: auto;
-    }
+    max-width: 600px;
+    margin-bottom: 10px;
   }
 
-  .animated-home-shadow-screen {
-    bottom: var(--home-shadow-screen-bottom);
-    left: 56%;
-    transform: translateX(40px);
+  .animated-home-screen {
+    position: relative;
     z-index: 2;
-    opacity: 0;
-    animation: homeFadeInRight 1.2s ease forwards;
+    animation: homeFadeInTopLeft 0.8s ease forwards;
     animation-delay: 0s;
-    width: 454px;
-  }
-  .animated-home-wire {
-    left: 70%;
-    bottom: 50px;
   }
 
-  .media-block__media {
+  .animated-home-shadow-screen {
+    padding: 6.2% 7.6% 0;
+    top: 25%;
+    left: 11%;
+    width: 100%;
+    transform: translateX(0);
+    z-index: 1;
     opacity: 0;
-    animation: homeFadeInTopLeft 0.8s ease forwards;
+    animation: homeFadeInRight 0.8s ease forwards;
+    animation-delay: 0s;
   }
 }
 
@@ -95,13 +96,9 @@
 }
 
 @keyframes homeFadeInUp {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(0);
-  }
   to {
     opacity: 1;
-    transform: translateX(-50%) translateY(var(--home-server-top));
+    transform: translateY(0);
   }
 }
 

diff --git a/themes/xen-project/assets/css/molecules/hero-block.scss b/themes/xen-project/assets/css/molecules/hero-block.scss
index 408b2a1de64591a2dff1ad61f61c3e372b7a7b32..ce024d306e65f659cdde38c1b9ccc749292c5355 100644 (file)
--- a/themes/xen-project/assets/css/molecules/hero-block.scss
+++ b/themes/xen-project/assets/css/molecules/hero-block.scss
@@ -1,14 +1,14 @@
 .hero-block {
-  --margin-top: var(--sp-xs);
-  --margin-bottom: var(--sp-xxl);
+  // --margin-top: var(--sp-xs);
+  // --margin-bottom: var(--sp-xxl);
 
-  margin-top: var(--margin-top);
-  margin-bottom: var(--margin-bottom);
+  // margin-top: var(--margin-top);
+  // margin-bottom: var(--margin-bottom);
   --title-font-size: clamp(1.3rem, 1.3rem + 2vw, 4rem);
 
   @include tablet {
-    --margin-top: var(--sp-xxxl);
-    --margin-bottom: var(--sp-sm);
+    // --margin-top: var(--sp-xxxl);
+    // --margin-bottom: var(--sp-sm);
   }
 
   .media-block__title {