diff --git a/new/index.html b/new/index.html index 5584ff7..c26b652 100644 --- a/new/index.html +++ b/new/index.html @@ -35,7 +35,7 @@
Download Docs - +
@@ -74,7 +74,7 @@ Tailscale - Les-Tilleuls + Les-Tilleuls Framer @@ -222,7 +222,7 @@

Experience it

- Discover Caddy's automagic HTTPS features. + Discover Caddy's automagic HTTPS features with our hosted demo.

Point any subdomain named caddydemo to: @@ -230,11 +230,11 @@

A - 1.2.3.4 + 138.68.4.62 AAAA - ::f00 + 2604:a880:2:d0::9dd:9001

@@ -245,9 +245,10 @@

- Not working? 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. + Not working? Make sure to use a direct subdomain of a registered domain, not a "sub-subdomain." + Verify you have created the public DNS records shown above with the correct addresses. + You may have to allow time for propagation. Consult your DNS provider's documentation or support for assistance. + Your client must set the TLS ServerName indication (most do).

Example subdomains that could work: caddydemo.example.net, caddydemo.example.co.uk @@ -336,6 +337,11 @@

+
+ Download + Docs +
+
@@ -394,13 +400,13 @@
"With its extensible architecture and on-line config API, Caddy powers many of Stripe's internal systems."
-
+
@@ -588,7 +594,7 @@ $ curl localhost:2019/config/ | jq

Unlimited power

- Nearly every part of the config that "does something" is pluggable. Caddy offers so much in such a lean package. + Nearly every part of the config that "does something" is pluggable. Caddy offers unlimited capabilities in such a lean package.

diff --git a/new/on-demand-tls.html b/new/on-demand-tls.html new file mode 100644 index 0000000..305b69c --- /dev/null +++ b/new/on-demand-tls.html @@ -0,0 +1,149 @@ + + + + Caddy is the best web server for HTTPS + {{include "/includes/head.html"}} + + + + + +
+ {{include "/includes/header.html" "dark-header"}} + +
+
+

+ You just got served +
+ ... a dynamically-provisioned TLS certificate by Caddy! +
+

+
+
+
+ +
+ +
+
+

+ What happened? +

+

+ Caddy automatically obtained a certificate for your domain, {{.Req.Host}}, without any change to the server's configuration. We call this technology On-Demand TLS, and it's an exclusive feature of Caddy. +

+

+ With On-Demand TLS, no config changes are required to serve more domains over HTTPS. This is perfect for servers hosting content or APIs for customer-owned domains because your HTTPS deployment scales as tall and wide as your business does. +

+

+ Caddy's technology is the secret sauce of many SaaS products that offer custom domains. It generates hundreds of thousands of dollars in revenue every year while saving businesses tens of thousands of dollars in development and maintenance costs. +

+

+ Fun fact: this feature earned standing ovations at more than one tech demo back in 2015 and 2016 when it was first introduced. +

+
+
+ +
+
+

+ Easy, self-hosted HTTPS for customer domains +

+

+ Use On-Demand TLS to grow your custom-domain SaaS business in a matter of minutes. A minimal config looks like this: +

+ +
+
+
+

1. Prevent abuse

+

+ First, you'll configure an internal endpoint that Caddy can "ask" if a certificate should be allowed for a domain. This endpoint usually looks up the domain in a list or database and returns HTTP 200 if it's allowed. +

+
+
+

2. Enable On-Demand TLS

+

+ To finish, enable On-Demand TLS for a catch-all site. +

+
+
+
+
+ { + on_demand_tls { + ask http://localhost:9123/check + } +} + +https:// { + tls { + on_demand + } + # reverse_proxy, etc... +} + +# other sites... + +
+
+
+ +

+ Actual production configs typically have more, but this is the minimal configuration needed to serve domain names that aren't in your control. All that's left is for the domain owner to set their DNS records (described below). +

+ +
+
+ + +
+
+

+ Brilliant customer experience +

+

+ For domain owners, the flow is even simpler: set DNS records. The first visit to their site will provision a TLS certificate. Works like magic! +

+ +
+
+
+

1. Point DNS records

+

+ The owner of the domain sets A and/or AAAA records to point to your Caddy instance. +

+
+ +
+
+
+ # Examples shown. In real life, users +# point domains to your IP address. + +A -> 203.0.113.42 + +AAAA -> 2001:db8:900d:1337 + +
+
+
+ +

+ There is no step 2. Caddy will obtain and serve a certificate for their domain as soon as a connection is made to it. Caddy keeps the certificates renewed as long as connections keep coming in. Once they stop, Caddy will let the certificate expire and then delete it automatically. +

+
+
+ +
+ + + {{include "/includes/footer.html"}} + + \ No newline at end of file diff --git a/new/resources/css/common.css b/new/resources/css/common.css index 2443a63..32cba30 100644 --- a/new/resources/css/common.css +++ b/new/resources/css/common.css @@ -286,6 +286,7 @@ button.primary, color: #222; font-weight: bold; border: none; + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); } button.primary:hover, @@ -420,8 +421,8 @@ button.primary .hover-splash, font-family: Poppins, ui-rounded; font-weight: 600; color: var(--dropdown-link-title-color); - font-size: 18px; - margin-bottom: 5px; + font-size: 20px; + margin-bottom: 14px; } .dropdown .col { diff --git a/new/resources/css/home.css b/new/resources/css/home.css index 959ceaf..02952dd 100644 --- a/new/resources/css/home.css +++ b/new/resources/css/home.css @@ -30,7 +30,7 @@ h1 .color-dodge { } h1 .the { - font-size: 75px; + font-size: 60%; line-height: 1; } @@ -40,7 +40,6 @@ h1 .subheading { - .asides { display: flex; flex-wrap: wrap; @@ -513,36 +512,30 @@ img.cite { +.franken { + background-color: #b3d133; + color: #390075; +} + @media (max-width: 1350px) { + h1 { + font-size: 95px; + } + + h1 .subheading { + font-size: 30px; + } +} + + +@media (max-width: 1000px) { h1 { text-align: center; } - .asides { - flex-direction: column; - } - .action-buttons { margin-bottom: 55px; - } -} - - - - -@media (max-width: 720px) { - .display { - margin-top: 50px; - margin-bottom: 50px; - } - .display.right > * { - transform: none; - } - .display.left > * { - transform: none; - } - .asides > * { - margin-right: 0; + justify-content: center; } } diff --git a/new/resources/css/marketing.css b/new/resources/css/marketing.css index 30485fe..ebccfcf 100644 --- a/new/resources/css/marketing.css +++ b/new/resources/css/marketing.css @@ -326,6 +326,197 @@ section.dark h3.blue { section.dark h3.yellow { color: #ffcb50; border-color: #ffcb50; } + + + + + + +.asides { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 100px auto 150px auto; + align-items: center; +} + +.hero-content .asides { + margin-top: 0; + margin-bottom: 75px; +} + +.asides.top { + align-items: stretch; +} + +.asides > * { + flex: 1; + margin-right: 50px; + min-width: 0; /* kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */ + min-width: 300px; + width: 100%; +} + +.asides > :last-child { + margin-right: 0; +} + +.asides-40-60 > :first-child { max-width: 40%; } +.asides-40-60 > :last-child { max-width: 60%; } +.asides-60-40 > :first-child { max-width: 60%; } +.asides-60-40 > :last-child { max-width: 40%; } + +.asides h2 { + text-align: left; + max-width: none; +} + +.asides p { + margin-left: 0; + margin-right: 0; +} + +.action-buttons { + display: flex; + gap: 1.5em; + margin-top: 55px; + align-items: center; +} + + + + +.caption { + margin-top: 10px; + font-size: 14px; + text-align: center; +} + +.hero-content .caption { + color: #fff; +} + +#video-demo { + display: block; + margin-bottom: 2em; +} + +div.ap-wrapper div.ap-player { + box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25); + border-radius: 10px; +} + +div.ap-wrapper:fullscreen div.ap-player { + transform: none; +} + +.ap-player pre.ap-terminal { + border-color: transparent; + background-color: transparent; +} + +.display { + perspective: 1500px; +} + +.display code { + border-radius: 10px; + width: 100%; +} + +.display code { + max-width: 800px; + font-size: 110%; + display: block; + position: relative; + padding: 20px 40px; + white-space: pre; + font-weight: bold; + overflow-x: auto; + box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1); +} +.display.left code { + box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.1); +} + +.display.right > * { + transform: rotateY(-25deg); +} +.display.left > * { + transform: rotateY(25deg); +} + +.display code.light { + background: #fff linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(241,241,241,0.5) 46%,rgba(225,225,225,0.5) 46.25%,rgba(246,246,246,0) 100%); + color: #222; +} + +.display code.dark, +.ap-player { + /* background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%); */ + background: rgb(0 0 0 / .7) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 100%); + color: #fff; +} + +.light .display code.dark { + background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%); +} + +.display .comment { + color: gray; +} + +.blinking { + animation: blinking 1s infinite; + background-color: #fff; + width: .5em; + height: 1.2em; + position: relative; + top: 5px; + display: inline-block; +} + +@keyframes blinking { + 0% { background-color: #fff; } + 45% { background-color: #fff; } + 60% { background-color: transparent; } + 99% { background-color: transparent; } + 100% { background-color: #fff; } +} + + +.rollover-green, +.rollover-purple, +.rollover-blue, +.rollover-yellow { + transition: background-color 250ms; +} + +.rollover-green.show { background-color: #41e68fc7; } +.rollover-purple.show { background-color: #a52fa59d; } +.rollover-blue.show { background-color: #0a62aaa3; } +.rollover-yellow.show { background-color: #ffcb50; } + + + + + + + + + + + + + + + + + + + + + @@ -440,3 +631,36 @@ section.dark h3.yellow { .sponsorship-primer p:last-child { margin-bottom: 0; } + +@media (min-width: 1001px) { + .hero-content .display { + transform: scale(1.1); + position: relative; + left: -7%; + } + + /* div.ap-wrapper div.ap-player { + + } */ +} + +@media (max-width: 1000px) { + .asides { + flex-direction: column; + } + + .asides > * { + margin-right: 0; + } + + .display { + margin-top: 50px; + margin-bottom: 50px; + } + .display.right > * { + transform: none; + } + .display.left > * { + transform: none; + } +} \ No newline at end of file diff --git a/new/resources/css/on-demand.css b/new/resources/css/on-demand.css new file mode 100644 index 0000000..4308156 --- /dev/null +++ b/new/resources/css/on-demand.css @@ -0,0 +1,4 @@ +.hero-content { + margin-bottom: 0; + padding-bottom: 50px; +} diff --git a/new/resources/js/common.js b/new/resources/js/common.js index 0f39b8d..96d7278 100644 --- a/new/resources/js/common.js +++ b/new/resources/js/common.js @@ -185,6 +185,17 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => { }); +// mouseover highlights for feature sections that explain config +on('mouseover', '.rollover', e => { + const target = e.target.closest('.rollover') || e.target; + $$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show')); +}); +on('mouseout', '.rollover', e => { + const target = e.target.closest('.rollover') || e.target; + $$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show')); +}); + + // immediately set the configured theme to avoid flash setTheme(getTheme()); diff --git a/src/resources/css/home.css b/src/resources/css/home.css index 2de3ae0..c66165a 100644 --- a/src/resources/css/home.css +++ b/src/resources/css/home.css @@ -138,10 +138,6 @@ code.rest { text-align: center; } -iframe.github-stars { - vertical-align: middle; -} - @media (max-width: 1100px) { .side-by-side,