fixing navbar spotlight
This commit is contained in:
parent
89d9a825e4
commit
63adc1d843
|
@ -6,7 +6,7 @@
|
|||
<header>
|
||||
{{- partial "header.html" . -}}
|
||||
</header>
|
||||
<nav>
|
||||
<nav id="main-navbar">
|
||||
{{- partial "nav.html" . -}}
|
||||
</nav>
|
||||
<div class="main-sidebar">
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
<div class="e-content">
|
||||
<h1 class="p-name">{{ .Title }}</h1>
|
||||
{{ if .Params.Subtitle }}<p class="subtitle">{{ .Params.Subtitle }}</p>{{ end }}
|
||||
{{ if .Params.toc }}<aside>{{ .TableOfContents }}</aside>{{ end }}
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
@ -18,19 +18,19 @@
|
|||
--lavender: #E1E2EF;
|
||||
--mardi-gras: #320F76;
|
||||
|
||||
--main-bg: linear-gradient(#0045df, #00d4ff);
|
||||
--content-bg: var(--isabelline);
|
||||
--primary-text: var(--black);
|
||||
--secondary-text: var(--blue-gray);
|
||||
--header: var(--orange);
|
||||
--nav-link: var(--orange);
|
||||
--primary-link: var(--brown);
|
||||
--primary-link-hover: var(--blue);
|
||||
--secondary-link: var(--blue);
|
||||
--secondary-link-hover: var(--brown);
|
||||
--ternary-link: var(--blue);
|
||||
--ternary-link-hover: var(--brown);
|
||||
--shadow: #2F3E5E55;
|
||||
/* --main-bg: linear-gradient(#0045df, #00d4ff); */
|
||||
/* --content-bg: var(--isabelline); */
|
||||
/* --primary-text: var(--black); */
|
||||
/* --secondary-text: var(--blue-gray); */
|
||||
/* --header: var(--orange); */
|
||||
/* --nav-link: var(--orange); */
|
||||
/* --primary-link: var(--brown); */
|
||||
/* --primary-link-hover: var(--blue); */
|
||||
/* --secondary-link: var(--blue); */
|
||||
/* --secondary-link-hover: var(--brown); */
|
||||
/* --ternary-link: var(--blue); */
|
||||
/* --ternary-link-hover: var(--brown); */
|
||||
/* --shadow: #2F3E5E55; */
|
||||
|
||||
--heading-1: 2.75rem;
|
||||
--heading-2: 2.25rem;
|
||||
|
@ -60,19 +60,29 @@
|
|||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
/* --main-bg: linear-gradient(#0045df, #00d4ff); */
|
||||
/* --content-bg: var(--isabelline); */
|
||||
/* --primary-text: var(--black); */
|
||||
/* --secondary-text: var(--blue-gray); */
|
||||
/* --header: var(--orange); */
|
||||
/* --nav-link: var(--orange); */
|
||||
/* --primary-link: var(--brown); */
|
||||
/* --primary-link-hover: var(--blue); */
|
||||
/* --secondary-link: var(--blue); */
|
||||
/* --secondary-link-hover: var(--brown); */
|
||||
/* --ternary-link: var(--blue); */
|
||||
/* --ternary-link-hover: var(--brown); */
|
||||
/* --shadow: #2F3E5E55; */
|
||||
|
||||
--main-bg: linear-gradient(#0045df, #00d4ff);
|
||||
--content-bg: var(--isabelline);
|
||||
--content-bg: #009BF0;
|
||||
--primary-text: var(--black);
|
||||
--secondary-text: var(--blue-gray);
|
||||
--header: var(--orange);
|
||||
--nav-link: var(--orange);
|
||||
--primary-link: var(--brown);
|
||||
--primary-link-hover: var(--blue);
|
||||
--secondary-link: var(--blue);
|
||||
--secondary-link-hover: var(--brown);
|
||||
--ternary-link: var(--blue);
|
||||
--ternary-link-hover: var(--brown);
|
||||
--shadow: #2F3E5E55;
|
||||
--header: #9900F0;
|
||||
--nav-link: #9900F0;
|
||||
--primary-link: #4A00F0;
|
||||
--primary-link-hover: #0050F0;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -224,7 +234,7 @@ header .profile img {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
nav#main-navbar {
|
||||
/* From https://css.glass */
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
border-radius: 16px;
|
||||
|
@ -238,34 +248,38 @@ nav {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: radial-gradient(
|
||||
circle at calc((var(--mouse-x, 50) * 75%)) calc(var(--mouse-y, 50) * 100%),
|
||||
nav#main-navbar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: radial-gradient(
|
||||
/* circle at calc(var(--mouse-x) + var(--nav-x)) calc(var(--mouse-y) + var(--nav-y)), */
|
||||
/* circle at var(--mouse-x) var(--mouse-y), */
|
||||
circle at center,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 20%,
|
||||
rgba(255, 255, 255, 0) 30%
|
||||
);
|
||||
border-radius: 15px;
|
||||
rgba(255, 255, 255, 0.05) 25%,
|
||||
rgba(255, 255, 255, 0) 40%
|
||||
);
|
||||
background-position-x: calc(var(--mouse-x) - var(--nav-x-offset));
|
||||
background-position-y: calc(var(--mouse-y) - var(--nav-y-offset));
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
nav#main-navbar li {
|
||||
display: inline-block;
|
||||
border-radius: 15px;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
nav li:hover,
|
||||
nav li:active {
|
||||
nav#main-navbar li:hover,
|
||||
nav#main-navbar li:active {
|
||||
animation: 0.2s ease-in 1 forwards spotlight;
|
||||
outline: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-clip: border-box;
|
||||
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
nav li a {
|
||||
nav#main-navbar li a {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
font-size: 1.1rem;
|
||||
|
@ -277,16 +291,16 @@ nav li a {
|
|||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
nav li a:link,
|
||||
nav li a:visited {
|
||||
nav#main-navbar li a:link,
|
||||
nav#main-navbar li a:visited {
|
||||
color: var(--nav-link);
|
||||
text-decoration: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
nav li a:hover,
|
||||
nav li a:active {
|
||||
nav#main-navbar li a:hover,
|
||||
nav#main-navbar li a:active {
|
||||
background: radial-gradient(
|
||||
ellipse 425% 100% at top,
|
||||
rgba(255, 255, 255, 0.25) 0%,
|
||||
|
|
|
@ -1,7 +1,14 @@
|
|||
const root = document.querySelector(':root');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const mainNavbar = document.querySelector('#main-navbar');
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let navX = mainNavbar.getBoundingClientRect().x;
|
||||
let navY = mainNavbar.getBoundingClientRect().y;
|
||||
let navW = mainNavbar.getBoundingClientRect().width;
|
||||
let navH = mainNavbar.getBoundingClientRect().height;
|
||||
root.style.setProperty("--nav-x", `${navX}`);
|
||||
root.style.setProperty("--nav-y", `${navY}`);
|
||||
|
||||
const darkMode = {
|
||||
mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
|
||||
|
@ -20,19 +27,20 @@ const darkMode = {
|
|||
}
|
||||
|
||||
const lightMode = {
|
||||
mainBg: "linear-gradient(#0045df, #00d4ff)",
|
||||
contentBg: "#EEE5E5",
|
||||
primaryText: "#342F23",
|
||||
secondaryText: "#2F3E5E",
|
||||
header: "#DE9B00",
|
||||
navLink: "#DE9B00",
|
||||
primaryLink: "#896D2E",
|
||||
primaryLinkHover: "#284D9E",
|
||||
secondaryLink: "#284D9E",
|
||||
secondaryLinkHover: "#896D2E",
|
||||
ternaryLink: "#284D9E",
|
||||
ternaryLinkHover: "#896D2E",
|
||||
shadow: "#2F3E5E55"
|
||||
// mainBg: "linear-gradient(#0045df, #00d4ff)",
|
||||
mainBg: "linear-gradient(#2B5F8C, #3DADF2)",
|
||||
contentBg: "white",
|
||||
primaryText: "#132B40",
|
||||
secondaryText: "#2B5F8C",
|
||||
header: "#CFE8FF",
|
||||
navLink: "#CFE8FF",
|
||||
primaryLink: "#337AA6",
|
||||
primaryLinkHover: "#3DADF2",
|
||||
secondaryLink: "#2F4A62",
|
||||
secondaryLinkHover: "#2B5F8C",
|
||||
ternaryLink: "#2B5F8C",
|
||||
ternaryLinkHover: "#3DADF2",
|
||||
shadow: "#132B40AA"
|
||||
}
|
||||
|
||||
const applyTheme = (theme) => {
|
||||
|
@ -81,10 +89,22 @@ document.addEventListener("mousemove", (evt) => {
|
|||
mouseX = evt.clientX / innerWidth;
|
||||
mouseY = evt.clientY / innerHeight;
|
||||
|
||||
root.style.setProperty("--mouse-x", `${mouseX}`);
|
||||
root.style.setProperty("--mouse-y", `${mouseY}`);
|
||||
root.style.setProperty("--mouse-x", `${evt.clientX}px`);
|
||||
root.style.setProperty("--mouse-y", `${evt.clientY}px`);
|
||||
});
|
||||
|
||||
const calcNavOffset = () => {
|
||||
let rect = mainNavbar.getBoundingClientRect()
|
||||
navX = rect.x;
|
||||
navY = rect.y;
|
||||
navW = rect.width;
|
||||
navH = rect.height;
|
||||
root.style.setProperty("--nav-x-offset", `${navX - (navW / 2)}px`);
|
||||
root.style.setProperty("--nav-y-offset", `${navY - (navH / 2)}px`);
|
||||
}
|
||||
|
||||
calcNavOffset();
|
||||
|
||||
themeToggle.className = "";
|
||||
detectTheme();
|
||||
|
||||
|
|
Loading…
Reference in New Issue