Add some more and smoother transistions
All checks were successful
Deploy Astro / Build and Deploy (push) Successful in 54s
All checks were successful
Deploy Astro / Build and Deploy (push) Successful in 54s
This commit is contained in:
@@ -25,21 +25,6 @@ import Logo from "../assets/logo.svg";
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
body:has(nav a[href="/"]:hover) {
|
|
||||||
--accent-base: var(--accent-base--default);
|
|
||||||
}
|
|
||||||
body:has(nav a[href="/portfolio"]:hover) {
|
|
||||||
--accent-base: var(--accent-base--portfolio);
|
|
||||||
}
|
|
||||||
body:has(nav a[href="/blog"]:hover) {
|
|
||||||
--accent-base: var(--accent-base--blog);
|
|
||||||
}
|
|
||||||
body:has(nav a[href="/book"]:hover) {
|
|
||||||
--accent-base: var(--accent-base--book);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.main-nav {
|
.main-nav {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@view-transition {
|
@view-transition {
|
||||||
@@ -122,6 +123,11 @@ body[data-theme="book"] {
|
|||||||
--bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
|
--bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body:has(nav a[href="/"]:hover) { --accent-base: var(--accent-base--default);}
|
||||||
|
body:has(nav a[href="/portfolio"]:hover), body:has(.portfolio:hover) { --accent-base: var(--accent-base--portfolio); }
|
||||||
|
body:has(nav a[href="/blog"]:hover), body:has(.blog:hover) { --accent-base: var(--accent-base--blog); }
|
||||||
|
body:has(nav a[href="/book"]:hover), body:has(.book:hover) { --accent-base: var(--accent-base--book); }
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user