From: Arnaud Guéras Date: Mon, 4 Nov 2024 09:46:30 +0000 (+0100) Subject: feat: merge update2 into main X-Git-Url: http://xenbits.xensource.com/gitweb?a=commitdiff_plain;h=827d93d6f58ebbdcb887658cb85e7e4f2cf8a2bb;p=www-xenproject-org.git feat: merge update2 into main --- diff --git a/content/_index.md b/content/_index.md index a5280d8..c1250aa 100644 --- a/content/_index.md +++ b/content/_index.md @@ -26,13 +26,7 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor, {{}} -{{}} -

- Discover -

-{{}} - -{{
}} +{{
}} {{}} - title: Open-source icon: fas fa-code @@ -57,14 +51,13 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor, {{
}} - -{{
}} +
+{{}} ## 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 : +{{}} +{{}} - **Empower Innovation:** Tailored virtualization to drive progress across various domains. - **Enhance Cloud Ecosystems:** Elevate cloud capabilities with high-performing, reliable virtualization. @@ -73,6 +66,7 @@ The Xen Project focuses on revolutionizing virtualization by providing a versati - **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions. {{}} + {{
}} diff --git a/content/about/_index.md b/content/about/_index.md index b878301..b05050b 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -55,7 +55,7 @@ Software hosted on XenProject.org is, and always will be, open source. The code We recently celebrated 20 years in The Xen Project. The timeline shows key milestones over the years, starting from 2003 to the present day in 2024.

- Discover Xen Project history + Discover Xen Project history

{{}} {{
}} diff --git a/content/about/become-a-member.md b/content/about/become-a-member.md index f0e3143..548cb28 100644 --- a/content/about/become-a-member.md +++ b/content/about/become-a-member.md @@ -122,7 +122,7 @@ The Board process will help ensure non-technical decisions are collectively dete {{}}

- + Apply now diff --git a/content/about/project-members.md b/content/about/project-members.md index 7c432d8..833003c 100644 --- a/content/about/project-members.md +++ b/content/about/project-members.md @@ -15,6 +15,7 @@ menus: title="AMD" media="/img/logos/amd-logo.svg" alt="Logo of AMD" + class="image-small" >}} 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. @@ -27,6 +28,7 @@ AMD is a leading semiconductor company that designs high-performance computing a title="ARM" media="/img/logos/arm-logo.svg" alt="Logo of ARM" + class="image-small" >}} 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. @@ -39,6 +41,7 @@ ARM is a global leader in semiconductor IP and processor design, providing techn title="AWS" media="/img/logos/aws-logo.svg" alt="Logo of AWS (Amazon Web Services)" + class="image-small" >}} 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. @@ -51,6 +54,7 @@ AWS, a subsidiary of Amazon, is a leading provider of cloud computing services. title="Epam" media="/img/logos/epam-logo.svg" alt="Logo of Epam" + class="image-small" >}} 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. @@ -63,6 +67,7 @@ EPAM Systems is a global provider of digital platform engineering and software d title="Vates" media="/img/logos/vates-logo.svg" alt="Logo of Vates" + class="image-small" >}} 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. @@ -75,6 +80,7 @@ Vates is a company specializing in open source virtualization solutions. Their f title="Xenserver" media="/img/logos/xenserver-logo.svg" alt="Logo of XenServer" + class="image-small" >}} 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. @@ -88,6 +94,7 @@ XenServer is a high-performance virtualization platform designed for enterprise title="Join as a member" media="/img/flatline/brainstorming-session.svg" alt="Illustration of three people having a discussion with speech bubbles, symbolizing teamwork and communication." + class="image-small" >}} Improve engineering ROI, gain project insight and increase visibility among many benefits of joining as a member. diff --git a/content/projects/hvmi.md b/content/projects/hvmi.md index b2f0e60..39253f6 100644 --- a/content/projects/hvmi.md +++ b/content/projects/hvmi.md @@ -20,14 +20,12 @@ aside: {{}} 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. {{}} {{

}} - - {{
}} {{}} + {{}} +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. +

+ + Read the Complete Case Study +

+ {{}} +{{
}} + {{
}} {{}} +
+{{}} +## 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 : +{{}} + +{{}} +- **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. +{{}} +
+{{
}} + +{{
}} +
+{{}} +## 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 : +{{}} + +{{}} +- **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. +{{}} + +{{}} +- **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. +{{}} +
+{{
}} diff --git a/hugo.yaml b/hugo.yaml index ac88b1a..54b0f64 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -50,7 +50,7 @@ menus: - name: "Documentation" pageRef: "/documentation" weight: 30 - url: "https://docs.xenproject.org" + url: "https://wiki.xenproject.org/wiki/Index_Guide" params: class: "custom-class" target: "_blank" diff --git a/hugo_stats.json b/hugo_stats.json index 27b554d..ed2a15e 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -49,8 +49,6 @@ "actions", "active", "ancestor", - "anchor", - "anchor-placement-bottom", "article", "background-curve", "background-curve-reverse", @@ -151,12 +149,14 @@ "header-nav", "hero-block", "image-ratio-large", + "image-small", "images-in-circle", "join-button", "label", "latest-news", "latest-news-template", "latest-news_container", + "line", "list-column", "list-column--sublists", "list-no-style", @@ -205,6 +205,7 @@ "search-input", "search-results", "section-space", + "section-square-rounded", "single-content", "slideshare-container", "socials", diff --git a/static/img/logo-xen-reverse.svg b/static/img/logo-xen-reverse.svg new file mode 100644 index 0000000..562ca82 --- /dev/null +++ b/static/img/logo-xen-reverse.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/pdf/Qubes-OS-and-Xen-Project.pdf b/static/pdf/Qubes-OS-and-Xen-Project.pdf new file mode 100644 index 0000000..226e219 Binary files /dev/null and b/static/pdf/Qubes-OS-and-Xen-Project.pdf differ diff --git a/static/tmp/news.json b/static/tmp/news.json deleted file mode 100644 index 74eefe6..0000000 --- a/static/tmp/news.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "date": "Nov, 20th 2023", - "title": "Xen Project releases version 4.18 with new security, performance, and architecture enhancements for AI/ML application", - "tags": ["ANNOUNCEMENTS", "PRESSRELEASES", "RELEASES"], - "description": "The Xen Project, an open source hypervisor hosted at the Linux Foundation, today announced the release of Xen Project Hypervisor 4.18 with architecture enhancements for High Performance Computing (HPC) and...", - "author": "kchoi", - "link": "https://xen-project/1234" - }, - { - "date": "Dec, 14th 2022", - "title": "Xen Project releases version 4.17 with enhanced security, higher performance, improved embedded static configuration and speculative mitigation support", - "tags": ["ANNOUNCEMENTS", "PRESSRELEASES", "RELEASES"], - "description": "New version includes adoption of MISRA-C rules, static allocation and at-boot partitioning, with improved device throughput SAN FRANCISCO - December 14, 2022 --The Xen Project, an open source hypervisor hosted...", - "author": "Georges Dunlap", - "link": "https://xen-project/1232" - }, - { - "date": "Apr, 8th 2022", - "title": "Mirage OS announces latest release v4.0, dedicated to Lars Kurth", - "tags": ["ANNOUNCEMENTS", "PRESSRELEASES", "RELEASES"], - "description": "MirageOS core maintainers and the Linux Foundation announced the release of MirageOS version 4.0, the latest update since version 3.10 in December, 2020.", - "author": "Georges Dunlap", - "link": "https://xen-project/1231" - } -] diff --git a/stories/organisms/images-in-circle.stories.js b/stories/organisms/images-in-circle.stories.js index d0792dd..cfd8cea 100644 --- a/stories/organisms/images-in-circle.stories.js +++ b/stories/organisms/images-in-circle.stories.js @@ -17,12 +17,12 @@ export default { docs: { description: { component: ` -Le composant **ImagesInCircle** utilise un partial et un shortcode pour afficher des images dans un cercle. -- **Shortcode**: Le shortcode \`images-in-circle\` prend une classe CSS optionnelle et un contenu JSON pour les images. -- **Partial**: Le partial \`images-in-circle.html\` génère une liste d'images avec des transformations CSS appliquées. +The **ImagesInCircle** component uses a partial and a shortcode to display images in a circle. +- **Shortcode**: The \`images-in-circle\` shortcode takes an optional CSS class and JSON content for the images. +- **Partial**: The \`images-in-circle.html\` partial generates a list of images with applied CSS transformations. -### Utilisation -1. **Shortcode**: Utilisez le shortcode dans vos fichiers de contenu pour inclure des images en cercle. +### Usage +1. **Shortcode**: Use the shortcode in your content files to include images in a circle. \`\`\`html {{}} [ @@ -32,7 +32,7 @@ Le composant **ImagesInCircle** utilise un partial et un shortcode pour afficher {{}} \`\`\` -2. **Partial**: Le partial est utilisé pour rendre les images avec les styles appropriés. +2. **Partial**: The partial is used to render the images with appropriate styles. `, }, }, diff --git a/themes/xen-project/assets/css/base.scss b/themes/xen-project/assets/css/base.scss index cd8de1b..79fd2f5 100644 --- a/themes/xen-project/assets/css/base.scss +++ b/themes/xen-project/assets/css/base.scss @@ -8,7 +8,7 @@ html, body { - background: var(--color-surface); + background: var(--color-surface-secondary); color: var(--color-text); } diff --git a/themes/xen-project/assets/css/footer.scss b/themes/xen-project/assets/css/footer.scss index 1b6c117..3d637b4 100644 --- a/themes/xen-project/assets/css/footer.scss +++ b/themes/xen-project/assets/css/footer.scss @@ -1,152 +1,125 @@ .footer { + --footer-background: var(--color-text-secondary); + --footer-links-color: var(--color-surface); + --footer-text-color: var(--color-surface); + --footer-title-color: var(--color-brand-fill); + --footer-menu-cols: auto; --footer-padding: 24px 12px; --gap: 24px; --gap-lg: 40px; - --footer-max-height: none; - --footer-menu-cols: 1; - border-top: 1px solid var(--color-brand-fill); - background: var(--color-brand-surface); + background: var(--footer-background); padding: var(--footer-padding); + color: var(--footer-text-color); @include phone { - --footer-menu-cols: 1; - } - - @include tablet { --footer-menu-cols: 2; - --footer-max-height: 1300px; } - @include tablet-up { - --footer-max-height: 1000px; + @include tablet { + --footer-menu-cols: 3; + --footer-padding: var(--sp-lg) var(--sp-lg); } - @include desktop { - --footer-menu-cols: 2; + h3 { + color: var(--footer-title-color); } - @include desktop-up { - --footer-menu-cols: 3; - --footer-max-height: 700px; + a { + color: var(--footer-links-color); + text-decoration: none; + font-weight: 500; } } -.footer__col { +.footer__text { display: flex; - flex-direction: column; gap: var(--gap-lg); + flex-direction: row; + flex-wrap: wrap; - > div { + > .footer__col { display: flex; flex-direction: column; - gap: var(--gap); + gap: var(--sp-sm); + flex: 1 0; } +} + +.footer__col { + display: flex; + flex-direction: column; + gap: var(--gap-sm); p { margin: 0; } - h2 { - &:first-child { - margin-top: 0; - } + h2:first-child { + margin-top: 0; } .footer__text { flex: 0 1 auto; } +} - &.footer__menu { - ul, - li { - margin: 0; - padding: 0; - list-style: none; - } - ul { - display: flex; - flex: 1 0; - flex-direction: column; - gap: 24px; - } +.footer__menu { + margin-top: var(--sp-lg); + ul, + li { + margin: 0; + padding: 0; + list-style: none; + } + ul { + display: flex; + flex: 1 0; + flex-direction: column; + gap: 24px; + } - li { - font-size: 20px; - font-weight: 700; - } + > ul { + display: block; + column-count: var(--footer-menu-cols); + column-gap: 40px; + } - li a { - color: var(--color-text); - text-decoration: none; - display: block; - } + > ul > li { + margin-bottom: var(--sp-md); + break-inside: avoid; + } - ul ul { - gap: 13px; - margin-top: 16px; - } - li li { - font-size: 18px; - font-weight: 500; - - a { - color: var(--color-action-text); - } - - a::after { - font-family: var(--font-family-icons); - margin-left: 10px; - content: var(--icon-arrow-right); - } - - a[target="_blank"]::after { - content: var(--arrow-up-right-from-square); - } - } + li { + font-weight: 700; } -} -@include tablet { - .footer { - --footer-padding: 40px; - --gap: 80px; - - .footer-content { - display: flex; - flex-direction: column; - justify-content: space-between; - max-width: 1920px; - margin: 0 auto; - gap: var(--gap); - - @include tablet { - flex-direction: row; - } - } - .footer__text { - flex: 0 1 40%; + li a { + display: block; + color: var(--footer-title-color); + } + + ul ul { + display: flex; + flex-direction: column; + gap: 13px; + margin-top: 16px; + } + li li { + font-weight: 500; + + a { + color: var(--footer-links-color); + } - > div { - gap: 20px; - } + a::after { + font-family: var(--font-family-icons); + margin-left: 10px; + content: var(--icon-arrow-right); } - .footer__menu { - flex: 1; - > ul { - display: flex; - flex-direction: column; - flex-wrap: wrap; - max-height: var(--footer-max-height); - align-content: flex-start; - gap: 40px var(--gap); - - > li { - flex: 0 1 0; - width: calc(100% / var(--footer-menu-cols) - var(--gap)); - } - } + a[target="_blank"]::after { + content: var(--arrow-up-right-from-square); } } } diff --git a/themes/xen-project/assets/css/grid.scss b/themes/xen-project/assets/css/grid.scss index 234436a..ccb2159 100644 --- a/themes/xen-project/assets/css/grid.scss +++ b/themes/xen-project/assets/css/grid.scss @@ -1,10 +1,7 @@ -.container, -.container-small { - max-width: calc(var(--container-width) + var(--container-paddings, 0) * 2); - margin-left: var(--container-margins, auto); - margin-right: var(--container-margins, auto); - padding-left: var(--container-paddings); - padding-right: var(--container-paddings); +.container { + max-width: var(--container-width); + margin-left: auto; + margin-right: auto; } .container-full { @@ -36,7 +33,28 @@ section { margin-top: var(--block-space); } -.cols { +.container-row { + --min-col-width: 380px; + display: flex; + flex-wrap: wrap; + gap: var(--gap, 1rem); + + > * { + flex: 1 1 calc(var(--min-col-width)); + min-width: var(--min-col-width); + } + + > .col { + display: block; + } + + .cols-2 { + --min-col-width: 560px; + } +} + +.cols, +.row { display: flex; flex-direction: row; gap: var(--sp-lg); @@ -65,3 +83,9 @@ section { } } } + +@for $i from 1 through 5 { + .cols-#{$i} { + --cols: #{$i}; + } +} diff --git a/themes/xen-project/assets/css/header-mobile.scss b/themes/xen-project/assets/css/header-mobile.scss deleted file mode 100644 index 8d1fa45..0000000 --- a/themes/xen-project/assets/css/header-mobile.scss +++ /dev/null @@ -1,211 +0,0 @@ -.header { - --header-height: 52px; - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--color-brand-fill); - position: relative; - padding: var(--sp-xs) var(--sp-sm); - height: var(--header-height); -} - -.header-logo { - flex: 1; - display: flex; - justify-content: center; - - img { - width: 94px; - } -} - -.header-content { - display: none; -} - -@include media-max("header-breakpoint") { - .menu-toggle { - color: var(--color-action-text); - font-size: 20px; - font-style: normal; - font-weight: 900; - line-height: normal; - display: flex; - width: 36px; - height: 36px; - padding: var(--sp-xxs); - align-items: center; - justify-content: center; - gap: 10px; - position: absolute; - left: 10px; - - &::before { - content: var(--icon-bars); - font-family: var(--font-family-icons); - } - } - - .header.active { - .header-content { - display: flex; - } - - .menu-toggle, - .header-content::before, - .menu li.active > a { - height: var(--header-height); - display: flex; - align-items: center; - position: absolute; - top: 0; - padding: var(--sp-xs) var(--sp-sm); - font-size: 20px; - z-index: 11; - } - - .header-content::before, - .menu li.active > a { - font-weight: 500; - left: 0; - width: auto; - } - - .header-content::before { - content: attr(data-menu-title); - } - - .menu li.active > a { - z-index: 13; - color: inherit; - gap: var(--sp-sm); - pointer-events: none; - cursor: default; - - &::after { - content: none; - } - &::before { - pointer-events: all; - content: var(--icon-arrow-left); - font-family: var(--font-family-icons); - color: var(--color-action-text); - cursor: pointer; - } - } - - /** transform the toggle menu into a cross */ - .menu-toggle { - left: auto; - right: var(--sp-sm); - color: inherit; - font-weight: 900; - - &::before { - content: var(--icon-xmark); - } - } - } - - .header-content { - position: fixed; - - inset: 0; - background: var(--color-surface); - z-index: 10; - flex-direction: column; - } - - .header-nav { - display: flex; - flex-direction: column; - gap: var(--sp-xs); - flex: 1; - position: relative; - display: flex; - - .menu { - font-weight: 500; - flex: 1; - - &, - li, - ul { - list-style: none; - margin: 0; - padding: 0; - } - - a { - text-decoration: none; - } - } - - // level 1 - .menu { - position: relative; - - &, - ul { - padding: var(--sp-lg) var(--sp-sm); - padding-top: calc(var(--header-height) + var(--sp-lg)); - display: flex; - flex-direction: column; - gap: var(--sp-md); - } - > li { - > a { - display: flex; - align-items: center; - gap: var(--sp-xs); - &::after { - content: var(--icon-arrow-right); - font-family: var(--font-family-icons); - } - - &[target="_blank"]::after { - content: var(--arrow-up-right-from-square); - } - } - } - // level 2 - ul a { - width: 100%; - display: block; - } - } - - // level 2 { - .menu ul { - position: absolute; - inset: 0; - background: var(--color-surface); - display: none; - z-index: 12; - } - } - - .menu li.active ul { - display: flex; - } -} - -.menu { - position: relative; - a { - &::after { - content: var(--icon-arrow-right); - font-family: var(--font-family-icons); - } - - &[target="_blank"]::after { - content: var(--arrow-up-right-from-square); - } - } - // level 2 - ul a { - width: 100%; - display: block; - } -} diff --git a/themes/xen-project/assets/css/header.scss b/themes/xen-project/assets/css/header.scss deleted file mode 100644 index a7281b0..0000000 --- a/themes/xen-project/assets/css/header.scss +++ /dev/null @@ -1,155 +0,0 @@ -@include media-min("header-breakpoint") { - .header { - --gap: 20px; - --header-nav-flex: 0; - --header-padding: 12px 20px; - --logo-width: 13.8vw; - --nav-margin-left: 0; - --header-height: 84px; - --header-font-size: 16px; - background-color: var(--color-brand-surface); - - @include desktop { - --gap: 40px; - --header-font-size: 20px; - --logo-width: 13.8vw; - --header-padding: 12px 40px; - } - - flex-direction: row; - gap: var(--gap); - height: var(--header-height); - justify-content: space-between; - padding: var(--header-padding); - z-index: 10; - font-size: var(--header-font-size); - - &-content { - display: flex; - flex: 0 1 auto; - gap: var(--gap); - align-items: center; - } - - &-logo { - flex: 0 0 auto; - position: relative; - - img { - width: var(--logo-width); - max-width: 164px; - display: block; - } - } - - &-nav { - font-weight: 500; - margin-left: var(--nav-margin-left); - } - - .menu-toggle { - display: none; - } - - .header-nav { - flex: var(--header-nav-flex) 0 auto; - - &, - ul, - li { - align-items: stretch; - display: flex; - } - - .menu { - display: flex; - flex: 1 0 auto; - flex-direction: row; - gap: var(--gap); - justify-content: space-between; - list-style: none; - margin: 0; - padding: 12px 0; - - > li { - flex: 0 1 auto; - min-height: 40px; - } - - li:has(ul) a::after, - li a[target="_blank"]::after { - font-family: var(--font-family-icons); - margin-left: 10px; - } - - li:has(ul) > a::after { - content: var(--icon-arrow-down); - } - - li a[target="_blank"]::after { - content: var(--arrow-up-right-from-square); - } - } - - li { - align-items: center; - margin: 0; - padding: 0; - position: relative; - - &:hover ul { - visibility: visible; - } - } - - > ul ul { - align-items: flex-start; - background: var(--color-surface); - border: 1px solid var(--color-brand-fill); - display: flex; - flex-direction: column; - gap: 8px; - right: 0; - list-style: none; - margin: 0; - padding: 24px; - position: absolute; - top: 100%; - visibility: hidden; - - a { - white-space: nowrap; - } - } - } - - .menu { - list-style: none; - - a { - color: var(--color-action-text); - font-weight: 500; - text-decoration: none; - - &:hover { - color: var(--color-action-text-hover); - } - } - - ul { - list-style: none; - margin: 0; - } - - li { - margin: 0; - padding: 0; - } - } - - .socials { - margin-left: 0; - padding: 0; - } - } -} diff --git a/themes/xen-project/assets/css/header/header-common.scss b/themes/xen-project/assets/css/header/header-common.scss new file mode 100644 index 0000000..29c21ec --- /dev/null +++ b/themes/xen-project/assets/css/header/header-common.scss @@ -0,0 +1,10 @@ +.header { + --header-color-border: var(--color-brand-fill); + --header-color-link: var(--color-surface); + --header-color-link-hover: var(--color-border); + --header-color-text: var(--color-text-secondary); + --header-color-menu-toggle: var(--color-action-text); + --header-color-background: var(--color-text-secondary); + --header-color-menu-background: var(--header-color-background); + --header-color-menu-border: var(--header-color-border); +} diff --git a/themes/xen-project/assets/css/header/header-desktop.scss b/themes/xen-project/assets/css/header/header-desktop.scss new file mode 100644 index 0000000..1b900f8 --- /dev/null +++ b/themes/xen-project/assets/css/header/header-desktop.scss @@ -0,0 +1,154 @@ +@include media-min("header-breakpoint") { + .header { + --gap: 20px; + --header-nav-flex: 0; + --header-padding: 12px 20px; + --logo-width: 13.8vw; + --nav-margin-left: 0; + --header-height: 84px; + --header-font-size: 16px; + + @include desktop { + --gap: 40px; + --header-font-size: 20px; + --logo-width: 13.8vw; + --header-padding: 12px 40px; + } + + flex-direction: row; + gap: var(--gap); + height: var(--header-height); + justify-content: space-between; + padding: var(--header-padding); + z-index: 10; + font-size: var(--header-font-size); + + &-content { + display: flex; + flex: 0 1 auto; + gap: var(--gap); + align-items: center; + } + + &-logo { + flex: 0 0 auto; + position: relative; + + img { + width: var(--logo-width); + max-width: 164px; + display: block; + } + } + + &-nav { + font-weight: 500; + margin-left: var(--nav-margin-left); + } + + .menu-toggle { + display: none; + } + + .header-nav { + flex: var(--header-nav-flex) 0 auto; + + &, + ul, + li { + align-items: stretch; + display: flex; + } + + .menu { + display: flex; + flex: 1 0 auto; + flex-direction: row; + gap: var(--gap); + justify-content: space-between; + list-style: none; + margin: 0; + padding: 12px 0; + + > li { + flex: 0 1 auto; + min-height: 40px; + } + + li:has(ul) a::after, + li a[target="_blank"]::after { + font-family: var(--font-family-icons); + margin-left: 10px; + } + + li:has(ul) > a::after { + content: var(--icon-arrow-down); + } + + li a[target="_blank"]::after { + content: var(--arrow-up-right-from-square); + } + } + + li { + align-items: center; + margin: 0; + padding: 0; + position: relative; + + &:hover ul { + visibility: visible; + } + } + + > ul ul { + align-items: flex-start; + background: var(--header-color-menu-background); + border: 1px solid var(--header-color-menu-border); + display: flex; + flex-direction: column; + gap: 8px; + right: 0; + list-style: none; + margin: 0; + padding: 24px; + position: absolute; + top: 100%; + visibility: hidden; + + a { + white-space: nowrap; + } + } + } + + .menu { + list-style: none; + + a { + color: var(--header-color-link); + font-weight: 500; + text-decoration: none; + + &:hover { + color: var(--header-color-link-hover); + } + } + + ul { + list-style: none; + margin: 0; + } + + li { + margin: 0; + padding: 0; + } + } + + .socials { + margin-left: 0; + padding: 0; + } + } +} diff --git a/themes/xen-project/assets/css/header/header-mobile.scss b/themes/xen-project/assets/css/header/header-mobile.scss new file mode 100644 index 0000000..e01b484 --- /dev/null +++ b/themes/xen-project/assets/css/header/header-mobile.scss @@ -0,0 +1,213 @@ +.header { + --header-height: 52px; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + background: var(--header-color-background); + border-bottom: 1px solid var(--header-color-border); + position: relative; + padding: var(--sp-xs) var(--sp-sm); + height: var(--header-height); +} + +.header-logo { + flex: 1; + display: flex; + justify-content: center; + + img { + width: 94px; + } +} + +.header-content { + display: none; +} + +@include media-max("header-breakpoint") { + .menu-toggle { + color: var(--header-color-menu-toggle); + font-size: 20px; + font-style: normal; + font-weight: 900; + line-height: normal; + display: flex; + width: 36px; + height: 36px; + padding: var(--sp-xxs); + align-items: center; + justify-content: center; + gap: 10px; + position: absolute; + left: 10px; + + &::before { + content: var(--icon-bars); + font-family: var(--font-family-icons); + } + } + + .header.active { + .header-content { + display: flex; + } + + .menu-toggle, + .header-content::before, + .menu li.active > a { + height: var(--header-height); + display: flex; + align-items: center; + position: absolute; + top: 0; + padding: var(--sp-xs) var(--sp-sm); + font-size: 20px; + z-index: 11; + } + + .header-content::before, + .menu li.active > a { + font-weight: 500; + left: 0; + width: auto; + } + + .header-content::before { + content: attr(data-menu-title); + } + + .menu li.active > a { + z-index: 13; + color: inherit; + gap: var(--sp-sm); + pointer-events: none; + cursor: default; + + &::after { + content: none; + } + &::before { + pointer-events: all; + content: var(--icon-arrow-left); + font-family: var(--font-family-icons); + color: inherit; + //var(--color-action-text) + cursor: pointer; + } + } + + /** transform the toggle menu into a cross */ + .menu-toggle { + left: auto; + right: var(--sp-sm); + color: inherit; + font-weight: 900; + + &::before { + content: var(--icon-xmark); + } + } + } + + .header-content { + position: fixed; + + inset: 0; + background: var(--header-color-background); + z-index: 10; + flex-direction: column; + } + + .header-nav { + display: flex; + flex-direction: column; + gap: var(--sp-xs); + flex: 1; + position: relative; + display: flex; + + .menu { + font-weight: 500; + flex: 1; + + &, + li, + ul { + list-style: none; + margin: 0; + padding: 0; + } + + a { + text-decoration: none; + } + } + + // level 1 + .menu { + position: relative; + + &, + ul { + padding: var(--sp-lg) var(--sp-sm); + padding-top: calc(var(--header-height) + var(--sp-lg)); + display: flex; + flex-direction: column; + gap: var(--sp-md); + } + > li { + > a { + display: flex; + align-items: center; + gap: var(--sp-xs); + &::after { + content: var(--icon-arrow-right); + font-family: var(--font-family-icons); + } + + &[target="_blank"]::after { + content: var(--arrow-up-right-from-square); + } + } + } + // level 2 + ul a { + width: 100%; + display: block; + } + } + + // level 2 { + .menu ul { + position: absolute; + inset: 0; + background: var(--header-color-menu-background); + display: none; + z-index: 12; + } + } + + .menu li.active ul { + display: flex; + } +} + +.menu { + position: relative; + a { + &::after { + content: var(--icon-arrow-right); + font-family: var(--font-family-icons); + } + + &[target="_blank"]::after { + content: var(--arrow-up-right-from-square); + } + } + // level 2 + ul a { + width: 100%; + display: block; + } +} diff --git a/themes/xen-project/assets/css/header/header.scss b/themes/xen-project/assets/css/header/header.scss new file mode 100644 index 0000000..147a661 --- /dev/null +++ b/themes/xen-project/assets/css/header/header.scss @@ -0,0 +1,3 @@ +@import "./header-common.scss"; +@import "./header-mobile.scss"; +@import "./header-desktop.scss"; diff --git a/themes/xen-project/assets/css/main.scss b/themes/xen-project/assets/css/main.scss index 07ecde0..a325aa5 100644 --- a/themes/xen-project/assets/css/main.scss +++ b/themes/xen-project/assets/css/main.scss @@ -26,6 +26,7 @@ @import "./molecules/center.scss"; @import "./molecules/hero-block.scss"; @import "./molecules/search-form.scss"; +@import "./molecules/section-square-rounded.scss"; @import "./components/box-resources.scss"; @import "./components/box-members.scss"; @import "./components/carousel.scss"; @@ -36,7 +37,6 @@ @import "./layout/page-404.scss"; @import "./layout/page-single-aside.scss"; @import "./layout/aside.scss"; -@import "./header-mobile.scss"; -@import "./header.scss"; +@import "./header/header.scss"; // overrides classes @import "./spaces.scss"; diff --git a/themes/xen-project/assets/css/molecules/features-list.scss b/themes/xen-project/assets/css/molecules/features-list.scss index 56a5737..9f80bfb 100644 --- a/themes/xen-project/assets/css/molecules/features-list.scss +++ b/themes/xen-project/assets/css/molecules/features-list.scss @@ -1,91 +1,102 @@ +// CSS Custom Properties +:root { + --feature-border-radius: 8px; + --feature-padding: 1.5rem; + --features-columns-count: 1; + --feature-item-title-font-size: 2rem; + --feature-item-title-gap: 0.5rem; + + @include tablet { + --features-columns-count: 2; + --feature-item-title-font-size: 2.5rem; + --feature-item-title-gap: 1.3rem; + } + + @include desktop { + --features-columns-count: 3; + } +} + // Mixins @mixin flex-center { display: flex; align-items: flex-start; } -// Styles +// Features List Component .features-list { --gap: var(--sp-sm-lg); - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; + flex-wrap: wrap; gap: var(--gap); list-style: none; - padding: 0; margin: 0; + padding: 0; @include tablet { --gap: var(--sp-lg); } + // List items li { + --li-width: calc(100% / var(--features-columns-count) - var(--gap)); margin: 0; - padding: 0; - } - - @media (max-width: 1024px) { - grid-template-columns: repeat(2, 1fr); + flex: 1 1 var(--li-width); } - @media (max-width: 768px) { - grid-template-columns: 1fr; - } - - &--cols-2 { - grid-template-columns: repeat(1, 1fr); - - .with-aside & { - @include tablet-up { - grid-template-columns: repeat(2, 1fr); - } - } - } - &--cols-4 { - grid-template-columns: repeat(4, 1fr); - } + // } +// Feature Item Component .feature-item { - --item-title-font-size: 2rem; - --item-title-gap: 0.5rem; - padding: 1.5rem; - border-radius: 8px; - @include flex-center; + padding: var(--feature-padding); + border-radius: var(--feature-border-radius); + border-radius: 16px; + background: var(--color-brand-surface); + padding: 40px; - @include tablet { - --item-title-font-size: 2.5rem; - --item-title-gap: 1.3rem; + &-content { + flex: 1; } - .feature-item__icon { + // Icon styles + &__icon { + display: flex !important; + width: 72px; + height: 72px; + justify-content: center; + align-items: center; font-size: 0.8em; - } - - i { + border-radius: 100px; + border: 2px solid var(--color-surface); + color: var(--color-surface); + background: var(--Crazy-Green-to-blue, linear-gradient(90deg, #85c241 0%, #3199cc 100%)); + 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); font-size: 1.5rem; - color: var(--color-action-fill); } - &-content { - flex: 1; - } - - .feature-item__title { + // Title styles + &__title { display: flex; - gap: var(--item-title-gap); - font-size: var(--item-title-font-size); - align-items: center; - font-weight: 700; + gap: var(--feature-item-title-gap); + font-size: var(--feature-item-title-font-size); + font-weight: 500; color: var(--color-action-fill); margin: 0 0 1.05rem; padding-bottom: 0.28em; - border-bottom: 2px solid var(--color-brand-fill); + display: flex; + flex-direction: column; + align-items: flex-start; } + // Paragraph styles p { font-size: 1.2rem; color: var(--color-text); margin: 0; - line-height: 150%; + line-height: 1.5; } } diff --git a/themes/xen-project/assets/css/molecules/section-square-rounded.scss b/themes/xen-project/assets/css/molecules/section-square-rounded.scss new file mode 100644 index 0000000..03e66b8 --- /dev/null +++ b/themes/xen-project/assets/css/molecules/section-square-rounded.scss @@ -0,0 +1,8 @@ +.section-square-rounded { + background-color: #fff; + border-radius: 24px; + margin-left: auto; + margin-right: auto; + max-width: 1920px; + padding: var(--sp-xl) var(--sp-lg); +} diff --git a/themes/xen-project/assets/css/socials.scss b/themes/xen-project/assets/css/socials.scss index 21334fd..21e2087 100644 --- a/themes/xen-project/assets/css/socials.scss +++ b/themes/xen-project/assets/css/socials.scss @@ -1,4 +1,7 @@ .socials { + --socials-icon-background: var(--color-brand-fill); + --socials-icon-color: var(--color-text); + --socials-icon-color-hover: var(--color-surface); display: flex; margin: 0; list-style: none; @@ -25,17 +28,17 @@ display: flex; padding: 8px; border-radius: 50%; - background: var(--color-action-fill); + background: var(--socials-icon-background); width: 32px; height: 32px; align-items: center; justify-content: center; text-decoration: none; - color: var(--color-action-on-fill); + color: var(--socials-icon-color); } a:hover { - background: var(--color-action-fill-hover); + color: var(--socials-icon-color-hover); } i { diff --git a/themes/xen-project/assets/css/structure.scss b/themes/xen-project/assets/css/structure.scss index 4f1a95b..289072c 100644 --- a/themes/xen-project/assets/css/structure.scss +++ b/themes/xen-project/assets/css/structure.scss @@ -7,6 +7,8 @@ } padding-top: 0; padding-bottom: 0; + padding-left: 40px; + padding-right: 40px; } @include tablet { diff --git a/themes/xen-project/assets/css/typography.scss b/themes/xen-project/assets/css/typography.scss index 4cba816..21e0594 100644 --- a/themes/xen-project/assets/css/typography.scss +++ b/themes/xen-project/assets/css/typography.scss @@ -1,6 +1,6 @@ :root { - /* Mobile font sizes (default) */ - --font-size-base: 1.125rem; /* 18px - taille de base pour mobile */ + /* Mobile font sizes */ + --font-size-base: 1.125rem; /* 18px */ --font-size-h1: 2.25rem; /* 36px */ --font-size-h2: 2rem; /* 32px */ --font-size-h3: 1.25rem; /* 20px */ @@ -8,16 +8,33 @@ --font-size-p1: 1.125rem; /* 18px */ --font-size-p2: 1rem; /* 16px */ - /* Line heights */ --line-height-heading: 60px; --line-height-body: 1.5em; --line-height-button: 1.2em; - /* Letter spacing */ --letter-spacing-p: -0.03125rem; /* -0.5px */ } +/* Desktop breakpoint (min-width: 768px) */ +@media (min-width: 768px) { + :root { + --font-size-base: 1.25rem; /* 20px */ + --font-size-h1: 2.5rem; /* 40px */ + --font-size-h2: 2.25rem; /* 36px */ + --font-size-h3: 1.5rem; /* 24px */ + --font-size-button: 1.25rem; /* 20px */ + --font-size-p1: 1.25rem; /* 20px */ + --font-size-p2: 1rem; /* 16px */ + + --line-height-heading: 1.2em; + } +} + /* General Typography Styles */ +html { + font-size: 16px; +} + body { font-family: "Gotham", sans-serif; font-size: var(--font-size-base); @@ -170,7 +187,7 @@ strong { .c1-bold { font-weight: bold; - font-size: 1rem; /* 16px */ + font-size: var(--font-size-p2); text-transform: capitalize; line-height: 1em; letter-spacing: 0.00125rem; /* 0.02px */ @@ -178,7 +195,7 @@ strong { .title-external-link { color: var(--color-action-text); - font-size: 18px; + font-size: var(--font-size-p1); font-style: normal; font-weight: 500; line-height: 120%; @@ -196,20 +213,6 @@ p { margin-bottom: var(--sp-xs); } -/* Desktop Styles */ -@media (min-width: 768px) { - :root { - --font-size-base: 1.25rem; /* 20px - taille de base pour desktop */ - --font-size-h1: 2.5rem; /* 40px */ - --font-size-h2: 2.25rem; /* 36px */ - --font-size-h3: 1.5rem; /* 24px */ - --font-size-button: 1.25rem; /* 20px */ - --font-size-p1: 1.25rem; /* 20px */ - /* P2 reste à 16px même sur desktop selon la maquette */ - --line-height-heading: 1.2em; - } -} - .page-top { h1 { color: var(--color-action-text); diff --git a/themes/xen-project/assets/css/variables.scss b/themes/xen-project/assets/css/variables.scss index 522e42c..65b819e 100644 --- a/themes/xen-project/assets/css/variables.scss +++ b/themes/xen-project/assets/css/variables.scss @@ -15,7 +15,7 @@ --section-space: var(--sp-lg); --container-paddings: 12px; --block-space: var(--sp-lg); - --container-width: 1520px; + --container-width: 1312px; --h1-font-size: 2.25rem; /* 40px */ --h2-font-size: 2rem; /* 32px */ diff --git a/themes/xen-project/layouts/partials/footer.html b/themes/xen-project/layouts/partials/footer.html index 49033f0..5144dc8 100644 --- a/themes/xen-project/layouts/partials/footer.html +++ b/themes/xen-project/layouts/partials/footer.html @@ -1,38 +1,50 @@ - -{{/*

Copyright {{ now.Year }}. All rights reserved.

*/}} diff --git a/themes/xen-project/layouts/partials/header.html b/themes/xen-project/layouts/partials/header.html index 3492d35..31a46e0 100644 --- a/themes/xen-project/layouts/partials/header.html +++ b/themes/xen-project/layouts/partials/header.html @@ -1,7 +1,7 @@
diff --git a/themes/xen-project/layouts/shortcodes/md.html b/themes/xen-project/layouts/shortcodes/md.html index bc997e8..4981cb2 100644 --- a/themes/xen-project/layouts/shortcodes/md.html +++ b/themes/xen-project/layouts/shortcodes/md.html @@ -1,8 +1,17 @@ -{{ $container := .Get "container" }} -{{ if $container }} -
+{{/* Stocke le contenu markdownifié dans une variable */}} +{{ $content := .Inner | markdownify }} + +{{/* Gestion des différents cas */}} +{{ if .IsNamedParams }} + {{ if .Get "col" }} +
{{ $content }}
+ {{ else if .Get "container" }} +
{{ $content }}
+ {{ end }} +{{ else }} + {{ if eq (.Get 0) "col" }} +
{{ $content }}
+ {{ else }} + {{ $content }} + {{ end }} {{ end }} - {{ .Inner | markdownify }} -{{ if $container }} -
-{{ end }} \ No newline at end of file