From 137410e6960ce0beb0176ecaffb815635878bc1e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= Date: Fri, 22 Nov 2024 09:45:04 +0100 Subject: [PATCH] mediablock full refactor MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Arnaud Guéras --- content/about/contact-us.md | 1 - content/test.md | 74 ++++++++++- .../assets/css/animation/home-animation.scss | 2 +- .../assets/css/molecules/hero-block.scss | 1 - .../assets/css/molecules/media-block.scss | 116 ++++++++++-------- 5 files changed, 133 insertions(+), 61 deletions(-) diff --git a/content/about/contact-us.md b/content/about/contact-us.md index 30abc89..115980d 100644 --- a/content/about/contact-us.md +++ b/content/about/contact-us.md @@ -2,7 +2,6 @@ title: Contact us description: Contact Xen Project for inquiries, support, and collaboration opportunities. Reach out to our team and join the conversation in our community forums. keywords: "contact Xen Project, Xen Project inquiries, Xen Project support, Xen Project collaboration, Xen Project community, Xen Project forums, Xen Project contact information, Xen Project team, Xen Project communication, Xen Project help" - date: 2024-01-14T07:07:07+01:00 draft: false menus: diff --git a/content/test.md b/content/test.md index 8da8feb..c57a2b0 100644 --- a/content/test.md +++ b/content/test.md @@ -3,9 +3,75 @@ title: "test" draft: true hidden: true --- -{{
}} -{{}} -{{}} -{{}} +{{
}} + {{}} + The Xen community is a dynamic and collaborative ecosystem comprised of developers, researchers, and enthusiasts dedicated to advancing open-source virtualization technology. +With diverse backgrounds and expertise, members actively contribute to Xen's evolution, fostering innovation, sharing knowledge, and supporting one another through continuous development efforts. + +

+ Get started +

+ {{}} +{{
}} + +{{
}} + + {{}} + The Xen community is a dynamic and collaborative ecosystem comprised of developers, researchers, and enthusiasts dedicated to advancing open-source virtualization technology. +With diverse backgrounds and expertise, members actively contribute to Xen's evolution, fostering innovation, sharing knowledge, and supporting one another through continuous development efforts. + +

+ Get started +

+ {{}} +{{
}} + + +{{
}} + {{}}` + animate="true" + + >}} + +The Xen Project Hypervisor is uniquely placed to support a new range of use cases, building on top of 14 years of usage within the data center. In particular, its isolation and security features, flexible virtualization mode and architecture, driver disaggregation, and ARM support (only 47K lines of code) make it a perfect fit for embedded applications. + +{{}} +{{
}} + +{{
}} + {{}} +The high-level goal of Unikraft is to be able to build unikernels targeted at specific applications without requiring the time-consuming, expert work that building such a unikernel requires today. An additional goal (or hope) of Unikraft is that all developers interested in unikernel development would contribute by supplying libraries rather than working on independent projects with different code bases as it is done now. +{{}} +{{
}} + +{{
}} + {{}} +HVMI stands for Hypervisor-based Memory Introspection. The technology leverages Virtual Machine Introspection (VMI) APIs in the Xen and KVM hypervisors. By gaining introspection of the raw memory of running guest virtual machines, HVMI can apply security logic to detect and prevent the use of common attack techniques, such as buffer overflows, heap spray, code injection, and so-on. +{{}} {{
}} diff --git a/themes/xen-project/assets/css/animation/home-animation.scss b/themes/xen-project/assets/css/animation/home-animation.scss index 4083903..478e57b 100644 --- a/themes/xen-project/assets/css/animation/home-animation.scss +++ b/themes/xen-project/assets/css/animation/home-animation.scss @@ -82,7 +82,7 @@ } .media-block__content { - flex-basis: 52%; + flex-basis: calc(52% - var(--gap)); } } } diff --git a/themes/xen-project/assets/css/molecules/hero-block.scss b/themes/xen-project/assets/css/molecules/hero-block.scss index 9f91b93..408b2a1 100644 --- a/themes/xen-project/assets/css/molecules/hero-block.scss +++ b/themes/xen-project/assets/css/molecules/hero-block.scss @@ -22,7 +22,6 @@ display: block; white-space: nowrap; position: relative; - background: linear-gradient(90deg, #07c 0%, rgba(255, 255, 255, 0) 100%); background-repeat: no-repeat; background-size: 0% var(--underline-height); diff --git a/themes/xen-project/assets/css/molecules/media-block.scss b/themes/xen-project/assets/css/molecules/media-block.scss index e7e9478..1b1349d 100644 --- a/themes/xen-project/assets/css/molecules/media-block.scss +++ b/themes/xen-project/assets/css/molecules/media-block.scss @@ -1,76 +1,63 @@ .media-block { - --gap: 1.7rem; --content-gap: var(--sp-sm); - --content-line-height: 1.66; - --flex-direction: column-reverse; - --media-max-width: 100%; - --media-max-height: none; - --basis: 100%; - --col-width: 100%; - --padding-v: 20px; - --media-h-padding: 6.9vw; + --media-h-padding: 0; --media-v-padding: 0; - --animation-delay: 0.1s; + --gap: 20px; + --media-block-min-width: 296px; display: flex; - flex-wrap: nowrap; - flex-direction: var(--flex-direction); + flex-wrap: wrap; + flex-direction: row-reverse; justify-content: center; align-items: center; gap: var(--gap); - &.image-small { - --media-max-width: 200px; - .media-block__media { - flex: 0 1 20%; - } + position: relative; + + @include phone { + --media-block-min-width: 320px; } @include tablet { - padding-top: var(--padding-v); - padding-bottom: var(--padding-v); + --gap: 60px; + --media-h-padding: clamp(20px, 2%, 40px); + --media-v-padding: 0; } - @include media-max("tablet") { - &.media-block--mobile-bottom { - --flex-direction: column; - } + @include desktop { + --media-h-padding: clamp(20px, 5%, 70px); + --gap: 80px; + } + + &:has(.youtube-video-container), + &:has(.slide-container), + &:has(.slideshare-container), + &:has(video) { + --media-h-padding: 0 !important; + } + // &::before { + // content: ""; + // position: absolute; + // top: 0; + // left: 50%; + // width: 1px; + // height: 100%; + // background-color: red; + // transform: translateX(-50%); + // } - &.media-block--mobile-top { - --flex-direction: column-reverse; + &.image-small { + .media-block__media { + --media-h-padding: 30%; } } @include tablet { - --gap: var(--sp-xl); - --content-gap: var(--sp-xs); - --content-line-height: 1.67; - --flex-direction: row-reverse; - --media-max-width: 100%; - --media-max-height: 427px; - --media-h-padding: 0; - --basis: calc(50% - var(--gap) * 1); - --col-width: var(--basis); &.media-block--right { - --flex-direction: row; - + flex-direction: row; &[data-animate] .media-block__media { opacity: 0; } } - - &--right.animate .media-block__media { - animation: slideFromRight 0.8s ease-out forwards; - animation-delay: var(--animation-delay); - } - - &--left.animate .media-block__media { - animation: slideFromLeft 0.8s ease-out forwards; - animation-delay: var(--animation-delay); - } - - &[data-animate] .media-block__media { - opacity: 0; - } } &__label { @@ -84,12 +71,16 @@ &__content, &__media { - flex: 1 1 var(--basis); + flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; } + &__media { + flex: 1 0 calc(50% - var(--gap)); + } + &__content { align-items: flex-start; letter-spacing: 0.00625em; @@ -102,7 +93,9 @@ } &__media { - width: var(--col-width); + min-width: var(--media-block-min-width); + display: flex; + justify-content: center; align-items: center; padding: var(--media-v-padding) var(--media-h-padding); @@ -116,8 +109,6 @@ } img { - max-height: var(--media-max-height); - max-width: var(--media-max-width); width: 100%; height: auto; object-fit: contain; @@ -125,6 +116,23 @@ } } +/* animations */ +.media-block { + &--right.animate .media-block__media { + animation: slideFromRight 0.8s ease-out forwards; + animation-delay: var(--animation-delay); + } + + &--left.animate .media-block__media { + animation: slideFromLeft 0.8s ease-out forwards; + animation-delay: var(--animation-delay); + } + + &[data-animate] .media-block__media { + opacity: 0; + } +} + @keyframes slideFromRight { from { opacity: 0; -- 2.39.5