diff --git a/Makefile b/Makefile index ea4baa64fe66340174f5326e9513da86dd4e3b0a..ca84b0e2c0b311b94a444addb423d141dfb20feb 100644 --- a/Makefile +++ b/Makefile @@ -102,6 +102,7 @@ esbuild: $(CSS_SOURCES) node_modules --format=esm \ --loader:.jpg=file \ --loader:.otf=file \ + --loader:.png=file \ --loader:.svg=file \ --loader:.ttf=file \ --loader:.webp=file \ diff --git a/docs/pages/index.md b/docs/pages/index.md index 79921bffa8ceae33e84485e6265cee6ce365f2e1..fcd2890a8773cb1b4ac5b4d19dc4360aa4b9ab00 100644 --- a/docs/pages/index.md +++ b/docs/pages/index.md @@ -41,6 +41,38 @@ description: > </hgroup> </div> </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__item__background"></div> + <div class="homepage-drivers__item__name"> + Swoole + </div> + <div class="homepage-drivers__item__state"> + Supported since v0.1.0 + </div> + </li> + <li class="homepage-drivers__item homepage-drivers__item--openswoole"> + <div class="homepage-drivers__item__background"></div> + <div class="homepage-drivers__item__name"> + OpenSwoole + </div> + <div class="homepage-drivers__item__state"> + Supported since v0.1.0 + </div> + </li> + <li class="homepage-drivers__item homepage-drivers__item--amphp"> + <div class="homepage-drivers__item__background"></div> + <div class="homepage-drivers__item__name"> + AMPHP + </div> + <div class="homepage-drivers__item__state"> + In progress + </div> + </li> + </ul> +</div> <div class="homepage-gallery"> <h3>New Releases</h3> <ul class="homepage-gallery__items"> diff --git a/resources/css/docs-page-homepage.css b/resources/css/docs-page-homepage.css index c6078a5bf1345469f029d1e5f9909e6605858937..3b09ca6a0e44e29db9d970055604aa534506e1d1 100644 --- a/resources/css/docs-page-homepage.css +++ b/resources/css/docs-page-homepage.css @@ -18,17 +18,12 @@ background-color: var(--color-body-background); } +.homepage-drivers, .homepage-gallery { - background-color: var(--color-block-dark-background); - color: var(--color-body-font-dark-background); - display: flex; - flex-direction: column; - height: 460px; - padding: 40px 20px; - overflow-x: scroll; - overflow-y: hidden; - row-gap: 20px; max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; + padding: 40px 20px; h3 { font-size: 2em; @@ -38,6 +33,65 @@ } } +.homepage-drivers { + background-color: white; + border-top: 1px solid var(--color-border); + display: flex; + flex-direction: column; + row-gap: 20px; +} + +.homepage-drivers__items { + align-items: center; + column-gap: 20px; + display: flex; + flex-direction: row; + list-style-type: none; +} + +.homepage-drivers__item { + border: 1px solid var(--color-border); + box-shadow: 8px 8px #00000033; + display: flex; + flex-direction: column; + padding: 20px; + row-gap: 20px; + text-align: center; +} + +.homepage-drivers__item.homepage-drivers__item--amphp { + --drivers-bg-image: url(../images/amphp.webp); +} + +.homepage-drivers__item.homepage-drivers__item--openswoole { + --drivers-bg-image: url(../images/openswoole.png); +} + +.homepage-drivers__item.homepage-drivers__item--swoole { + --drivers-bg-image: url(../images/swoole.png); +} + +.homepage-drivers__item__background { + background-image: var(--drivers-bg-image); + background-position: center; + background-repeat: no-repeat; + height: 200px; + width: 460px; +} + +.homepage-drivers__item__name { + font-weight: bold; +} + +.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); } diff --git a/resources/images/amphp.webp b/resources/images/amphp.webp new file mode 100644 index 0000000000000000000000000000000000000000..0e898a4dce67885055accb606b28e220f8164f8a Binary files /dev/null and b/resources/images/amphp.webp differ diff --git a/resources/images/openswoole.png b/resources/images/openswoole.png new file mode 100644 index 0000000000000000000000000000000000000000..594c8e16823b6032ffc52ff5a4bc5269d0a61ad4 Binary files /dev/null and b/resources/images/openswoole.png differ diff --git a/resources/images/swoole.png b/resources/images/swoole.png new file mode 100644 index 0000000000000000000000000000000000000000..49b63e35fb5a6fc0bcbf8c019775a4f1379e7f38 Binary files /dev/null and b/resources/images/swoole.png differ