mirror of
https://github.com/caddyserver/website.git
synced 2025-04-22 04:56:17 -04:00
Get themes under control; button hover splash
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
4c04c54350
commit
998c5dac51
7 changed files with 165 additions and 133 deletions
|
|
@ -11,9 +11,7 @@
|
|||
<script src="/resources/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
{{include "/includes/header.html" "logo-light.svg"}}
|
||||
</div>
|
||||
{{include "/includes/header.html" ""}}
|
||||
|
||||
<div id="autonav"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<header>
|
||||
<header class="{{index .Args 0}}">
|
||||
<div class="topbar">
|
||||
<div class="wrapper">
|
||||
<div style="flex: 1;"></div>
|
||||
|
|
@ -23,7 +23,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
{{include "/includes/header.html" "logo-dark.svg"}}
|
||||
{{include "/includes/header.html" "dark-header"}}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
:root {
|
||||
:root,
|
||||
.light {
|
||||
--body-bg: white;
|
||||
--text-color: #222;
|
||||
--header-bg: rgba(118, 179, 194, 0.11);
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
--link-color: #0097f2;
|
||||
--link-decoration-color: #ddd;
|
||||
--link-hover-color: rgb(27, 170, 70);
|
||||
--heading-color: var(--text-color);
|
||||
--code-bg: #f2f8f9;
|
||||
--dropdown-bg: #e8ecef;
|
||||
--dropdown-linkbox: white;
|
||||
|
|
@ -16,19 +18,21 @@
|
|||
--dropdown-link-hover-bg: rgb(239, 244, 248);
|
||||
--dropdown-link-hover-color: #142633;
|
||||
--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);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--body-bg: #0d171a;
|
||||
--text-color: #a4c0c2;
|
||||
--text-color: #cbe2e4; /* #a4c0c2 */
|
||||
--header-bg: rgba(44, 130, 164, 0.11);
|
||||
--header-border-color: transparent;
|
||||
--main-nav-link-color: #7d8e93;
|
||||
--main-nav-link-color: #86a7b1;
|
||||
--main-nav-link-hover-color: #e2e9ec;
|
||||
--link-color: #34a1e4;
|
||||
--link-decoration-color: #375862;
|
||||
--link-hover-color: rgb(42, 228, 98);
|
||||
--heading-color: #dee8ee;
|
||||
--code-bg: #1f3237;
|
||||
--dropdown-bg: #34414b;
|
||||
--dropdown-linkbox: #202b2f;
|
||||
|
|
@ -37,17 +41,19 @@
|
|||
--dropdown-link-hover-color: white;
|
||||
--dropdown-link-hover-bg: rgb(30, 48, 63);
|
||||
--dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent);
|
||||
--dropdown-featured-hover-bg: rgb(64, 82, 92);
|
||||
--dropdown-shadow-color: black;
|
||||
}
|
||||
|
||||
|
||||
.dark .button.secondary {
|
||||
border-color: rgb(64, 121, 136);
|
||||
.dark #logo-light,
|
||||
.dark-header #logo-light,
|
||||
#logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark article h2,
|
||||
.dark article h3 {
|
||||
color: #e0f8f9;
|
||||
.dark #logo-dark,
|
||||
.dark-header #logo-dark {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -120,7 +126,6 @@ code {
|
|||
max-width: 1400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: content-box;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
|
@ -135,7 +140,7 @@ header a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
header nav > ul {
|
||||
header nav>ul {
|
||||
background: linear-gradient(to right, rgb(100 190 121), rgb(54 206 255));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
|
@ -182,11 +187,11 @@ header nav ul {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar nav > ul > li > a {
|
||||
.navbar nav>ul>li>a {
|
||||
-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);
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +199,7 @@ header nav ul {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.navbar nav > ul > li > a,
|
||||
.navbar nav>ul>li>a,
|
||||
.navbar .button {
|
||||
text-decoration: none;
|
||||
transition: all 200ms;
|
||||
|
|
@ -202,7 +207,7 @@ header nav ul {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.navbar nav > ul > li > a {
|
||||
.navbar nav>ul>li>a {
|
||||
padding: 20px 1.5em;
|
||||
display: block;
|
||||
font-family: Figtree, system-ui;
|
||||
|
|
@ -218,7 +223,7 @@ header nav ul {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#logo {
|
||||
.logo {
|
||||
height: 2.25em;
|
||||
}
|
||||
|
||||
|
|
@ -232,34 +237,58 @@ header nav ul {
|
|||
padding: .6em 1.5em;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
color: rgb(54 206 255);
|
||||
border: 1px solid rgb(54 206 255);
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
color: white;
|
||||
border-color: white;
|
||||
/* necessary for hoversplash: */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / .3);
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
color: #1a71cb;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 15px rgb(0 0 0 / .2);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transition: all 100ms;
|
||||
transition: all 75ms;
|
||||
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 {
|
||||
0% { transform: rotateX(-90deg) scale(0.75); opacity: 0; }
|
||||
100% { transform: rotateX(0deg) scale(1); opacity: 1; }
|
||||
0% {
|
||||
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 .featured a {
|
||||
transition: background-color 150ms;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a {
|
||||
background: var(--dropdown-linkbox);
|
||||
padding: 1em 2em;
|
||||
color: var(--dropdown-link-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown .flatlinks a b,
|
||||
|
|
@ -393,11 +429,9 @@ header nav ul {
|
|||
.dropdown .featured a {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
border-radius: 10px;
|
||||
color: var(--dropdown-link-color);
|
||||
font-size: 14px;
|
||||
background-color: var(--dropdown-linkbox);
|
||||
background-image: var(--dropdown-featured-bg);
|
||||
/* 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 {
|
||||
background-color: rgb(223, 233, 238); /* rgb(232, 255, 254); */
|
||||
}
|
||||
|
||||
.dark .dropdown .featured a:hover {
|
||||
background-color: rgb(64, 82, 92);
|
||||
background-color: var(--dropdown-featured-hover-bg);
|
||||
}
|
||||
|
||||
.dropdown .featured a b {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
body {
|
||||
min-height: 100%;
|
||||
|
|
@ -7,14 +41,6 @@ body {
|
|||
max-width: 1800px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--header-bg: white;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--header-bg: rgba(44, 130, 164, 0.11);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid var(--header-border-color);
|
||||
}
|
||||
|
|
@ -30,12 +56,12 @@ header {
|
|||
color: white;
|
||||
}
|
||||
.button.secondary {
|
||||
color: rgb(64, 131, 153);
|
||||
border: 1px solid rgb(226, 242, 247);
|
||||
color: var(--button-secondary-color);
|
||||
border: 1px solid var(--button-secondary-border-color);
|
||||
}
|
||||
.button.secondary:hover {
|
||||
color: rgb(7, 86, 134);
|
||||
border-color: rgb(155, 191, 213);
|
||||
color: var(--button-secondary-color-hover);
|
||||
border: 1px solid var(--button-secondary-border-color-hover);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -53,9 +79,6 @@ main {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.docs {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
|
@ -63,6 +86,7 @@ main {
|
|||
|
||||
.docs nav {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -96,7 +120,7 @@ main nav li li::before {
|
|||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #d2e5e7;
|
||||
background-color: var(--nav-link-hover-before-bg);
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +159,7 @@ main nav li:hover > a,
|
|||
|
||||
main nav li:hover > a {
|
||||
/* 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 {
|
||||
|
|
@ -155,7 +179,7 @@ main nav li a:hover::before {
|
|||
}
|
||||
|
||||
main nav li a.current {
|
||||
background: linear-gradient(to right, #ecf1f3, transparent);
|
||||
background: var(--nav-current-bg);
|
||||
}
|
||||
|
||||
main nav .heading {
|
||||
|
|
@ -208,8 +232,7 @@ article {
|
|||
word-wrap: break-word;
|
||||
|
||||
max-width: 1100px;
|
||||
|
||||
/* color: #222; */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -281,6 +304,7 @@ article h6 {
|
|||
|
||||
font-family: Gantari;
|
||||
font-weight: 800;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
article h1,
|
||||
|
|
@ -359,7 +383,7 @@ code {
|
|||
}
|
||||
|
||||
code.cmd {
|
||||
background-color: #333;
|
||||
background-color: var(--cmd-bg);
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
|
|
@ -481,8 +505,10 @@ article aside.advice::before {
|
|||
}
|
||||
|
||||
article aside.tip {
|
||||
color: #706b95;
|
||||
color: var(--tip-color);
|
||||
}
|
||||
|
||||
|
||||
article aside.advice {
|
||||
color: #826848;
|
||||
}
|
||||
|
|
@ -556,7 +582,7 @@ td code {
|
|||
visibility: hidden;
|
||||
left: 75%;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
background: var(--autonav-bg);
|
||||
box-shadow: 0 10px 40px rgb(0 0 0 / .2);
|
||||
border-radius: 10px;
|
||||
border-top-left-radius: 0;
|
||||
|
|
@ -604,67 +630,10 @@ main nav > ul > li:hover #autonav {
|
|||
}
|
||||
|
||||
#pagenav a:hover {
|
||||
background: #f4f7f9;
|
||||
background: var(--pagenav-hover-bg);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0; transform: translateY(2em); }
|
||||
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;
|
||||
}
|
||||
|
|
@ -8,3 +8,13 @@
|
|||
|
||||
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;
|
||||
}
|
||||
|
|
@ -127,6 +127,9 @@ function getTheme() {
|
|||
|
||||
// setTheme changes the configured theme to light, dark, or system and applies it.
|
||||
function setTheme(theme) {
|
||||
if (theme !== "light" && theme !== "dark" && theme !== "system") {
|
||||
theme = "system";
|
||||
}
|
||||
localStorage.setItem("theme", theme);
|
||||
$('#current-theme').innerText = theme;
|
||||
if (theme == "system") {
|
||||
|
|
@ -139,10 +142,8 @@ function setTheme(theme) {
|
|||
function applyTheme(lightOrDark) {
|
||||
if (lightOrDark == "dark") {
|
||||
$('html').classList.add('dark');
|
||||
$('#logo').src = '/resources/images/logo-dark.svg';
|
||||
} else {
|
||||
$('html').classList.remove('dark');
|
||||
$('#logo').src = '/resources/images/logo-light.svg';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,3 +159,23 @@ function nextTheme() {
|
|||
}
|
||||
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);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue