diff --git a/docs/pages/index.md b/docs/pages/index.md
index fcd2890a8773cb1b4ac5b4d19dc4360aa4b9ab00..c47ca282bfb678f2ea1929109962a458cfa59ec6 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -43,8 +43,13 @@ description: >
</div>
<div class="homepage-drivers">
<h3>Backend Drivers Support</h3>
- <ul class="homepage-drivers__items">
- <li class="homepage-drivers__item homepage-drivers__item--swoole">
+ <div class="homepage-drivers__items">
+ <a
+ class="homepage-drivers__item homepage-drivers__item--swoole"
+ href="https://swoole.com/"
+ rel=â€noopener noreferrerâ€
+ target="_blank"
+ >
<div class="homepage-drivers__item__background"></div>
<div class="homepage-drivers__item__name">
Swoole
@@ -52,8 +57,13 @@ description: >
<div class="homepage-drivers__item__state">
Supported since v0.1.0
</div>
- </li>
- <li class="homepage-drivers__item homepage-drivers__item--openswoole">
+ </a>
+ <a
+ class="homepage-drivers__item homepage-drivers__item--openswoole"
+ href="https://openswoole.com/"
+ rel=â€noopener noreferrerâ€
+ target="_blank"
+ >
<div class="homepage-drivers__item__background"></div>
<div class="homepage-drivers__item__name">
OpenSwoole
@@ -61,8 +71,13 @@ description: >
<div class="homepage-drivers__item__state">
Supported since v0.1.0
</div>
- </li>
- <li class="homepage-drivers__item homepage-drivers__item--amphp">
+ </a>
+ <a
+ class="homepage-drivers__item homepage-drivers__item--amphp"
+ href="https://amphp.org/"
+ rel=â€noopener noreferrerâ€
+ target="_blank"
+ >
<div class="homepage-drivers__item__background"></div>
<div class="homepage-drivers__item__name">
AMPHP
@@ -70,8 +85,21 @@ description: >
<div class="homepage-drivers__item__state">
In progress
</div>
- </li>
- </ul>
+ </a>
+ <a
+ class="homepage-drivers__item homepage-drivers__item--other"
+ href="https://github.com/distantmagic/resonance/discussions"
+ target="_blank"
+ >
+ <div class="homepage-drivers__item__background"></div>
+ <div class="homepage-drivers__item__name">
+ Do you have a driver in mind?
+ </div>
+ <div class="homepage-drivers__item__state">
+ Start a discussion
+ </div>
+ </a>
+ </div>
</div>
<div class="homepage-gallery">
<h3>New Releases</h3>
diff --git a/resources/css/docs-page-homepage.css b/resources/css/docs-page-homepage.css
index ce2e3bc0ad9ee319658b0424caf1d411d34acaec..147fdc942a6df5b03d04d5923a3a1c83e3e7a0ab 100644
--- a/resources/css/docs-page-homepage.css
+++ b/resources/css/docs-page-homepage.css
@@ -20,6 +20,8 @@
.homepage-drivers,
.homepage-gallery {
+ background-color: var(--color-block-dark-background);
+ color: var(--color-body-font-dark-background);
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
@@ -31,10 +33,13 @@
position: sticky;
left: 20px;
}
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--color-body-background);
+ }
}
.homepage-drivers {
- background-color: white;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
@@ -50,13 +55,15 @@
}
.homepage-drivers__item {
+ background-color: white;
border: 1px solid var(--color-border);
- box-shadow: 8px 8px #00000033;
+ color: var(--color-body-font);
display: flex;
flex-direction: column;
- padding: 20px;
+ padding: 40px 20px 20px 20px;
row-gap: 20px;
text-align: center;
+ text-decoration: none;
}
.homepage-drivers__item.homepage-drivers__item--amphp {
@@ -67,6 +74,10 @@
--drivers-bg-image: url(../images/openswoole.png);
}
+.homepage-drivers__item.homepage-drivers__item--other {
+ --drivers-bg-image: url(../icons/plug-circle-plus-000000.svg);
+}
+
.homepage-drivers__item.homepage-drivers__item--swoole {
--drivers-bg-image: url(../images/swoole.png);
}
@@ -75,7 +86,7 @@
background-image: var(--drivers-bg-image);
background-position: center;
background-repeat: no-repeat;
- height: 170px;
+ height: 140px;
width: 460px;
}
@@ -83,19 +94,17 @@
font-weight: bold;
}
+.homepage-drivers__item__state {
+ font-size: var(--font-size-smaller);
+}
+
.homepage-gallery {
- background-color: var(--color-block-dark-background);
- color: var(--color-body-font-dark-background);
display: flex;
flex-direction: column;
height: 460px;
row-gap: 20px;
}
-.homepage-gallery::-webkit-scrollbar-thumb {
- background-color: var(--color-body-background);
-}
-
.homepage-gallery__items {
column-gap: 20px;
display: flex;
diff --git a/resources/icons/plug-circle-plus-000000.svg b/resources/icons/plug-circle-plus-000000.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d1117e90fcf4ce2c459ff220acca9e9d4c4d8719
--- /dev/null
+++ b/resources/icons/plug-circle-plus-000000.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 0C78.3 0 64 14.3 64 32v96h64V32c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32v96h64V32c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32v32c0 77.4 55 142 128 156.8V480c0 17.7 14.3 32 32 32s32-14.3 32-32V412.8c12.3-2.5 24.1-6.4 35.1-11.5c-2.1-10.8-3.1-21.9-3.1-33.3c0-80.3 53.8-148 127.3-169.2c.5-2.2 .7-4.5 .7-6.8c0-17.7-14.3-32-32-32H32zM432 512a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm16-208v48h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V384H368c-8.8 0-16-7.2-16-16s7.2-16 16-16h48V304c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>