mirror of
https://github.com/caddyserver/website.git
synced 2025-04-21 12:36:16 -04:00
Fix headings; work on features page
This commit is contained in:
parent
863fee4795
commit
199b995524
6 changed files with 102 additions and 18 deletions
|
@ -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 — 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">
|
||||
|
|
|
@ -179,7 +179,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<section class="light">
|
||||
<div class="section-upset">
|
||||
<div class="wrapper">
|
||||
<h2>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue