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

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

@ -181,71 +181,135 @@ header .profile img {
} }
nav { nav {
/* 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;
box-shadow: 3px 3px 5px var(--shadow); box-shadow: 3px 3px 5px var(--shadow);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
font-family: 'Noto Sans', sans-serif; text-align: center;
font-weight: 500; padding: 0;
text-align: center; border-radius: 15px;
padding: 0; margin-bottom: 10px;
border-radius: 15px;
margin-bottom: 10px;
} }
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 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 { 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 { nav li a {
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
/* font-size: 1.1rem; */ font-size: 1.1rem;
transition: box-shadow 0.3s;
text-transform: uppercase; 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 {
text-decoration: none; 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% { 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%,
20% { rgba(255, 255, 255, 0) 0%,
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%); rgba(255, 255, 255, 0) 10%,
} rgba(255, 255, 255, 0) 20%
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%); }
} 20% {
60% { background: radial-gradient(
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%); circle at 50% 100%,
} rgba(255, 255, 255, 0.05) 0%,
80% { rgba(255, 255, 255, 0.03) 20%,
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%); rgba(255, 255, 255, 0) 30%
} );
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%); 40% {
} 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.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.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.2) 0%,
rgba(255, 255, 255, 0.15) 25%,
rgba(255, 255, 255, 0) 50%
);
}
} }
.main-sidebar { .main-sidebar {
background-color: var(--content-bg); background-color: var(--content-bg);
border-radius: 15px; 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"));
});