Continue features page...

This commit is contained in:
Matthew Holt 2023-10-03 23:14:17 -06:00 committed by Francis Lavoie
parent 57d2d9d6af
commit 2c8892e4dd
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
4 changed files with 94 additions and 7 deletions

View file

@ -24,7 +24,7 @@
<main>
<section class="diagonal up feature">
<section class="feature">
<div class="wrapper">
<div class="legend">
Features in <span class="nonstandard">this color</span> are provided by available plugins.
@ -420,6 +420,39 @@
</section>
<section class="diagonal up dark feature">
<div class="wrapper">
<h2>
Automatic HTTPS
</h2>
<p>
Our flagship feature, Caddy enables HTTPS by default and automatically procure and maintain certificates for all your sites.
</p>
<p>
TODO: Some strong marketing text
</p>
<div class="feature-list">
<div class="feature-row">
<h4>TODO...</h4>
<div class="benefits">
TODO...
</div>
<div class="detail">
TODO...
</div>
</div>
</div>
</div>
</section>
<section class="diagonal down gray feature">
<div class="wrapper">
<h2>
@ -441,6 +474,15 @@
<li>HTTP/3</li>
</ul>
</div>
<div class="feature-row">
<h4>HTTPS</h4>
<div class="benefits">
Caddy's flagship feature is enabling HTTPS automatically and by default. You can control how it works or disable aspects: HTTP redirects, certificate management, certain hostnames, etc.
</div>
<div class="detail">
Automatic
</div>
</div>
<div class="feature-row">
<h4>Listen interfaces</h4>
<div class="benefits">
@ -486,6 +528,42 @@
<li>Default for HTTP/2</li>
</ul>
</div>
<div class="feature-row">
<h4>Error handling</h4>
<div class="benefits">
Caddy gives you full control over handling errors to give you clients the best/desired experience.
</div>
<div class="detail">
Custom error routes
</div>
</div>
<div class="feature-row">
<h4>TLS termination</h4>
<div class="benefits">
Terminate TLS (formerly "SSL") with sensible defaults that you can customize to give you fine-grained control over TLS handshakes. You can assign policies to clients based on various factors such as ServerName (SNI) or remote IP.
</div>
<ul class="detail">
<li>TLS 1.2</li>
<li>TLS 1.3</li>
<li>Client authentication (TLS mutual auth)</li>
<li>Client auth modes: request, require, verify if given, require and verify</li>
<li>Cipher suites</li>
<li>Curves</li>
<li>ALPN</li>
<li>Limit protocol versions</li>
<li>Default SNI</li>
<li>Fallback SNI</li>
</ul>
</div>
<div class="feature-row">
<h4>Cross-site security</h4>
<div class="benefits">
Caddy often serves multiple sites on the same socket, so Caddy automatically enables protections to keep your sites safe if any of them have TLS client auth enabled.
</div>
<div class="detail">
Verification that TLS ServerName and HTTP Host header match
</div>
</div>
</div>
</div>
</section>

View file

@ -29,6 +29,7 @@
.dark {
--body-bg: #0d171a;
--text-color: #cbe2e4; /* #a4c0c2 */
--text-color-muted: #92b2d5;
--header-bg: rgba(44, 130, 164, 0.11);
--header-border-color: transparent;
--topbar-link-color-hover: white;

View file

@ -45,7 +45,7 @@
.feature-row {
display: grid;
grid: auto / 1fr 3fr 2fr;
grid: auto / 1fr 2fr 1fr;
gap: 2em;
padding: 2em 0;
border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
@ -88,6 +88,10 @@
/* TODO: Figure this out */
@media (max-width: 800px) {
.feature-row {
grid: repeat(3, auto) / 1fr;
grid: repeat(3,auto) / 1fr 1fr;
}
.feature-row .benefits {
grid-area: 2 / 1;
}
}

View file

@ -186,8 +186,12 @@ section {
color: #82e7ff;
}
.dark section.gray {
background-color: #1b1c1c;
}
section.gray {
section.gray,
section.light.gray {
background-color: #f5f8f9;
}
@ -295,7 +299,7 @@ h3.green {
color: #23a460; border-color: #23a460;
}
h3.purple {
color: rgb(238, 89, 238); border-color: rgb(238, 89, 238);
color: rgb(179, 80, 179); border-color: rgb(179, 80, 179);
}
h3.blue {
color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
@ -304,10 +308,10 @@ section.dark h3.green {
color: #41e68f; border-color: #41e68f;
}
section.dark h3.purple {
color: rgb(204, 82, 204); border-color: rgb(204, 82, 204);
color: rgb(238, 89, 238); border-color: rgb(238, 89, 238);
}
section.dark h3.blue {
color: rgb(81, 165, 234); border-color: rgb(81, 165, 234);
color: rgb(113, 191, 255); border-color: rgb(113, 191, 255);
}