mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-21 20:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

More homepage progress

Browse source
This commit is contained in:
Matthew Holt 2023-09-25 17:00:02 -06:00 • committed by Francis Lavoie
parent bc53553ee2
commit 06167bd30c
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
3 changed files with 404 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

313
new/index.html
View file

@ -33,6 +33,7 @@
<div class="action-buttons">
<a href="/download" class="button primary">Download</a>
<a href="/docs/" class="button cool">Docs<sh></sh></a>
<iframe src="https://ghbtns.com/github-btn.html?user=caddyserver&amp;repo=caddy&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px" class="github-stars" style="margin: 0 auto; align-self: center;"></iframe>
</div>
</div>
<div>
@ -72,7 +73,7 @@
<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b>
</h2>
<div class="wrapper cols">
<div class="wrapper feature cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
@ -95,81 +96,279 @@
</div>
<section>
<div class="section-header">
<h2>
The <b>most advanced</b> HTTPS server <b>in the world</b>
</h2>
</div>
<div class="wrapper cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
<div class="section-upset">
<div class="wrapper">
<h2>
The <b>most advanced</b> HTTPS server <b>in the world</b>
</h2>
</div>
</div>
<div class="wrapper">
<div class="feature cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
<div class="wrapper demobox">
<h2>Experience it</h2>
<p>
<b>Discover Caddy's automagic HTTPS features in this demo!</b>
</p>
<p>
Point any subdomain named <b><code>caddydemo</code></b> to:
</p>
<p class="demo-ips">
<code>
<span class="record-type">A</span>
<span class="demo-ip">123.123.123.123</span>
</code>
<code>
<span class="record-type">AAAA</span>
<span class="demo-ip">::f00</span>
</code>
</p>
<p>
Then <b>visit it</b> in your browser.
</p>
<p>
You'll notice how Caddy <b>provisions a certificate</b> for your domain <b>automatically.</b>
</p>
<div class="demo-help">
<div class="demobox">
<h2>Experience it</h2>
<p>
<b>Not working?</b> Make sure to use a subdomain of a registered domain, not a "sub-subdomain."
Verify you have created the public DNS records shown above with the correct values.
You may have to wait to allow time for propagation. Consult your DNS provider's documentation or support for more information.
<b>Discover Caddy's automagic HTTPS features.</b>
</p>
<p>
<b>Example subdomains that could work:</b> <code>caddydemo.example.net</code>, <code>caddydemo.example.co.uk</code>
Point any subdomain named <b><code>caddydemo</code></b> to:
</p>
<p class="demo-ips">
<code>
<span class="record-type">A</span>
<span class="demo-ip">1.2.3.4</span>
</code>
<code>
<span class="record-type">AAAA</span>
<span class="demo-ip">::f00</span>
</code>
</p>
<p>
(Caddy is capable of serving TLS for any domains and IPs. This demo is arbitrarily restricted.)
Then <b>visit it</b> in your browser.
</p>
<p>
You'll notice how Caddy <b>provisions a certificate</b> for your domain <b>automatically.</b>
</p>
<div class="demo-help">
<p>
Caddy is capable of serving TLS for any domains and IPs. This demo is intentionally restricted.
</p>
<p>
<b>Not working?</b> Make sure to use a subdomain of a registered domain, not a "sub-subdomain."
Verify you have created the public DNS records shown above with the correct values.
You may have to allow time for propagation. Consult your DNS provider's documentation or support for more information.
</p>
<p>
<b>Example subdomains that could work:</b> <code>caddydemo.example.net</code>, <code>caddydemo.example.co.uk</code>
</p>
</div>
</div>
</div>
</section>
<section class="dark-section">
<section class="diagonal down dark feature">
<div class="wrapper">
<h2>
Flexible configuration for any production environment
A truly forward-thinking reverse proxy
</h2>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</p>
<div class="cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
<h2>
Production-grade static file server
</h2>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</p>
<div class="cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
</div>
</section>
<section class="feature">
<div class="wrapper">
<h2>
Flexible configuration for all production environments
</h2>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</p>
<div class="cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
</div>
</section>
<section class="diagonal up light feature">
<div class="wrapper">
<h2>
Unparalleled extensibility
</h2>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</p>
<div class="cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
</div>
</section>
<section class="feature">
<div class="wrapper">
<h2>
The gold standard web server
</h2>
<p>
Caddy keeps your sites up when other servers let you down.
</p>
<div class="cols">
<div class="col">
<h3 class="green">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="purple">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
<div class="col">
<h3 class="blue">Dynamically provision certificates</h3>
<p>
With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
</p>
</div>
</div>
</div>
</section>
<footer>
<div class="wrapper">
<div>
<img src="/resources/images/logo-dark.svg" class="logo" alt="Caddy web server">
<p>
An awesome <a href="https://github.com/caddyserver/caddy">open source</a> project
that relies on <a href="/sponsor">sponsors</a>.
</p>
<p>
<a href="https://usefathom.com/ref/AUKNWU">Privacy-respecting analytics</a> by Fathom
</p>
<br>
<p>
&copy; {{now | date "2006"}} Stack Holdings. All rights reserved.
</p>
</div>
<div class="link-col" style="margin-left: auto;">
<div class="col-header">Project</div>
<a href="#">Features</a>
<a href="#">Download</a>
<a href="#">Documentation</a>
<a href="#">Get involved</a>
</div>
<div class="link-col">
<div class="col-header">Business services</div>
<a href="#">Support</a>
<a href="#">Development</a>
<a href="#">Training</a>
</div>
<div class="link-col">
<div class="col-header">Community</div>
<a href="https://caddy.community">Forum</a>
<a href="https://github.com/caddyserver">GitHub</a>
<a href="https://twitter.com/caddyserver">Twitter / X</a>
<a href="/research">Research</a>
</div>
<div class="link-col" style="margin-right: auto;">
<div class="col-header">Contact</div>
<a href="https://caddy.community">Sales</a>
<a href="https://github.com/caddyserver">Email</a>
</div>
</div>
</footer>
<script>
AsciinemaPlayer.create('/resources/321140.cast', $('#demo'), {

184
new/resources/css/home.css
View file

@ -1,7 +1,31 @@
body {
background-color: #123245;
background-image: none;
}
h1,
h2,
h3,
.bgtext,
.demobox {
font-family: Poppins, ui-rounded;
}
p,
h2 {
max-width: 800px;
}
h2 {
font-size: 50px;
font-weight: 600;
}
.feature h2:not(:first-child) {
margin-top: 100px;
}
.hero {
background-color: hsla(201,63%,15%,1);
background-image:
@ -94,7 +118,7 @@ body {
position: absolute;
inset: 0px;
background: conic-gradient(from var(--a), rgb(207, 19, 175) 0.42%, #ee6907 59.24%, #70d52c);
filter: blur(35px);
filter: blur(25px);
transform: translate(0px,0px);
--a: 0deg; /* needed for firefox to have a valid output ? */
@ -110,8 +134,8 @@ body {
h1 {
font-family: Poppins;
font-size: 120px;
font-weight: 800;
text-transform: uppercase;
color: #65D1C6;
line-height: .9;
@ -170,6 +194,7 @@ h1 .sub-h1 {
.asides h2 {
text-align: left;
max-width: none;
}
.asides p {
@ -294,7 +319,6 @@ div.ap-wrapper:fullscreen div.ap-player {
.sponsors-leaders h3 {
color: #EB5EDD;
font-weight: normal;
font-family: Poppins, ui-rounded;
font-size: 18px;
margin-bottom: 1em;
}
@ -309,8 +333,7 @@ div.ap-wrapper:fullscreen div.ap-player {
}
.sponsor-logos img {
width: 100%;
max-height: 2em;
height: 2em;
}
@ -324,7 +347,6 @@ div.ap-wrapper:fullscreen div.ap-player {
z-index: 0;
padding-top: 14vw;
padding-bottom: 300px;
font-family: Poppins, ui-rounded;
}
.wavy-top::before {
@ -344,9 +366,9 @@ div.ap-wrapper:fullscreen div.ap-player {
color: #86A6A3;
opacity: .5;
width: 90%;
/* min-width: 65vw; */
min-width: 65vw;
max-width: 1200px;
font-size: 15vw;
font-size: min(15vw, 300px);
text-align: center;
line-height: .85;
font-weight: 800;
@ -366,8 +388,7 @@ div.ap-wrapper:fullscreen div.ap-player {
.wavy-top h2 {
color: #003E4B;
/* font-size: 52px; */
font-size: 3vw;
font-size: min(3vw, 52px);
text-align: center;
width: 60vw;
max-width: 950px;
@ -377,37 +398,48 @@ div.ap-wrapper:fullscreen div.ap-player {
}
.wavy-top h2 b,
.section-header b {
.section-upset b {
font-weight: 800;
}
.feature p {
font-weight: 600;
margin-top: 2em;
margin-bottom: 4em;
line-height: 1.65;
}
section {
padding: 5em;
padding: 200px;
background: white;
}
.section-header {
.section-upset {
background: white;
margin-top: -250px;
max-width: 1600px;
margin: -350px auto 0;
padding: 50px 100px 0;
border-radius: 20px;
z-index: 0;
position: relative;
box-shadow: 0 -15px 20px -10px rgb(0 0 0 / .1);
box-shadow: 0 -15px 20px -2px rgb(0 0 0 / .1);
}
.section-header h2 {
.section-upset h2 {
background: linear-gradient(195deg, rgb(6, 79, 107) 25%, rgba(139, 189, 224, 1) 49%, rgb(72, 129, 164)50%, rgb(8, 44, 58) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Poppins;
font-size: 80px;
font-weight: 600;
text-align: center;
margin-bottom: 100px;
max-width: none;
}
@ -416,6 +448,11 @@ section {
flex-wrap: wrap;
justify-content:space-around;
gap: 50px;
color: #424242;
}
section.dark .cols {
color: #c1ced9;
}
.col {
@ -427,10 +464,10 @@ section {
.col h3 {
font-weight: 600;
font-size: 18px;
font-size: 20px;
border-left: 2px solid;
padding-top: .25em;
padding-bottom: .25em;
padding-top: .15em;
padding-bottom: .15em;
margin-bottom: 10px;
/* shove the border over but leave space between border and content */
@ -441,23 +478,26 @@ section {
.col p {
font-family: Inter;
font-size: 90%;
line-height: 1.6;
color: #424242;
font-weight: normal;
}
.col .green {
color: #389564;
border-color: #389564;
color: #23a460; border-color: #23a460;
}
.col .purple {
color: rgb(105, 30, 105);
border-color: rgb(105, 30, 105);
color: rgb(151, 39, 151); border-color: rgb(151, 39, 151);
}
.col .blue {
color: rgb(34, 94, 143);
border-color: rgb(34, 94, 143);
color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
}
section.dark .col .green {
color: #41e68f; border-color: #41e68f;
}
section.dark .col .purple {
color: rgb(204, 82, 204); border-color: rgb(204, 82, 204);
}
section.dark .col .blue {
color: rgb(81, 165, 234); border-color: rgb(81, 165, 234);
}
@ -468,7 +508,6 @@ section {
position: relative;
color: #003e4b;
background: radial-gradient(circle at 200px 100px, rgba(184,255,239,1) 0%, rgba(234,249,255,1) 280px);
font-family: Poppins, ui-rounded;
font-size: 20px;
padding: 50px;
border-radius: 15px;
@ -481,6 +520,7 @@ section {
font-size: 90px;
font-weight: 700;
white-space: nowrap;
max-width: none;
background: linear-gradient(0deg, rgba(27,180,186,1) 10%, rgba(0,61,75,1) 50%);
-webkit-background-clip: text;
@ -528,19 +568,89 @@ section {
}
.dark-section {
section.dark,
footer {
background-color: #002020;
color: #fff;
}
.dark-section h2 {
font-family: Poppins, ui-rounded;
font-size: 50px;
font-weight: 600;
max-width: 800px;
section.light {
background-color: #f5f8f9;
}
.diagonal {
padding: 200px 0;
margin: 25px 0;
}
.diagonal.up { transform: skewY(-5deg); }
.diagonal.up > * { transform: skewY(5deg); }
.diagonal.down { transform: skewY(5deg); }
.diagonal.down > * { transform: skewY(-5deg); }
footer {
padding: 75px 0;
font-size: 14px;
color: #7c9393;
line-height: 1.5;
}
footer p {
margin: 1em 0;
}
footer a {
color: inherit;
font-weight: bold;
transition: .25s;
}
footer a:hover {
color: #76b8b8;
}
footer .wrapper {
display: flex;
gap: 75px;
}
footer .logo {
display: block;
margin-bottom: 15px;
height: 40px;
}
footer .link-col {
font-size: initial;
line-height: 2;
}
footer .col-header {
font-size: 110%;
color: white;
font-weight: 700;
margin-bottom: .5em;
}
footer .link-col a {
display: block;
color: #b7c8c8;
font-weight: 500;
text-decoration: none;
}
footer .link-col a:hover {
color: #c8ecf5;
}
@media (max-width: 720px) {
.display {

BIN
new/resources/images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB