]> xenbits.xensource.com Git - www-xenproject-org.git/commitdiff
mediablock full refactor
authorArnaud Guéras <arnaudgs@gmail.com>
Fri, 22 Nov 2024 08:45:04 +0000 (09:45 +0100)
committerArnaud Guéras <arnaudgs@gmail.com>
Fri, 22 Nov 2024 08:45:04 +0000 (09:45 +0100)
Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
content/about/contact-us.md
content/test.md
themes/xen-project/assets/css/animation/home-animation.scss
themes/xen-project/assets/css/molecules/hero-block.scss
themes/xen-project/assets/css/molecules/media-block.scss

index 30abc894a80941bc11bb6d7472e416d09904b825..115980d98e721e36d8d20255c2f2347a9d2c9d16 100644 (file)
@@ -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:
index 8da8feb0f62502e58db7d561b4d5ecff17ff0955..c57a2b0f4f675f6098c7afb014e8df590b879a8c 100644 (file)
@@ -3,9 +3,75 @@ title: "test"
 draft: true
 hidden: true
 ---
-{{<section container="full">}}
-{{<carousel class="mg-t-lg carousel-container-width">}}
-{{<getpages "projects" "hidden">}}
-{{</carousel>}}
 
+{{<section>}}
+  {{<media-block
+    title="Lead by a **dedicated community**"
+    media="/img/flatline/team-work.svg"
+    mediaMobilePosition="bottom"
+    alt="Illustration of three people carrying a large pie chart with one segment separated, symbolizing teamwork and data analysis."
+    class="block-space"
+  >}}
+  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.
+
+  <p class="mg-t-md">
+    <a href="/contribute/get-started" class="btn btn-primary">Get started <i class="fas fa-arrow-right"></i></a>
+  </p>
+  {{</media-block>}}
+{{</section>}}
+
+{{<section>}}
+
+  {{<media-block
+    title="Lead by a **dedicated community**"
+    media="/img/flatline/team-work.svg"
+    mediaPosition="right"
+    mediaMobilePosition="bottom"
+    alt="Illustration of three people carrying a large pie chart with one segment separated, symbolizing teamwork and data analysis."
+    class="block-space"
+  >}}
+  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.
+
+  <p class="mg-t-md">
+    <a href="/contribute/get-started" class="btn btn-primary">Get started <i class="fas fa-arrow-right"></i></a>
+  </p>
+  {{</media-block>}}
+{{</section>}}
+
+
+{{<section>}}
+  {{<media-block
+    title="Why Xen Project?"
+    media=`{{<youtube id="uuBhqwbaObE" title="Xen Project's Progress Toward Safety Certification"  >}}`
+    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.
+
+{{</media-block>}}
+{{</section>}}
+
+{{<section>}}
+  {{<media-block
+    title="Basic concepts"
+    media="https://www.slideshare.net/slideshow/embed_code/key/hzJl1EbWmxfFUN"
+    alt="Slide for Unikraft's basic concepts on slideshare.net"
+    animate="true"
+  >}}
+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.
+{{</media-block>}}
+{{</section>}}
+
+{{<section>}}
+  {{<media-block
+    title="What is HVMI?"
+    media="https://xenproject.org/wp-content/uploads/sites/79/2020/07/github-hvmi-v2_Kek0TiK6.compressed.mp4"
+    alt="Video of a presentation about HVMI"   
+    animate="true"
+  >}}
+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.
+{{</media-block>}}
 {{</section>}}
index 408390345b56d9ee43a8e3603df468df982ef69b..478e57b0358c70aa7ce80ed5496c0cf49f5d8ce1 100644 (file)
@@ -82,7 +82,7 @@
     }
 
     .media-block__content {
-      flex-basis: 52%;
+      flex-basis: calc(52% - var(--gap));
     }
   }
 }
index 9f91b9342df1c63b72d49881395a5ba7e0fb0fa0..408b2a1de64591a2dff1ad61f61c3e372b7a7b32 100644 (file)
@@ -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);
index e7e947832cab418b1aa882de7da04a16ad4fc5a8..1b1349dc50403c11f3019afb4391ba6db4e976ee 100644 (file)
@@ -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 {
 
   &__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;
   }
 
   &__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);
 
     }
 
     img {
-      max-height: var(--media-max-height);
-      max-width: var(--media-max-width);
       width: 100%;
       height: auto;
       object-fit: contain;
   }
 }
 
+/* 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;