diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index 633e9606f163c516d04336c163806d192f6723c1..1bf103158b78f980dc60739acd4e02577c15c5fd 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -5,7 +5,7 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
-function CarouselElement({name, img, link, alt}) {
+function CarouselElement({name, img, svg, link, alt}) {
if (typeof link === "undefined" && typeof name === "undefined") {
return (
<div className="carousel_box">
@@ -16,7 +16,7 @@ function CarouselElement({name, img, link, alt}) {
);
}
- else if (typeof link === "undefined") {
+ else if (typeof link === "undefined" && typeof svg === "undefined") {
return (
<div className="carousel_box">
<img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
@@ -25,6 +25,15 @@ function CarouselElement({name, img, link, alt}) {
);
}
+ else if (typeof link === "undefined" && typeof img === "undefined") {
+ return (
+ <div className="carousel_box" alt={alt}>
+ {svg}
+ <h6 className="carousel_title">{name}</h6>
+ </div>
+ );
+ }
+
else if (typeof name === "undefined") {
return (
<div className="carousel_box">
@@ -35,6 +44,15 @@ function CarouselElement({name, img, link, alt}) {
);
}
+ else if (typeof link === "svg") {
+ return (
+ <div className="carousel_box" alt={alt}>
+ {svg}
+ <h6 className="carousel_title">{name}</h6>
+ </div>
+ );
+ }
+
else {
return (
<div className="carousel_box">
diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index 05188ce04cd40824969e7dd55cef41cced42eec2..a080a0b12ce85d36caad5702bf4a608274f14e64 100644
--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
@@ -6,42 +6,52 @@ const CarouselList = [
{
img: "/img/components/CarouselLibre/gitlab_logo.png",
name: "GitLab",
- alt: "logo de GitLab"
+ alt: "Pourquoi nous avons choisi Gitlab ?"
},
{
- img: "/img/components/CarouselLibre/mattermost_logo.png",
+ svg: <svg viewBox="-15 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path d="M243.747 73.364c-8.454-18.258-20.692-33.617-36.9-46.516.432 8.756 1.374 27.484 1.374 27.484s1.01 1.327 1.42 1.901c16.38 22.876 22.365 48.231 16.91 75.771-10.94 55.222-64.772 88.91-119.325 75.138-47.892-12.091-79.878-61.06-70.82-109.609 7.15-38.327 29.801-63.859 66.584-76.833l1.333-.504 1.046-.774c4.458-6.304 8.808-12.685 13.45-19.422C63.07 2.762 7.003 47.488.58 115.522c-6.216 65.832 38.17 124.541 101.596 137.424 66.096 13.425 129.017-25.57 148.031-87.976 9.508-31.206 7.283-61.924-6.46-91.606zm-157.31 41.172c2.787 26.487 25.745 44.538 52.302 41.603 26.092-2.884 45.166-28.409 40.227-54.232-3.85-20.134-8.105-40.19-12.188-60.279-1.689-8.313-3.398-16.623-5.19-25.391-.707.621-1.035.883-1.334 1.176-8.94 8.764-17.875 17.533-26.815 26.297-10.886 10.673-21.757 21.36-32.669 32.006-10.944 10.677-15.926 23.707-14.334 38.82z"/>
+ </svg>,
name: "Mattermost",
- alt: "logo de Mattermost"
+ alt: "Pourquoi nous avons choisi Mattermost ?"
},
{
img: "/img/components/CarouselLibre/docusaurus.png",
name: "Docusaurus",
- alt: "logo de Docusaurus"
+ alt: "Pourquoi nous avons choisi Docusaurus ?"
},
{
img: "/img/components/CarouselLibre/debian_logo.png",
name: "Debian",
- alt: "logo de Debian"
+ alt: "Pourquoi nous avons choisi Debian ?"
},
{
- img: "/img/components/CarouselLibre/Ansible_logo.png",
+ svg: <svg version="1.0" encoding="utf-8" viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path d="M 275.104 146.724 C 275.104 217.179 217.994 274.289 147.538 274.289 C 77.088 274.289 19.972 217.179 19.972 146.724 C 19.972 76.274 77.088 19.158 147.538 19.158 C 217.994 19.158 275.104 76.274 275.104 146.724 Z M 149.685 97.085 L 182.697 178.561 L 132.833 139.283 Z M 208.33 197.33 L 157.551 75.128 C 156.102 71.603 153.203 69.738 149.685 69.738 C 146.161 69.738 143.051 71.603 141.602 75.128 L 85.869 209.168 L 104.934 209.168 L 126.997 153.902 L 192.836 207.092 C 195.483 209.233 197.394 210.202 199.878 210.202 C 204.852 210.202 209.199 206.473 209.199 201.091 C 209.199 200.215 208.89 198.824 208.33 197.329 Z"/>
+ <path d="M 183.868 180.12 L 132.23 139.445 L 149.682 95.745 Z M 133.436 139.121 L 181.526 177.002 L 149.688 98.425 Z M 208.798 197.154 C 209.368 198.682 209.699 200.161 209.699 201.091 C 209.699 203.89 208.521 206.362 206.746 208.029 C 204.971 209.697 202.458 210.702 199.878 210.702 C 197.281 210.702 195.213 209.651 192.522 207.481 L 127.21 154.717 L 105.273 209.668 L 85.12 209.668 L 85.407 208.976 L 141.14 74.938 C 141.904 73.109 143.134 71.638 144.593 70.692 C 146.055 69.744 147.855 69.238 149.685 69.238 C 151.514 69.238 153.264 69.747 154.673 70.697 C 156.08 71.645 157.252 73.112 158.013 74.936 L 207.83 194.824 L 207.83 194.557 Z M 207.869 197.523 L 157.089 75.32 C 156.401 73.619 155.399 72.391 154.114 71.526 C 152.832 70.662 151.374 70.238 149.685 70.238 C 147.991 70.238 146.474 70.664 145.137 71.531 C 143.799 72.398 142.749 73.622 142.064 75.318 L 86.618 208.668 L 104.595 208.668 L 126.784 153.087 L 193.15 206.703 C 195.753 208.815 197.507 209.702 199.878 209.702 C 202.272 209.702 204.419 208.843 206.061 207.3 C 207.704 205.757 208.699 203.674 208.699 201.091 C 208.699 200.273 208.414 198.977 207.869 197.523 Z"/>
+ </svg>,
name: "Ansible",
- alt: "logo de Ansible"
+ alt: "Pourquoi nous avons choisi Ansible ?"
},
{
img: "/img/components/CarouselLibre/Terraform_logo.png",
name: "Terraform",
- alt: "logo de Terraform"
+ alt: "Pourquoi nous avons choisi Terraform ?"
},
{
- img: "/img/components/CarouselLibre/borg_logo.png",
+ svg: <svg version="1.0" encoding="utf-8" viewBox="0 -90 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <path id="p1" transform="matrix(1, 0, 0, 1, 20.9086, 32.2192)" d="M43.75 13.8021L26.6667 13.8021L26.6667 0L53.3854 0L67.2396 13.8021L67.2396 27.8646L60.3125 34.7917L67.2396 41.7187L67.2396 55.3125L53.3854 69.1146L26.6667 69.1146L26.6667 55.3125L43.75 55.3125L43.75 40.5729L26.6667 40.5729L26.6667 28.5417L43.75 28.5417ZM0 0L23.0208 0L23.0208 69.1146L0 69.1146Z"/>
+ <path id="p2" transform="matrix(1, 0, 0, 1, 97.679398, 46.021301)" d="M62.1354 41.5104L48.3333 55.3125L32.9167 55.3125L32.9167 42.3958L38.6458 42.3958L38.6458 13.8021L32.9167 13.8021L32.9167 0L48.3333 0L62.1354 13.8021ZM23.2813 42.3958L29.2708 42.3958L29.2708 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L29.2708 0L29.2708 13.8021L23.2813 13.8021Z"/>
+ <path id="p3" transform="matrix(1, 0, 0, 1, 170.231003, 46.021301)" d="M36.5104 13.8021L26.7187 13.8021L26.7187 7.76042L34.4271 0L48.3854 0L59.5833 12.9167L59.5833 27.2396L36.5104 27.2396ZM0 55.3125L0 7.10543e-15L23.0208 7.10543e-15L23.0208 55.3125Z"/>
+ <path id="p4" transform="matrix(1, 0, 0, 1, 236.429001, 46.021301)" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z"/>
+ </svg>,
name: "Borg",
- alt: "logo de Borg"
+ alt: "Pourquoi nous avons choisi Borg ?"
},
{
img: "/img/components/CarouselLibre/restic_logo.png",
name: "Restic",
- alt: "logo de Restic"
+ alt: "Pourquoi nous avons choisi Restic ?"
},
];
diff --git a/src/css/carousel.css b/src/css/carousel.css
index e9f4abb84cc53635f47e5b2907968a7d776e1f92..a2023f07add3f31f24ac5bc7ecbd44930785f6c2 100644
--- a/src/css/carousel.css
+++ b/src/css/carousel.css
@@ -9,15 +9,16 @@
height: 122px;
}
-.carousel_img {
+.carousel_img, .carousel_box svg {
padding: 8px;
- margin-bottom: 12px;
- max-width: 90px;
- max-height: 90px;
+ width: 90px;
+ height: 90px;
/* text-align: center; */
- justify-content: space-between;
}
+.carousel_box svg {
+ fill: var(--ifm-font-color-base);
+}
.carousel_title {
display: flex;
justify-content: center;
diff --git a/static/img/components/CarouselLibre/Ansible_logo.svg b/static/img/components/CarouselLibre/Ansible_logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3bc2acfefbe601d3c0929f22986d5aada9ae4771
--- /dev/null
+++ b/static/img/components/CarouselLibre/Ansible_logo.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+ <g fill="#1a1918" transform="matrix(1, 0, 0, 1, 0, 281.859985)"/>
+ <path d="M 275.104 146.724 C 275.104 217.179 217.994 274.289 147.538 274.289 C 77.088 274.289 19.972 217.179 19.972 146.724 C 19.972 76.274 77.088 19.158 147.538 19.158 C 217.994 19.158 275.104 76.274 275.104 146.724 Z M 149.685 97.085 L 182.697 178.561 L 132.833 139.283 Z M 208.33 197.33 L 157.551 75.128 C 156.102 71.603 153.203 69.738 149.685 69.738 C 146.161 69.738 143.051 71.603 141.602 75.128 L 85.869 209.168 L 104.934 209.168 L 126.997 153.902 L 192.836 207.092 C 195.483 209.233 197.394 210.202 199.878 210.202 C 204.852 210.202 209.199 206.473 209.199 201.091 C 209.199 200.215 208.89 198.824 208.33 197.329 Z" fill="#1a1918"/>
+ <path d="M 183.868 180.12 L 132.23 139.445 L 149.682 95.745 Z M 133.436 139.121 L 181.526 177.002 L 149.688 98.425 Z M 208.798 197.154 C 209.368 198.682 209.699 200.161 209.699 201.091 C 209.699 203.89 208.521 206.362 206.746 208.029 C 204.971 209.697 202.458 210.702 199.878 210.702 C 197.281 210.702 195.213 209.651 192.522 207.481 L 127.21 154.717 L 105.273 209.668 L 85.12 209.668 L 85.407 208.976 L 141.14 74.938 C 141.904 73.109 143.134 71.638 144.593 70.692 C 146.055 69.744 147.855 69.238 149.685 69.238 C 151.514 69.238 153.264 69.747 154.673 70.697 C 156.08 71.645 157.252 73.112 158.013 74.936 L 207.83 194.824 L 207.83 194.557 Z M 207.869 197.523 L 157.089 75.32 C 156.401 73.619 155.399 72.391 154.114 71.526 C 152.832 70.662 151.374 70.238 149.685 70.238 C 147.991 70.238 146.474 70.664 145.137 71.531 C 143.799 72.398 142.749 73.622 142.064 75.318 L 86.618 208.668 L 104.595 208.668 L 126.784 153.087 L 193.15 206.703 C 195.753 208.815 197.507 209.702 199.878 209.702 C 202.272 209.702 204.419 208.843 206.061 207.3 C 207.704 205.757 208.699 203.674 208.699 201.091 C 208.699 200.273 208.414 198.977 207.869 197.523 Z" style="fill: none;"/>
+</svg>
\ No newline at end of file
diff --git a/static/img/components/CarouselLibre/borg_logo.svg b/static/img/components/CarouselLibre/borg_logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..143f58eb0313fc6f6a244552d3576256a150e613
--- /dev/null
+++ b/static/img/components/CarouselLibre/borg_logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-17.093 -88.866 351.808 336.013" xmlns="http://www.w3.org/2000/svg">
+ <path id="p1" transform="matrix(1, 0, 0, 1, 20.9086, 32.2192)" d="M43.75 13.8021L26.6667 13.8021L26.6667 0L53.3854 0L67.2396 13.8021L67.2396 27.8646L60.3125 34.7917L67.2396 41.7187L67.2396 55.3125L53.3854 69.1146L26.6667 69.1146L26.6667 55.3125L43.75 55.3125L43.75 40.5729L26.6667 40.5729L26.6667 28.5417L43.75 28.5417ZM0 0L23.0208 0L23.0208 69.1146L0 69.1146Z" style=""/>
+ <path id="p2" transform="matrix(1, 0, 0, 1, 97.679398, 46.021301)" d="M62.1354 41.5104L48.3333 55.3125L32.9167 55.3125L32.9167 42.3958L38.6458 42.3958L38.6458 13.8021L32.9167 13.8021L32.9167 0L48.3333 0L62.1354 13.8021ZM23.2813 42.3958L29.2708 42.3958L29.2708 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L29.2708 0L29.2708 13.8021L23.2813 13.8021Z" style=""/>
+ <path id="p3" transform="matrix(1, 0, 0, 1, 170.231003, 46.021301)" d="M36.5104 13.8021L26.7187 13.8021L26.7187 7.76042L34.4271 0L48.3854 0L59.5833 12.9167L59.5833 27.2396L36.5104 27.2396ZM0 55.3125L0 7.10543e-15L23.0208 7.10543e-15L23.0208 55.3125Z" style=""/>
+ <path id="p4" transform="matrix(1, 0, 0, 1, 236.429001, 46.021301)" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z" style=""/>
+</svg>
\ No newline at end of file