Fix headings; work on features page

This commit is contained in:
Matthew Holt 2023-10-01 12:57:19 -06:00 committed by Francis Lavoie
parent 863fee4795
commit 199b995524
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
6 changed files with 102 additions and 18 deletions

View file

@ -22,7 +22,7 @@
</div>
</div>
<section class="diagonal up light feature">
<section class="diagonal up feature">
<div class="wrapper">
<h2>
Overview
@ -36,17 +36,56 @@
<h3 class="green">High-level technical specifications</h3>
<div class="cols">
<div class="col">
<div class="feature-list">
<div class="feature-row">
<h4>Language</h4>
<div class="benefits">
The language choice is crucial for a web server. Most servers (NGINX, Apache, HAProxy, etc.) and their dependencies are written in C, which are vulnerable to catastrophic memory safety bugs like Heartbleed. Go programs like Caddy are impervious to a whole class of security vulnerabilities.
</div>
<div class="col">
The language choice is crucial for a web server. Most servers (NGINX, Apache, HAProxy, etc.) are written in C, which are vulnerable to catastrophic memory safety bugs.
</div>
<div class="col">
<div class="detail">
Go
</div>
</div>
<div class="feature-row">
<h4>Build artifacts</h4>
<div class="benefits">
Caddy compiles directly to native CPU instructions. There is no interpreter required; and many instructions are architecture-optimized.
</div>
<div class="detail">
Platform-native static binary
</div>
</div>
<div class="feature-row">
<h4>Runtime dependencies</h4>
<div class="benefits">
Caddy is statically compiled. Dynamically-linked applications can easily break in production and may be less secure as shared executable resources are loaded from various places around the system. Generally, Caddy binaries do not necessarily require external libraries &mdash; not even libc.
</div>
<div class="detail">
None
</div>
</div>
<div class="feature-row">
<h4>Compile time</h4>
<div class="benefits">
On consumer hardware, standard Caddy builds compile in just a few seconds. This is crucial for rapid iteration, plugin development, and low-cost deployments.
</div>
<div class="detail">
5 seconds
</div>
</div>
<div class="feature-row">
<h4>Deployment environments</h4>
<div class="benefits">
Caddy can go practically anywhere and be deployed a variety of ways.
</div>
<ul class="detail">
<li>System service</li>
<li>Command line interface</li>
<li>Containers</li>
<li>Kubernetes</li>
</ul>
</div>
</div>
<!-- <div class="datagrid">
<div class="datagrid-item">

View file

@ -179,7 +179,7 @@
</div>
</div>
<section>
<section class="light">
<div class="section-upset">
<div class="wrapper">
<h2>

View file

@ -18,3 +18,45 @@
margin-bottom: .5em;
min-width: 200px;
}
.feature-list {
font-size: 90%;
margin-top: 50px;
}
.feature-row {
display: grid;
grid: auto / 1fr 3fr 2fr;
gap: 2em;
padding: 2em 0;
border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
}
.feature-row .benefits {
color: var(--text-color-muted);
font-weight: 500;
}
.feature-row .detail {
font-weight: 500;
}
.feature-row ul.detail {
margin-left: 1em;
}
.feature-row ul li {
margin-bottom: .5em;
}
.feature-row:last-child {
border-bottom: none;
}
/* TODO: Figure this out */
@media (max-width: 800px) {
.feature-row {
grid: repeat(3, auto) / 1fr;
}
}

View file

@ -1,7 +1,3 @@
h1 {
-webkit-text-fill-color: inherit;
}
.bgtext,
.demobox {
font-family: Poppins, ui-rounded;
@ -22,6 +18,11 @@ h1 {
text-align: left;
text-transform: uppercase;
margin-bottom: 0;
background-image: unset;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: unset;
}
h1 .color-dodge {
@ -33,7 +34,6 @@ h1 .the {
line-height: 1;
}
h1 .subheading {
margin-top: .75em;
}

View file

@ -18,7 +18,7 @@ h1 {
line-height: .9;
margin-bottom: 1em;
background: linear-gradient(to right, #47E27C 25%, #4ED3FB 75%);
background-image: linear-gradient(to right, #47E27C 25%, #4ED3FB 75%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@ -28,12 +28,15 @@ h1 .subheading {
margin: 2em auto 0;
margin-top: 2em;
text-transform: none;
color: #b1fffe;
font-size: 42px;
font-weight: normal;
line-height: 1.3;
font-family: Figtree;
max-width: 850px;
--subheading-color: #b1fffe;
color: var(--subheading-color);
-webkit-text-fill-color: var(--subheading-color);
}
h1 .subheading b {
@ -55,7 +58,7 @@ h2 {
}
.feature h2:not(:first-child) {
margin-top: 150px;
margin-top: 175px;
}
@ -168,7 +171,7 @@ h2 {
section {
padding: 200px 0;
background: white;
background: var(--body-bg);
color: var(--text-color);
}

View file

@ -407,7 +407,7 @@
</div>
<div class="plan-content">
<p>
The ultimate plan to support extensive use of Caddy and keep your business online and profitable.
The ultimate plan to support the Caddy project, and the ONLY one that does not rely on other sponsors.
</p>
<p>
⚠️ Only <strong>1</strong> available.