-import "../public/font-awesomepro/fontawesome.css"; // Adjust the path as needed
-import "../public/font-awesomepro/regular.css";
-import "../public/font-awesomepro/solid.css";
-import "../public/font-awesomepro/brands.css";
+import "../static/font-awesomepro/fontawesome.css"; // Adjust the path as needed
+import "../static/font-awesomepro/regular.css";
+import "../static/font-awesomepro/solid.css";
+import "../static/font-awesomepro/brands.css";
import "../themes/xen-project/assets/css/main.scss"; // Adjust the path as needed
{{<media-block
class="hero-block"
label="A Linux Foundation Project"
- title="Bring the power of <a href=\"#\">open virtualization</a> everywhere."
+ title="Bring the power of open virtualization everywhere."
titleLevel="1"
media="/img/flatline/screen-with-xen-logo.webp"
alt="Illustration of a computer monitor displaying bar charts with Xen Project Logo"
{{<section container="full">}}
{{<carousel class="mg-t-lg carousel-container-width">}}
-{{<getpages "projects">}}
+{{<getpages "projects" "hidden">}}
{{</carousel>}}
{{<section>}}
{{<media-block
- title="Open-source projects home"
media="/img/flatline/data-process-with-xen-logo.svg"
mediaPosition="right"
alt="Illustration of a computer monitor displaying bar charts and server racks labeled with Xen Project logos, representing data management and analysis."
{{</section>}}
-{{<section>}}
-{{<media-block
- title="Open-source technologies"
- media="/img/flatline/team-work.svg"
- mediaPosition="right"
->}}
-{{<md>}}
+{{<section class="section-square-rounded">}}
+{{<row class="cols-2">}}
+{{<col md="true">}}
+## Open-source technologies
+
The Xen Project has created a number of open source technologies for specific purposes:
-- The Xen Project* Hypervisor is the open source standard for hardware virtualization and the foundation for all solutions hosted on the Xen Project website. It includes a build configuration for Arm that targets embedded and mobile devices on the Arm architecture.
+If you are unsure which technology is right for you, check out our team portals. In addition, read the Xen Overview document to learn about Xen's architecture, components and some of the key choices you will have to make.
+{{</col>}}
-- Drivers for the Xen Project* Hypervisor are delivered with host operating systems such as Linux and BSD distributions. The project maintains Windows drivers, which are developed as part of the Windows PV Drivers project.
+{{<col md="true" class="color-txt-base">}}
+- **The Xen Project© Hypervisor** is the open source standard for hardware virtualization and the foundation for all solutions hosted on the Xen Project website. It includes a build configuration for Arm that targets embedded and mobile devices on the Arm architecture.
-- XAPI is a Xen Project toolstack for an enterprise-ready virtualization platforms based on the Xen Hypervisor. XAPI adds further management functionality to Xen and adds many integrations for cloud, storage, and networking solutions. XAPI is used by the Citrix Hypervisor, XCP-ng and Magrana Server.
+- **Drivers for the Xen Project© Hypervisor** are delivered with host operating systems such as Linux and BSD distributions. The project maintains Windows drivers, which are developed as part of the Windows PV Drivers project.
-- The project also hosts a number of Unikernel technologies: Unikernel, which is an SDK to build Unikernel bases; Mirage OS which is a Ocaml based Unikernel.
+- **XAPI** is a Xen Project toolstack for an enterprise-ready virtualization platforms based on the Xen Hypervisor. XAPI adds further management functionality to Xen and adds many integrations for cloud, storage, and networking solutions. XAPI is used by the Citrix Hypervisor, XCP-ng and Magrana Server.
-If you are unsure which technology is right for you, check out our team portals. In addition, read the Xen Overview document to learn about Xen's architecture, components and some of the key choices you will have to make.
-{{</md>}}
-{{</media-block>}}
+- **The project also hosts a number of Unikernel technologies:** Unikraft, which is an SDK to build Unikernel bases; Mirage OS which is a Ocaml based Unikernel.
+{{</col>}}
+{{</row>}}
{{</section>}}
{{<section>}}
## Main responsibilities
{{</md>}}
- {{<features-list cols="4">}}
+ {{<features-list cols="2">}}
- title: Financial oversight
icon: fas fa-money-bill-alt
description: Budget management and investment decisions on infrastructure and project operations.
{{<section class="section-square-primary">}}
-{{<md>}}
-### How to **join?**
+{{<md class="txt-c">}}
+## How to **join?**
{{</md>}}
-{{<vertical-lists cols="3" headerLevel="4">}}
+{{<row-from-list component="card" component-class="card--bg-white" cols="3" class="mg-t-md">}}
- title: Step 1
- text: Review membership benefits and requirements on the Xen Project website.
+ description: Review membership benefits and requirements on the Xen Project website.
- title: Step 2
- text: Contact the Xen Project team to discuss membership options and fees.
+ description: Contact the Xen Project team to discuss membership options and fees.
- title: Step 3
- text: Complete the membership application and submit payment to join.
+ description: Complete the membership application and submit payment to join.
+{{</row-from-list>}}
+
-{{</vertical-lists>}}
<p class="txt-c mg-t-lg">
<a href="https://enrollment.lfx.linuxfoundation.org/?project=xen" class="btn btn-primary">
{{<media-block
title="Governed by Xen project members"
media=`{{<partial "blocks/logos-circle">}}`
+ mediaPosition="right"
animate="true"
>}}
{{<md>}}
Board members can propose and vote upon changes to the Xen Project. Members also gain valuable strategic insight into project plans and future scope.
-
-[Join the advisory board](link-to-xen-project-advisory-board)
{{</md>}}
+
+<p class="mg-t-md">
+<a href="/about/project-members" class="btn btn-secondary">
+Meet the advisory board
+<i class="fas fa-arrow-right"></i>
+</a>
+</p>
{{</media-block>}}
{{</section>}}
{{<media-block
title="About Xen Project"
media="/img/flatline/data-process.svg"
- mediaPosition="right"
imageAlt="Illustration of a laptop displaying 3D bar charts, connected to cloud storage and file management icons, symbolizing data synchronization and integration."
animate="true"
>}}
{{<md>}}
The mission of the Xen Project is to advance virtualisation technology across a wide range of commercial and open-source domains.
-
-[Learn about Xen Project](link-to-xen-project-information)
{{</md>}}
+
+<p class="mg-t-md">
+<a href="/about" class="btn btn-secondary">
+Learn about Xen Project
+<i class="fas fa-arrow-right"></i>
+</a>
+</p>
{{</media-block>}}
{{</section>}}
>}}
AMD is a leading semiconductor company that designs high-performance computing and graphics solutions. Their products include Ryzen™ processors for consumer and commercial use, EPYC™ processors for data centers, and Radeon™ graphics cards for gaming and professional applications. AMD focuses on delivering exceptional performance and innovation in computing technologies.
-<p class="mt-2"><a href="link-to-amd-website">Discover AMD <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-amd-website" class="btn btn-tertiary">Discover AMD <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
>}}
ARM is a global leader in semiconductor IP and processor design, providing technology that powers a vast array of devices, including smartphones, IoT devices, and servers. ARM's architectures, such as Cortex and Neoverse, are known for their efficiency and performance, supporting a wide range of applications from consumer electronics to industrial automation and edge computing.
-<p class="mt-2"><a href="link-to-arm-website">Discover ARM <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-arm-website" class="btn btn-tertiary">Discover ARM <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
>}}
AWS, a subsidiary of Amazon, is a leading provider of cloud computing services. It offers a comprehensive suite of products and services, including computing power, storage, and databases, enabling organizations to scale efficiently and innovate rapidly. AWS's cloud solutions support various use cases, from web hosting and application development to big data analytics and machine learning.
-<p class="mt-2"><a href="link-to-aws-website">Discover AWS <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-aws-website" class="btn btn-tertiary">Discover AWS <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
>}}
EPAM Systems is a global provider of digital platform engineering and software development services. EPAM helps clients transform their businesses through innovative technology solutions, including software development, digital platform engineering, and consulting services. With a focus on high-quality engineering and deep industry expertise, EPAM partners with organizations to achieve digital transformation.
-<p class="mt-2"><a href="link-to-epam-website">Discover Epam <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-epam-website" class="btn btn-tertiary">Discover Epam <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
>}}
Vates is a company specializing in open source virtualization solutions. Their flagship products include Xen Orchestra and XCP-ng, which offer powerful and scalable virtualization platforms for managing and deploying virtualized environments. Vates focuses on providing reliable and flexible virtualization solutions tailored to meet the needs of various organizations.
-<p class="mt-2"><a href="link-to-vates-website">Discover Vates <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-vates-website" class="btn btn-tertiary">Discover Vates <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
>}}
XenServer is a high-performance virtualization platform designed for enterprise environments. It provides robust virtualization capabilities, allowing organizations to efficiently manage and scale their virtual infrastructure. XenServer supports a wide range of use cases, including server consolidation, virtual desktop infrastructure (VDI), and cloud computing, offering advanced features such as live migration, resource pooling, and comprehensive security.
-<p class="mt-2"><a href="link-to-xenserver-website">Discover Xenserver <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p class="mt-2"><a href="link-to-xenserver-website" class="btn btn-tertiary">Discover Xenserver <i class="fas fa-arrow-up-right-from-square"></i></a></p>
{{</media-block>}}
{{</section>}}
items:
- name: OpenPGP Keys
link: /developers/openpgp-keys
- icon: fa-key
+ icon: fas fa-key
- name: Raise a security issue
link: /help/mailing-list#security-at
- icon: fa-key
+ icon: fas fa-key
- name: List Applications
link: /help/mailing-list#predisclosure-applications
- icon: fa-key
+ icon: fas fa-key
- type: members-list
name: Team Members
items:
{{<vertical-lists cols="2">}}
- title: "**Read** documentation"
text: >
- <p><a href="http://wiki.xenproject.org/">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
- <p><a href="https://wiki.xenproject.org/wiki/Index_Guide">How to use documentation <i class="fas fa-arrow-up-from-square"></i></a></p>
+ <p><a href="http://wiki.xenproject.org/" class="btn btn-tertiary">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+ <p><a href="https://wiki.xenproject.org/wiki/Index_Guide" class="btn btn-tertiary">How to use documentation <i class="fas fa-arrow-up-from-square"></i></a></p>
- title: "**Communicate** with others"
text: >
- <p><a href="TODO">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
- <p><a href="TODO">How to use documentation <i class="fas fa-arrow-up-from-square"></i></a></p>
+ <p><a href="TODO" class="btn btn-tertiary">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+ <p><a href="TODO" class="btn btn-tertiary">How to use documentation <i class="fas fa-arrow-up-from-square"></i></a></p>
{{</vertical-lists>}}
{{</section>}}
animate="true"
>}}
-<p class="mg-t-md"><a href="https://www.youtube.com/channel/UCGukhVf8pWrUVdse6KR6SRw">Youtube channel<i class="fas fa-arrow-up-right-from-square"></i></a></p>
-<p><a href="/contribute/guidelines">Contribution guidelines<i class="fas fa-up-right-from-square"></i></a></p>
-<p><a href="/contribute/governance">Governance<i class="fas fa-arrow-right"></i></a></p>
-<p><a href="/security">Security policy<i class="fas fa-arrow-right"></i></a></p>
+<p class="mg-t-md"><a href="https://www.youtube.com/channel/UCGukhVf8pWrUVdse6KR6SRw" class="btn btn-tertiary">Youtube channel<i class="fas fa-arrow-up-right-from-square"></i></a></p>
+<p><a href="/contribute/guidelines" class="btn btn-tertiary">Contribution guidelines<i class="fas fa-up-right-from-square"></i></a></p>
+<p><a href="/contribute/governance" class="btn btn-tertiary">Governance<i class="fas fa-arrow-right"></i></a></p>
+<p><a href="/security" class="btn btn-tertiary">Security policy<i class="fas fa-arrow-right"></i></a></p>
{{</media-block>}}
{{</section>}}
parent: Projects
name: All projects
weight: 100
+exclude: "hidden"
---
{{<section>}}
- {{<list-pages "projects">}}
+ {{<list-pages "projects" "hidden">}}
{{</section>}}
{{<section class="section-square-primary txt-c">}}
{{</md>}}
<p class="mg-t-md">
- <a href="https://www.youtube.com/watch?v=VpGC5zuLjSs">
+ <a href="https://www.youtube.com/watch?v=VpGC5zuLjSs" class="btn btn-tertiary">
Watch training <i class="fas fa-arrow-up-right-from-square"></i>
</a>
</p>
<p class="mg-t-sm">
- <a href="https://docs.xcp-ng.org/">
+ <a href="https://docs.xcp-ng.org/" class="btn btn-tertiary">
Read step-by-step documentation instructions
<i class="fas fa-arrow-up-right-from-square"></i>
</a>
{{</md>}}
<p class="mg-t-md">
- <a href="https://xcp-ng.org/docs/develprocess.html">
+ <a href="https://xcp-ng.org/docs/develprocess.html" class="btn btn-tertiary">
Read about XCP-ng development process <i class="fas fa-arrow-up-right-from-square"></i>
</a>
</p>
{{<section>}}
{{<media-block
- title="What does this mean?"
+ title="Mailing list usage"
media="/img/flatline/new-message.svg"
alt="Illustration of a person sending a message, symbolizing communication."
animate="true"
>}}
{{<md>}}
-- Xen revolutionizes embedded systems, enabling fully-featured operating systems like Linux to coexist with smaller and faster RTOSes such as Zephyr.
-- Xen's ability to allocate hardware resources with precision and support multiple communication paradigms between VMs has made it indispensable in diverse applications, from 5G antennas and industrial robots to medical devices and automobiles.
-- A significant amount of work has been completed in this area since the team started in 2014. Most work has occurred in Linux, Xen, and OP-TEE.
-{{</md>}}
-{{</media-block>}}
-{{</section>}}
+Xen Project mailing lists have a web as well as an email interface.
+- Send an email command to **[mylist-request@lists.xenproject.org](mailto:mylist-request@lists.xenproject.org)** (mylist may, for example, be xen-announce) with one of the [following commands](https://www.list.org/mailman-member/node41.html) in the subject line. Common commands are `help`, `subscribe`, and `unsubscribe`. Alternatively, you can use the SUBSCRIBE buttons below.
-{{<section class="section-square-primary txt-c">}}
- {{<md>}}
- Consider **searching in archives**, the answer you are looking might already exist!
+- Go to **[https://lists.xenproject.org/mailman/listinfo/mylist](https://lists.xenproject.org/mailman/listinfo/mylist)** (mylist may, for example, be xen-announce) and use the web interface to subscribe, unsubscribe, or log into the list management interface.
+
+- You can send a note to a Xen Project mailing list without being subscribed to it, but your post will be moderated.
+
+- If you have problems, please email **[community.manager@xenproject.org](mailto:community.manager@xenproject.org)**.
{{</md>}}
+ {{</media-block>}}
+{{</section>}}
+
+
+{{<section class="txt-c">}}
+ <h2>{{<md>}}Consider **searching in archives**, the answer you are looking might already exist!{{</md>}}</h2>
<p class="mg-t-md ">
- <a href="https://lists.xenproject.org/archives/" class="btn btn-primary">
+ <a href="https://lists.xenproject.org/archives/" class="btn btn-secondary">
Check out archives <i class="fas fa-arrow-up-right-from-square"></i>
</a>
</p>
### Xen Project Hypervisor
{{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3">}}
+{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}}
- title: XEN-DEVEL@
tags:
- Mailing list
{{<md>}}
### Mirage OS
{{</md>}}
- {{<row-from-list component="card" component-class="card--bg" cols="1">}}
+ {{<row-from-list component="card" component-class="card--bg" cols="1" class="mg-t-md">}}
- title: MIRAGEOS-DEVEL@
tags:
- Mailing list
{{<md>}}
### Unikraft
{{</md>}}
- {{<row-from-list component="card" component-class="card--bg" cols="1">}}
+ {{<row-from-list component="card" component-class="card--bg" cols="1" class="mg-t-md">}}
- title: MINIOS-DEVEL@ (INCLUDES UNIKRAFT DEVELOPMENT)
tags:
- Mailing list
{{<md>}}
### XAPI
{{</md>}}
- {{<row-from-list component="card" component-class="card--bg" cols="1">}}
+ {{<row-from-list component="card" component-class="card--bg" cols="1" class="mg-t-md">}}
- title: XEN-API@
tags:
- Mailing list
{{<md>}}
### XCP-ng
{{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-b-lg">}}
+{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}}
- title: XCP-NG FORUMS
tags:
- Forum
{{</row-from-list>}}
-{{<md>}}
+{{<md class="mg-t-md">}}
### Windows PV Drivers
{{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3">}}
+{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-t-md">}}
- title: WIN-PV-DEVEL@
tags:
- Mailing list
{{<md class="mg-t-xl">}}
## Advisory board
-
{{</md>}}
-{{<row-from-list component="card" component-class="card--bg" cols="3">}}
+
+{{<row-from-list component="card" component-class="card--bg" cols="3" class="mg-v-md">}}
- title: PREDISCLOSURE-APPLICATIONS@
tags:
- Mailing list
{{<section>}}
{{<media-block
title="Qubes OS & Xen Project"
- media="/img/flatline/data-process.svg"
+ media="/img/flatline/data-storage.svg"
mediaPosition="right"
- alt="Illustration of a laptop displaying 3D bar charts, connected to cloud and file management icons, representing data integration and synchronization."
+ alt="Illustration of a data storage concept with various elements representing data protection, cloud storage, and secure data management."
animate="true"
>}}
Qubes OS is a security-focused operating system based on Xen. The goal of Qubes OS is to create a reasonably secure environment that is also practical and usable, capable of playing the role of a daily driver rather than a highly situational solution - and Xen is a major reason why we can confidently say that Qubes OS succeeds.
{{<section>}}
{{<media-block
title="Security"
- media="/img/flatline/data-process.svg"
+ media="/img/flatline/security.svg"
alt="Illustration of a laptop displaying 3D bar charts, connected to cloud and file management icons, representing data integration and synchronization."
animate="true"
>}}
{{<section container="full">}}
{{<carousel class="mg-t-lg">}}
- {{<getpages "projects">}}
+ {{<getpages "projects" "hidden">}}
{{</carousel>}}
<p class="mg-t-xl txt-c">
{{<section>}}
{{<latest-news>}}
{{</section>}}
-
-<!--
-{{<section container="full">}}
-{{<carousel class="mg-t-lg carousel-container-width">}}
-{{<getpages "projects">}}
-{{</carousel>}}
-{{</section>}} -->
"btn-tertiary",
"card",
"card--bg",
+ "card--bg-white",
"card__actions",
"card__content",
"card__label",
"carousel-content",
"carousel-item",
"col",
+ "color-txt-base",
"cols",
+ "cols-2",
"cols-3",
"container",
"container-full",
"features-list",
"features-list--cols-2",
"features-list--cols-3",
- "features-list--cols-4",
"footer",
"footer-content",
"footer__col",
"media-block__title",
"menu",
"menu-toggle",
- "mg-b-lg",
"mg-l-lg",
"mg-r-md",
"mg-t-lg",
"mg-t-sm",
"mg-t-xl",
"mg-v-lg",
+ "mg-v-md",
"mg-v-xxl",
"mob-mg-v-xl",
"mt-2",
"presentation-list",
"prev",
"row",
+ "row-from-list",
"search-container",
"search-form",
"search-input",
"meritocracy",
"mirage-os",
"netiquette",
+ "open-source-technologies",
"openness",
"organizations-on-the-pre-disclosure-list",
"our-architecture",
import * as sass from "sass";
import storyScriptConfig from "../storyscripts.config.js";
-
const main = async () => {
const { colorVariablesFilePath, storyDestJsonFolder } = storyScriptConfig;
const filePath = colorVariablesFilePath;
fs.writeFileSync(fileExportPath, JSON.stringify(json, null, 2));
};
-const groups = ["action", "brand"];
+const groups = ["txt", "action", "brand"];
const getColors = (css) => {
const regex = /--color-(.+?)\s*:\s*(#.+);/g;
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 339.73 235.87">
+ <path fill="#85c241" d="M118.53 64.91c-2.96-2.8-5.36-5.04-7.68-7.44-11.28-11.28-27.68-14.56-41.68-8.32-14.4 6.48-22.96 20.48-21.76 36.72.24 3.76-.96 4.88-4.4 5.76-23.92 6-41.52 27.52-42.4 51.76-1.28 33.12 23.76 59.28 57.04 59.28 76.48.08 153.04.08 229.52 0 2.96 0 5.92-.24 8.8-.64 24.24-3.36 42.8-24.64 43.12-49.36.24-25.28-17.76-47.2-42.24-50.8-5.6-.88-11.36-.8-17.12-1.2 9.68-50.8-23.92-87.92-57.92-97.04C203.25-1.33 185.09-.6 167.49 7c-25.76 11.12-41.2 31.12-48.96 57.92z"/>
+ <path fill="#101828" d="M147.73 203.31H57.65c-16.24 0-31.04-6.16-41.84-17.36C5 174.75-.6 159.63.05 143.47 1 118.75 18.6 97.23 42.85 91.15c3.12-.8 4.16-1.68 3.92-5.2-1.12-16.4 7.36-30.64 22.16-37.28 14.16-6.32 30.8-3.04 42.32 8.4 1.6 1.52 3.12 3.04 4.96 4.8l2.08 2c8.16-27.6 24.64-46.96 48.96-57.36 17.2-7.36 35.6-8.48 54.72-3.36 18 4.8 34.64 16.88 45.68 33.12 8.88 12.96 18.24 34.56 12.8 63.92l4.8.24c3.92.08 7.84.4 11.76.88 24.64 3.68 42.96 25.76 42.72 51.36-.24 25.04-19.04 46.48-43.6 49.92-2.96.4-5.92.64-8.88.64-45.04.08-92 .08-139.52.08zM83.89 46.67c-4.96 0-9.84 1.04-14.4 3.12-14.32 6.4-22.56 20.24-21.44 36.16.32 4.32-1.36 5.52-4.8 6.4-23.84 5.92-41.12 26.96-42.08 51.2-.64 15.92 4.88 30.72 15.44 41.68 10.56 10.96 25.12 17.04 41.04 17.04h229.52c2.88 0 5.84-.24 8.72-.64 24-3.28 42.32-24.32 42.64-48.8.24-25.04-17.68-46.64-41.76-50.24-3.84-.48-7.76-.8-11.6-.88l-5.44-.24a.44.44 0 0 1-.4-.24c-.08-.16-.16-.32-.08-.48 5.6-29.36-3.68-50.88-12.48-63.76-10.96-16-27.36-27.92-45.04-32.64-18.88-5.04-37.04-3.92-53.92 3.28C143.25 18.2 127.33 37 119.25 65.15a.96.96 0 0 1-.4.4c-.16.08-.4 0-.56-.16l-2.88-2.64c-1.76-1.68-3.36-3.2-4.96-4.8a37.78 37.78 0 0 0-26.56-11.28z"/>
+ <path fill="#dbdbdb" d="M227.33 138.11H112.2v62.56h115.12z"/>
+ <path fill="#101828" d="M227.41 201.23h-115.2a.55.55 0 0 1-.56-.56v-62.56c0-.32.24-.56.56-.56h115.2c.32 0 .56.24.56.56v62.56c0 .32-.24.56-.56.56zm-114.56-1.12h114v-61.44H112.77Z"/>
+ <path fill="#101828" d="M227.33 106.51H112.2v31.28h115.12z"/>
+ <path fill="#101828" d="M227.41 138.35h-115.2a.55.55 0 0 1-.56-.56v-31.28c0-.32.24-.56.56-.56h115.2c.32 0 .56.24.56.56v31.28c0 .32-.24.56-.56.56zm-114.56-1.12h114v-30.16H112.77Z"/>
+ <path fill="#fff" d="M221.17 113.31H128.2v44.72h92.96z"/>
+ <path fill="#101828" d="M221.17 158.6h-92.96a.55.55 0 0 1-.56-.57v-44.72c0-.32.24-.56.56-.56h92.96c.32 0 .56.24.56.56v44.72c0 .32-.24.56-.56.56zm-92.4-1.13h91.84v-43.6h-91.84z"/>
+ <path fill="#85c241" d="M217.09 123.8v-7.69h-37.6l-4.96 7.68h-51.6v44.4h100.32v-44.4z"/>
+ <path fill="#101828" d="M223.25 168.75H122.93a.55.55 0 0 1-.56-.56v-44.4c0-.32.24-.56.56-.56h51.36l4.8-7.36c.08-.16.32-.24.48-.24h37.6c.32 0 .56.24.56.56v7.04h5.6c.32 0 .56.24.56.56v44.4c-.08.32-.32.56-.64.56zm-99.76-1.12h99.28v-43.28h-5.6a.55.55 0 0 1-.56-.56v-7.04h-36.72l-4.8 7.36c-.08.16-.32.24-.48.24h-51.12z"/>
+ <path fill="#fff" d="M217.57 128.35h-99.04v44.72h99.04z"/>
+ <path fill="#101828" d="M217.65 173.63h-99.12a.55.55 0 0 1-.56-.56v-44.72c0-.32.24-.56.56-.56h99.04c.32 0 .56.24.56.56v44.72c.08.32-.16.56-.48.56zm-98.56-1.12h97.92v-43.6h-97.92z"/>
+ <path fill="#85c241" d="M122.93 138.75v-7.6h40l5.36 7.6h54.96v44.4H116.37v-44.4z"/>
+ <path fill="#101828" d="M223.25 183.71H116.37a.55.55 0 0 1-.56-.56v-44.4c0-.32.24-.56.56-.56h6v-7.04c0-.32.24-.56.56-.56h40.08c.16 0 .32.08.48.24l5.12 7.36h54.72c.32 0 .56.24.56.56v44.4c-.08.32-.32.56-.64.56zm-106.4-1.12h105.84v-43.28h-54.4c-.16 0-.32-.08-.48-.24l-5.12-7.36h-39.2v7.04c0 .32-.24.56-.56.56h-6v43.28z"/>
+ <path fill="#fff" d="M222.61 142.2h-99.04v44.71h99.04z"/>
+ <path fill="#101828" d="M222.61 187.47h-99.04a.55.55 0 0 1-.56-.56V142.2c0-.32.24-.56.56-.56h99.04c.32 0 .56.24.56.56v44.72c0 .24-.24.56-.56.56zm-98.48-1.12h98v-43.6h-98z"/>
+ <path fill="#fff" d="M221.01 145.8h-99.04v44.71h99.04z"/>
+ <path fill="#101828" d="M221.09 191.07h-99.12a.55.55 0 0 1-.56-.56V145.8c0-.32.24-.56.56-.56h99.04c.32 0 .56.24.56.56v44.72c.08.32-.16.56-.48.56zm-98.56-1.12h97.92v-43.6h-97.92z"/>
+ <path fill="#85c241" d="M216.69 156.27v-7.68h-40.08l-5.28 7.68h-54.96v44.4h106.88v-44.4z"/>
+ <path fill="#101828" d="M223.25 201.23H116.37a.55.55 0 0 1-.56-.56v-44.4c0-.32.24-.56.56-.56h54.72l5.12-7.36c.08-.16.24-.24.48-.24h40.08c.32 0 .56.24.56.56v7.04h6c.32 0 .56.24.56.56v44.4c-.08.32-.32.56-.64.56zm-106.4-1.12h105.84v-43.28h-6a.55.55 0 0 1-.56-.56v-7.12h-39.2l-5.12 7.36c-.08.16-.24.24-.48.24h-54.4v43.28z"/>
+ <path fill="#fff" d="M232.53 176.43H107.09v58.88h125.44z"/>
+ <path fill="#101828" d="M232.53 235.87H107.09a.55.55 0 0 1-.56-.56v-58.88c0-.32.24-.56.56-.56h125.44c.32 0 .56.24.56.56v58.88c0 .32-.24.56-.56.56zm-124.88-1.12h124.32V177H107.65Z"/>
+ <path fill="#dbdbdb" d="M227.49 230.67H112.13a.55.55 0 0 1-.56-.56V181.8c0-.32.24-.56.56-.56h115.28c.32 0 .56.24.56.56v48.32c.08.24-.16.56-.48.56zm-114.8-1.12h114.16v-47.2H112.69Z"/>
+ <path fill="#101828" d="M186.53 213.55h-33.36c-4.16 0-7.28-2.24-7.28-5.2v-3.6h4.48v3.44c.8.64 1.84.88 2.8.8h33.36c1.04.08 2-.24 2.8-.8v-3.44h4.48v3.6c0 3.04-3.12 5.2-7.28 5.2zM168.13 172.43s1.92-.32 4.96 4h-16.96s6-2.08 12-4z"/>
+ <path fill="#101828" d="M173.09 177h-16.96c-.24 0-.48-.17-.56-.49-.08-.24.08-.56.4-.64.08 0 6.08-2.16 11.92-4h.08c.24 0 2.4-.24 5.52 4.24.16.24.16.64-.16.8 0 .08-.08.16-.24.08zm-13.6-1.13h12.48c-2.16-2.72-3.52-2.88-3.76-2.88-3.2 1.04-6.4 2.16-8.72 2.88z"/>
+ <path fill="#fff" d="M168.13 172.43h-46.08s-11.52 4-9.76 24.16h51.44s-4.08-16.48 4.4-24.16z"/>
+ <path fill="#101828" d="M163.73 197.15h-51.44c-.32 0-.56-.24-.56-.48-1.76-20.32 9.6-24.64 10.08-24.8H168.05c.24 0 .4.16.48.4.08.24 0 .48-.16.64-8.08 7.36-4.24 23.52-4.24 23.6 0 .16 0 .32-.08.48 0 .08-.16.16-.32.16zm-50.96-1.12H163c-.64-3.12-2.8-15.84 3.76-23.04h-44.64c-1.04.4-10.72 4.96-9.36 23.04z"/>
+ <path fill="#dbdbdb" d="M151.73 191.07h-32.72a.55.55 0 0 1-.56-.56c0-.32.24-.56.56-.56h32.72c.32 0 .56.24.56.56 0 .32-.24.56-.56.56zM156.13 185.07h-37.2a.55.55 0 0 1-.56-.56c0-.32.24-.56.56-.56h37.2c.32 0 .56.24.56.56 0 .32-.24.56-.56.56zM158.69 178.67h-37.2a.55.55 0 0 1-.56-.56c0-.32.24-.56.56-.56h37.2c.32 0 .56.24.56.56 0 .32-.24.56-.56.56zM213.65 133.15h-24.24a.55.55 0 0 1-.56-.56c0-.32.24-.56.56-.56h24.24c.32 0 .56.24.56.56-.08.32-.32.56-.56.56zM159.57 118.67h-24.24a.55.55 0 0 1-.56-.56c0-.32.24-.56.56-.56h24.24c.32 0 .56.24.56.56 0 .32-.24.56-.56.56z"/>
+ <path fill="#fff" d="M21.65 54.35s30.72 3.76 59.2 23.68l-6.8 8.08 30 3.36-5.44-28-9.04 6.48S63.81 38.51 33.73 30.67z"/>
+ <path fill="#101828" d="m104.05 90.11-30.08-3.36c-.32 0-.56-.32-.48-.64a.6.6 0 0 1 .16-.32l6.4-7.68c-27.92-19.28-58.16-23.2-58.48-23.28-.16 0-.32-.16-.4-.32a.51.51 0 0 1 0-.48l12.16-23.6c.08-.24.4-.32.64-.32C62.05 37.4 86.6 63.71 89.8 67.15L98.37 61c.16-.08.32-.16.56-.08.16.08.32.24.32.4l5.44 28c.08.32-.16.56-.4.64-.16.24-.16.24-.24.16zm-28.88-4.4 28.24 3.2-5.12-26.32-8.32 6c-.24.16-.56.16-.72-.08-.24-.32-25.76-29.2-55.12-36.96l-11.68 22.4c5.04.72 32.96 5.68 58.64 23.68.16.08.24.24.24.4 0 .16 0 .32-.16.4z"/>
+ <path fill="#fff" d="M232.53 86.2s14.72-18.89 53.28-32.4l-4.32-8.65 32.56 3.04-14 26.56-6.24-10s-19.2 5.68-45.6 39.28z"/>
+ <path fill="#101828" d="M248.29 104.6a.61.61 0 0 1-.4-.17L232.13 86.6a.6.6 0 0 1 0-.72c.16-.16 15.12-18.96 52.96-32.4l-4.08-8.08a.68.68 0 0 1 0-.56c.08-.16.32-.24.48-.24l32.56 3.04c.32 0 .56.32.48.64 0 .08 0 .16-.08.16l-14 26.64a.54.54 0 0 1-.48.32c-.24 0-.4-.08-.48-.24l-6-9.68c-2.88 1.04-20.96 8.48-44.88 38.96 0 .08-.08.16-.32.16zm-15.04-18.4 15.04 16.95c13.52-17.12 25.04-26.72 32.4-31.84 8.08-5.6 12.8-7.04 13.04-7.12.24-.08.48 0 .64.24l5.68 9.2 13.12-25.04-30.72-2.88 3.92 7.76c.08.16.08.32 0 .48a.62.62 0 0 1-.32.32c-35.12 12.32-50.56 29.28-52.8 31.92z"/>
+</svg>
return html`
<style>
+ body {
+ background: #fff;
+ }
.component-grid {
display: grid;
grid-template-columns: repeat(${columns}, 1fr);
position: relative;
border: 1px solid #e0e0e0;
border-radius: 12px;
- padding: 20px;
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
max-width: 100%;
max-height: 100%;
- background: #fff;
+ background: #ededed;
}
.component-card:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-bottom: 2px solid #f0f0f0;
font-size: 1.2em;
color: #333;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 0;
+ padding: 12px;
}
.component-content {
flex-grow: 1;
align-items: center;
justify-content: center;
overflow: hidden;
+ flex-direction: column;
+ gap: 12px;
+ padding: 20px;
}
</style>
<h1>All Components</h1>
"value": "#1e2b0e"
}
]
+ },
+ {
+ "name": "txt",
+ "colors": [
+ {
+ "group": "txt",
+ "name": "txt-base",
+ "variableName": "--color-txt-base",
+ "value": "#0062a7"
+ }
+ ]
}
]
\ No newline at end of file
{
"name": "home-wire.png",
"path": "/decorative/home-wire.png"
+ },
+ {
+ "name": "screen-with-wire.svg",
+ "path": "/decorative/screen-with-wire.svg"
}
],
"figures": [
"name": "data-process2.svg",
"path": "/flatline/data-process2.svg"
},
+ {
+ "name": "data-storage.svg",
+ "path": "/flatline/data-storage.svg"
+ },
{
"name": "data_and_settings.svg",
"path": "/flatline/data_and_settings.svg"
export default {
title: "Molecules/Button",
tags: ["autodocs"],
- render: (args) => html` <button type="button" class="btn btn-primary">Primary button</button> `,
+ render: (args) => html`
+ <div><button type="button" class="btn btn-primary">Primary button</button></div>
+ <div><button type="button" class="btn btn-secondary">Secondary button</button></div>
+ <div><button type="button" class="btn btn-tertiary">Tertiary button</button></div>
+ `,
};
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+++ /dev/null
-@import "./mediaqueries.scss";
-@import "./variables.scss";
-@import "./colors.scss";
-@import "./fonts.scss";
-@import "./header.scss";
-@import "./header-mobile.scss";
--- /dev/null
+.color-txt-base {
+ color: var(--color-txt-base);
+}
--color-action-fill-pressed: #{mix(#000, $color-action-fill, 40%)};
--color-action-on-fill: #f7fbfd;
+ // text colors
+ --color-txt-base: #{$color-action-text};
+
// brand colors
--color-brand-surface: #{$color-brand-surface};
--color-brand-text: #{$color-brand-text};
text-decoration: none;
font-weight: 500;
}
+
+ p a {
+ @extend .btn;
+ @extend .btn-tertiary;
+ color: var(--footer-links-color);
+ }
}
.footer__text {
}
li a {
- display: block;
+ display: inline-block;
color: var(--footer-title-color);
}
ul ul {
display: flex;
flex-direction: column;
- gap: 13px;
+ gap: 8px;
margin-top: 16px;
}
li li {
font-weight: 500;
a {
+ @extend .btn-tertiary;
+ display: inline-block;
+ position: relative;
+ flex: 0;
color: var(--footer-links-color);
+ --icon-left: 0;
+ vertical-align: middle;
+ line-height: 1;
+ }
+ a:hover {
+ --icon-left: 0.6em;
+ text-decoration: underline;
+ &::before {
+ right: 1.6em;
+ }
+ }
+
+ a:active {
+ --icon-left: 0.9em;
}
a::after {
+ display: inline-block;
+ vertical-align: middle;
font-family: var(--font-family-icons);
- margin-left: 10px;
+ margin-left: 12px;
+ transform: translateX(var(--icon-left));
+ transition: transform 0.3s ease-in-out;
content: var(--icon-arrow-right);
}
margin-right: calc(var(--container-paddings) * -1);
}
-.container-small {
- // --container-width: 1120px;
-}
-
.page-top .description {
max-width: 700px;
}
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
-
+ --cols: 3;
--min-col-width: 300px;
> *,
> .col {
- flex: 1;
-
- // Ajout de la gestion des colonnes
- @supports (--cols: 0) {
- flex: 1 0 calc((100% / var(--cols)) - var(--gap));
- min-width: calc((100% / var(--cols)) - var(--gap));
- }
+ min-width: var(--min-col-width);
+ flex: 0 0 calc((100% / var(--cols)) - var(--gap));
}
}
@import "./mediaqueries.scss";
@import "./variables.scss";
@import "./colors.scss";
+@import "./colors-classes.scss";
@import "./fonts.scss";
@import "./base.scss";
@import "./typography.scss";
@import "./backgrounds.scss";
@import "./socials.scss";
@import "./structure.scss";
-@import "./footer.scss";
@import "./lists.scss";
@import "./molecules/buttons.scss";
@import "./molecules/media-block.scss";
@import "./layout/page-single-aside.scss";
@import "./layout/aside.scss";
@import "./header/header.scss";
+@import "./footer.scss";
@import "./animation/home-animation.scss";
// overrides classes
@import "./spaces.scss";
--color-hover: var(--color-action-fill-hover);
--color-primary: var(--color-action-fill);
--color-secondary: var(--color-action-on-fill);
+ --icon-left: 0px;
+ --icon-margin: 0.375em;
display: inline-block;
+ align-items: center;
position: relative;
- padding: 0.444em 1em;
+ --left-padding: 1em;
+ padding: 0.444em calc(2em - var(--left-padding)) 0.444em var(--left-padding);
font-size: 1.125rem;
letter-spacing: 0.00555555em;
line-height: 1.2;
cursor: pointer;
transition:
- background-color 0.3s,
- box-shadow 0.3s;
+ background-color 0.3s ease-in-out,
+ box-shadow 0.3s ease-in-out,
+ padding-left 0.3s ease-in-out,
+ padding-right 0.3s ease-in-out;
@include tablet {
font-size: 1.25rem;
z-index: 100;
}
+ // button icon
+ .fas {
+ transform: translateX(var(--icon-left));
+ transition: transform 0.3s ease-in-out;
+ display: inline-block;
+ vertical-align: middle;
+ text-decoration: none !important;
+ margin-left: var(--icon-margin);
+ }
+
// States
&:focus::after,
&.focus::after {
&:hover,
&.hover {
--color-primary: var(--color-hover);
+ --icon-left: 0.3em;
}
+ // &:has(.fas):hover {
+ // --left-padding: 0.7em;
+ // }
+
&:active,
&.active {
--color-primary: var(--color-active);
+ --icon-left: 0.6em;
}
&:focus,
&-secondary,
&-tertiary {
- background-color: var(--color-surface-secondary);
+ background-color: #fff;
color: var(--color-primary);
}
+ &-primary,
+ &-secondary {
+ text-decoration: none !important;
+ }
+
&-tertiary {
+ position: relative;
+ padding: 2px;
background-color: transparent;
border: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: currentColor;
+ transition: transform 0.25s ease-out;
+ transform-origin: bottom left;
+ }
+
+ &:has(.fas) {
+ --icon-width: 1em;
+ }
+ &:has(.fa-arrow-right),
+ &:has(.fa-arrow-up-right-from-square) {
+ --icon-width: 0.75em;
+ }
+
+ &:has(.fas)::before {
+ right: calc(var(--icon-left) + var(--icon-width) + var(--icon-margin) + 0.2em);
+ }
+
+ &:hover::before {
+ transform: scaleX(1);
+ }
}
}
--card-date-color: var(--color-text-secondary);
--card-author-color: var(--color-text);
--card-background-color: #fff;
- --card-title-color: inherit;
+ --card-title-color: var(--color-text);
--card-title-weight: bold;
+ --card-title-size: 24px;
+
color: var(--color-text-secondary);
border-top: var(--card-border-size) solid var(--card-color);
border-radius: 8px;
}
&__label {
- font-size: 24px;
+ font-size: var(--card-title-size);
font-weight: var(--card-title-weight);
line-height: 1.25;
color: var(--card-title-color);
--card-title-color: var(--color-action-text);
--card-title-weight: 500;
}
+
+ &--bg-white {
+ --card-background-color: #fff;
+ --card-border-size: 0;
+ --card-secondary-color: var(--color-action-surface);
+ --card-tag-text-color: var(--color-action-text);
+ --card-title-color: var(--color-action-text);
+ --card-title-weight: 500;
+ --card-title-size: 36px;
+ box-shadow: none;
+ }
+}
+
+.card__tag,
+.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;
}
.card__tag,
margin-right: auto;
max-width: 1920px;
padding: var(--sp-xl) var(--sp-lg);
+ border-radius: 24px;
}
.socials {
--socials-icon-background: var(--color-brand-fill);
- --socials-icon-color: var(--color-text);
+ --socials-icon-color: var(--color-action-on-fill);
--socials-icon-color-hover: var(--color-surface);
display: flex;
margin: 0;
<div class="card {{ .class }}">
<a href="{{ .link }}" class="card__link" aria-label="Read more about {{ .title }}"></a>
- <h3 class="card__label">{{ .title | safeHTML }}</h3>
- <div class="card__content">{{ .description | markdownify | safeHTML }}</div>
+ {{ if .titleLevel }}
+ <h{{ .titleLevel }} class="card__label">{{ .title | safeHTML }}</h{{ .titleLevel }}>
+ {{ else }}
+ <h3 class="card__label">{{ .title | safeHTML }}</h3>
+ {{ end }}
{{ if .tags }}
<div class="card__tags">
{{ range .tags }}
{{ end }}
</div>
{{ end }}
+ <div class="card__content">{{ .description | markdownify | safeHTML }}</div>
{{ if .link }}
<div class="card__actions">
<a href="{{ .link }}" class="join-button">
"title" .title
"description" .description
"link" .link
+ "linkText" "Discover"
+ "linkIcon" .linkIcon
"class" "carousel-item"
)
}}
-<div class="col">
- {{ .Inner }}
+<div class="col {{ if .Get "class" }}{{ .Get "class" }}{{ end }}">
+ {{ if .Get "md" }}
+ {{ .Inner | markdownify }}
+ {{ else }}
+ {{ .Inner }}
+ {{ end }}
</div>
+{{/* dont format this file, use "save without formatting option" */}}
+
{{ $currentPage := .Page }}
{{ $section := default "projects" (.Get 0) }}
+{{ $exclude := default "" (.Get 1) }}
{{ $projects := where (where .Site.RegularPages "Section" $section) "Permalink" "ne" $currentPage.Permalink }}
+{{ if $exclude }}
+ {{ $projects = where $projects ".Params.exclude" "ne" $exclude }}
+{{ end }}
+
{{ range $projects }}
- title: {{ .Title }}
description: {{ .Description }}
link: {{ .Permalink }}
+ linkIcon: "fas fa-arrow-right"
{{ end }}
<div
- class="row {{ if $class }}{{ $class }}{{ end }}"
+ class="row row-from-list {{ if $class }}{{ $class }}{{ end }}"
{{ if $cols }}style="--cols: {{ $cols }};"{{ end }}
>
{{ range $yamlData }}
projects / www-xenproject-org.git / commitdiff
