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

update navbar

This commit is contained in:
yequari 2024-10-01 20:08:48 -07:00
parent d7077c187d
commit 05e90297c7
3 changed files with 127 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
themes/dreamcast/layouts/partials/head.html
View File

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

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

@ -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; */
transition: box-shadow 0.3s;
font-size: 1.1rem;
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 {
color: var(--nav-link);
nav li a: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 {
animation: 0.2s ease-in 1 forwards gradient;
outline: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px white;
nav li a:hover,
nav li a:active {
background: radial-gradient(
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;

14
themes/dreamcast/static/js/main.js Normal file
View File

@ -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"));
});