fixing navbar spotlight

themes/dreamcast/layouts/_default/baseof.html

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

themes/dreamcast/layouts/blog/single.html

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

themes/dreamcast/static/css/main.css

@@ -18,19 +18,19 @@
     --lavender: #E1E2EF;
     --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-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: #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;
 }
 
-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;
+    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.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;
   border-radius: 15px;
   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;
   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#main-navbar li a:link,
-nav li a:visited {
+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#main-navbar li a:hover,
-nav li a:active {
+nav#main-navbar li a:active {
   background: radial-gradient(
     ellipse 425% 100% at top,
     rgba(255, 255, 255, 0.25) 0%,

themes/dreamcast/static/js/main.js

@@ -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)",
+  // 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) => {
@@ -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-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 = "";
 detectTheme();