From 7d7ca7847df6be6e6fadf526f3663b4349445cf1 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= Date: Wed, 13 Nov 2024 02:49:48 +0100 Subject: [PATCH] Squashed commit of the following: MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit commit 842e18b1f77cb315adc0c6784deba2f216f83a83 Author: Arnaud Guéras Date: Wed Nov 13 02:48:26 2024 +0100 update css Signed-off-by: Arnaud Guéras commit b371f0499140033f505670feba8e624a784aa8e1 Author: Arnaud Guéras Date: Tue Nov 12 23:23:29 2024 +0100 fix footer, socials, buttons and links, and animate icons Signed-off-by: Arnaud Guéras commit d934cb0fb346fbc7ec7e696db434a1c779b09f31 Author: Arnaud Guéras Date: Mon Nov 11 13:30:54 2024 +0100 hugo starts Signed-off-by: Arnaud Guéras commit 0f110dc3b8cd705b27a1fd05a0b77e1b7c69fa47 Author: Arnaud Guéras Date: Sun Nov 10 11:47:37 2024 +0100 fix Signed-off-by: Arnaud Guéras commit c2eb2b5c344eb9ccaf722f3cefdbf30cbcd21e0d Author: Arnaud Guéras Date: Sun Nov 10 10:47:02 2024 +0100 card update Signed-off-by: Arnaud Guéras commit 5cd2bf97fb1abb8d90ad2846b48eae7dfb0f65ee Author: Arnaud Guéras Date: Sat Nov 9 14:48:27 2024 +0100 update blog Signed-off-by: Arnaud Guéras commit 805114d82a7a603b74cbefca31a154a259df10ee Author: Arnaud Guéras Date: Fri Nov 8 07:40:43 2024 +0100 update site Signed-off-by: Arnaud Guéras --- .storybook/preview.js | 8 +-- content/_index.md | 4 +- content/about/_index.md | 29 ++++---- content/about/become-a-member.md | 37 ++++++---- content/about/project-members.md | 12 ++-- content/about/security-policy.md | 6 +- content/contribute/get-started.md | 16 ++--- content/projects/all-projects.md | 3 +- content/projects/xcp-ng.md | 6 +- content/resources/mailing-lists.md | 44 ++++++------ content/resources/use-cases.md | 8 +-- content/test.md | 7 -- hugo_stats.json | 8 ++- scripts/storytasks/storybook-colors.js | 3 +- static/img/flatline/data-storage.svg | 34 +++++++++ stories/AllComponents.stories.js | 16 ++++- stories/json/colors.json | 11 +++ stories/json/images.json | 8 +++ stories/molecules/Button.stories.js | 6 +- themes/xen-project/assets/css/blogheader.scss | 6 -- .../assets/css/colors-classes.scss | 3 + themes/xen-project/assets/css/colors.scss | 3 + themes/xen-project/assets/css/footer.scss | 34 ++++++++- themes/xen-project/assets/css/grid.scss | 15 +--- themes/xen-project/assets/css/main.scss | 3 +- .../assets/css/molecules/buttons.scss | 70 +++++++++++++++++-- .../assets/css/molecules/card.scss | 32 ++++++++- .../css/molecules/section-square-primary.scss | 1 + themes/xen-project/assets/css/socials.scss | 2 +- themes/xen-project/layouts/partials/card.html | 8 ++- .../layouts/partials/carousel-items.html | 2 + .../xen-project/layouts/shortcodes/col.html | 8 ++- .../layouts/shortcodes/getpages.html | 8 +++ .../layouts/shortcodes/row-from-list.html | 2 +- 34 files changed, 336 insertions(+), 127 deletions(-) create mode 100644 static/img/flatline/data-storage.svg delete mode 100644 themes/xen-project/assets/css/blogheader.scss create mode 100644 themes/xen-project/assets/css/colors-classes.scss diff --git a/.storybook/preview.js b/.storybook/preview.js index 08de37a..8829330 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,7 +1,7 @@ -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 diff --git a/content/_index.md b/content/_index.md index 1d984f4..6f29c8a 100644 --- a/content/_index.md +++ b/content/_index.md @@ -8,7 +8,7 @@ keywords: "Xen Project, open source virtualization, enterprise-grade hypervisor, {{open virtualization 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" @@ -71,7 +71,7 @@ The Xen Project focuses on revolutionizing virtualization by providing a versati {{
}} {{}} -{{}} +{{}} {{}} diff --git a/content/about/_index.md b/content/about/_index.md index f868182..16eabed 100644 --- a/content/about/_index.md +++ b/content/about/_index.md @@ -36,7 +36,6 @@ Find out more about how the community governs itself. {{
}} {{}} -{{
}} -{{}} -{{}} +{{
}} +{{}} +{{}} +## 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. +{{}} -- 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 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. -{{}} -{{}} +- **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. +{{}} +{{}} {{
}} {{
}} diff --git a/content/about/become-a-member.md b/content/about/become-a-member.md index cdb8a04..e98f1d6 100644 --- a/content/about/become-a-member.md +++ b/content/about/become-a-member.md @@ -32,7 +32,7 @@ Committers and maintainers are responsible for the technical development and are ## Main responsibilities {{}} - {{}} + {{}} - title: Financial oversight icon: fas fa-money-bill-alt description: Budget management and investment decisions on infrastructure and project operations. @@ -113,19 +113,20 @@ The Board process will help ensure non-technical decisions are collectively dete {{
}} -{{}} -### How to **join?** +{{}} +## How to **join?** {{}} -{{}} +{{}} - 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. +{{}} + -{{}}

@@ -147,13 +148,19 @@ The Board process will help ensure non-technical decisions are collectively dete {{}}` + mediaPosition="right" animate="true" >}} {{}} Board members can propose and vote upon changes to the Xen Project. Members also gain valuable strategic insight into project plans and future scope. - -[Join the advisory board](link-to-xen-project-advisory-board) {{}} + +

+ +Meet the advisory board + + +

{{}} {{
}} @@ -162,14 +169,18 @@ Board members can propose and vote upon changes to the Xen Project. Members also {{}} {{}} 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) {{}} + +

+ +Learn about Xen Project + + +

{{}} {{
}} diff --git a/content/about/project-members.md b/content/about/project-members.md index ed03198..e34b8a7 100644 --- a/content/about/project-members.md +++ b/content/about/project-members.md @@ -20,7 +20,7 @@ menus: >}} 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. -

Discover AMD

+

Discover AMD

{{}} {{
}} @@ -34,7 +34,7 @@ AMD is a leading semiconductor company that designs high-performance computing a >}} 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. -

Discover ARM

+

Discover ARM

{{}} {{
}} @@ -48,7 +48,7 @@ ARM is a global leader in semiconductor IP and processor design, providing techn >}} 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. -

Discover AWS

+

Discover AWS

{{}} {{
}} @@ -62,7 +62,7 @@ AWS, a subsidiary of Amazon, is a leading provider of cloud computing services. >}} 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. -

Discover Epam

+

Discover Epam

{{}} {{}} @@ -76,7 +76,7 @@ EPAM Systems is a global provider of digital platform engineering and software d >}} 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. -

Discover Vates

+

Discover Vates

{{}} {{}} @@ -90,7 +90,7 @@ Vates is a company specializing in open source virtualization solutions. Their f >}} 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. -

Discover Xenserver

+

Discover Xenserver

{{}} {{}} diff --git a/content/about/security-policy.md b/content/about/security-policy.md index c93cbae..2efddb8 100644 --- a/content/about/security-policy.md +++ b/content/about/security-policy.md @@ -17,13 +17,13 @@ aside: 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: diff --git a/content/contribute/get-started.md b/content/contribute/get-started.md index c69417e..21d2c7e 100644 --- a/content/contribute/get-started.md +++ b/content/contribute/get-started.md @@ -31,13 +31,13 @@ We've collated some information to help you get started, click here for resource {{}} - title: "**Read** documentation" text: > -

Access documentation

-

How to use documentation

+

Access documentation

+

How to use documentation

- title: "**Communicate** with others" text: > -

Access documentation

-

How to use documentation

+

Access documentation

+

How to use documentation

{{}} {{}} @@ -52,10 +52,10 @@ We've collated some information to help you get started, click here for resource animate="true" >}} -

Youtube channel

-

Contribution guidelines

-

Governance

-

Security policy

+

Youtube channel

+

Contribution guidelines

+

Governance

+

Security policy

{{}} {{}} diff --git a/content/projects/all-projects.md b/content/projects/all-projects.md index d0a9892..251e0f0 100644 --- a/content/projects/all-projects.md +++ b/content/projects/all-projects.md @@ -11,10 +11,11 @@ menus: parent: Projects name: All projects weight: 100 +exclude: "hidden" --- {{
}} - {{}} + {{}} {{
}} {{
}} diff --git a/content/projects/xcp-ng.md b/content/projects/xcp-ng.md index 2101217..24b8675 100644 --- a/content/projects/xcp-ng.md +++ b/content/projects/xcp-ng.md @@ -101,13 +101,13 @@ In 2018 XCP-ng was born, following Citrix System’s announcement to remove feat {{}}

- + Watch training

- + Read step-by-step documentation instructions @@ -131,7 +131,7 @@ In 2018 XCP-ng was born, following Citrix System’s announcement to remove feat {{}}

- + Read about XCP-ng development process

diff --git a/content/resources/mailing-lists.md b/content/resources/mailing-lists.md index 4699625..59090e7 100644 --- a/content/resources/mailing-lists.md +++ b/content/resources/mailing-lists.md @@ -13,27 +13,31 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{
}} {{}} {{}} -- 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. -{{}} -{{}} -{{
}} +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. -{{
}} - {{}} - 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)**. {{}} + {{}} +{{
}} + + +{{
}} +

{{}}Consider **searching in archives**, the answer you are looking might already exist!{{}}

- + Check out archives

@@ -108,7 +112,7 @@ keywords: "xen mailing lists, community communication, developer discussions, te ### Xen Project Hypervisor {{}} -{{}} +{{}} - title: XEN-DEVEL@ tags: - Mailing list @@ -134,7 +138,7 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} ### Mirage OS {{}} - {{}} + {{}} - title: MIRAGEOS-DEVEL@ tags: - Mailing list @@ -149,7 +153,7 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} ### Unikraft {{}} - {{}} + {{}} - title: MINIOS-DEVEL@ (INCLUDES UNIKRAFT DEVELOPMENT) tags: - Mailing list @@ -165,7 +169,7 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} ### XAPI {{}} - {{}} + {{}} - title: XEN-API@ tags: - Mailing list @@ -183,7 +187,7 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} ### XCP-ng {{}} -{{}} +{{}} - title: XCP-NG FORUMS tags: - Forum @@ -211,10 +215,10 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} -{{}} +{{}} ### Windows PV Drivers {{}} -{{}} +{{}} - title: WIN-PV-DEVEL@ tags: - Mailing list @@ -228,9 +232,9 @@ keywords: "xen mailing lists, community communication, developer discussions, te {{}} ## Advisory board - {{}} -{{}} + +{{}} - title: PREDISCLOSURE-APPLICATIONS@ tags: - Mailing list diff --git a/content/resources/use-cases.md b/content/resources/use-cases.md index dae6f31..68ee228 100644 --- a/content/resources/use-cases.md +++ b/content/resources/use-cases.md @@ -13,9 +13,9 @@ menus: {{
}} {{}} 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. @@ -52,7 +52,7 @@ Amazon Web Services (AWS) leverages the Xen Project hypervisor to power its Elas {{
}} {{}} @@ -104,7 +104,7 @@ Conservative estimates show that Xen has an active user base of 10+ million; the {{
}} {{}} - {{}} + {{}} {{}}

diff --git a/content/test.md b/content/test.md index 0a8db46..b6090f4 100644 --- a/content/test.md +++ b/content/test.md @@ -6,10 +6,3 @@ draft: true {{

}} {{}} {{
}} - - diff --git a/hugo_stats.json b/hugo_stats.json index 71da07d..fc9f22d 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -63,6 +63,7 @@ "btn-tertiary", "card", "card--bg", + "card--bg-white", "card__actions", "card__content", "card__label", @@ -77,7 +78,9 @@ "carousel-content", "carousel-item", "col", + "color-txt-base", "cols", + "cols-2", "cols-3", "container", "container-full", @@ -141,7 +144,6 @@ "features-list", "features-list--cols-2", "features-list--cols-3", - "features-list--cols-4", "footer", "footer-content", "footer__col", @@ -181,7 +183,6 @@ "media-block__title", "menu", "menu-toggle", - "mg-b-lg", "mg-l-lg", "mg-r-md", "mg-t-lg", @@ -189,6 +190,7 @@ "mg-t-sm", "mg-t-xl", "mg-v-lg", + "mg-v-md", "mg-v-xxl", "mob-mg-v-xl", "mt-2", @@ -204,6 +206,7 @@ "presentation-list", "prev", "row", + "row-from-list", "search-container", "search-form", "search-input", @@ -276,6 +279,7 @@ "meritocracy", "mirage-os", "netiquette", + "open-source-technologies", "openness", "organizations-on-the-pre-disclosure-list", "our-architecture", diff --git a/scripts/storytasks/storybook-colors.js b/scripts/storytasks/storybook-colors.js index 47261a3..9350255 100644 --- a/scripts/storytasks/storybook-colors.js +++ b/scripts/storytasks/storybook-colors.js @@ -2,7 +2,6 @@ import fs from "fs"; import * as sass from "sass"; import storyScriptConfig from "../storyscripts.config.js"; - const main = async () => { const { colorVariablesFilePath, storyDestJsonFolder } = storyScriptConfig; const filePath = colorVariablesFilePath; @@ -22,7 +21,7 @@ const main = async () => { 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; diff --git a/static/img/flatline/data-storage.svg b/static/img/flatline/data-storage.svg new file mode 100644 index 0000000..8596581 --- /dev/null +++ b/static/img/flatline/data-storage.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/stories/AllComponents.stories.js b/stories/AllComponents.stories.js index 4710065..7ed60e8 100644 --- a/stories/AllComponents.stories.js +++ b/stories/AllComponents.stories.js @@ -45,6 +45,9 @@ const AllComponentsTemplate = (args, { loaded: { stories } }) => { return html`

All Components

diff --git a/stories/json/colors.json b/stories/json/colors.json index f932fce..381388d 100644 --- a/stories/json/colors.json +++ b/stories/json/colors.json @@ -91,5 +91,16 @@ "value": "#1e2b0e" } ] + }, + { + "name": "txt", + "colors": [ + { + "group": "txt", + "name": "txt-base", + "variableName": "--color-txt-base", + "value": "#0062a7" + } + ] } ] \ No newline at end of file diff --git a/stories/json/images.json b/stories/json/images.json index 71b433a..ea99227 100644 --- a/stories/json/images.json +++ b/stories/json/images.json @@ -11,6 +11,10 @@ { "name": "home-wire.png", "path": "/decorative/home-wire.png" + }, + { + "name": "screen-with-wire.svg", + "path": "/decorative/screen-with-wire.svg" } ], "figures": [ @@ -80,6 +84,10 @@ "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" diff --git a/stories/molecules/Button.stories.js b/stories/molecules/Button.stories.js index 0c39584..03ed7f6 100644 --- a/stories/molecules/Button.stories.js +++ b/stories/molecules/Button.stories.js @@ -4,7 +4,11 @@ import { html } from "lit"; export default { title: "Molecules/Button", tags: ["autodocs"], - render: (args) => html` `, + render: (args) => html` +
+
+
+ `, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/themes/xen-project/assets/css/blogheader.scss b/themes/xen-project/assets/css/blogheader.scss deleted file mode 100644 index 759f5f5..0000000 --- a/themes/xen-project/assets/css/blogheader.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "./mediaqueries.scss"; -@import "./variables.scss"; -@import "./colors.scss"; -@import "./fonts.scss"; -@import "./header.scss"; -@import "./header-mobile.scss"; diff --git a/themes/xen-project/assets/css/colors-classes.scss b/themes/xen-project/assets/css/colors-classes.scss new file mode 100644 index 0000000..9102888 --- /dev/null +++ b/themes/xen-project/assets/css/colors-classes.scss @@ -0,0 +1,3 @@ +.color-txt-base { + color: var(--color-txt-base); +} diff --git a/themes/xen-project/assets/css/colors.scss b/themes/xen-project/assets/css/colors.scss index 0c8fd48..bb0dc69 100644 --- a/themes/xen-project/assets/css/colors.scss +++ b/themes/xen-project/assets/css/colors.scss @@ -31,6 +31,9 @@ $color-brand-on-fill: #1e2b0e; --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}; diff --git a/themes/xen-project/assets/css/footer.scss b/themes/xen-project/assets/css/footer.scss index 19045fe..c34d00d 100644 --- a/themes/xen-project/assets/css/footer.scss +++ b/themes/xen-project/assets/css/footer.scss @@ -30,6 +30,12 @@ text-decoration: none; font-weight: 500; } + + p a { + @extend .btn; + @extend .btn-tertiary; + color: var(--footer-links-color); + } } .footer__text { @@ -96,26 +102,48 @@ } 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); } diff --git a/themes/xen-project/assets/css/grid.scss b/themes/xen-project/assets/css/grid.scss index bc79073..4799761 100644 --- a/themes/xen-project/assets/css/grid.scss +++ b/themes/xen-project/assets/css/grid.scss @@ -11,10 +11,6 @@ margin-right: calc(var(--container-paddings) * -1); } -.container-small { - // --container-width: 1120px; -} - .page-top .description { max-width: 700px; } @@ -73,17 +69,12 @@ section { 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)); } } diff --git a/themes/xen-project/assets/css/main.scss b/themes/xen-project/assets/css/main.scss index 6fff2c8..ac413b0 100644 --- a/themes/xen-project/assets/css/main.scss +++ b/themes/xen-project/assets/css/main.scss @@ -1,6 +1,7 @@ @import "./mediaqueries.scss"; @import "./variables.scss"; @import "./colors.scss"; +@import "./colors-classes.scss"; @import "./fonts.scss"; @import "./base.scss"; @import "./typography.scss"; @@ -9,7 +10,6 @@ @import "./backgrounds.scss"; @import "./socials.scss"; @import "./structure.scss"; -@import "./footer.scss"; @import "./lists.scss"; @import "./molecules/buttons.scss"; @import "./molecules/media-block.scss"; @@ -39,6 +39,7 @@ @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"; diff --git a/themes/xen-project/assets/css/molecules/buttons.scss b/themes/xen-project/assets/css/molecules/buttons.scss index 0f9ed34..e40f3f8 100644 --- a/themes/xen-project/assets/css/molecules/buttons.scss +++ b/themes/xen-project/assets/css/molecules/buttons.scss @@ -7,11 +7,15 @@ --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; @@ -24,8 +28,10 @@ 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; @@ -44,6 +50,16 @@ 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 { @@ -53,11 +69,17 @@ &: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, @@ -72,12 +94,52 @@ &-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); + } } } diff --git a/themes/xen-project/assets/css/molecules/card.scss b/themes/xen-project/assets/css/molecules/card.scss index 08f4a27..7aeffb2 100644 --- a/themes/xen-project/assets/css/molecules/card.scss +++ b/themes/xen-project/assets/css/molecules/card.scss @@ -6,8 +6,10 @@ --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; @@ -28,7 +30,7 @@ } &__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); @@ -109,6 +111,32 @@ --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, diff --git a/themes/xen-project/assets/css/molecules/section-square-primary.scss b/themes/xen-project/assets/css/molecules/section-square-primary.scss index aa50542..815f95d 100644 --- a/themes/xen-project/assets/css/molecules/section-square-primary.scss +++ b/themes/xen-project/assets/css/molecules/section-square-primary.scss @@ -4,4 +4,5 @@ margin-right: auto; max-width: 1920px; padding: var(--sp-xl) var(--sp-lg); + border-radius: 24px; } diff --git a/themes/xen-project/assets/css/socials.scss b/themes/xen-project/assets/css/socials.scss index 21e2087..b8ae317 100644 --- a/themes/xen-project/assets/css/socials.scss +++ b/themes/xen-project/assets/css/socials.scss @@ -1,6 +1,6 @@ .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; diff --git a/themes/xen-project/layouts/partials/card.html b/themes/xen-project/layouts/partials/card.html index 3ecc5ba..e986941 100644 --- a/themes/xen-project/layouts/partials/card.html +++ b/themes/xen-project/layouts/partials/card.html @@ -4,8 +4,11 @@
-

{{ .title | safeHTML }}

-
{{ .description | markdownify | safeHTML }}
+ {{ if .titleLevel }} + {{ .title | safeHTML }} + {{ else }} +

{{ .title | safeHTML }}

+ {{ end }} {{ if .tags }}
{{ range .tags }} @@ -13,6 +16,7 @@ {{ end }}
{{ end }} +
{{ .description | markdownify | safeHTML }}
{{ if .link }}
diff --git a/themes/xen-project/layouts/partials/carousel-items.html b/themes/xen-project/layouts/partials/carousel-items.html index 9d7b2c5..c70cb21 100644 --- a/themes/xen-project/layouts/partials/carousel-items.html +++ b/themes/xen-project/layouts/partials/carousel-items.html @@ -4,6 +4,8 @@ "title" .title "description" .description "link" .link + "linkText" "Discover" + "linkIcon" .linkIcon "class" "carousel-item" ) }} diff --git a/themes/xen-project/layouts/shortcodes/col.html b/themes/xen-project/layouts/shortcodes/col.html index 305a945..7c37e70 100644 --- a/themes/xen-project/layouts/shortcodes/col.html +++ b/themes/xen-project/layouts/shortcodes/col.html @@ -1,3 +1,7 @@ -
- {{ .Inner }} +
+ {{ if .Get "md" }} + {{ .Inner | markdownify }} + {{ else }} + {{ .Inner }} + {{ end }}
diff --git a/themes/xen-project/layouts/shortcodes/getpages.html b/themes/xen-project/layouts/shortcodes/getpages.html index 3325712..ff53f13 100644 --- a/themes/xen-project/layouts/shortcodes/getpages.html +++ b/themes/xen-project/layouts/shortcodes/getpages.html @@ -1,9 +1,17 @@ +{{/* 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 }} diff --git a/themes/xen-project/layouts/shortcodes/row-from-list.html b/themes/xen-project/layouts/shortcodes/row-from-list.html index 2bbb785..bec88a8 100644 --- a/themes/xen-project/layouts/shortcodes/row-from-list.html +++ b/themes/xen-project/layouts/shortcodes/row-from-list.html @@ -6,7 +6,7 @@
{{ range $yamlData }} -- 2.39.5