From d06a683a62f626b28a92849cdb034be69135a35e Mon Sep 17 00:00:00 2001
From: Mateusz Charytoniuk <mateusz.charytoniuk@protonmail.com>
Date: Tue, 9 Jul 2024 15:23:25 +0200
Subject: [PATCH] fix: homepage tiles
---
docs/pages/index.md | 43 +++++++++++++++-------------
resources/css/docs-page-homepage.css | 20 +++++++++++--
2 files changed, 41 insertions(+), 22 deletions(-)
diff --git a/docs/pages/index.md b/docs/pages/index.md
index c075a63c..50b5d134 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -46,47 +46,50 @@ description: >
<div class="homepage-gallery homepage-gallery--reasons">
<h3>Why Resonance?</h3>
<ul class="homepage-gallery__grid">
- <li class="homepage-gallery__item">
+ <li class="homepage-gallery__grid-item">
<h4>
- <a href="/docs/features/">
- Predictable Performance
- </a>
+ Predictable Performance
</h4>
<p>
- Resonance is designed with a few priorities: no memory leaks, blocking operations, and garbage collector surprises.<br><br>
+ Resonance is designed with a few priorities: no memory leaks, blocking operations, and garbage collector surprises.
+ </p>
+ <p>
Most of the internals are read-only and stateless. After the application startup, nothing disturbs JIT and opcode (Reflection is only used during the application startup), so there are no surprise slowdowns during runtime.
</p>
+ <p>
+ Dependency Injection container is designed to prevent any cyclical dependencies between services.
+ </p>
</li>
- <li class="homepage-gallery__item">
+ <li class="homepage-gallery__grid-item">
<h4>
- <a href="/docs/features/">
- Opinionated
- </a>
+ Opinionated
</h4>
<p>
- All the libraries under the hood have been thoroughly tested to ensure they work together correctly, complement each other, and work perfectly under async environments.<br><br>
+ All the libraries under the hood have been thoroughly tested to ensure they work together correctly, complement each other, and work perfectly under async environments.
+ </p>
+ <p>
For example, Resonance implements custom <a href="https://www.doctrine-project.org/">Doctrine</a> drivers, so it uses Swoole's connection pools.
</p>
</li>
- <li class="homepage-gallery__item">
+ <li class="homepage-gallery__grid-item">
<h4>
- <a href="/docs/features/">
- Resolves Input/Output Issues
- </a>
+ Resolves Input/Output Issues
</h4>
<p>
- Resonance is designed to handle IO-intensive tasks, such as serving Machine Learning models, handling WebSocket connections, and processing long-running HTTP requests.<br><br>
+ Resonance is designed to handle IO-intensive tasks, such as serving Machine Learning models, handling WebSocket connections, and processing long-running HTTP requests.
+ </p>
+ <p>
It views modern applications as a mix of services that communicate with each other asynchronously, including AI completions and ML inferences, so it provides a set of tools to make this communication as easy as possible.
</p>
</li>
- <li class="homepage-gallery__item">
+ <li class="homepage-gallery__grid-item">
<h4>
- <a href="/docs/features/">
- Complete Package
- </a>
+ Complete Package
</h4>
<p>
- Resonance includes everything you need to build a modern web application, from the HTTP server to the AI capabilities.<br><br>
+ Resonance includes everything you need to build a modern web application, from the HTTP server to the AI capabilities.
+ </p>
+ <p>
It provides security features, HTML templating, integration with open-source LLMs, and provides capability to serve ML models.
</p>
</li>
diff --git a/resources/css/docs-page-homepage.css b/resources/css/docs-page-homepage.css
index e129bb9e..e51d939a 100644
--- a/resources/css/docs-page-homepage.css
+++ b/resources/css/docs-page-homepage.css
@@ -62,15 +62,31 @@
}
.homepage-gallery__grid {
+ gap: 40px;
display: grid;
- gap: 20px;
+ list-style-type: none;
@media screen and (max-width: 1023px) {
grid-template-columns: 1fr;
}
- @media screen and (min-width: 1024px) {
+ @media screen and (min-width: 1024px) and (max-width: 1479px) {
grid-template-columns: repeat(2, 1fr);
}
+ @media screen and (min-width: 1480px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.homepage-gallery__grid-item {
+ border: 1px solid var(--color-border);
+ display: flex;
+ flex-direction: column;
+ padding: 40px 20px;
+ row-gap: 20px;
+
+ h4 {
+ font-weight: bold;
+ }
}
.homepage-gallery__items {
--
GitLab