From: Arnaud Guéras Date: Wed, 11 Dec 2024 06:44:45 +0000 (+0100) Subject: homepage fix X-Git-Url: http://xenbits.xensource.com/gitweb?a=commitdiff_plain;h=ddd38233814ad52165b835dfa37d5c883241b7e5;p=www-xenproject-org.git homepage fix Signed-off-by: Arnaud Guéras --- diff --git a/content/_index.md b/content/_index.md index 8595ae5..be24a57 100644 --- 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=`
+ Illustration of a computer monitor displaying bar charts with Xen Project Logo + +
+ ` mediaPosition="right" - mobileMediaPosition="bottom" >}} {{}} 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, {{}} {{}} - + {{}} diff --git a/content/template.md b/content/template.md index 315e182..f2399d2 100644 --- a/content/template.md +++ b/content/template.md @@ -13,7 +13,7 @@ menus: {{
}} -{{
}} +{{
}} diff --git a/hugo_stats.json b/hugo_stats.json index 913f2c7..a76275c 100644 --- 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 33e2640..c8f5b97 100644 --- 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 408b2a1..ce024d3 100644 --- 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 {