Rebase and fix code displays

This commit is contained in:
Matthew Holt 2023-11-21 11:21:27 -07:00 committed by Francis Lavoie
parent 14e9b01bf4
commit 7cba863d53
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
11 changed files with 41 additions and 117 deletions

View file

@ -1,9 +1,3 @@
<script>
ready(() => {
window.$_('.ex-custom-ca pre.chroma').classList.add('light');
});
</script>
<div class="ex-custom-ca"> <div class="ex-custom-ca">
```caddy ```caddy
@ -24,3 +18,7 @@ internal.example.com {
``` ```
</div> </div>
<script>
window.$_('.ex-custom-ca code').classList.add('light');
</script>

View file

@ -25,7 +25,7 @@ ready(() => {
endElement = findNextText(startElement, 'browse'); endElement = findNextText(startElement, 'browse');
wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple'); wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
window.$_('.ex-fs pre.chroma').classList.add('light'); window.$_('.ex-fs code').classList.add('light');
}); });
</script> </script>

View file

@ -1,9 +1,3 @@
<script>
ready(() => {
window.$_('.ex-json-automate-certs pre.chroma').classList.add('light');
});
</script>
<div class="ex-json-automate-certs"> <div class="ex-json-automate-certs">
```json ```json
@ -23,3 +17,6 @@ ready(() => {
``` ```
</div> </div>
<script>
window.$_('.ex-json-automate-certs code').classList.add('light');
</script>

View file

@ -1,9 +1,3 @@
<script>
ready(() => {
window.$_('.ex-local-https pre.chroma').classList.add('light');
});
</script>
<div class="ex-local-https"> <div class="ex-local-https">
```caddy ```caddy
@ -21,3 +15,7 @@ http://localhost {
``` ```
</div> </div>
<script>
window.$_('.ex-local-https code').classList.add('light');
</script>

View file

@ -13,6 +13,8 @@ ready(() => {
startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {'); startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {');
endElement = findNextText(startElement, '}'); endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue'); wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue');
window.$_('.ex-proxy code').classList.add('dark');
}); });
</script> </script>

View file

@ -1,9 +1,3 @@
<script>
ready(() => {
window.$_('.ex-website-caddyfile pre.chroma').classList.add('light');
});
</script>
<div class="ex-website-caddyfile"> <div class="ex-website-caddyfile">
```caddy ```caddy
@ -23,3 +17,7 @@ reverse_proxy /api/* localhost:9002
``` ```
</div> </div>
<script>
window.$_('.ex-website-caddyfile code').classList.add('light');
</script>

View file

@ -11,7 +11,7 @@
</p> </p>
<br> <br>
<p> <p>
&copy; {{now | date "2006"}} Stack Holdings. All rights reserved. &copy; {{now | date "2006"}} ZeroSSL. All rights reserved.
</p> </p>
</div> </div>
<div class="link-col" style="margin-left: auto;"> <div class="link-col" style="margin-left: auto;">

View file

@ -44,7 +44,7 @@
<!-- Algolia DocSearch --> <!-- Algolia DocSearch -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> --> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> -->
<!-- Global site tag (gtag.js) - Google Analytics (Stack Holdings) --> <!-- 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> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];

View file

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<title>Caddy is the best web server for HTTPS</title> <title>Caddy is the best web server for HTTPS</title>
{{include "/includes/head.html"}} {{import "/includes/head.html"}}
{{template "head"}}
<link rel="stylesheet" href="/resources/css/marketing.css"> <link rel="stylesheet" href="/resources/css/marketing.css">
<link rel="stylesheet" href="/resources/css/on-demand.css"> <link rel="stylesheet" href="/resources/css/on-demand.css">
<link rel="canonical" href="https://caddyserver.com/on-demand-tls"> <link rel="canonical" href="https://caddyserver.com/on-demand-tls">

View file

@ -109,7 +109,6 @@ h1 .subheading {
div.ap-wrapper div.ap-player { div.ap-wrapper div.ap-player {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25); box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25);
transform: scale(1.1);
border-radius: 10px; border-radius: 10px;
} }
@ -122,93 +121,6 @@ div.ap-wrapper:fullscreen div.ap-player {
background-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;
}
.dark .rollover-green.show { background-color: #41e68e2b; }
.dark .rollover-purple.show { background-color: #a52fa55f; }
.dark .rollover-blue.show { background-color: #0a62aa5b; }
.dark .rollover-yellow.show { background-color: #ffcb5064; }
.light .rollover-green.show { background-color: #41e68e4b; }
.light .rollover-purple.show { background-color: #a52fa545; }
.light .rollover-blue.show { background-color: #0a62aa3a; }
.light .rollover-yellow.show { background-color: #ffcb5064; }
.sponsors-leaders { .sponsors-leaders {

View file

@ -419,6 +419,12 @@ div.ap-wrapper:fullscreen div.ap-player {
perspective: 1500px; perspective: 1500px;
} }
.display .chroma,
.display.dark .chroma,
.display.light .chroma {
background: none;
}
.display code { .display code {
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
@ -435,6 +441,9 @@ div.ap-wrapper:fullscreen div.ap-player {
overflow-x: auto; overflow-x: auto;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
} }
.display.dark code {
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
}
.display.left code { .display.left code {
box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.1); box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.1);
} }
@ -446,7 +455,8 @@ div.ap-wrapper:fullscreen div.ap-player {
transform: rotateY(25deg); transform: rotateY(25deg);
} }
.display code.light { .display code.light,
.display .chroma.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%); 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; color: #222;
} }
@ -497,7 +507,15 @@ div.ap-wrapper:fullscreen div.ap-player {
.rollover-blue.show { background-color: #0a62aaa3; } .rollover-blue.show { background-color: #0a62aaa3; }
.rollover-yellow.show { background-color: #ffcb50; } .rollover-yellow.show { background-color: #ffcb50; }
.dark .rollover-green.show { background-color: #41e68e7c; }
.dark .rollover-purple.show { background-color: #a52fa58c; }
.dark .rollover-blue.show { background-color: #0a62aa96; }
.dark .rollover-yellow.show { background-color: #ffcb5064; }
.light .rollover-green.show { background-color: #41e68e4b; }
.light .rollover-purple.show { background-color: rgba(230, 78, 230, 0.522); }
.light .rollover-blue.show { background-color: #65b4f586; }
.light .rollover-yellow.show { background-color: #ffcb50d5; }