update navbar

themes/dreamcast/layouts/partials/head.html

@@ -12,6 +12,7 @@
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="webmention" href="{{ .Site.Params.Webmentions }}" />
     <link rel="pingback" href="{{ .Site.Params.Pingbacks }}" />
+    <script src="/js/main.js" defer></script>
     {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 {{ end -}}

themes/dreamcast/static/css/main.css

@@ -188,8 +188,6 @@ nav {
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
-    font-family: 'Noto Sans', sans-serif;
-    font-weight: 500;
   text-align: center;
   padding: 0;
   border-radius: 15px;
@@ -200,52 +198,118 @@ 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%),
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 20%,
+    rgba(255, 255, 255, 0) 30%
+  );
+  border-radius: 15px;
 }
 
 nav li {
-    display: inline;
+  display: inline-block;
+  border-radius: 15px;
+  transition: box-shadow 0.3s;
+}
+
+nav li:hover {
+  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 {
   display: inline-block;
   padding: 20px;
-    /* font-size: 1.1rem; */
+  font-size: 1.1rem;
-    transition: box-shadow 0.3s;
+
   text-transform: uppercase;
+  font-family: "Noto Sans", sans-serif;
+  font-weight: 500;
+  border-radius: 15px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-nav li a:link, nav li a:visited {
+nav li a:link,
-    color: var(--nav-link);
+nav li a:visited {
+  color: #de9b00;
   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 li a:hover,
-    animation: 0.2s ease-in 1 forwards gradient;
+nav li a:active {
-    outline: 1px solid rgba(255, 255, 255, 0.3);
+  background: radial-gradient(
-    box-shadow: 0 0 10px white;
+    ellipse 425% 100% at top,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.05) 30%,
+    rgba(255, 255, 255, 0) 32%
+  );
+/*   background: linear-gradient(
+    rgba(255, 255, 255, 0.13) 0%,
+    rgba(255, 255, 255, 0.1) 30%,
+    rgba(255, 255, 255, 0) 31%
+  ); */
+  border-left: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
 }
 
-@keyframes gradient {
+@keyframes spotlight {
   0% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 10%,
+      rgba(255, 255, 255, 0) 20%
+    );
   }
   20% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0.03) 20%,
+      rgba(255, 255, 255, 0) 30%
+    );
   }
   40% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.07) 25%,
+      rgba(255, 255, 255, 0) 45%
+    );
   }
   60% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.13) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
   }
   80% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
   }
   100% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
   }
 }
 
+
 .main-sidebar {
     background-color: var(--content-bg);
     border-radius: 15px;

themes/dreamcast/static/js/main.js

@@ -0,0 +1,14 @@
+const root = document.documentElement;
+let mouseX = 0;
+let mouseY = 0;
+
+document.addEventListener("mousemove", (evt) => {
+  mouseX = evt.clientX / innerWidth;
+  mouseY = evt.clientY / innerHeight;
+
+  root.style.setProperty("--mouse-x", `${mouseX}`);
+  root.style.setProperty("--mouse-y", `${mouseY}`);
+
+  console.log(root.style.getPropertyValue("--mouse-x"));
+});
+