yequari
/
yequari.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing navbar spotlight

This commit is contained in:
yequari 2024-11-03 06:51:18 -07:00
parent 89d9a825e4
commit 63adc1d843
4 changed files with 94 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/dreamcast/layouts/_default/baseof.html
View File

@ -6,7 +6,7 @@
<header>
{{- partial "header.html" . -}}
</header>
<nav>
<nav id="main-navbar">
{{- partial "nav.html" . -}}
</nav>
<div class="main-sidebar">

1
themes/dreamcast/layouts/blog/single.html
View File

@ -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>

88
themes/dreamcast/static/css/main.css
View File

@ -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 {
nav#main-navbar 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%),
/* 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%
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%,

50
themes/dreamcast/static/js/main.js
View File

@ -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();