/resources
node_modules
*storybook.log
-mockups
\ No newline at end of file
+mockups
+storybook-static
+
+.DS_Store
+.env
+thumbs.db
\ No newline at end of file
}
.story-row {
+ --max-width: 300px;
+ --cols: 2;
+
display: flex;
gap: 24px;
-
flex-direction: column;
flex: 0 auto;
- @media (min-width: 600px) {
- flex-direction: row;
- flex: 0 33%;
- }
> * {
- max-width: 300px;
+ flex: 1 0 calc((100% / var(--cols) - (var(--cols) - 1) * 24px));
+ max-width: var(--max-width);
+ }
+
+ &.cols-1,
+ &.cols-2,
+ &.cols-3,
+ &.cols-4 {
+ --max-width: none;
+ }
+
+ &.cols-2 {
+ --cols: 2;
+ }
+
+ &.cols-3 {
+ --cols: 3;
+ }
+
+ &.cols-4 {
+ --cols: 4;
+ }
+
+ @media (min-width: 500px) {
+ flex-direction: row;
+ --cols: 3;
}
}
description: "The Xen Project develops enterprise-grade open source virtualization solutions trusted by millions of users. Secure, flexible, and powerful hypervisor technology."
keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor, secure virtualization, flexible hypervisor technology, powerful hypervisor, Xen community, virtualization solutions, Linux Foundation project, Xen subprojects, commercial virtualization, open-source domains, virtualization technology"
---
-{{<section >}}
+
+{{<section class="home-section-hero home-hero-animated" >}}
{{<media-block
class="hero-block"
label="A Linux Foundation Project"
title="Bring the power of <a href=\"#\">open virtualization</a> everywhere."
titleLevel="1"
- media="/img/flatline/data-process-with-xen-logo.svg"
- alt="Illustration of a computer monitor displaying bar charts, next to multiple server racks representing data management and analytics."
+ media="/img/flatline/screen-with-xen-logo.webp"
+ alt="Illustration of a computer monitor displaying bar charts with Xen Project Logo"
mediaPosition="right"
mobileMediaPosition="bottom"
>}}
domains.
{{</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>}}
-{{<section class="section-square-rounded">}}
+{{<section class="section-square-rounded no-mt">}}
{{<features-list>}}
- title: Open-source
icon: fas fa-code
{{</section>}}
-{{<section container="small">}}
-<div class="line">
-{{<md col>}}
+{{<section row="true" cols="3">}}
+{{<md class="col">}}
## A virtualization **revolution**
The Xen Project focuses on revolutionizing virtualization by providing a versatile and powerful hypervisor that addresses the evolving needs of diverse industries :
{{</md>}}
-{{<md col>}}
+{{<md class="col presentation-list">}}
- **Empower Innovation:** Tailored virtualization to drive progress across various domains.
-
- **Enhance Cloud Ecosystems:** Elevate cloud capabilities with high-performing, reliable virtualization.
-
- **Secure Critical Systems:** Safeguard data and applications through industry-leading security.
-
- **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions.
{{</md>}}
</div>
{{</section>}}
-
{{<section container="full">}}
-{{<carousel class="mg-t-lg">}}
+{{<carousel class="mg-t-lg carousel-container-width">}}
{{<getpages "projects">}}
{{</carousel>}}
-
<p class="mob-mg-v-xl mg-v-xxl txt-c">
<a class="btn btn-primary" href="/projects">
Discover all projects <i class="fas fa-arrow-right"></i>
</p>
{{</section>}}
-{{<section>}}
+{{<section container="full">}}
{{<latest-news>}}
{{</section>}}
-{{<section background="curve-reverse">}}
+{{<section class="section-square-primary">}}
{{<media-block
title="Governed by Xen project **members**"
media=`{{<partial "blocks/logos-circle">}}`
mediaMobilePosition="top"
+ animate="true"
>}}
Board members can propose and vote upon changes to the Xen Project.Members also gain valuable strategic insight into project plans and future scope.
{{<media-block
- class="block-space"
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"
+ animate="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.
<p class="mg-t-md">
- <a href="/contribute/get-started">Get started <i class="fas fa-arrow-right"></i></a>
+ <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="About **Xen Project**"
media="/img/flatline/data-process.svg"
mediaMobilePosition="bottom"
alt="Illustration of a laptop displaying 3D bar charts, connected to various cloud and file management icons, representing data integration and cloud storage."
+ animate="true"
>}}
The mission of the Xen Project is to advance virtualisation technology across a wide range of commercial and open-source domains.
<p class="mg-t-md">
- <a href="/about">Learn about Xen Project<i class="fas fa-arrow-right"></i></a>
+ <a href="/about" class="btn btn-secondary">Learn about Xen Project<i class="fas fa-arrow-right"></i></a>
</p>
{{</media-block>}}
{{</section>}}
---
-title: "footer-header"
+title: "test"
draft: true
---
-
-{{<section class="row">}}
-<div class="line">
-{{<md col>}}
-## A virtualization **revolution**
-The Xen Project focuses on revolutionizing virtualization by providing a versatile and powerful hypervisor that addresses the evolving needs of diverse industries :
-{{</md>}}
-
-{{<md col>}}
-- **Empower Innovation:** Tailored virtualization to drive progress across various domains.
-- **Enhance Cloud Ecosystems:** Elevate cloud capabilities with high-performing, reliable virtualization.
-- **Secure Critical Systems:** Safeguard data and applications through industry-leading security.
-- **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions.
-{{</md>}}
-</div>
+
+{{<section>}}
+{{<latest-news>}}
{{</section>}}
-{{<section class="row">}}
-<div class="line">
-{{<md col>}}
-## A virtualization **revolution**
-The Xen Project focuses on revolutionizing virtualization by providing a versatile and powerful hypervisor that addresses the evolving needs of diverse industries :
-{{</md>}}
-
-{{<md col>}}
-- **Empower Innovation:** Tailored virtualization to drive progress across various domains.
-- **Enhance Cloud Ecosystems:** Elevate cloud capabilities with high-performing, reliable virtualization.
-- **Secure Critical Systems:** Safeguard data and applications through industry-leading security.
-- **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions.
-{{</md>}}
-
-{{<md col>}}
-- **Empower Innovation:** Tailored virtualization to drive progress across various domains.
-- **Enhance Cloud Ecosystems:** Elevate cloud capabilities with high-performing, reliable virtualization.
-- **Secure Critical Systems:** Safeguard data and applications through industry-leading security.
-- **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions.
-{{</md>}}
-</div>
-{{</section>}}
+<!--
+{{<section container="full">}}
+{{<carousel class="mg-t-lg carousel-container-width">}}
+{{<getpages "projects">}}
+{{</carousel>}}
+{{</section>}} -->
-baseURL: "https://xenproject.local/"
+baseURL: "https://local.xenproject.org/"
languageCode: "en-us"
title: "Xen Project"
"actions",
"active",
"ancestor",
+ "animated-home-server",
+ "animated-home-shadow-screen",
"article",
"background-curve",
"background-curve-reverse",
"btn-primary",
"btn-secondary",
"btn-tertiary",
+ "card",
+ "card__actions",
+ "card__content",
+ "card__label",
"carousel",
"carousel-button",
"carousel-buttons",
"carousel-container",
+ "carousel-container-width",
"carousel-content",
"carousel-item",
"col",
"cols",
+ "cols-3",
"container",
"container-full",
"container-small",
"header-logo",
"header-nav",
"hero-block",
+ "home-hero-animated",
+ "home-section-hero",
"image-ratio-large",
"image-small",
"images-in-circle",
"latest-news",
"latest-news-template",
"latest-news_container",
- "line",
"list-column",
"list-column--sublists",
"list-no-style",
"mt-2",
"news-container",
"next",
+ "no-mt",
"p1-book",
"page-404",
"page-404-content",
"page-content-only",
"page-single",
"page-top",
+ "presentation-list",
"prev",
"project-card",
"project-card__content",
"search-form",
"search-input",
"search-results",
+ "section-row",
"section-space",
+ "section-square-primary",
"section-square-rounded",
"single-content",
"slideshare-container",
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500" height="527.47003" viewBox="0 0 500 527.47003" fill="none" version="1.1" id="svg40"
+ sodipodi:docname="Screen.svg" inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview id="namedview40" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
+ inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="1.3850789" inkscape:cx="306.84172" inkscape:cy="138.62026" inkscape:window-width="3440"
+ inkscape:window-height="1387" inkscape:window-x="1440" inkscape:window-y="25" inkscape:window-maximized="1"
+ inkscape:current-layer="svg40" />
+ <defs id="defs40">
+ <clipPath id="clip0_1192_30646">
+ <rect width="111.45" height="43.141899" fill="#ffffff" transform="translate(21.2646,48.6486)" id="rect40" x="0"
+ y="0" />
+ </clipPath>
+ </defs>
+ <g id="g41" transform="translate(-608,-62)">
+ <g opacity="0.2" id="g40" transform="translate(608,62)">
+ <path
+ d="M 477.395,1.94711 H 22.5679 C 11.1797,1.94711 1.94775,11.1791 1.94775,22.5673 V 254.124 c 0,11.388 9.23195,20.62 20.62015,20.62 H 477.395 c 11.388,0 20.62,-9.232 20.62,-20.62 V 22.5673 c 0,-11.3882 -9.232,-20.62019 -20.62,-20.62019 z"
+ fill="#ffffff" id="path1" />
+ <path
+ d="M 477.394,276.73 H 22.5676 C 16.5854,276.72 10.8511,274.339 6.62104,270.109 2.39098,265.879 0.0100966,260.144 0,254.162 V 22.5676 C 0.0100966,16.5854 2.39098,10.8511 6.62104,6.62104 10.8511,2.39098 16.5854,0.0100966 22.5676,0 H 477.394 c 5.989,-8.54411e-6 11.733,2.37643 15.971,6.60758 4.239,4.23112 6.625,9.97122 6.635,15.96002 V 254.162 c -0.01,5.989 -2.396,11.729 -6.635,15.96 -4.238,4.231 -9.982,6.608 -15.971,6.608 z M 22.5676,3.93309 C 17.6285,3.94318 12.8946,5.90969 9.40215,9.40215 5.90969,12.8946 3.94318,17.6285 3.93309,22.5676 V 254.162 c 0.01009,4.939 1.9766,9.673 5.46906,13.166 3.49245,3.492 8.22635,5.459 13.16545,5.469 H 477.394 c 4.946,0 9.69,-1.962 13.19,-5.456 3.501,-3.493 5.473,-8.233 5.483,-13.179 V 22.5676 c -0.01,-4.9457 -1.982,-9.6854 -5.483,-13.17891 -3.5,-3.49355 -8.244,-5.45561 -13.19,-5.4556 z"
+ fill="#475467" id="path2" />
+ <path d="M 498.015,32.9913 H 1.94775 V 243.699 H 498.015 Z" fill="#ffffff" id="path3" />
+ <path
+ d="M 498.014,245.685 H 1.94745 c -0.5165,0 -1.011847,-0.205 -1.377066,-0.57 C 0.205165,244.749 0,244.254 0,243.737 V 32.9921 C 0,32.4756 0.205165,31.9802 0.570384,31.615 0.935603,31.2498 1.43095,31.0446 1.94745,31.0446 H 498.014 c 0.259,-0.0051 0.517,0.0416 0.757,0.1372 0.241,0.0955 0.46,0.2382 0.645,0.4195 0.185,0.1814 0.332,0.3978 0.432,0.6366 0.1,0.2388 0.152,0.4952 0.152,0.7542 V 243.737 c 0,0.259 -0.052,0.516 -0.152,0.755 -0.1,0.238 -0.247,0.455 -0.432,0.636 -0.185,0.182 -0.404,0.324 -0.645,0.42 -0.24,0.095 -0.498,0.142 -0.757,0.137 z M 3.93309,241.866 H 496.067 V 35.0541 H 3.93309 Z"
+ fill="#475467" id="path4" />
+ <path
+ d="M 351.038,334.542 H 148.923 c -4.64,0 -8.401,3.761 -8.401,8.401 v 0.038 c 0,4.64 3.761,8.401 8.401,8.401 h 202.115 c 4.64,0 8.401,-3.761 8.401,-8.401 v -0.038 c 0,-4.64 -3.761,-8.401 -8.401,-8.401 z"
+ fill="#ffffff" id="path5" />
+ <path d="m 224.148,219.07 h 21.193 V 82.4043 h -21.193 z" fill="#85c241" id="path6" />
+ <path d="m 194,219.165 h 21 V 71.1647 h -21 z" fill="#0077cc" id="path7" />
+ <path d="m 163.243,219.032 h 21.193 v -84.887 h -21.193 z" fill="#85c241" id="path8" />
+ <path d="m 132.848,219.032 h 21.193 V 178.25 h -21.193 z" fill="#0077cc" id="path9" />
+ <path d="m 102.375,219.032 h 21.193 v -70.414 h -21.193 z" fill="#85c241" id="path10" />
+ <path d="M 71.9028,219.032 H 93.0957 V 166.374 H 71.9028 Z" fill="#0077cc" id="path11" />
+ <path d="M 41.4697,219.032 H 62.6626 V 177.868 H 41.4697 Z" fill="#85c241" id="path12" />
+ <g clip-path="url(#clip0_1192_30646)" id="g30">
+ <path
+ d="m 100.062,63.1626 c -3.4613,0 -6.2593,1.7829 -7.7342,2.9604 l 0.4239,-2.2633 h -8.5772 l -3.0212,14.0112 h 8.9655 l 1.5306,-8.1529 c 0.7475,-0.9541 1.9926,-2.1807 3.4385,-2.1807 2.363,0 1.852,1.888 1.6556,3.3783 l -1.2116,6.7386 8.7421,0.0178 c 0,0 1.02,-5.3712 1.143,-5.961 1.225,-5.8807 -0.194,-8.5462 -5.36,-8.5462 z"
+ fill="#101828" id="path13" />
+ <path
+ d="m 80.9614,72.0059 c 0,0 3.4117,-8.8791 -9.1596,-8.8791 -12.5712,0 -13.5463,8.8791 -13.5463,8.8791 0,0 -1.5597,6.4593 10.6211,6.4593 12.1808,0 11.6943,-4.7702 11.6943,-4.7702 h -8.9654 c 0,0 -0.6828,1.888 -2.5348,1.888 -1.852,0 -3.0212,-0.6949 -2.5348,-3.5771 H 80.9592 Z M 70.8268,66.342 c 3.1171,0 2.1443,2.8822 2.1443,2.8822 h -5.3597 c 0,0 0.0982,-2.8822 3.2176,-2.8822 z"
+ fill="#101828" id="path14" />
+ <path
+ d="m 80.9434,79.1556 h 4.3868 c 0.6426,0 1.2116,0.0804 1.707,0.2413 0.4953,0.1609 0.8969,0.3955 1.2093,0.7038 0.3102,0.3083 0.5222,0.6859 0.636,1.135 0.1115,0.4491 0.1138,0.9563 0.0044,1.5238 l -0.0067,0.0291 c -0.1182,0.6055 -0.3302,1.1372 -0.6381,1.5952 -0.3079,0.4581 -0.6873,0.8446 -1.138,1.1574 -0.4507,0.3128 -0.9617,0.5474 -1.5329,0.7016 -0.5712,0.1564 -1.1737,0.2346 -1.8074,0.2346 h -1.4035 l -0.569,2.9269 h -2.836 l 1.9904,-10.2487 z m 3.193,5.0942 c 0.5066,0 0.9283,-0.1207 1.2607,-0.3597 0.3347,-0.2413 0.5422,-0.5675 0.6226,-0.9786 l 0.0067,-0.0291 c 0.0848,-0.4424 0.0067,-0.7775 -0.2365,-1.0077 -0.2433,-0.2301 -0.6226,-0.3463 -1.138,-0.3463 H 83.322 l -0.5288,2.7236 h 1.3455 z"
+ fill="#85c241" id="path15" />
+ <path
+ d="m 90.17,81.4837 h 2.7936 l -0.3102,1.5953 c 0.328,-0.5362 0.7185,-0.9652 1.1715,-1.2892 0.4529,-0.3217 1.0063,-0.4692 1.6645,-0.4401 l -0.5689,2.9291 h -0.2343 c -0.7319,0 -1.3344,0.2145 -1.8074,0.6435 -0.473,0.429 -0.7988,1.1038 -0.9773,2.0198 l -0.4775,2.46 h -2.7936 l 1.5373,-7.9206 z"
+ fill="#85c241" id="path16" />
+ <path
+ d="m 98.8877,89.5942 c -0.6337,0 -1.196,-0.1072 -1.6847,-0.3217 -0.4886,-0.2145 -0.8925,-0.5095 -1.2093,-0.8848 -0.3169,-0.3754 -0.5356,-0.8133 -0.6516,-1.3093 -0.1183,-0.4983 -0.1227,-1.03 -0.0111,-1.5953 l 0.0066,-0.029 c 0.1094,-0.5653 0.3236,-1.0993 0.6404,-1.602 0.3169,-0.5027 0.7074,-0.9407 1.1692,-1.3183 0.4619,-0.3753 0.9841,-0.6725 1.562,-0.8937 0.5779,-0.2189 1.1848,-0.3307 1.8188,-0.3307 0.633,0 1.193,0.1095 1.682,0.3307 0.489,0.219 0.893,0.5139 1.209,0.8848 0.317,0.3709 0.536,0.8043 0.654,1.3026 0.119,0.4982 0.121,1.03 0.011,1.5953 l -0.004,0.029 c -0.109,0.5675 -0.324,1.1015 -0.64,1.6042 -0.317,0.5028 -0.708,0.9429 -1.17,1.3183 -0.462,0.3753 -0.984,0.6725 -1.562,0.8937 -0.577,0.219 -1.1844,0.3284 -1.8181,0.3284 z m 0.4886,-2.3706 c 0.2544,0 0.4909,-0.0469 0.7137,-0.1385 0.223,-0.0916 0.42,-0.2167 0.594,-0.3776 0.172,-0.1586 0.317,-0.3463 0.437,-0.5586 0.118,-0.2122 0.201,-0.4357 0.248,-0.668 l 0.007,-0.0291 c 0.046,-0.2413 0.049,-0.4692 0.009,-0.6814 -0.043,-0.2123 -0.123,-0.4 -0.244,-0.5586 -0.12,-0.1586 -0.272,-0.2882 -0.459,-0.3843 -0.186,-0.0961 -0.402,-0.1452 -0.645,-0.1452 -0.2434,0 -0.4911,0.0469 -0.7142,0.1385 -0.2232,0.0916 -0.4195,0.219 -0.5935,0.3776 -0.1719,0.1586 -0.3191,0.3463 -0.4374,0.5586 -0.1205,0.2122 -0.2008,0.4356 -0.2477,0.668 l -0.0067,0.0291 c -0.0468,0.2435 -0.049,0.4692 -0.0089,0.6836 0.0424,0.2123 0.1227,0.4 0.2432,0.5586 0.1205,0.1587 0.2722,0.2882 0.4597,0.3843 0.1852,0.0961 0.3994,0.1453 0.6448,0.1453 z"
+ fill="#85c241" id="path17" />
+ <path
+ d="m 104.033,91.7905 c -0.225,0 -0.426,-0.0134 -0.607,-0.0357 -0.18,-0.0246 -0.352,-0.047 -0.513,-0.0671 l 0.357,-1.8455 c 0.056,0.0089 0.116,0.0157 0.181,0.0157 h 0.183 c 0.272,0 0.491,-0.0693 0.654,-0.2056 0.162,-0.1363 0.276,-0.3754 0.343,-0.7172 l 1.446,-7.4514 h 2.794 l -1.469,7.5698 c -0.095,0.4983 -0.243,0.9228 -0.437,1.2736 -0.196,0.3507 -0.435,0.6345 -0.716,0.849 -0.281,0.2145 -0.609,0.3709 -0.98,0.4692 -0.372,0.0983 -0.783,0.1474 -1.234,0.1474 z m 2.524,-13.0728 h 2.909 l -0.397,2.0488 h -2.909 z"
+ fill="#85c241" id="path18" />
+ <path
+ d="m 112.778,89.5942 c -0.625,0 -1.176,-0.1006 -1.654,-0.2994 -0.477,-0.1989 -0.87,-0.4781 -1.176,-0.8334 -0.305,-0.3552 -0.515,-0.7887 -0.624,-1.2959 -0.112,-0.5072 -0.107,-1.068 0.013,-1.6824 l 0.007,-0.0291 c 0.111,-0.5764 0.314,-1.1149 0.607,-1.6176 0.292,-0.5027 0.653,-0.9406 1.082,-1.3182 0.428,-0.3754 0.908,-0.6703 1.437,-0.8848 0.529,-0.2145 1.086,-0.3217 1.671,-0.3217 0.683,0 1.252,0.1162 1.709,0.3508 0.455,0.2346 0.81,0.5496 1.06,0.9451 0.25,0.3954 0.404,0.8535 0.464,1.3763 0.06,0.5228 0.031,1.0769 -0.082,1.6623 -0.018,0.0871 -0.036,0.181 -0.054,0.2793 -0.02,0.0983 -0.042,0.1966 -0.071,0.2927 h -5.293 c 0.022,0.4401 0.161,0.7663 0.417,0.9808 0.257,0.2145 0.603,0.3218 1.042,0.3218 0.331,0 0.65,-0.0626 0.951,-0.1899 0.301,-0.1274 0.622,-0.3307 0.959,-0.6145 l 1.288,1.2736 c -0.475,0.4893 -1.022,0.878 -1.638,1.1707 -0.618,0.2927 -1.321,0.438 -2.111,0.438 z m 2.073,-4.8015 c 0.035,-0.4379 -0.043,-0.7887 -0.237,-1.0479 -0.194,-0.2592 -0.48,-0.3887 -0.861,-0.3887 -0.382,0 -0.696,0.1295 -0.982,0.3887 -0.283,0.2592 -0.509,0.6077 -0.672,1.0479 h 2.749 z"
+ fill="#85c241" id="path19" />
+ <path
+ d="m 121.52,89.5942 c -0.593,0 -1.125,-0.1095 -1.589,-0.3284 -0.464,-0.219 -0.843,-0.5139 -1.135,-0.8848 -0.293,-0.3709 -0.496,-0.8066 -0.61,-1.3115 -0.111,-0.5027 -0.113,-1.0323 -0.006,-1.5886 l 0.006,-0.0291 c 0.108,-0.5563 0.315,-1.0858 0.623,-1.5885 0.308,-0.5028 0.683,-0.9407 1.127,-1.3183 0.444,-0.3753 0.946,-0.6725 1.51,-0.8937 0.565,-0.2189 1.158,-0.3284 1.783,-0.3284 0.819,0 1.471,0.1608 1.953,0.4826 0.484,0.3217 0.843,0.7507 1.08,1.2892 L 124.104,84.5 c -0.145,-0.2636 -0.312,-0.4692 -0.509,-0.6144 -0.196,-0.1475 -0.464,-0.219 -0.805,-0.219 -0.223,0 -0.44,0.047 -0.65,0.1386 -0.207,0.0938 -0.397,0.2189 -0.564,0.3798 -0.168,0.1609 -0.31,0.3463 -0.431,0.5563 -0.118,0.2101 -0.201,0.4357 -0.25,0.6815 l -0.006,0.029 c -0.05,0.2548 -0.056,0.4916 -0.02,0.7105 0.035,0.219 0.104,0.4089 0.211,0.5698 0.105,0.1609 0.246,0.2882 0.424,0.3798 0.177,0.0939 0.382,0.1385 0.616,0.1385 0.333,0 0.627,-0.0737 0.884,-0.2189 0.256,-0.1475 0.522,-0.3463 0.796,-0.601 l 1.596,1.3472 c -0.478,0.5474 -1.024,0.9854 -1.645,1.3183 -0.62,0.3306 -1.363,0.4982 -2.231,0.4982 z"
+ fill="#85c241" id="path20" />
+ <path
+ d="m 129.187,89.5652 c -0.844,0 -1.46,-0.2011 -1.852,-0.6011 -0.393,-0.3999 -0.498,-1.0747 -0.313,-2.0198 l 0.625,-3.2218 h -0.935 l 0.435,-2.241 h 0.935 l 0.391,-2.0064 h 2.793 l -0.39,2.0064 h 1.843 l -0.435,2.241 h -1.841 l -0.52,2.6789 c -0.056,0.2838 -0.031,0.4848 0.071,0.6077 0.103,0.1229 0.282,0.1832 0.536,0.1832 0.185,0 0.37,-0.0245 0.556,-0.0737 0.185,-0.0492 0.368,-0.1117 0.548,-0.1899 l -0.424,2.1807 c -0.278,0.1362 -0.589,0.2457 -0.925,0.3284 -0.337,0.0827 -0.703,0.1251 -1.092,0.1251 z"
+ fill="#85c241" id="path21" />
+ <path
+ d="M 68.5284,57.9969 H 54.3015 l -8.0595,6.18 -4.7081,-6.18 h -11.402 l 8.9119,11.701 -17.7792,13.6381 h 14.2292 l 8.7958,-6.7476 5.1387,6.7476 H 60.8304 L 51.4879,71.0675 Z"
+ fill="#101828" id="path22" />
+ <path
+ d="m 35.8418,83.0679 c -2.4545,-1.6065 -4.4336,-3.8743 -5.6854,-6.5532 l -4.3288,3.3201 c 0.6694,1.2468 1.4593,2.4198 2.3541,3.5012 h 7.3098 l 0.3481,-0.2681 z"
+ fill="#101828" id="path23" />
+ <path d="m 31.8767,60.2848 c 0.6292,-0.8312 1.3388,-1.5975 2.1175,-2.2879 H 30.134 Z" fill="#101828"
+ id="path24" />
+ <path
+ d="M 52.6726,83.336 H 60.75 c 0.0134,-0.0179 0.029,-0.0335 0.0424,-0.0492 l -3.3715,-4.4261 c -1.254,1.8008 -2.8718,3.3291 -4.7483,4.4753 z"
+ fill="#101828" id="path25" />
+ <path
+ d="m 44.4659,85.6351 c -2.9676,0 -5.7434,-0.8223 -8.1153,-2.2477 l -0.5154,0.3954 -0.1518,0.1162 h -7.013 c 3.8736,4.3546 9.5121,7.1006 15.7955,7.1006 6.2834,0 11.922,-2.746 15.7955,-7.1006 h -8.6039 c -2.1577,1.1082 -4.601,1.7361 -7.1916,1.7361 z"
+ fill="#85c241" id="path26" />
+ <path
+ d="m 59.4827,64.9344 4.4447,-3.4096 C 63.3986,60.2826 62.756,59.1006 62.0107,57.9947 h -7.071 c 2.0774,1.8455 3.6661,4.2317 4.5452,6.9397 z"
+ fill="#101828" id="path27" />
+ <path
+ d="m 28.6748,69.8252 c 0,-3.3715 1.0576,-6.4951 2.8538,-9.0623 l -1.8453,-2.4242 -0.6917,-0.9071 h 5.6743 c 2.6932,-2.1382 6.0959,-3.4184 9.7977,-3.4184 3.7017,0 7.1067,1.2802 9.7977,3.4184 h 7.3433 c -3.8379,-5.3198 -10.0833,-8.783 -17.1388,-8.783 -11.6787,0 -21.1484,9.4801 -21.1484,21.1766 0,3.4162 0.8122,6.6426 2.2492,9.498 l 4.3533,-3.338 c -0.8011,-1.8925 -1.2429,-3.9748 -1.2429,-6.16 z"
+ fill="#85c241" id="path28" />
+ <path
+ d="m 63.1756,64.4495 c 0.5109,-0.2793 1.0264,-0.5161 1.5396,-0.7127 -0.1696,-0.5653 -0.3593,-1.1216 -0.5735,-1.6646 l -4.4872,3.4431 c 0.1339,0.4736 0.2455,0.9563 0.3347,1.4456 0.8279,-0.9407 1.9078,-1.8098 3.1841,-2.5091 z"
+ fill="#85c241" id="path29" />
+ <path
+ d="m 58.9829,76.0365 c -0.3481,0.8111 -0.7564,1.5908 -1.2295,2.3259 l 3.3983,4.4641 c 1.0197,-1.3115 1.8832,-2.7504 2.5772,-4.2831 -2.0037,-0.4558 -3.6839,-1.3674 -4.746,-2.5069 z"
+ fill="#85c241" id="path30" />
+ </g>
+ <path
+ d="m 455,121.165 c 0,27.614 -22.386,50 -50,50 -27.614,0 -50,-22.386 -50,-50 0,-27.6145 22.386,-50.0003 50,-50.0003 27.614,0 50,22.3858 50,50.0003 z m -90,0 c 0,22.091 17.909,40 40,40 22.091,0 40,-17.909 40,-40 0,-22.0917 -17.909,-40.0003 -40,-40.0003 -22.091,0 -40,17.9086 -40,40.0003 z"
+ fill="#85c241" id="path31" />
+ <path
+ d="m 455,121.165 c 0,7.89 -1.867,15.669 -5.45,22.699 -3.582,7.031 -8.777,13.114 -15.161,17.752 l -5.878,-8.091 c 5.107,-3.71 9.263,-8.576 12.129,-14.201 2.866,-5.624 4.36,-11.847 4.36,-18.159 z"
+ fill="#0077cc" id="path32" />
+ <path
+ d="m 434.544,161.503 c -6.366,4.662 -13.745,7.752 -21.533,9.016 -7.789,1.264 -15.766,0.667 -23.28,-1.743 l 3.054,-9.522 c 6.011,1.928 12.393,2.405 18.624,1.394 6.231,-1.011 12.134,-3.483 17.226,-7.213 z"
+ fill="#101828" id="path33" />
+ <path
+ d="m 389.647,168.749 c -7.509,-2.423 -14.339,-6.588 -19.93,-12.156 -5.59,-5.568 -9.784,-12.38 -12.238,-19.88 l 9.504,-3.109 c 1.963,5.999 5.318,11.449 9.791,15.903 4.473,4.454 9.936,7.787 15.944,9.725 z"
+ fill="#b6da8d" id="path34" />
+ <path
+ d="m 357.523,136.846 c -2.475,-7.492 -3.141,-15.464 -1.945,-23.263 1.197,-7.799 4.222,-15.2047 8.829,-21.6107 l 8.118,5.8385 c -3.685,5.1252 -6.105,11.0492 -7.062,17.2882 -0.958,6.24 -0.425,12.617 1.555,18.611 z"
+ fill="#475467" id="path35" />
+ <path
+ d="m 364.57,91.7462 c 4.643,-6.3802 10.73,-11.5711 17.763,-15.1482 7.033,-3.5771 14.813,-5.439 22.703,-5.4333 l -0.007,10 c -6.312,-0.0045 -12.536,1.4849 -18.163,4.3466 -5.626,2.8617 -10.496,7.0144 -14.21,12.1186 z"
+ fill="#fafafa" id="path36" />
+ <path
+ d="m 261,183.165 c 0,-2.209 1.791,-4 4,-4 h 186 c 2.209,0 4,1.791 4,4 0,2.209 -1.791,4 -4,4 H 265 c -2.209,0 -4,-1.791 -4,-4 z"
+ fill="#fafafa" id="path37" />
+ <path d="m 261,71.1647 h 78 V 171.165 h -78 z" fill="#fafafa" id="path38" />
+ <path
+ d="m 261,199.165 c 0,-2.209 1.791,-4 4,-4 h 186 c 2.209,0 4,1.791 4,4 0,2.209 -1.791,4 -4,4 H 265 c -2.209,0 -4,-1.791 -4,-4 z"
+ fill="#fafafa" id="path39" />
+ <path
+ d="m 261,215.165 c 0,-2.209 1.791,-4 4,-4 h 186 c 2.209,0 4,1.791 4,4 0,2.209 -1.791,4 -4,4 H 265 c -2.209,0 -4,-1.791 -4,-4 z"
+ fill="#fafafa" id="path40" />
+ </g>
+ <path
+ d="m 841.19379,578.90428 c -15.837,5.356 -32.348,8.533 -49.132,9.455 -64.2378,5.151 -109.2079,-7.586 -137.62194,-38.774 -0.21341,-0.203 -0.38675,-0.448 -0.50926,-0.72 -0.12251,-0.273 -0.19157,-0.566 -0.2029,-0.862 -0.0113,-0.296 0.0353,-0.589 0.13697,-0.861 0.10172,-0.271 0.25635,-0.515 0.45428,-0.717 0.19793,-0.201 0.43497,-0.356 0.69635,-0.454 0.26139,-0.099 0.54155,-0.139 0.82313,-0.118 0.28159,0.021 0.55855,0.103 0.81373,0.24 0.25518,0.137 0.48311,0.326 0.66965,0.556 27.52949,30.203 71.45579,42.418 134.23299,37.404 29.047,-2.322 64.789,-8.385 83.781,-35.058 4.729,-7.15099 8.746,-14.81199 11.99,-22.86999 3.053,-7.539 6.693,-14.78 10.883,-21.651 10.65,-15.04 25.396,-26.275 42.416,-32.317 11.28,-24.021 57.698,-44.8923 67.28101,-48.9959 18.553,-7.1582 35.534,-17.9307 50.083,-31.7719 14.497,-13.7707 23.41,-32.9128 25.03,-53.75234 0.01,-0.28588 0.068,-0.56492 0.181,-0.82014 0.113,-0.25522 0.276,-0.48134 0.477,-0.66461 0.202,-0.18327 0.439,-0.31987 0.696,-0.40153 0.258,-0.0817 0.531,-0.10664 0.803,-0.0735 0.541,0.0629 1.048,0.34334 1.413,0.78246 0.366,0.43912 0.561,1.00268 0.545,1.57246 -1.668,21.93036 -11.042,42.07856 -26.31,56.54886 -14.894,14.2248 -32.297,25.2916 -51.322,32.6348 -8.769,3.7516 -49.07701,21.8563 -62.81101,42.6953 15.975,-5.284 32.386,-9.182 49.073,-11.655 3.967,-1.2 8.29001,-0.699 12.04601,1.397 1.262,0.849 2.319,2.003 3.077,3.361 0.758,1.357 1.194,2.876 1.269,4.422 0.333,6.643 -5.172,14.488 -10.789,18.84 -15.37101,11.952 -33.49501,23.106 -51.09401,15.13 -4.079,-1.703 -7.534,-4.812 -9.779,-8.801 -2.41,-4.653 -3.08,-10.021 -1.872,-15.011 -14.786,5.891 -27.541,16.068 -36.837,29.393 -4.141,6.674 -7.725,13.727 -10.714,21.084 -3.355,8.331 -7.515,16.24899 -12.417,23.63399 -9.578,12.787 -22.585,22.232 -37.46,27.199 z m 102.407,-103.55699 c -0.219,0.494 -0.409,1.003 -0.57,1.524 -0.791,2.172 -1.109,4.522 -0.929,6.882 0.179,2.361 0.851,4.672 1.968,6.77 1.779,3.075 4.48,5.46 7.653,6.761 15.536,7.124 32.437,-3.375 46.926,-14.647 4.69401,-3.657 9.44001,-10.363 9.18301,-15.266 -0.01,-0.838 -0.234,-1.668 -0.647,-2.402 -0.413,-0.735 -1.001,-1.349 -1.703,-1.778 -2.878,-1.397 -6.10001,-1.643 -9.04401,-0.691 -18.018,2.543 -35.689,6.905 -52.771,13.025 z"
+ fill="#dbdbdb" id="path1-5" />
+ </g>
+</svg>
\ No newline at end of file
"variableName": "--color-action-text",
"value": "#0062a7"
},
- {
- "group": "action",
- "name": "action-text-hover",
- "variableName": "--color-action-text-hover",
- "value": "#004e86"
- },
- {
- "group": "action",
- "name": "action-text-pressed",
- "variableName": "--color-action-text-pressed",
- "value": "#003b64"
- },
{
"group": "action",
"name": "action-fill",
"variableName": "--color-action-fill",
"value": "#0077cc"
},
- {
- "group": "action",
- "name": "action-fill-hover",
- "variableName": "--color-action-fill-hover",
- "value": "#005fa3"
- },
- {
- "group": "action",
- "name": "action-fill-pressed",
- "variableName": "--color-action-fill-pressed",
- "value": "#00477a"
- },
{
"group": "action",
"name": "action-on-fill",
"variableName": "--color-brand-text",
"value": "#567c2a"
},
- {
- "group": "brand",
- "name": "brand-text-hover",
- "variableName": "--color-brand-text-hover",
- "value": "#456322"
- },
- {
- "group": "brand",
- "name": "brand-text-pressed",
- "variableName": "--color-brand-text-pressed",
- "value": "#344a19"
- },
{
"group": "brand",
"name": "brand-fill",
"variableName": "--color-brand-fill",
"value": "#85c241"
},
- {
- "group": "brand",
- "name": "brand-fill-hover",
- "variableName": "--color-brand-fill-hover",
- "value": "#9dce67"
- },
- {
- "group": "brand",
- "name": "brand-fill-pressed",
- "variableName": "--color-brand-fill-pressed",
- "value": "#b6da8d"
- },
{
"group": "brand",
"name": "brand-on-fill",
{
+ "decorative": [
+ {
+ "name": "home-servers.webp",
+ "path": "/decorative/home-servers.webp"
+ },
+ {
+ "name": "home-shadow-screen.png",
+ "path": "/decorative/home-shadow-screen.png"
+ },
+ {
+ "name": "home-wire.png",
+ "path": "/decorative/home-wire.png"
+ }
+ ],
"figures": [
{
"name": "cloud.png",
"name": "laptop-cybersecurity.svg",
"path": "/flatline/laptop-cybersecurity.svg"
},
+ {
+ "name": "new-message.svg",
+ "path": "/flatline/new-message.svg"
+ },
+ {
+ "name": "screen-with-xen-logo.webp",
+ "path": "/flatline/screen-with-xen-logo.webp"
+ },
{
"name": "security.svg",
"path": "/flatline/security.svg"
}
],
".": [
+ {
+ "name": "logo-xen-reverse.svg",
+ "path": "/logo-xen-reverse.svg"
+ },
{
"name": "logo-xen.svg",
"path": "/logo-xen.svg"
"name": "epam-logo.svg",
"path": "/logos/epam-logo.svg"
},
+ {
+ "name": "logo-linux-foundation.svg",
+ "path": "/logos/logo-linux-foundation.svg"
+ },
{
"name": "vates-logo.svg",
"path": "/logos/vates-logo.svg"
}
],
"others": [
+ {
+ "name": "governance-xen_projectstages.webp",
+ "path": "/others/governance-xen_projectstages.webp"
+ },
{
"name": "unikraft-architecture.png",
"path": "/others/unikraft-architecture.png"
--- /dev/null
+import { html } from "lit";
+
+export default {
+ title: "Molecules/Card",
+ tags: ["autodocs"],
+ render: (args) => html`
+ <div class="card card--small">
+ <div class="label">Conversation Card</div>
+ <div class="tags">
+ <span class="tag">Tag 1</span>
+ <span class="tag">Tag 2</span>
+ <span class="tag">Tag 3</span>
+ </div>
+ <p class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non
+ eros varius, tincidunt tellus sit amet, maximus urna.
+ </p>
+ <div class="actions">
+ <a href="/" class="btn btn-tertiary join-button"
+ >Join <i class="fas fa-arrow-up-right-from-square"></i
+ ></a>
+ <a href="/" class="btn btn-tertiary join-button">Join
+ <i class="fas fa-arrow-up-right-from-square"></i
+ ></a></a>
+ </div>
+ </div>
+ `,
+};
+
+export const Card = {
+ render: (args) => html`
+ <div class="story-row ">
+ ${["", "card--news"].map(
+ (cls) => html`
+ <div class="card ${cls}">
+ <div class="card__label">Conversation Card ${cls.replace(/card--/g, "")}</div>
+ <div class="card__date">aug, 5th 2024</div>
+ <div class="card__tags">
+ <span class="card__tag">Tag 1</span>
+ <span class="card__tag">Tag 2</span>
+ <span class="card__tag">Tag 3</span>
+ </div>
+ <p class="card__content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non
+ eros varius, tincidunt tellus sit amet, maximus urna.
+ </p>
+ <div class="card__author">
+ by <a href="/">John Doe</a>
+ </div>
+ <div class="card__actions">
+ <a href="/" class="join-button"
+ >Join <i class="fas fa-arrow-up-right-from-square"></i
+ ></a>
+ <a href="/" class="join-button">Join
+ <i class="fas fa-arrow-up-right-from-square"></i
+ ></a></a>
+ </div>
+ </div>`,
+ )}
+ </div>
+ `,
+};
tags: ["autodocs"],
render: (args) => html`
<div class="conversation-card conversation-card--small">
- <div class="label">Conversation Card</div>
+ <h3 class="label">Conversation Card</h3>
<div class="tags">
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
`,
};
-export const ProjectCard = {
+export const ConversationCard = {
render: (args) => html`
<div class="story-row">
${["", "small"].map(
(size) => html`
<div class="conversation-card ${size ? `conversation-card--${size}` : ""}">
- <div class="label">Conversation Card ${size}</div>
+ <h3 class="label">Conversation Card ${size}</h3>
<div class="tags">
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
--- /dev/null
+.home-hero-animated {
+ position: relative;
+ overflow: hidden;
+ margin-left: calc(var(--content-padding-horizontal) * -1);
+ margin-right: calc(var(--content-padding-horizontal) * -1);
+
+ .container {
+ padding-left: var(--content-padding-horizontal);
+ padding-right: var(--content-padding-horizontal);
+ }
+
+ .media-block {
+ position: relative;
+ z-index: 10;
+ }
+
+ .animated-home-server,
+ .animated-home-shadow-screen {
+ position: absolute;
+ z-index: 1;
+ }
+
+ .animated-home-server {
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ z-index: 3;
+ opacity: 0;
+ animation: homeFadeInUp 1s ease forwards;
+ animation-delay: 0.5s;
+ width: 80%;
+ @include tablet {
+ width: auto;
+ }
+ }
+
+ .animated-home-shadow-screen {
+ bottom: 150px;
+ left: 56%;
+ transform: translateX(40px);
+ z-index: 2;
+ opacity: 0;
+ animation: homeFadeInRight 1.2s ease forwards;
+ animation-delay: 0s;
+ width: 454px;
+ }
+ .animated-home-wire {
+ left: 70%;
+ bottom: 50px;
+ }
+
+ .media-block__media {
+ opacity: 0;
+ animation: homeFadeInTopLeft 0.8s ease forwards;
+ }
+}
+
+.home-section-hero {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-bottom: 200px;
+
+ .hero-block {
+ margin-top: 40px;
+
+ @include tablet {
+ margin-top: 100px;
+ }
+ }
+
+ @include desktop {
+ padding-bottom: 260px;
+ }
+ .media-block {
+ flex-direction: column;
+ }
+
+ @include tablet {
+ padding-bottom: 300px;
+ .media-block {
+ flex-direction: row;
+ }
+
+ .media-block__content {
+ flex-basis: 52%;
+ }
+ }
+}
+
+:root {
+ --home-shadow-screen-left: -45%;
+ --home-server-top: -55%;
+
+ @include tablet {
+ --home-shadow-screen-left: 100px;
+ }
+
+ @include desktop {
+ --home-shadow-screen-left: 54px;
+ }
+}
+
+@keyframes homeFadeInUp {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(0);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(var(--home-server-top));
+ }
+}
+
+@keyframes homeFadeInRight {
+ from {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(var(--home-shadow-screen-left));
+ }
+}
+
+@keyframes homeFadeInTopLeft {
+ from {
+ opacity: 0;
+ transform: translate(-70px, -70px);
+ }
+ to {
+ opacity: 1;
+ transform: translate(0, 0);
+ }
+}
a {
color: var(--color-action-text);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
@use "sass:math";
.carousel-container {
- overflow: hidden;
--min-height: 100px;
--content-padding: 12px;
--item-width: auto;
--number-of-items: 1;
--space-between-items: 40px;
--height: auto;
+ padding-bottom: 40px;
+ overflow: hidden;
+ // margin-left: calc(var(--content-padding-horizontal) * -1);
+ // margin-right: calc(var(--content-padding-horizontal) * -1);
@include phone {
--number-of-items: 2;
@include tablet {
--number-of-items: 2;
- --max-width: 1668px;
+ --max-width: calc(var(--container-width) + var(--content-padding) * 2);
--content-padding: 80px;
}
}
@include desktop {
- --number-of-items: 4;
+ --number-of-items: 3;
}
.carousel-content {
:root {
}
-[class*="background-"] {
+[class*="background-"],
+.section-square-primary {
.images-in-circle {
--bg-color: var(--color-brand-surface);
}
--- /dev/null
+.latest-news_container {
+ .card--news .card__content {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 5;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
flex-wrap: wrap;
> .footer__col {
+ min-width: 280px;
display: flex;
flex-direction: column;
gap: var(--sp-sm);
.container-full {
max-width: none;
padding: 0;
- margin-left: 0;
- margin-right: 0;
+ margin-left: calc(var(--container-paddings) * -1);
+ margin-right: calc(var(--container-paddings) * -1);
}
.container-small {
- --container-width: 1120px;
+ // --container-width: 1120px;
}
.page-top .description {
margin-top: var(--block-space);
}
-.container-row {
+.section-row {
--min-col-width: 380px;
display: flex;
flex-wrap: wrap;
@import "./molecules/features-list.scss";
@import "./molecules/anchor.scss";
@import "./molecules/full-width-image.scss";
-@import "./molecules/project-card.scss";
@import "./molecules/vertical-lists.scss";
@import "./molecules/list-pages.scss";
@import "./molecules/video-container.scss";
+@import "./molecules/card.scss";
@import "./molecules/conversation-card.scss";
+@import "./molecules/project-card.scss";
@import "./molecules/slideshare-container.scss";
@import "./molecules/conversation-card.scss";
@import "./molecules/center.scss";
@import "./molecules/hero-block.scss";
@import "./molecules/search-form.scss";
@import "./molecules/section-square-rounded.scss";
+@import "./molecules/section-square-primary.scss";
+@import "./molecules/presentation-list.scss";
@import "./components/box-resources.scss";
@import "./components/box-members.scss";
@import "./components/carousel.scss";
@import "./components/news-card.scss";
@import "./components/news-container.scss";
@import "./components/images-in-circle.scss";
+@import "./components/latest-news.scss";
@import "./content-markdown.scss";
@import "./layout/page-404.scss";
@import "./layout/page-single-aside.scss";
@import "./layout/aside.scss";
@import "./header/header.scss";
+@import "./animation/home-animation.scss";
// overrides classes
@import "./spaces.scss";
--- /dev/null
+.card {
+ --card-color: var(--color-brand-fill);
+ --card-secondary-color: var(--color-brand-fill-pressed);
+ --card-tag-text-color: var(--color-brand-text-hover);
+ --card-date-color: var(--color-text-secondary);
+ --card-author-color: var(--color-text);
+ --card-background-color: #fff;
+
+ color: var(--color-text-secondary);
+ border-top: 12px solid var(--card-color);
+ border-radius: 8px;
+ padding: 24px;
+ background: var(--card-background-color);
+ box-shadow:
+ 0px 11px 15px 0px rgba(71, 84, 103, 0.1),
+ 0px 9px 46px 0px rgba(71, 84, 103, 0.06),
+ 0px 24px 38px 0px rgba(71, 84, 103, 0.04);
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ &__label {
+ font-size: 24px;
+ font-weight: bold;
+ line-height: 1.25;
+ }
+
+ &__date {
+ color: var(--card-date-color);
+ margin-top: -4px;
+ line-height: 1;
+ }
+
+ &__content {
+ flex: 1;
+ line-height: 1.25;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 6;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__actions {
+ margin-top: 16px;
+ justify-self: flex-start;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px;
+ }
+ &__tag {
+ display: inline-block;
+ border-radius: 2.5em;
+ background: var(--card-secondary-color);
+ color: var(--card-tag-text-color);
+ padding: 0.1em 0.6em;
+ line-height: 1;
+ font-size: 0.8em;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 150%;
+ letter-spacing: -0.025em;
+ }
+
+ &__author {
+ font-size: 0.8em;
+ line-height: 1;
+ font-weight: 500;
+ &,
+ & a {
+ color: var(--card-author-color);
+ }
+ }
+
+ &--news {
+ --card-color: var(--color-action-fill);
+ --card-secondary-color: var(--color-action-surface);
+ --card-tag-text-color: var(--color-action-text);
+ --card-date-color: var(--color-text-secondary);
+ }
+}
--col-width: var(--basis);
&.media-block--right {
--flex-direction: row;
+
+ &[data-animate] .media-block__media {
+ opacity: 0;
+ }
+ }
+
+ &--right.animate .media-block__media {
+ animation: slideFromRight 0.8s ease-out forwards;
+ animation-delay: 0.3s;
+ }
+
+ &--left.animate .media-block__media {
+ animation: slideFromLeft 0.8s ease-out forwards;
+ animation-delay: 0.3s;
+ }
+
+ &[data-animate] .media-block__media {
+ opacity: 0;
}
}
}
}
}
+
+@keyframes slideFromRight {
+ from {
+ opacity: 0;
+ transform: translateX(150px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideFromLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-150px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
--- /dev/null
+ul.presentation-list,
+.presentation-list > ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.presentation-list li {
+ position: relative;
+ margin: 0;
+ margin-bottom: 0.8rem;
+ line-height: 1.6;
+ color: var(--color-action-text);
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
--- /dev/null
+.section-square-primary {
+ background-color: var(--color-brand-surface);
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1920px;
+ padding: var(--sp-xl) var(--sp-lg);
+}
@include media-max("phone") {
@include generate-spacing-classes("mob-");
}
+
+.no-mt {
+ margin-top: 0 !important;
+}
+
+.no-mb {
+ margin-bottom: 0 !important;
+}
+
+.no-pb {
+ padding-bottom: 0 !important;
+}
+
+.no-pt {
+ padding-top: 0 !important;
+}
content: "";
display: table;
}
- padding-top: 0;
- padding-bottom: 0;
- padding-left: 40px;
- padding-right: 40px;
+ padding: 0 var(--content-padding-horizontal);
}
@include tablet {
:root {
+ --container-width: 1312px;
+ --content-padding-horizontal: 40px;
+
--font-size: 1em;
--font-family: "gotham", sans-serif;
--section-space: var(--sp-lg);
--container-paddings: 12px;
--block-space: var(--sp-lg);
- --container-width: 1312px;
--h1-font-size: 2.25rem; /* 40px */
--h2-font-size: 2rem; /* 32px */
--- /dev/null
+document.addEventListener("DOMContentLoaded", () => {
+ // Vérifie si IntersectionObserver est supporté
+ if ("IntersectionObserver" in window) {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add("animate");
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ {
+ threshold: 0.1,
+ rootMargin: "-100px 0px",
+ },
+ );
+
+ document.querySelectorAll("[data-animate]").forEach((element) => {
+ observer.observe(element);
+ });
+ } else {
+ // Fallback : ajoute directement la classe animate sur tous les éléments
+ document.querySelectorAll("[data-animate]").forEach((element) => {
+ element.classList.add("animate");
+ });
+ }
+});
(() => {
- var selector = ".carousel-container";
+ const selector = ".carousel-container";
+ const itemSelector = ".carousel-item";
const itemsBefore = 2;
const itemsAfter = 1;
const { debounce } = window.XenSiteUtils;
- const carousel = (element) => {
+ const carousel = async (element) => {
const carouselElement = element.querySelector(".carousel");
+ let prev = element.querySelector(".prev");
+ let next = element.querySelector(".next");
+ let items = await waitForElements(carouselElement, itemSelector);
const carouselClone = carouselElement.cloneNode(true);
carouselClone.classList.add("carousel-clone");
const getItemInformations = () => {
carouselElement.before(carouselClone);
carouselClone.style.setProperty("width", carouselElement.offsetWidth + "px");
- const items = carouselClone.querySelectorAll(".carousel-item");
+ const items = carouselClone.querySelectorAll(itemSelector);
if (!items.length) return 0;
const item2 = items[1];
let occupiedSpace = item2.offsetLeft;
// element.classList.add("carousel-start-init");
- let prev = element.querySelector(".prev");
- let next = element.querySelector(".next");
- let items = element.querySelectorAll(".carousel-item");
-
// add the clone the last item to the first place and for the first item to the last place
// generic function to clone N last items to the first place and N first items to the last place
cloneItemsReverse(items, itemsAfter);
const moveNext = function () {
- let items = element.querySelectorAll(".carousel-item");
+ let items = element.querySelectorAll(itemSelector);
carouselElement.appendChild(items[0]);
};
next.addEventListener("click", moveNext);
const movePrev = function () {
- let items = element.querySelectorAll(".carousel-item");
+ let items = element.querySelectorAll(itemSelector);
carouselElement.prepend(items[items.length - 1]);
};
prev.addEventListener("click", movePrev);
for (let i = 1; i <= maxItems; i++) {
if ((i >= itemsBefore && i < maxItems - itemsAfter) || i - itemsBefore === 0) {
opacity = 1;
- } else if (i === maxItems - itemsAfter) {
+ } else if (i === maxItems - itemsAfter || i === itemsBefore - 1) {
opacity = 0.2;
} else {
opacity = 0;
carouselElement.classList.add("carousel-initialized");
};
+ const waitForElements = (element, selector) => {
+ return new Promise((resolve) => {
+ const items = element.querySelectorAll(selector);
+ if (items.length) {
+ resolve(items);
+ return;
+ }
+
+ const observer = new MutationObserver((mutations) => {
+ const items = element.querySelectorAll(selector);
+ if (items.length) {
+ observer.disconnect();
+ resolve(items);
+ }
+ });
+
+ observer.observe(element, {
+ childList: true,
+ subtree: true,
+ });
+ });
+ };
+
[...document.querySelectorAll(selector)].forEach((elm) => {
carousel(elm);
});
const selector = ".latest-news";
const blogs = [
{
- id: "vates",
- name: "Vates blog",
- url: "http://localhost:2368",
- API_KEY: "2e157e7c6896c98386e1022189",
+ id: "xenprojectblog",
+ name: "xenproject blog",
+ url: "/blog",
+ API_KEY: "aca0295269765205d553f5c953",
},
];
const latestnews = async (element) => {
const newsCardTemplate = createTemplate();
const container = element.querySelector(".latest-news_container");
- const { maxCards, blogFilter, tagFilter } = container.dataset;
+ const { maxCards, blogFilter, tagFilter } = element.dataset;
const blogIds = blogFilter?.split(",") || blogs.map((blog) => blog.id);
const tags = (tagFilter?.split(",") || []).filter((tag) => tag !== "");
- const posts = await getLatestPost({ maxCards: maxCards * 1 || 3, blogFilter: blogIds, tagFilter: tags });
+ const posts = await getLatestPost({ maxCards: maxCards * 1 || 10, blogFilter: blogIds, tagFilter: tags });
container.innerHTML = posts.map(newsCardTemplate).join("");
};
import "./carousel.js";
import "./downloads-search.js";
import "./latest-news.js";
+import "./animate.js";
--- /dev/null
+<div class="card {{ .class }}">
+ <h3 class="card__label">{{ .title | safeHTML }}</h3>
+ <div class="card__content">{{ .description | safeHTML }}</div>
+ <div class="card__actions">
+ <a href="{{ .link }}" class="join-button">
+ {{ .linkText | default "Join" }} <i class="fas fa-arrow-up-right-from-square"></i>
+ </a>
+ {{ if .secondaryLink }}
+ <a href="{{ .secondaryLink }}" class="join-button">
+ {{ .secondaryLinkText | default "Join" }} <i class="fas fa-arrow-up-right-from-square"></i>
+ </a>
+ {{ end }}
+ </div>
+</div>
--- /dev/null
+{{ $items := .items | transform.Unmarshal }}
+{{ range $items }}
+ {{ partial "card.html" (dict
+ "title" .title
+ "description" .description
+ "link" .link
+ "class" "carousel-item"
+ )
+ }}
+{{ end }}
--- /dev/null
+<div class="carousel-container {{ with .class }}{{ . }}{{ end }}">
+ <div class="carousel-content">
+ <div class="carousel">
+ {{ partial "carousel-items.html" (dict "items" .content) }}
+ </div>
+ <div class="carousel-buttons">
+ <button class="carousel-button prev">
+ <i class="fas fa-arrow-left"></i>
+ </button>
+ <button class="carousel-button next">
+ <i class="fas fa-arrow-right"></i>
+ </button>
+ </div>
+ </div>
+</div>
<footer class="footer" id="footer">
- <div class="footer-content">
+ <div class="footer-content container">
<div class="footer__text">
<div class="footer__col">
<h3>About Xen Project</h3>
-<div class="latest-news">
- <h2>
- Latest <strong>news</strong>
- <a href="htttps://blog.xen-project.org" class="title-external-link"
- >Read all news <i class="fas fa-arrow-up-right-from-square"></i
- ></a>
- </h2>
+<div class="latest-news " data-max-cards="10">
+ <div class="container">
+ <h2>
+ Latest <strong>news</strong>
+ <a href="/blog" class="title-external-link">Read all news <i class="fas fa-arrow-right"></i></a>
+ </h2>
+ </div>
<script type="text/html" class="latest-news-template">
- <div class="news-card">
- <div class="news-card__date">${XenSiteUtils.formatDate(_.published_at)}</div>
- <h3 class="news-card__label">${_.title}</h3>
+ <div class="carousel-item card card--news">
+ <div class="card__label">${_.title}</div>
${_.tags ? `
- <div class="news-card__tag">
- ${_.tags.map(tag => `<a href="${tag.url}" target="_blank">${tag.name}</a>`).join(" ")}
+ <div class="card__date">${XenSiteUtils.formatDate(_.published_at)}</div>
+ <div class="card__tags">
+ ${_.tags.map(tag => `<span class="card__tag"><a href="${tag.url}" target="_blank">${tag.name}</a></span
+ >`).join(" ")}
</div>
` : ""}
- <p class="news-card__description">${_.excerpt}</p>
+ <p class="card__content">${_.excerpt}</p>
${_.authors ? `
- <div class="news-card__author">
-
By ${_.authors.map(author => `<a href="${author.url}" target="_blank">${author.name}</a>`).join(", ")}
+ <div class="card__author">
+
by ${_.authors.map(author => `<a href="${author.url}" target="_blank">${author.name}</a>`).join(", ")}
</div>
` : ""}
- <p class="news-card__read-more p1-bold">
- <a href="${_.url}">
+ <div class="card__actions">
+ <a href="${_.url}" class="join-button">
Read more
<i class="fas fa-arrow-up-right-from-square"></i>
</a>
- </p>
+ </div>
</div>
</script>
- <div class="latest-news_container news-container"></div>
+
+ <div class="carousel-container carousel-container-width">
+ <div class="carousel-content">
+ <div class="carousel latest-news_container news-container"></div>
+ <div class="carousel-buttons">
+ <button class="carousel-button prev">
+ <i class="fas fa-arrow-left"></i>
+ </button>
+ <button class="carousel-button next">
+ <i class="fas fa-arrow-right"></i>
+ </button>
+ </div>
+ </div>
+ </div>
</div>
{{ end }}
{{ $class }}
"
+
+ {{ if eq .Animate "true" }}
+ data-animate="true"
+ {{ end }}
>
<div class="media-block__content">
{{ if .Label }}
src="{{ $trimmedMedia }}"
alt="{{ .alt | default "Media image" }}"
{{ if .ImageSize }}width="{{ .ImageSize }}" height="auto"{{ end }}
+ loading="lazy"
/>
{{ else if findRE "\\.mp4$" $lowerMedia }}
{{ partial "video-player.html" (dict "url" $trimmedMedia "alt" .alt) }}
--- /dev/null
+{{ partial "carousel-items.html" (dict "items" .Inner) }}
-{{ $items := .Inner | transform.Unmarshal }}
-<div class="carousel-container {{ with .Get "class" }}{{ . }}{{ end }}">
- <div class="carousel-content">
- <div class="carousel">
- {{ range $items }}
- {{ partial "project-card.html" (dict
- "title" .title
- "description" .description
- "link" .link
- "class" "carousel-item"
- )
- }}
- {{ end }}
- </div>
- <div class="carousel-buttons">
- <button class="carousel-button prev">
- <i class="fas fa-arrow-left"></i>
- </button>
- <button class="carousel-button next">
- <i class="fas fa-arrow-right"></i>
- </button>
- </div>
- </div>
-</div>
+{{ partial "carousel.html" (dict "class" (.Get "class") "content" .Inner) }}
-{{/* Stocke le contenu markdownifié dans une variable */}}
{{ $content := .Inner | markdownify }}
-
-{{/* Gestion des différents cas */}}
{{ if .IsNamedParams }}
- {{ if .Get "col" }}
- <div class="col">{{ $content }}</div>
- {{ else if .Get "container" }}
- <div class="container container-{{ .Get "container" }}">{{ $content }}</div>
- {{ end }}
-{{ else }}
- {{ if eq (.Get 0) "col" }}
- <div class="col">{{ $content }}</div>
- {{ else }}
+ {{ $class := .Get "class" }}
+ {{ $container := .Get "container" }}
+ <div class="{{ with $class }}{{ . }}{{ end }}{{ with $container }}container container-{{ . }}{{ end }}">
{{ $content }}
- {{ end }}
+ </div>
+{{ else }}
+ {{ $content }}
{{ end }}
{{ $title := .Get "title" | default "" }}
{{ $titleLevel := .Get "titleLevel" | default "2" }}
{{ $class := .Get "class" | default "" }}
+{{ $animate := .Get "animate" | default "false" }}
{{ partial "media-block.html" (dict
"Content" $content
"Title" $title
"TitleLevel" $titleLevel
"Class" $class
+ "Animate" $animate
)
}}
background-{{ . }}
{{ end }} section-space"
>
- <div class="container{{- if $containerType }}-{{ $containerType }}{{- end }}">
+ <div
+ class="container{{- if $containerType }}-{{ $containerType }}{{- end }}
+ {{- with .Get "row" }}{{ if eq . "true" }} section-row{{ end }}{{- end }}
+ {{- with .Get "cols" }} cols-{{ . }}{{- end }}"
+ >
{{- if eq (.Get "md") "true" -}}
{{- .Inner | markdownify -}}
{{- else -}}
projects / www-xenproject-org.git / commitdiff
