mirror of
https://github.com/caddyserver/website.git
synced 2025-04-21 12:36:16 -04:00
Work on homepage a little more
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
2b03c7c866
commit
ea2061dc0f
8 changed files with 250 additions and 3 deletions
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="navbar wrapper">
|
||||
<a href="/">
|
||||
<a href="/" class="logo-link">
|
||||
<img src="/resources/images/logo-light.svg" class="logo" id="logo-light" alt="Caddy web server">
|
||||
<img src="/resources/images/logo-dark.svg" class="logo" id="logo-dark" alt="Caddy web server">
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,43 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sponsors-leaders">
|
||||
<h3>Sponsored by <b>leaders</b></h3>
|
||||
<div class ="sponsor-logos">
|
||||
<a href="https://zerossl.com">
|
||||
<img src="/resources/images/sponsors/zerossl-dark.svg" alt="ZeroSSL">
|
||||
</a>
|
||||
<a href="https://stripe.com">
|
||||
<img src="/resources/images/sponsors/stripe-dark.svg" alt="Stripe">
|
||||
</a>
|
||||
</div>
|
||||
<a href="/sponsor" class="button purple">Sponsorship info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wavy-top">
|
||||
<div class="bgtext">
|
||||
Every<br>
|
||||
<span class="site-on">site on</span><br>
|
||||
HTTPS
|
||||
</div>
|
||||
<h2>
|
||||
<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your domains.</b>
|
||||
</h2>
|
||||
<p>
|
||||
Check this out
|
||||
<br><br>
|
||||
Testing Testing
|
||||
<br><br>
|
||||
Test
|
||||
<br><br>
|
||||
Another test
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -244,6 +244,10 @@ header nav ul {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
line-height: 0; /* avoid extra space along the bottom for some reason */
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 2.25em;
|
||||
}
|
||||
|
|
@ -265,7 +269,7 @@ button,
|
|||
/* necessary for hoversplash: */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -289,6 +293,15 @@ button:active,
|
|||
box-shadow: 1px 1px 3px inset rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button.purple,
|
||||
.button.purple {
|
||||
border: none;
|
||||
background: linear-gradient(165deg, rgba(170,81,212,1) 20%, rgba(37,159,235,1) 100%);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
@keyframes hoverSplash {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
body {
|
||||
background-color: #123245;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: hsla(201,63%,15%,1);
|
||||
background-image:
|
||||
|
|
@ -5,6 +9,8 @@
|
|||
radial-gradient(at 5% 30%, hsla(136,95%,15%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 91% 35%, hsla(214,83%,25%,1) 0px, transparent 75%),
|
||||
radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
|
||||
|
||||
padding-bottom: 20vw;
|
||||
}
|
||||
|
||||
.hero .vertical-padding {
|
||||
|
|
@ -231,7 +237,7 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
.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 / .6) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 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;
|
||||
}
|
||||
|
||||
|
|
@ -261,6 +267,117 @@ div.ap-wrapper:fullscreen div.ap-player {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.sponsors-leaders {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 75px auto;
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
.sponsors-leaders h3 {
|
||||
color: #EB5EDD;
|
||||
font-weight: normal;
|
||||
font-family: Poppins, ui-rounded;
|
||||
font-size: 18px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sponsors-leaders::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 40px;
|
||||
background-color: rgb(207 27 189 / .2);
|
||||
filter: blur(10px);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sponsor-logos {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sponsor-logos img {
|
||||
width: 100%;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.wavy-top {
|
||||
background-color: #C4D5E0;
|
||||
margin-top: -10vw;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-top: 11vw;
|
||||
font-family: Poppins, ui-rounded;
|
||||
}
|
||||
|
||||
.wavy-top::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -16vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/resources/images/home-curvey-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bgtext {
|
||||
color: #86A6A3;
|
||||
opacity: .5;
|
||||
width: 90%;
|
||||
min-width: 65vw;
|
||||
max-width: 1200px;
|
||||
font-size: 15vw;
|
||||
text-align: center;
|
||||
line-height: .85;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
mix-blend-mode: color-burn;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.bgtext .site-on {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.wavy-top h2 {
|
||||
color: #003E4B;
|
||||
font-size: 52px;
|
||||
text-align: center;
|
||||
max-width: 950px;
|
||||
font-weight: normal;
|
||||
margin: 0 auto;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.wavy-top h2 b {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.display {
|
||||
margin-top: 50px;
|
||||
|
|
|
|||
18
new/resources/images/home-curvey-bg.svg
Normal file
18
new/resources/images/home-curvey-bg.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 939 1011" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
|
||||
<g>
|
||||
<path d="M14.129,140.755L0.105,137.072L-0,107.542L21.496,112.707C191.726,157.42 354.607,118.243 505.391,74.798C661.081,29.939 804.376,-18.996 939.021,7.472L939,9.429L939,38.78L924.043,35.849C802.463,10.237 664.073,59.257 513.42,102.664C357.863,147.485 189.747,186.883 14.129,140.755Z" style="fill:url(#_Linear1);"/>
|
||||
<path d="M939,33.014C792.052,-19.345 386.487,159.402 186.064,159.402C90.914,159.402 0.217,137.033 0.217,137.033L0.132,1011L939,1011L939,33.014Z" style="fill:url(#_Linear2);"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(994.138,0,0,545.232,-12.3299,-13.0835)">
|
||||
<stop offset="0" style="stop-color:rgb(0,83,166);stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:rgb(10,112,29);stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="_Linear2" x1="0.31" y1="0.04" x2="0.69" y2="0.96">
|
||||
<stop offset="7%" stop-color="#f7fafc"/>
|
||||
<stop offset="66%" stop-color="#c4d5e0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
19
new/resources/images/sponsors/stripe-dark.svg
Normal file
19
new/resources/images/sponsors/stripe-dark.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 71 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-3877.07,-3945.82)">
|
||||
<g transform="matrix(0.875155,0,0,2.13261,3732.24,3013.56)">
|
||||
<g transform="matrix(0.224703,0,0,0.0922108,153.356,433.824)">
|
||||
<g>
|
||||
<path d="M414,113.4C414,87.8 401.6,67.6 377.9,67.6C354.1,67.6 339.7,87.8 339.7,113.2C339.7,143.3 356.7,158.5 381.1,158.5C393,158.5 402,155.8 408.8,152L408.8,132C402,135.4 394.2,137.5 384.3,137.5C374.6,137.5 366,134.1 364.9,122.3L413.8,122.3C413.8,121 414,115.8 414,113.4ZM364.6,103.9C364.6,92.6 371.5,87.9 377.8,87.9C383.9,87.9 390.4,92.6 390.4,103.9L364.6,103.9Z" style="fill:white;"/>
|
||||
<path d="M301.1,67.6C291.3,67.6 285,72.2 281.5,75.4L280.2,69.2L258.2,69.2L258.2,185.8L283.2,180.5L283.3,152.2C286.9,154.8 292.2,158.5 301,158.5C318.9,158.5 335.2,144.1 335.2,112.4C335.1,83.4 318.6,67.6 301.1,67.6ZM295.1,136.5C289.2,136.5 285.7,134.4 283.3,131.8L283.2,94.7C285.8,91.8 289.4,89.8 295.1,89.8C304.2,89.8 310.5,100 310.5,113.1C310.5,126.5 304.3,136.5 295.1,136.5Z" style="fill:white;"/>
|
||||
<path d="M223.8,61.7L248.9,56.3L248.9,36L223.8,41.3L223.8,61.7Z" style="fill:white;"/>
|
||||
<rect x="223.8" y="69.3" width="25.1" height="87.5" style="fill:white;"/>
|
||||
<path d="M196.9,76.7L195.3,69.3L173.7,69.3L173.7,156.8L198.7,156.8L198.7,97.5C204.6,89.8 214.6,91.2 217.7,92.3L217.7,69.3C214.5,68.1 202.8,65.9 196.9,76.7Z" style="fill:white;"/>
|
||||
<path d="M146.9,47.6L122.5,52.8L122.4,132.9C122.4,147.7 133.5,158.6 148.3,158.6C156.5,158.6 162.5,157.1 165.8,155.3L165.8,135C162.6,136.3 146.8,140.9 146.8,126.1L146.8,90.6L165.8,90.6L165.8,69.3L146.8,69.3L146.9,47.6Z" style="fill:white;"/>
|
||||
<path d="M79.3,94.7C79.3,90.8 82.5,89.3 87.8,89.3C95.4,89.3 105,91.6 112.6,95.7L112.6,72.2C104.3,68.9 96.1,67.6 87.8,67.6C67.5,67.6 54,78.2 54,95.9C54,123.5 92,119.1 92,131C92,135.6 88,137.1 82.4,137.1C74.1,137.1 63.5,133.7 55.1,129.1L55.1,152.9C64.4,156.9 73.8,158.6 82.4,158.6C103.2,158.6 117.5,148.3 117.5,130.4C117.4,100.6 79.3,105.9 79.3,94.7Z" style="fill:white;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
41
new/resources/images/sponsors/zerossl-dark.svg
Normal file
41
new/resources/images/sponsors/zerossl-dark.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 144 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-3665.85,-3944.91)">
|
||||
<g transform="matrix(0.875155,0,0,2.13261,3732.24,3013.56)">
|
||||
<g transform="matrix(0.756623,0,0,0.756623,-121.263,330.154)">
|
||||
<g>
|
||||
<g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M148.9,69.1L114,69.1L114,62.2L135.2,34.6L114.6,34.6L114.6,25.6L148.4,25.6L148.4,33.8L128.7,60.1L148.9,60.1L148.9,69.1Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M185.5,55.4L162.3,55.4C163.1,59.3 165.7,61.7 169.1,61.7C171.4,61.7 174.1,61.1 175.8,57.9L184.7,59.8C182,66.7 176.3,70 169.1,70C160,70 152.5,63.1 152.5,52.7C152.5,42.4 160,35.4 169.2,35.4C178.1,35.4 185.3,42 185.5,52.7L185.5,55.4ZM162.5,49.1L175.5,49.1C174.6,45.6 172,44 169.2,44C166.3,44 163.4,45.8 162.5,49.1Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M213.8,36.3L213.4,46.7L211.6,46.7C204.6,46.7 200.7,50.5 200.7,58.9L200.7,69.1L190.7,69.1L190.7,36.5L200.7,36.5L200.7,42.7C203,38.8 206.4,36 211.6,36C212.4,36 213.1,36.1 213.8,36.3Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M250.6,52.8C250.6,63.1 242.7,70 233.3,70C223.8,70 215.8,63.1 215.8,52.8C215.8,42.5 223.7,35.7 233.3,35.7C242.7,35.7 250.6,42.5 250.6,52.8ZM240.9,52.8C240.9,47.7 237.2,44.4 233.3,44.4C229.2,44.4 225.5,47.8 225.5,52.8C225.5,57.9 229.2,61.2 233.3,61.2C237.2,61.2 240.9,57.9 240.9,52.8Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M289.7,37.2L279.5,39.3C278.7,35.2 275.5,33.2 272.2,33.2C268.7,33.2 266.5,35.1 266.5,37.6C266.5,39.4 267.3,40.7 269.9,41.2L278.6,43.2C285.9,44.9 290.2,49 290.2,55.9C290.2,65.2 282.2,70 272.9,70C263.4,70 255.6,65.3 254.5,56.8L265.2,54.7C266.3,59.2 269.3,61.1 273.5,61.1C277.4,61.1 279.7,59.3 279.7,56.6C279.7,54.7 278.8,53.4 275.8,52.8L267,50.9C261,49.5 255.7,46.2 255.7,38.3C255.7,29.9 262.5,24.6 272.3,24.6C281.5,24.6 288.1,29.3 289.7,37.2Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M329.3,37.2L319.1,39.3C318.3,35.2 315.1,33.2 311.8,33.2C308.3,33.2 306.1,35.1 306.1,37.6C306.1,39.4 306.9,40.7 309.5,41.2L318.2,43.2C325.5,44.9 329.8,49 329.8,55.9C329.8,65.2 321.8,70 312.5,70C303,70 295.2,65.3 294.1,56.8L304.8,54.7C305.9,59.2 308.9,61.1 313.1,61.1C317,61.1 319.3,59.3 319.3,56.6C319.3,54.7 318.4,53.4 315.4,52.8L306.6,50.9C300.6,49.5 295.3,46.2 295.3,38.3C295.3,29.9 302.1,24.6 311.9,24.6C321,24.6 327.7,29.3 329.3,37.2Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M367,69.1L335.9,69.1L335.9,25.6L346.3,25.6L346.3,59.7L367,59.7L367,69.1Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<rect x="7.1" y="67.7" width="20.3" height="20.3" style="fill:rgb(77,112,213);"/>
|
||||
</g>
|
||||
<g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
|
||||
<path d="M67.8,47.4L67.8,27.2L47.6,27.2L47.6,7L27.4,7L27.4,27.2L7.1,27.2L7.1,47.4L27.4,47.4L27.4,67.7L47.6,67.7L47.6,87.9L67.8,87.9L67.8,67.7L88.1,67.7L88.1,47.4L67.8,47.4Z" style="fill:rgb(77,112,213);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -50,3 +50,8 @@
|
|||
<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>
|
||||
{{end}}
|
||||
|
||||
|
||||
<!-- TODO: These don't work -- color values need to be tweaked if they do work -- I think because background-color is set on the body. -->
|
||||
<meta name="theme-color" content="#123245" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#123245" media="(prefers-color-scheme: dark)">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue