juli0n21/homepage
1
0
Fork 0
mirror of https://github.com/JuLi0n21/homepage.git synced 2026-04-19 15:20:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(): CSS Hover effects on nav bar (#3)

Browse Source 
* style(): CSS Hover effects on nav bar
---------

Co-authored-by: JuLi0n21 <julianschlueterbusiness21@gmail.com>
This commit is contained in:
Kami
2026-03-08 14:30:18 +08:00
committed by GitHub
parent eabb1d0fcc
commit 27685bd28e
24 changed files with 155 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@astrojs/rss": "^4.0.15", "@astrojs/rss": "^4.0.15",
"@astrojs/sitemap": "^3.7.0", "@astrojs/sitemap": "^3.7.0",
"astro": "^5.17.1", "astro": "^5.17.1",
"prettier": "^3.8.1",
"sharp": "^0.34.3", "sharp": "^0.34.3",
"typescript": "^5.9.3" "typescript": "^5.9.3"
} }

1
package.json
View File

@@ -17,6 +17,7 @@
"@astrojs/rss": "^4.0.15", "@astrojs/rss": "^4.0.15",
"@astrojs/sitemap": "^3.7.0", "@astrojs/sitemap": "^3.7.0",
"astro": "^5.17.1", "astro": "^5.17.1",
"prettier": "^3.8.1",
"sharp": "^0.34.3", "sharp": "^0.34.3",
"typescript": "^5.9.3" "typescript": "^5.9.3"
} }

34
src/components/Header.astro
View File

@@ -1,6 +1,7 @@
--- ---
import { SITE_TITLE } from '@ptypes/consts.ts'; import { SITE_TITLE } from '@ptypes/consts.ts';
import HeaderLink from '@components/HeaderLink.astro'; import HeaderLink from '@components/HeaderLink.astro';
import '@styles/indexHoverCss.css';
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
const personalPosts = (await getCollection('personal')).sort( const personalPosts = (await getCollection('personal')).sort(
@@ -10,8 +11,13 @@ const uniPosts = (await getCollection('uni')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
); );
--- ---
<!DOCTYPE html>
<header> <html>
<head>
<style>
</style>
</head>
<body>
<nav> <nav>
<h2><a href="/">{SITE_TITLE}</a></h2> <h2><a href="/">{SITE_TITLE}</a></h2>
<ul> <ul>
@@ -36,25 +42,5 @@ const uniPosts = (await getCollection('uni')).sort(
</ul> </ul>
</div> </div>
</nav> </nav>
</header> </body>
<style> </html>
header {
display: flex;
margin: 0;
padding: 0 1em;
width: 8vw;
}
nav {
display: flex;
align-items: start;
justify-content: space-between;
flex-direction: column;
}
@media (max-width: 720px) {
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>

7
src/components/HeaderLink.astro
View File

@@ -9,6 +9,13 @@ const subpath = pathname.match(/[^\/]+/g);
const isActive = href === pathname || href === '/' + (subpath?.[0] || ''); const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
--- ---
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href={href} class:list={[className, { active: isActive }]} {...props}> <a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot /> <slot />
</a> </a>
</body>
</html>

1
src/content/blog/personal/fileclap.mdx
View File

@@ -15,6 +15,7 @@ import search from "@assets/fileclap/search.png";
.wrapper {background: #101828 } .wrapper {background: #101828 }
p { color: #cacbcd} p { color: #cacbcd}
a { color: #cacbcd } a { color: #cacbcd }
nav::after { background: #101828; }
img { border: 10px solid; img { border: 10px solid;
border-color: #ffdf20; } border-color: #ffdf20; }
ul li { ul li {

2
src/content/blog/personal/general.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #f90f91 } figcaption::before { color: #f90f91 }
body { background: #19171a } body { background: #19171a }
.wrapper {background: #0a090a } .wrapper, nav::after {background: #0a090a }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/personal/horsa.md
View File

@@ -13,7 +13,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/personal/osuProgress.md
View File

@@ -10,7 +10,7 @@ h2,
h3, h3,
h4, ul li { color: #c8cacb } h4, ul li { color: #c8cacb }
body { background: #171a1c } body { background: #171a1c }
.wrapper {background: #22282a } .wrapper, nav::after {background: #22282a }
p, a, ul { color: #cda637 } p, a, ul { color: #cda637 }
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/personal/pwaplayer.md
View File

@@ -11,7 +11,7 @@ pubDate: "Jul 08 2022"
h4, h4,
ul li, ul li,
figcaption:before { color: #eab308 } figcaption:before { color: #eab308 }
body, .wrapper {background: #1c1719 } body, .wrapper, nav::after {background: #1c1719 }
a, p, ul { color: #ec4889} a, p, ul { color: #ec4889}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/eai-presentation.md
View File

@@ -10,7 +10,7 @@ h2,
h3, h3,
h4, ul li { color: #c8cacb } h4, ul li { color: #c8cacb }
body { background: #171a1c } body { background: #171a1c }
.wrapper {background: #22282a } .wrapper, nav::after {background: #22282a }
p, a, ul { color: #cda637 } p, a, ul { color: #cda637 }
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/eai.md
View File

@@ -10,7 +10,7 @@ h2,
h3, h3,
h4, ul li { color: #c8cacb } h4, ul li { color: #c8cacb }
body { background: #171a1c } body { background: #171a1c }
.wrapper {background: #22282a } .wrapper, nav::after {background: #22282a }
p, a, ul { color: #cda637 } p, a, ul { color: #cda637 }
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/eai.xmpp.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/gc-project.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/gwa.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/ina2.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/ise-tweeter.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/mandelbrot.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/messanger.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/picShare.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

2
src/content/blog/university/project-1.md
View File

@@ -12,7 +12,7 @@ h4,
ul li, ul li,
figcaption::before { color: #bb4d00 } figcaption::before { color: #bb4d00 }
body {background: #27272a } body {background: #27272a }
.wrapper {background: #18181b } .wrapper, nav::after {background: #18181b }
p, a, ul { color: #e2e2e2} p, a, ul { color: #e2e2e2}
img { img {
border: 10px solid; border: 10px solid;

62
src/pages/index.astro
View File

@@ -26,18 +26,6 @@ if (response.ok) {
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style> <style>
body, html {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
main {
margin: 1cm;
padding: 1cm;
}
.layout { .layout {
display: flex; display: flex;
height: 100%; height: 100%;
@@ -45,8 +33,7 @@ if (response.ok) {
} }
.sidebar { .sidebar {
flex: 0 0 200px; height: 100vh;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
@@ -63,6 +50,12 @@ if (response.ok) {
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin: 1cm;
}
main {
background: white;
overflow: hidden;
} }
.gallery-wrapper { .gallery-wrapper {
@@ -76,12 +69,12 @@ if (response.ok) {
display: flex; display: flex;
gap: 3rem; gap: 3rem;
width: max-content; width: max-content;
animation: infiniteScroll 300s linear infinite; animation: infiniteScroll 500s linear infinite;
padding: 0 2rem; padding: 0 2rem;
} }
.track-reverse { .track-reverse {
animation: infiniteScrollReverse 630s linear infinite; animation: infiniteScrollReverse 600s linear infinite;
} }
.tilted-container { .tilted-container {
@@ -107,13 +100,13 @@ if (response.ok) {
} }
@keyframes infiniteScroll { @keyframes infiniteScroll {
0% { transform: translateX(0); } 0% { transform: translateX(0%); }
100% { transform: translateX(calc(-50%)); } 100% { transform: translateX(-50%); }
} }
@keyframes infiniteScrollReverse { @keyframes infiniteScrollReverse {
0% { transform: translateX(0); } 0% { transform: translateX(0%); }
100% { transform: translateX(calc(50%)) } 100% { transform: translateX(50%) }
} }
</style> </style>
</head> </head>
@@ -123,39 +116,28 @@ if (response.ok) {
<Header /> <Header />
</aside> </aside>
<!-- Removed redundant alt flag, default dom has alt flag set to "" -->
<main class="scrolling-gallery"> <main class="scrolling-gallery">
<div class="gallery-wrapper"> <div class="gallery-wrapper">
<div class="scroll-track"> <div class="scroll-track">
{images.map((src) => ( {[...images, ...images].map((src) => (
<a class="tilted-container" href={src} target="_blank"> <a class="tilted-container" href={src} target="_blank">
<img src={src} /> <img src={src} loading="lazy" />
</a>
))}
{images.map((src) => (
<a class="tilted-container" href={src} target="_blank">
<img src={src} />
</a> </a>
))} ))}
</div> </div>
{
}
<div class="scroll-track track-reverse"> <div class="scroll-track track-reverse">
{shuffled.slice().reverse().map((src) => ( {[...shuffled,...shuffled].map((src) => (
<a class="tilted-container" href={src} target="_blank"> <a class="tilted-container" href={src} target="_blank">
<img src={src} /> <img src={src} loading="lazy" />
</a> </a>
))} ))
{shuffled.slice().reverse().map((src) => ( }
<a class="tilted-container" href={src} target="_blank">
<img src={src} />
</a>
))}
</div> </div>
</div> </div>
</main> </main>
</div> </div>
</body> </body>
</html> </html>
<!-- import Footer from '@components/Footer.astro'; -->

4
src/styles/global.css
View File

@@ -68,10 +68,10 @@ b {
font-weight: 700; font-weight: 700;
} }
a { a {
color: var(--accent); color: #734f96;
} }
a:hover { a:hover {
color: var(--accent); color: var(--help);
} }
p { p {
margin-bottom: 1em; margin-bottom: 1em;

66
src/styles/indexHoverCss.css Normal file
View File

@@ -0,0 +1,66 @@
/**
* author - Kami aka VlxtIykg on github
* description - cool CSS hover effects
*/
nav {
display: flex;
align-items: start;
justify-content: space-between;
flex-direction: column;
anchor-name: --active-nav;
margin: 0 1rem;
padding: 0 1rem;
box-sizing: border-box;
color: black !important;
}
@media (max-width: 720px) {
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
}
nav::after {
content: "";
background: #ababab;
position: absolute;
position-anchor: --active-nav;
left: anchor(left);
right: anchor(right);
top: anchor(top);
bottom: anchor(bottom);
z-index: -1000;
padding: 1rem;
box-sizing: border-box;
transition: inset 150ms;
}
li :is(:hover, :focus-visible) {
anchor-name: --active-nav;
}
nav {
overflow: hidden;
padding: 1;
margin: 1;
}
nav ul {
list-style-type: none;
overflow: auto;
}
nav ul li {
padding: 0.1rem 0;
align-content: center;
}
nav ul li a {
padding: 0.2rem;
text-align: left;
}