{{</section>}}
-{{<html>}}
-<p class="txt-c section-space anchor-placement-bottom">
- <a href=TODO class="anchor"><strong>Discover</strong></a>
-</p>
-{{</html>}}
-
-{{<section background="curve">}}
+{{<section class="section-square-rounded">}}
{{<features-list>}}
- title: Open-source
icon: fas fa-code
{{<section container="small">}}
-
-{{<center>}}
+<div class="line">
+{{<md col>}}
## A virtualization **revolution**
-{{</center>}}
-
-{{<md>}}
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.
- **Revolutionize Embedded Technologies:** Transform embedded and automotive sectors with mature, safe, secure solutions.
{{</md>}}
+</div>
{{</section>}}
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.
<p class="mg-t-md">
- <a href="TODO" class="btn btn-secondary">Discover Xen Project history <i class="fas fa-arrow-up-right-from-square"></i></a>
+ <a href="https://15anniversary.xenproject.org/" class="btn btn-secondary">Discover Xen Project history <i class="fas fa-arrow-up-right-from-square"></i></a>
</p>
{{</media-block>}}
{{</section>}}
{{</vertical-lists>}}
<p class="txt-c mg-t-lg">
- <a href="TODO" class="btn btn-primary">
+ <a href="https://enrollment.lfx.linuxfoundation.org/?project=xen" class="btn btn-primary">
Apply now
<i class="fas fa-arrow-right"></i>
</a>
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.
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.
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.
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.
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.
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.
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.
{{<media-block
title="What is HVMI?"
media="https://xenproject.org/wp-content/uploads/sites/79/2020/07/github-hvmi-v2_Kek0TiK6.compressed.mp4"
- alt="Video of a presentation about HVMI"
+ alt="Video of a presentation about HVMI"
>}}
HVMI stands for Hypervisor-based Memory Introspection. The technology leverages Virtual Machine Introspection (VMI) APIs in the Xen and KVM hypervisors. By gaining introspection of the raw memory of running guest virtual machines, HVMI can apply security logic to detect and prevent the use of common attack techniques, such as buffer overflows, heap spray, code injection, and so-on.
{{</media-block>}}
{{</section>}}
-
-
{{<section>}}
{{<media-block
title="About us"
- title: Project Management
items:
- name: "Status: Active"
- icon: fa-check
+ icon: fas fa-check
- name: Features (unstable)
link: https://xenbits.xen.org/docs/unstable/SUPPORT.html
icon: fa-road
weight: 10
---
+{{<section>}}
+ {{<media-block
+ title="Qubes OS & Xen Project"
+ media="/img/flatline/data-process.svg"
+ mediaPosition="right"
+ alt="Illustration of a laptop displaying 3D bar charts, connected to cloud and file management icons, representing data integration and synchronization."
+ >}}
+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.
+<p class="mg-t-md">
+
+ <a href="/pdf/Qubes-OS-and-Xen-Project.pdf" class="btn btn-secondary">Read the Complete Case Study <i class="fas fa-arrow-up-right-from-square"></i></a>
+</p>
+ {{</media-block>}}
+{{</section>}}
+
{{<section>}}
{{<media-block
title="Xen Server case study"
--- /dev/null
+---
+title: "footer-header"
+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>}}
+
+{{<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>}}
- 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"
"actions",
"active",
"ancestor",
- "anchor",
- "anchor-placement-bottom",
"article",
"background-curve",
"background-curve-reverse",
"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",
"search-input",
"search-results",
"section-space",
+ "section-square-rounded",
"single-content",
"slideshare-container",
"socials",
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 64" fill="none">
+ <g>
+ <path
+ d="M117.049 21.5311C111.908 21.5311 107.752 24.1761 105.561 25.9228L106.19 22.5652H93.4495L88.9616 43.3506H102.279L104.553 31.2559C105.663 29.8406 107.513 28.0209 109.661 28.0209C113.171 28.0209 112.412 30.8217 112.12 33.0325L110.32 43.0291L123.307 43.0556C123.307 43.0556 124.821 35.0875 125.004 34.2124C126.823 25.4886 124.715 21.5344 117.042 21.5344L117.049 21.5311Z"
+ fill="white" />
+ <path
+ d="M88.6766 34.6499C88.6766 34.6499 93.7445 21.4781 75.0705 21.4781C56.3965 21.4781 54.948 34.6499 54.948 34.6499C54.948 34.6499 52.6312 44.2322 70.7252 44.2322C88.8191 44.2322 88.0965 37.1557 88.0965 37.1557H74.7788C74.7788 37.1557 73.7646 39.9565 71.0135 39.9565C68.2625 39.9565 66.5257 38.9257 67.2482 34.6499H88.6733H88.6766ZM73.622 26.2476C78.2524 26.2476 76.8073 30.5234 76.8073 30.5234H68.8458C68.8458 30.5234 68.9917 26.2476 73.6254 26.2476H73.622Z"
+ fill="white" />
+ <path
+ d="M88.6501 45.2564H95.1664C96.121 45.2564 96.9662 45.3757 97.702 45.6143C98.4378 45.853 99.0344 46.201 99.4985 46.6584C99.9592 47.1158 100.274 47.676 100.443 48.3422C100.609 49.0084 100.612 49.7608 100.45 50.6027L100.44 50.6458C100.264 51.544 99.9493 52.3329 99.4918 53.0124C99.0344 53.6918 98.471 54.2652 97.8014 54.7293C97.1319 55.1933 96.3729 55.5413 95.5244 55.77C94.6759 56.002 93.7809 56.1181 92.8396 56.1181H90.7548L89.9096 60.4601H85.6968L88.6534 45.2564H88.6501ZM93.3931 52.8135C94.1455 52.8135 94.772 52.6345 95.2658 52.2798C95.763 51.9219 96.0713 51.438 96.1906 50.8281L96.2005 50.785C96.3265 50.1287 96.2105 49.6315 95.8492 49.2901C95.4879 48.9488 94.9244 48.7764 94.1588 48.7764H92.1833L91.3978 52.8168H93.3964L93.3931 52.8135Z"
+ fill="#85C241" />
+ <path
+ d="M102.356 48.7101H106.505L106.045 51.0767C106.532 50.2812 107.112 49.6448 107.785 49.1642C108.458 48.6869 109.28 48.4682 110.257 48.5112L109.412 52.8566H109.064C107.977 52.8566 107.082 53.1748 106.379 53.8112C105.677 54.4475 105.193 55.4485 104.928 56.8075L104.218 60.4568H100.069L102.352 48.7068L102.356 48.7101Z"
+ fill="#85C241" />
+ <path
+ d="M115.305 60.7418C114.364 60.7418 113.529 60.5827 112.803 60.2645C112.077 59.9463 111.477 59.5088 111.006 58.952C110.536 58.3952 110.211 57.7455 110.039 57.0097C109.863 56.2705 109.856 55.4817 110.022 54.6431L110.032 54.6C110.194 53.7615 110.513 52.9693 110.983 52.2235C111.454 51.4778 112.034 50.8281 112.72 50.268C113.406 49.7111 114.182 49.2703 115.04 48.9422C115.899 48.6173 116.8 48.4516 117.742 48.4516C118.683 48.4516 119.515 48.614 120.241 48.9422C120.967 49.267 121.567 49.7045 122.037 50.2547C122.508 50.8049 122.833 51.4479 123.008 52.1871C123.184 52.9262 123.187 53.7151 123.025 54.5536L123.018 54.5967C122.856 55.4386 122.538 56.2308 122.067 56.9765C121.596 57.7223 121.016 58.3753 120.33 58.9321C119.644 59.4889 118.869 59.9298 118.01 60.2579C117.152 60.5827 116.25 60.7451 115.309 60.7451L115.305 60.7418ZM116.031 57.2251C116.409 57.2251 116.76 57.1555 117.092 57.0196C117.423 56.8837 117.715 56.6981 117.974 56.4595C118.229 56.2241 118.444 55.9457 118.623 55.6308C118.799 55.316 118.922 54.9845 118.991 54.6398L119.001 54.5967C119.071 54.2387 119.074 53.9007 119.014 53.5858C118.951 53.2709 118.832 52.9925 118.653 52.7572C118.474 52.5218 118.249 52.3296 117.97 52.1871C117.695 52.0445 117.374 51.9716 117.012 51.9716C116.651 51.9716 116.283 52.0412 115.952 52.1771C115.62 52.313 115.329 52.5019 115.07 52.7373C114.815 52.9726 114.596 53.251 114.42 53.5659C114.241 53.8808 114.122 54.2122 114.053 54.5569L114.043 54.6C113.973 54.9613 113.97 55.2961 114.029 55.6143C114.092 55.9291 114.212 56.2076 114.391 56.4429C114.57 56.6782 114.795 56.8705 115.073 57.013C115.348 57.1555 115.667 57.2284 116.031 57.2284V57.2251Z"
+ fill="#85C241" />
+ <path
+ d="M122.949 64C122.614 64 122.316 63.9801 122.047 63.947C121.779 63.9105 121.523 63.8773 121.285 63.8475L121.815 61.1097C121.898 61.123 121.987 61.1329 122.084 61.1329H122.355C122.76 61.1329 123.085 61.0302 123.327 60.828C123.568 60.6258 123.738 60.2712 123.837 59.764L125.985 48.7101H130.135L127.954 59.9397C127.811 60.6788 127.592 61.3086 127.304 61.829C127.012 62.3494 126.658 62.7703 126.24 63.0885C125.822 63.4067 125.335 63.6387 124.785 63.7845C124.231 63.9304 123.622 64.0033 122.952 64.0033L122.949 64ZM126.697 44.6068H131.02L130.43 47.6462H126.107L126.697 44.6068Z"
+ fill="#85C241" />
+ <path
+ d="M135.938 60.7418C135.01 60.7418 134.192 60.5927 133.482 60.2977C132.773 60.0027 132.19 59.5884 131.735 59.0613C131.281 58.5343 130.97 57.8913 130.807 57.1389C130.642 56.3865 130.648 55.5546 130.827 54.6431L130.837 54.6C131.003 53.7449 131.305 52.9461 131.739 52.2003C132.173 51.4545 132.71 50.8049 133.346 50.2447C133.983 49.6879 134.695 49.2504 135.481 48.9322C136.266 48.614 137.095 48.4549 137.963 48.4549C138.978 48.4549 139.823 48.6272 140.502 48.9753C141.179 49.3233 141.706 49.7906 142.077 50.3773C142.448 50.964 142.677 51.6435 142.766 52.4191C142.856 53.1947 142.813 54.0167 142.644 54.8851C142.617 55.0143 142.591 55.1535 142.564 55.2994C142.534 55.4452 142.501 55.591 142.458 55.7336H134.596C134.629 56.3865 134.835 56.8704 135.216 57.1886C135.597 57.5068 136.111 57.6659 136.764 57.6659C137.254 57.6659 137.728 57.5731 138.176 57.3842C138.623 57.1953 139.1 56.8937 139.601 56.4727L141.513 58.362C140.807 59.0879 139.995 59.6646 139.08 60.0988C138.162 60.533 137.118 60.7484 135.945 60.7484L135.938 60.7418ZM139.017 53.6189C139.071 52.9693 138.954 52.4489 138.666 52.0644C138.378 51.6799 137.954 51.4877 137.387 51.4877C136.82 51.4877 136.353 51.6799 135.928 52.0644C135.507 52.4489 135.173 52.966 134.931 53.6189H139.014H139.017Z"
+ fill="#85C241" />
+ <path
+ d="M148.925 60.7418C148.043 60.7418 147.254 60.5794 146.565 60.2546C145.875 59.9297 145.312 59.4922 144.878 58.942C144.443 58.3918 144.142 57.7455 143.973 56.9964C143.807 56.2506 143.804 55.4651 143.963 54.6398L143.973 54.5967C144.132 53.7714 144.44 52.9858 144.897 52.2401C145.355 51.4943 145.912 50.8447 146.571 50.2845C147.231 49.7277 147.977 49.2868 148.815 48.9587C149.654 48.6339 150.535 48.4715 151.463 48.4715C152.68 48.4715 153.648 48.7101 154.364 49.1874C155.083 49.6647 155.617 50.3011 155.968 51.0999L152.763 53.1847C152.547 52.7936 152.299 52.4887 152.007 52.2732C151.715 52.0545 151.318 51.9484 150.811 51.9484C150.479 51.9484 150.158 52.018 149.846 52.1539C149.538 52.2931 149.256 52.4787 149.007 52.7174C148.759 52.956 148.547 53.2311 148.368 53.5427C148.192 53.8542 148.069 54.189 147.996 54.5536L147.987 54.5967C147.914 54.9745 147.904 55.3259 147.957 55.6507C148.01 55.9755 148.112 56.2573 148.272 56.4959C148.427 56.7346 148.636 56.9235 148.901 57.0594C149.163 57.1986 149.468 57.2649 149.816 57.2649C150.31 57.2649 150.748 57.1555 151.129 56.9401C151.51 56.7213 151.904 56.4263 152.312 56.0485L154.682 58.0471C153.973 58.8592 153.16 59.5088 152.239 60.0027C151.318 60.4932 150.214 60.7418 148.925 60.7418Z"
+ fill="#85C241" />
+ <path
+ d="M160.313 60.6987C159.06 60.6987 158.146 60.4004 157.562 59.8071C156.979 59.2138 156.823 58.2128 157.098 56.8108L158.026 52.0313H156.637L157.284 48.7068H158.673L159.253 45.7304H163.402L162.822 48.7068H165.56L164.914 52.0313H162.179L161.407 56.0054C161.324 56.4263 161.361 56.7246 161.513 56.9069C161.666 57.0892 161.931 57.1787 162.309 57.1787C162.584 57.1787 162.859 57.1423 163.134 57.0693C163.409 56.9964 163.681 56.9036 163.949 56.7876L163.319 60.0226C162.905 60.2248 162.444 60.3872 161.944 60.5098C161.443 60.6324 160.9 60.6954 160.323 60.6954L160.313 60.6987Z"
+ fill="#85C241" />
+ <path
+ d="M70.2081 13.868H49.0747L37.1027 23.0359L30.1091 13.868H13.1719L26.4101 31.2261L0 51.4579H21.1367L34.2025 41.448L41.8358 51.4579H58.773L44.8951 33.2579L70.2081 13.868Z"
+ fill="white" />
+ <path
+ d="M21.6537 51.0601C18.0078 48.677 15.0678 45.3128 13.2083 41.3387L6.77819 46.264C7.77254 48.1135 8.94588 49.8536 10.275 51.4579H21.1334L21.6504 51.0601H21.6537Z"
+ fill="white" />
+ <path d="M15.7638 17.262C16.6985 16.029 17.7526 14.8921 18.9093 13.868H13.1752L15.7638 17.262Z" fill="white" />
+ <path
+ d="M46.6551 51.4579H58.6537C58.6736 51.4314 58.6968 51.4082 58.7167 51.385L53.7084 44.8189C51.8457 47.4904 49.4426 49.7575 46.6551 51.4579Z"
+ fill="white" />
+ <path
+ d="M34.4643 54.8685C30.056 54.8685 25.9328 53.6488 22.4094 51.5341L21.6438 52.1208L21.4184 52.2931H11.0009C16.7549 58.7531 25.1307 62.8267 34.4643 62.8267C43.798 62.8267 52.1738 58.7531 57.9278 52.2931H45.147C41.9419 53.9371 38.3125 54.8685 34.4643 54.8685Z"
+ fill="#85C241" />
+ <path
+ d="M56.771 24.1595L63.3736 19.1016C62.588 17.2587 61.6334 15.5053 60.5264 13.8646H50.0227C53.1085 16.6024 55.4684 20.1423 56.7744 24.1595H56.771Z"
+ fill="#ffffff" />
+ <path
+ d="M11.0075 31.415C11.0075 26.4134 12.5786 21.7797 15.2468 17.9713L12.5057 14.3751L11.4782 13.0294H19.907C23.9076 9.85737 28.9622 7.95815 34.461 7.95815C39.9598 7.95815 45.0178 9.85737 49.0151 13.0294H59.9231C54.2222 5.1375 44.9449 0 34.4643 0C17.1162 0 3.04935 14.0635 3.04935 31.415C3.04935 36.4829 4.25584 41.269 6.39039 45.505L12.857 40.5531C11.6671 37.7457 11.0108 34.6566 11.0108 31.415H11.0075Z"
+ fill="#85C241" />
+ <path
+ d="M62.2566 23.4403C63.0156 23.0259 63.7812 22.6746 64.5436 22.3829C64.2917 21.5443 64.0099 20.719 63.6918 19.9136L57.0263 25.0213C57.2251 25.724 57.3909 26.4399 57.5234 27.1658C58.7531 25.7704 60.3574 24.481 62.2533 23.4436L62.2566 23.4403Z"
+ fill="#85C241" />
+ <path
+ d="M56.0286 40.6293C55.5115 41.8325 54.905 42.9893 54.2023 44.0797L59.2503 50.7021C60.765 48.7565 62.0478 46.622 63.0786 44.3482C60.1021 43.6721 57.6063 42.3197 56.0286 40.6293Z"
+ fill="#85C241" />
+ </g>
+
+</svg>
\ No newline at end of file
+++ /dev/null
-[
- {
- "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"
- }
-]
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
{{</* images-in-circle class="custom-class" */>}}
[
{{</* /images-in-circle */>}}
\`\`\`
-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.
`,
},
},
html,
body {
- background: var(--color-surface);
+ background: var(--color-surface-secondary);
color: var(--color-text);
}
.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);
}
}
}
-.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 {
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);
}
}
}
+
+@for $i from 1 through 5 {
+ .cols-#{$i} {
+ --cols: #{$i};
+ }
+}
+++ /dev/null
-.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;
- }
-}
+++ /dev/null
-@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;
- }
- }
-}
--- /dev/null
+.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);
+}
--- /dev/null
+@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;
+ }
+ }
+}
--- /dev/null
+.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;
+ }
+}
--- /dev/null
+@import "./header-common.scss";
+@import "./header-mobile.scss";
+@import "./header-desktop.scss";
@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";
@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";
+// 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;
}
}
--- /dev/null
+.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);
+}
.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;
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 {
}
padding-top: 0;
padding-bottom: 0;
+ padding-left: 40px;
+ padding-right: 40px;
}
@include tablet {
: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 */
--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);
.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 */
.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%;
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);
--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 */
<footer class="footer" id="footer">
<div class="footer-content">
- <div class="footer__col footer__text">
- <div>
+ <div class="footer__text">
+ <div class="footer__col">
<h3>About Xen Project</h3>
<p class="p1-book">
- The mission of the Xen Project is to advance virtualization technology
- across a wide range of commercial and open-source domains.
+ The mission of the Xen Project is to advance virtualization technology across a wide range of commercial and
+ open-source domains.
</p>
{{ partial "socials.html" (dict "class" "socials-footer") }}
</div>
- <div>
+ <div class="footer__col">
<h3>A Linux Foundation Project</h3>
<p class="p1-book">
- The Linux Foundation provides a neutral, trusted hub for developers to
- code, manage, and scale open technology projects.
+ The Linux Foundation provides a neutral, trusted hub for developers to code, manage, and scale open technology
+ projects.
</p>
- <p><a href="https://www.linuxfoundation.org/">Visit the Linux Foundation
- <i class="fas fa-arrow-up-right-from-square"></i></a></p>
- <p><a href="https://www.linuxfoundation.org/legal/privacy-policy">Privacy Policy <i class="fas fa-arrow-up-right-from-square"></i></a></p>
- <p><a href="https://www.linuxfoundation.org/legal/trademark-usage">Terms of Use <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+ <div>
+ <p>
+ <a href="https://www.linuxfoundation.org/"
+ >Visit the Linux Foundation <i class="fas fa-arrow-up-right-from-square"></i
+ ></a>
+ </p>
+ <p>
+ <a href="https://www.linuxfoundation.org/legal/privacy-policy"
+ >Privacy Policy <i class="fas fa-arrow-up-right-from-square"></i
+ ></a>
+ </p>
+ <p>
+ <a href="https://www.linuxfoundation.org/legal/trademark-usage"
+ >Terms of Use <i class="fas fa-arrow-up-right-from-square"></i
+ ></a>
+ </p>
+ </div>
</div>
</div>
- <div class="footer__col footer__menu">
+ <div class="footer__menu">
<ul>
- {{- $menuID := "main" }} <!-- ID du menu que vous souhaitez utiliser -->
+ {{- $menuID := "main" }}
+ <!-- ID du menu que vous souhaitez utiliser -->
{{- $menu := index .Site.Menus $menuID }}
{{- if $menu }}
- {{- partial "menu/walk.html" (dict "page" . "menuEntries" $menu "isFooter" true) }}
+ {{- partial "menu/walk.html" (dict "page" . "menuEntries" $menu "isFooter" true) }}
{{- end }}
</ul>
</div>
</div>
</footer>
-
-{{/* <p>Copyright {{ now.Year }}. All rights reserved.</p> */}}
<header class="header">
<div class="header-logo">
<a href="/">
- <img src="/img/logo-xen.svg" alt="Xen-Project" />
+ <img src="/img/logo-xen-reverse.svg" alt="Xen-Project" />
</a>
</div>
<button class="menu-toggle btn btn-tertiary" title="Toggle menu"></button>
-{{ $container := .Get "container" }}
-{{ if $container }}
-<div class="container container-{{ $container }}">
+{{/* 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 }}
+ {{ $content }}
+ {{ end }}
{{ end }}
- {{ .Inner | markdownify }}
-{{ if $container }}
-</div>
-{{ end }}
\ No newline at end of file
projects / www-xenproject-org.git / commitdiff
