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

Get themes under control; button hover splash

Browse source
This commit is contained in:
Matthew Holt 2023-05-26 23:12:07 -06:00 • committed by Francis Lavoie
parent 4c04c54350
commit 998c5dac51
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
7 changed files with 165 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

4
new/docs/index.html
View file

@ -11,9 +11,7 @@
<script src="/resources/js/docs.js"></script> <script src="/resources/js/docs.js"></script>
</head> </head>
<body> <body>
<div class="hero"> {{include "/includes/header.html" ""}}
{{include "/includes/header.html" "logo-light.svg"}}
</div>
<div id="autonav"></div> <div id="autonav"></div>

8
new/includes/header.html
View file

@ -1,4 +1,4 @@
<header> <header class="{{index .Args 0}}">
<div class="topbar"> <div class="topbar">
<div class="wrapper"> <div class="wrapper">
<div style="flex: 1;"></div> <div style="flex: 1;"></div>
@ -23,7 +23,11 @@
</div> </div>
</div> </div>
<div class="navbar wrapper"> <div class="navbar wrapper">
<a href="/"><img src="/resources/images/{{index .Args 0}}" id="logo" alt="Caddy"></a> <a href="/">
<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>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>

2
new/index.html
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div class="hero"> <div class="hero">
{{include "/includes/header.html" "logo-dark.svg"}} {{include "/includes/header.html" "dark-header"}}
</div> </div>
</body> </body>

116
new/resources/css/common.css
View file

@ -1,4 +1,5 @@
:root { :root,
.light {
--body-bg: white; --body-bg: white;
--text-color: #222; --text-color: #222;
--header-bg: rgba(118, 179, 194, 0.11); --header-bg: rgba(118, 179, 194, 0.11);
@ -8,6 +9,7 @@
--link-color: #0097f2; --link-color: #0097f2;
--link-decoration-color: #ddd; --link-decoration-color: #ddd;
--link-hover-color: rgb(27, 170, 70); --link-hover-color: rgb(27, 170, 70);
--heading-color: var(--text-color);
--code-bg: #f2f8f9; --code-bg: #f2f8f9;
--dropdown-bg: #e8ecef; --dropdown-bg: #e8ecef;
--dropdown-linkbox: white; --dropdown-linkbox: white;
@ -16,19 +18,21 @@
--dropdown-link-hover-bg: rgb(239, 244, 248); --dropdown-link-hover-bg: rgb(239, 244, 248);
--dropdown-link-hover-color: #142633; --dropdown-link-hover-color: #142633;
--dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent); --dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent);
--dropdown-featured-hover-bg: rgb(223, 233, 238); /* rgb(232, 255, 254); */
--dropdown-shadow-color: rgb(0 0 0 / .4); --dropdown-shadow-color: rgb(0 0 0 / .4);
} }
.dark { .dark {
--body-bg: #0d171a; --body-bg: #0d171a;
--text-color: #a4c0c2; --text-color: #cbe2e4; /* #a4c0c2 */
--header-bg: rgba(44, 130, 164, 0.11); --header-bg: rgba(44, 130, 164, 0.11);
--header-border-color: transparent; --header-border-color: transparent;
--main-nav-link-color: #7d8e93; --main-nav-link-color: #86a7b1;
--main-nav-link-hover-color: #e2e9ec; --main-nav-link-hover-color: #e2e9ec;
--link-color: #34a1e4; --link-color: #34a1e4;
--link-decoration-color: #375862; --link-decoration-color: #375862;
--link-hover-color: rgb(42, 228, 98); --link-hover-color: rgb(42, 228, 98);
--heading-color: #dee8ee;
--code-bg: #1f3237; --code-bg: #1f3237;
--dropdown-bg: #34414b; --dropdown-bg: #34414b;
--dropdown-linkbox: #202b2f; --dropdown-linkbox: #202b2f;
@ -37,17 +41,19 @@
--dropdown-link-hover-color: white; --dropdown-link-hover-color: white;
--dropdown-link-hover-bg: rgb(30, 48, 63); --dropdown-link-hover-bg: rgb(30, 48, 63);
--dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent); --dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent);
--dropdown-featured-hover-bg: rgb(64, 82, 92);
--dropdown-shadow-color: black; --dropdown-shadow-color: black;
} }
.dark #logo-light,
.dark .button.secondary { .dark-header #logo-light,
border-color: rgb(64, 121, 136); #logo-dark {
display: none;
} }
.dark article h2, .dark #logo-dark,
.dark article h3 { .dark-header #logo-dark {
color: #e0f8f9; display: initial;
} }
@ -120,7 +126,6 @@ code {
max-width: 1400px; max-width: 1400px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
box-sizing: content-box;
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
} }
@ -135,7 +140,7 @@ header a {
text-decoration: none; text-decoration: none;
} }
header nav > ul { header nav>ul {
background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255)); background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255));
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -182,11 +187,11 @@ header nav ul {
flex: 1; flex: 1;
} }
.navbar nav > ul > li > a { .navbar nav>ul>li>a {
-webkit-text-fill-color: rgba(0 0 0 / .1); -webkit-text-fill-color: rgba(0 0 0 / .1);
} }
.navbar nav > ul > li > a:hover { .navbar nav>ul>li>a:hover {
-webkit-text-fill-color: rgba(255 255 255 / .4); -webkit-text-fill-color: rgba(255 255 255 / .4);
} }
@ -194,7 +199,7 @@ header nav ul {
position: relative; position: relative;
} }
.navbar nav > ul > li > a, .navbar nav>ul>li>a,
.navbar .button { .navbar .button {
text-decoration: none; text-decoration: none;
transition: all 200ms; transition: all 200ms;
@ -202,7 +207,7 @@ header nav ul {
font-weight: 500; font-weight: 500;
} }
.navbar nav > ul > li > a { .navbar nav>ul>li>a {
padding: 20px 1.5em; padding: 20px 1.5em;
display: block; display: block;
font-family: Figtree, system-ui; font-family: Figtree, system-ui;
@ -210,7 +215,7 @@ header nav ul {
} }
.navbar .button { .navbar .button {
font-size: 80%; font-size: 80%;
} }
.icon { .icon {
@ -218,7 +223,7 @@ header nav ul {
vertical-align: middle; vertical-align: middle;
} }
#logo { .logo {
height: 2.25em; height: 2.25em;
} }
@ -232,34 +237,58 @@ header nav ul {
padding: .6em 1.5em; padding: .6em 1.5em;
border-radius: 6px; border-radius: 6px;
text-decoration: none; text-decoration: none;
}
.button.secondary { /* necessary for hoversplash: */
color: rgb(54 206 255); position: relative;
border: 1px solid rgb(54 206 255); overflow: hidden;
}
.button.secondary:hover {
color: white;
border-color: white;
} }
.button.primary { .button.primary {
background: linear-gradient(135deg, white 25%, rgba(167,183,193) 80%); background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
color: #222; color: #222;
box-shadow: 0 2px 8px rgb(0 0 0 / .3);
} }
.button.primary:hover { .button.primary:hover {
color: #1a71cb; color: #1a71cb;
transform: scale(1.1);
box-shadow: 0 4px 15px rgb(0 0 0 / .2);
} }
.button:active { .button:active {
transition: all 100ms; transition: all 75ms;
transform: scale(.95); transform: scale(.95);
box-shadow: 2px 2px 5px inset rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 3px inset rgba(0, 0, 0, 0.2);
}
@keyframes hoverSplash {
0% {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
}
100% {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}
}
.hover-splash {
pointer-events: none;
position: absolute;
/* z-index: 1; */
width: 200%;
height: 0;
padding-bottom: 200%;
border-radius: 50%;
/* transform: translate3d(-50%,-50%,0) scale3d(0,0,1); */
animation: 1s cubic-bezier(.16, 1, .3, 1) hoverSplash;
}
.button.primary .hover-splash {
background-color: rgba(255, 255, 255, 0.6);
}
.button.secondary .hover-splash {
background-color: rgba(24, 156, 233, 0.6);
} }
@ -284,8 +313,15 @@ header nav ul {
} }
@keyframes rotateMenu { @keyframes rotateMenu {
0% { transform: rotateX(-90deg) scale(0.75); opacity: 0; } 0% {
100% { transform: rotateX(0deg) scale(1); opacity: 1; } transform: rotateX(-90deg) scale(0.75);
opacity: 0;
}
100% {
transform: rotateX(0deg) scale(1);
opacity: 1;
}
} }
@ -348,13 +384,13 @@ header nav ul {
.dropdown .flatlinks a, .dropdown .flatlinks a,
.dropdown .featured a { .dropdown .featured a {
transition: background-color 150ms; transition: background-color 150ms;
font-size: 12px;
} }
.dropdown .flatlinks a { .dropdown .flatlinks a {
background: var(--dropdown-linkbox); background: var(--dropdown-linkbox);
padding: 1em 2em; padding: 1em 2em;
color: var(--dropdown-link-color); color: var(--dropdown-link-color);
font-size: 14px;
} }
.dropdown .flatlinks a b, .dropdown .flatlinks a b,
@ -393,11 +429,9 @@ header nav ul {
.dropdown .featured a { .dropdown .featured a {
display: block; display: block;
padding: 1em; padding: 1em;
font-size: 14px;
line-height: 1.4; line-height: 1.4;
border-radius: 10px; border-radius: 10px;
color: var(--dropdown-link-color); color: var(--dropdown-link-color);
font-size: 14px;
background-color: var(--dropdown-linkbox); background-color: var(--dropdown-linkbox);
background-image: var(--dropdown-featured-bg); background-image: var(--dropdown-featured-bg);
/* background-image: linear-gradient(to bottom, rgb(239 244 247), rgba(252,252,252,0)); */ /* background-image: linear-gradient(to bottom, rgb(239 244 247), rgba(252,252,252,0)); */
@ -407,11 +441,7 @@ header nav ul {
} }
.dropdown .featured a:hover { .dropdown .featured a:hover {
background-color: rgb(223, 233, 238); /* rgb(232, 255, 254); */ background-color: var(--dropdown-featured-hover-bg);
}
.dark .dropdown .featured a:hover {
background-color: rgb(64, 82, 92);
} }
.dropdown .featured a b { .dropdown .featured a b {

131
new/resources/css/docs.css
View file

@ -1,3 +1,37 @@
:root, .light {
--header-bg: white;
--button-secondary-color: rgb(64, 131, 153);
--button-secondary-border-color: rgb(198, 217, 223);
--button-secondary-color-hover: rgb(7, 86, 134);
--button-secondary-border-color-hover: rgb(155, 191, 213);
--nav-current-bg: linear-gradient(to right, #ecf1f3, transparent);
--nav-link-hover-shadow-color: rgba(0, 0, 0, 0.15);
--nav-link-hover-before-bg: #d2e5e7;
--autonav-bg: #fff;
--pagenav-hover-bg: #f4f7f9;
--cmd-bg: #333;
--tip-color: #5c50bb;
}
.dark {
--header-bg: rgba(44, 130, 164, 0.11);
--button-secondary-color: rgb(36, 166, 208);
--button-secondary-border-color: rgb(38, 116, 140);
--button-secondary-color-hover: rgb(0, 194, 255);
--button-secondary-border-color-hover: rgb(0, 194, 255);
--nav-current-bg: linear-gradient(to right, #1a3c4d, transparent);
--nav-link-hover-shadow-color: rgba(255, 255, 255, 0.15);
--nav-link-hover-before-bg: #32494f;
--autonav-bg: #34404d;
--pagenav-hover-bg: #18262f;
--cmd-bg: black;
--tip-color: #a6b2f7;
}
html, html,
body { body {
min-height: 100%; min-height: 100%;
@ -7,14 +41,6 @@ body {
max-width: 1800px; max-width: 1800px;
} }
:root {
--header-bg: white;
}
.dark {
--header-bg: rgba(44, 130, 164, 0.11);
}
header { header {
border-bottom: 1px solid var(--header-border-color); border-bottom: 1px solid var(--header-border-color);
} }
@ -30,12 +56,12 @@ header {
color: white; color: white;
} }
.button.secondary { .button.secondary {
color: rgb(64, 131, 153); color: var(--button-secondary-color);
border: 1px solid rgb(226, 242, 247); border: 1px solid var(--button-secondary-border-color);
} }
.button.secondary:hover { .button.secondary:hover {
color: rgb(7, 86, 134); color: var(--button-secondary-color-hover);
border-color: rgb(155, 191, 213); border: 1px solid var(--button-secondary-border-color-hover);
} }
@ -53,9 +79,6 @@ main {
.docs { .docs {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
@ -63,6 +86,7 @@ main {
.docs nav { .docs nav {
flex: 1; flex: 1;
min-width: 250px;
} }
@ -96,7 +120,7 @@ main nav li li::before {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: #d2e5e7; background-color: var(--nav-link-hover-before-bg);
transition: .15s; transition: .15s;
} }
@ -135,7 +159,7 @@ main nav li:hover > a,
main nav li:hover > a { main nav li:hover > a {
/* background: #f6fafc; */ /* background: #f6fafc; */
box-shadow: -10px 0 10px -3px rgba(0, 0, 0, 0.15); box-shadow: -10px 0 10px -3px var(--nav-link-hover-shadow-color);
} }
main nav > ul > li > a::before { main nav > ul > li > a::before {
@ -155,7 +179,7 @@ main nav li a:hover::before {
} }
main nav li a.current { main nav li a.current {
background: linear-gradient(to right, #ecf1f3, transparent); background: var(--nav-current-bg);
} }
main nav .heading { main nav .heading {
@ -208,8 +232,7 @@ article {
word-wrap: break-word; word-wrap: break-word;
max-width: 1100px; max-width: 1100px;
min-width: 0;
/* color: #222; */
} }
/* /*
@ -281,6 +304,7 @@ article h6 {
font-family: Gantari; font-family: Gantari;
font-weight: 800; font-weight: 800;
color: var(--heading-color);
} }
article h1, article h1,
@ -359,7 +383,7 @@ code {
} }
code.cmd { code.cmd {
background-color: #333; background-color: var(--cmd-bg);
color: #eaeaea; color: #eaeaea;
} }
@ -481,8 +505,10 @@ article aside.advice::before {
} }
article aside.tip { article aside.tip {
color: #706b95; color: var(--tip-color);
} }
article aside.advice { article aside.advice {
color: #826848; color: #826848;
} }
@ -556,7 +582,7 @@ td code {
visibility: hidden; visibility: hidden;
left: 75%; left: 75%;
top: 0; top: 0;
background: #fff; background: var(--autonav-bg);
box-shadow: 0 10px 40px rgb(0 0 0 / .2); box-shadow: 0 10px 40px rgb(0 0 0 / .2);
border-radius: 10px; border-radius: 10px;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -604,67 +630,10 @@ main nav > ul > li:hover #autonav {
} }
#pagenav a:hover { #pagenav a:hover {
background: #f4f7f9; background: var(--pagenav-hover-bg);
} }
@keyframes fadeIn { @keyframes fadeIn {
0% { opacity: 0; transform: translateY(2em); } 0% { opacity: 0; transform: translateY(2em); }
100% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); }
} }
.dark main nav li a.current {
background: linear-gradient(to right, #1a3c4d, transparent);
}
.dark main nav a {
color: #7d8e93;
}
.dark main nav li:hover > a {
box-shadow: -10px 0 10px -3px rgba(255, 255, 255, 0.15);
}
.dark main nav li li::before {
background-color: #32494f
}
.dark #autonav {
background: #36383a;
}
.dark #pagenav a:hover {
background: #18262f;
}
.dark code.cmd {
background: black;
}

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

@ -7,4 +7,14 @@
radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%); radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
min-height: 800px; min-height: 800px;
}
.button.secondary {
color: rgb(54 206 255);
border: 1px solid rgb(54 206 255);
}
.button.secondary:hover {
color: white;
border-color: white;
} }

27
new/resources/js/common.js
View file

@ -127,6 +127,9 @@ function getTheme() {
// setTheme changes the configured theme to light, dark, or system and applies it. // setTheme changes the configured theme to light, dark, or system and applies it.
function setTheme(theme) { function setTheme(theme) {
if (theme !== "light" && theme !== "dark" && theme !== "system") {
theme = "system";
}
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
$('#current-theme').innerText = theme; $('#current-theme').innerText = theme;
if (theme == "system") { if (theme == "system") {
@ -139,10 +142,8 @@ function setTheme(theme) {
function applyTheme(lightOrDark) { function applyTheme(lightOrDark) {
if (lightOrDark == "dark") { if (lightOrDark == "dark") {
$('html').classList.add('dark'); $('html').classList.add('dark');
$('#logo').src = '/resources/images/logo-dark.svg';
} else { } else {
$('html').classList.remove('dark'); $('html').classList.remove('dark');
$('#logo').src = '/resources/images/logo-light.svg';
} }
} }
@ -157,4 +158,24 @@ function nextTheme() {
theme = "system"; theme = "system";
} }
setTheme(theme); setTheme(theme);
} }
// hoversplash effect!
on('mouseover', '.button', (e) => {
const elem = document.createElement('span');
elem.classList.add('hover-splash');
// get coordinates relative to container
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
elem.style.left = `${x}px`;
elem.style.top = `${y}px`;
e.target.append(elem);
setTimeout(function() {
elem.remove();
}, 1000);
});