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