mirror of
https://github.com/caddyserver/website.git
synced 2025-04-21 20:46:15 -04:00
Add recorded demo for homepage
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
c080ee782e
commit
7878fe21d0
12 changed files with 1395 additions and 468 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>All features of the Caddy Web Server</title>
|
||||
{{import "/includes/head.html"}}
|
||||
{{template "head"}}
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="/resources/css/marketing.css{{template "cacheBust"}}">
|
||||
<link rel="stylesheet" href="/resources/css/features.css{{template "cacheBust"}}">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -9,52 +9,43 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- <link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin /> -->
|
||||
|
||||
<link rel="icon" href="/resources/images/favicon.png">
|
||||
<link rel="icon" href="/resources/images/favicon.png{{template "cacheBust"}}">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400;600;800&family=Figtree:wght@300..900&&family=JetBrains+Mono:wght@400;600&family=Inter:wght@400;500;600&family=Maven+Pro:wght@400;700&family=Poppins:wght@400;600;700;800&family=Albert+Sans:wght@400;600&family=Red+Hat+Text&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400..800&family=Figtree:wght@300..900&&family=JetBrains+Mono:wght@400..600&family=Inter:wght@400..600&family=Poppins:wght@400..800&family=Albert+Sans:wght@400..600&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/resources/css/common.css">
|
||||
<link rel="stylesheet" href="/resources/css/chroma.css">
|
||||
<link rel="stylesheet" href="/resources/css/common.css{{template "cacheBust"}}">
|
||||
<link rel="stylesheet" href="/resources/css/chroma.css{{template "cacheBust"}}">
|
||||
|
||||
<script src="/resources/js/lib.js"></script>
|
||||
<script src="/resources/js/common.js"></script>
|
||||
<script src="/resources/js/lib.js{{template "cacheBust"}}"></script>
|
||||
<script src="/resources/js/common.js{{template "cacheBust"}}"></script>
|
||||
|
||||
<!-- General metatags -->
|
||||
<!-- <meta name="author" content="Caddy Web Server">
|
||||
<meta name="author" content="Caddy Web Server">
|
||||
<meta name="description" content="Caddy is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go">
|
||||
<meta name="theme-color" content="#5ea9a2"> -->
|
||||
<meta name="theme-color" content="#1b3143">
|
||||
|
||||
<!-- Open Graph tags -->
|
||||
<!-- <meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://caddyserver.com/">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://{{.Req.Host}}/">
|
||||
<meta property="og:description" content="Caddy is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go">
|
||||
<meta property="og:image" content="https://caddyserver.com/resources/images/caddy-open-graph.jpg"> -->
|
||||
<meta property="og:image" content="https://{{.Req.Host}}/resources/images/open-graph-square.png">
|
||||
|
||||
<!-- Twitter card tags additive with the og: tags -->
|
||||
<!-- <meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:domain" value="caddyserver.com">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:domain" value="{{.Req.Host}}">
|
||||
<meta name="twitter:site" value="@caddyserver">
|
||||
<meta name="twitter:description" value="Caddy is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go">
|
||||
<meta name="twitter:image" content="https://caddyserver.com/resources/images/caddy-open-graph.jpg">
|
||||
<meta name="twitter:url" value="https://caddyserver.com/"> -->
|
||||
|
||||
<!-- Algolia DocSearch -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> -->
|
||||
<meta name="twitter:image" content="https://{{.Req.Host}}/resources/images/open-graph-square.png{{template "cacheBust"}}">
|
||||
<meta name="twitter:url" value="https://{{.Req.Host}}{{.OriginalReq.URL}}">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics (ZeroSSL) -->
|
||||
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-2DLB04LK4P"></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2DLB04LK4P"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-2DLB04LK4P');
|
||||
</script> -->
|
||||
|
||||
<!-- Alpine.js to augment markdown docs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
|
||||
</script>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Caddy - The Ultimate Server with Automatic HTTPS</title>
|
||||
{{import "/includes/head.html"}}
|
||||
{{template "head"}}
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="/resources/css/vendor/asciinema-player-3.6.1.css{{template "cacheBust"}}">
|
||||
<script src="/resources/js/vendor/asciinema-player-3.6.1.min.js{{template "cacheBust"}}"></script>
|
||||
<script src="/resources/js/home.js{{template "cacheBust"}}"></script>
|
||||
|
|
@ -705,7 +705,7 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
|
|||
</template>
|
||||
|
||||
<script>
|
||||
AsciinemaPlayer.create('/resources/321140.cast', $_('#video-demo'), {
|
||||
AsciinemaPlayer.create('/resources/demo.cast', $_('#video-demo'), {
|
||||
preload: true,
|
||||
autoPlay: true,
|
||||
controls: true
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
h1 {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panels > * {
|
||||
flex: 1;
|
||||
margin: 0 50px;
|
||||
}
|
||||
|
||||
.panels > :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.panels {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.panels > * {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,391 +0,0 @@
|
|||
body {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
#v2logo {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 100px auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 150px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
font-size: 16px;
|
||||
line-height: 175%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 1.5em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Montserrat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
margin: 0 auto 50px;
|
||||
max-width: 650px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: 48px Inter;
|
||||
max-width: 1000px;
|
||||
text-align: center;
|
||||
margin: 0 auto 80px;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 22px;
|
||||
font-family: Montserrat;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
max-width: 800px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p + h3 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.lead h3 {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.lead p {
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: #fff;
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
.button.purple { background-color: #3a43be; /* #7615d7 */ }
|
||||
.button.cyan { background-color: #00a8dd; }
|
||||
.button.green { background-color: #00a80d; }
|
||||
|
||||
|
||||
code {
|
||||
background: #e7e7e7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.smallstep {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.action .button {
|
||||
padding: 15px 45px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.asides {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 75px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.asides > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.asides h2 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.asides p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.thanks {
|
||||
width: 90%;
|
||||
max-width: 750px;
|
||||
padding: 2em;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
animation: colorchange 20s infinite;
|
||||
font-size: 16px;
|
||||
border: 20px solid;
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
@keyframes colorchange {
|
||||
from, to { border-color: #fd9898; }
|
||||
10% { border-color: #fdb998; }
|
||||
20% { border-color: #fdda98; }
|
||||
30% { border-color: #fdf298; }
|
||||
40% { border-color: #a0fd98; }
|
||||
50% { border-color: #98fdef; }
|
||||
60% { border-color: #98bbfd; }
|
||||
70% { border-color: #a098fd; }
|
||||
80% { border-color: #f598fd; }
|
||||
90% { border-color: #fd98be; }
|
||||
}
|
||||
|
||||
.thanks h2 {
|
||||
font-family: 'Dancing Script';
|
||||
font-size: 52px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.thanks .to {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thanks .to a {
|
||||
margin: 10px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.thanks .to a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.thanks .to img {
|
||||
width: 150px;
|
||||
max-height: 60px;
|
||||
/* width: 150px; */
|
||||
/* max-width: 150px; */
|
||||
}
|
||||
|
||||
.thanks .to .sponsors {
|
||||
font-size: 125%;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thanks hr {
|
||||
max-width: 120px;
|
||||
border: none;
|
||||
border-top: 3px solid #dbdbdb;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.thanks p {
|
||||
line-height: 140%;
|
||||
max-width: none;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
margin-left: -1px;
|
||||
margin-bottom: -1px;
|
||||
flex-grow: 1;
|
||||
border: 1px solid #aaa;
|
||||
min-width: 33.3333%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grid > div b {
|
||||
font-weight: 300;
|
||||
font-family: Montserrat;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 6px;
|
||||
display: block;
|
||||
font-size: 140%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.caption {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
asciinema-player {
|
||||
display: block;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.asciinema-player-wrapper .asciinema-player {
|
||||
box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(1.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.asciinema-terminal {
|
||||
border: none;
|
||||
padding: 10px;
|
||||
padding-bottom: 35px; /* for when the control bar is visible */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.display {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
|
||||
.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.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.5%,rgba(246,246,246,0) 100%);
|
||||
}
|
||||
|
||||
.display code.dark,
|
||||
.asciinema-terminal {
|
||||
background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.5) 46%,rgba(45, 45, 45, 0.5) 46.5%,rgba(0, 0, 0, 0) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.diagonal {
|
||||
padding: 200px 0;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.diagonal.up { transform: skewY(-5deg); }
|
||||
.diagonal.up > * { transform: skewY(5deg); }
|
||||
|
||||
.diagonal.down { transform: skewY(5deg); }
|
||||
.diagonal.down > * { transform: skewY(-5deg); }
|
||||
|
||||
section.gray {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.display {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.display.right > * {
|
||||
transform: none;
|
||||
}
|
||||
.display.left > * {
|
||||
transform: none;
|
||||
}
|
||||
.asides > * {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Caddy is the best web server for HTTPS</title>
|
||||
{{import "/includes/head.html"}}
|
||||
{{template "head"}}
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="/resources/css/marketing.css">
|
||||
<link rel="stylesheet" href="/resources/css/on-demand.css">
|
||||
<link rel="canonical" href="https://caddyserver.com/on-demand-tls">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--monospace-fonts: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
:root,
|
||||
.light {
|
||||
--body-bg: white;
|
||||
|
|
@ -97,7 +101,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, Figtree, Gantari, 'Albert Sans', Inter, system-ui;
|
||||
font-family: Inter, system-ui;
|
||||
font-size: 18px;
|
||||
/* -webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; */
|
||||
|
|
@ -132,7 +136,7 @@ strong {
|
|||
}
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono', 'Chivo Mono', monospace;
|
||||
font-family: var(--monospace-fonts);
|
||||
font-feature-settings: "liga" 0; /* prevent the merging of chars like "fi", relevant for Chivo Mono especially */
|
||||
}
|
||||
|
||||
|
|
@ -633,6 +637,10 @@ footer .link-col a:hover {
|
|||
|
||||
|
||||
|
||||
/* Asciinema customizations */
|
||||
.ap-player pre.ap-terminal {
|
||||
font-family: var(--monospace-fonts);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@ main nav li ul {
|
|||
|
||||
|
||||
article {
|
||||
font-family: 'Albert Sans', Figree, Assistant, 'Red Hat Text', 'Be Vietnam Pro', system-ui;
|
||||
font-family: 'Albert Sans', system-ui; /* considered: Figtree, Asisstant, Red Hat Text, Be Vietnam Pro
|
||||
font-size: 20px;
|
||||
word-wrap: break-word;
|
||||
|
||||
|
|
|
|||
1359
src/resources/demo.cast
Normal file
1359
src/resources/demo.cast
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -34,7 +34,7 @@
|
|||
{
|
||||
"name": "(Anonymous)",
|
||||
"role": "Security engineer",
|
||||
"org": "Subcontractor, UK government",
|
||||
"org": "Subcontractor, European government",
|
||||
"quote": "This is a brilliant piece of software. ... Even on first install, the defaults are sane. Truly, great work. … Seriously: Caddy makes it possible for hundreds of thousands of very needy folk to get treatment. It's the backbone of vital systems used by local Doctors Without Borders and local government ministries."
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Sponsor the Caddy Project</title>
|
||||
{{import "/includes/head.html"}}
|
||||
{{template "head"}}
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="/resources/css/marketing.css{{template "cacheBust"}}">
|
||||
<link rel="stylesheet" href="/resources/css/sponsor.css{{template "cacheBust"}}">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Caddy help & support</title>
|
||||
{{import "/includes/head.html"}}
|
||||
{{template "head"}}
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="/resources/css/marketing.css{{template "cacheBust"}}">
|
||||
<link rel="stylesheet" href="/resources/css/support.css{{template "cacheBust"}}">
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue