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

2
.github/workflows/docker-build.yml vendored
View File

@@ -2,7 +2,7 @@ name: Build and Push Astro Homepage
on:
push:
branches: [ "master" ]
branches: ["master"]
workflow_dispatch:
jobs:

1
package-lock.json generated
View File

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

1
package.json
View File

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

82
src/components/Header.astro
View File

@@ -1,6 +1,7 @@
---
import { SITE_TITLE } from '@ptypes/consts.ts';
import HeaderLink from '@components/HeaderLink.astro';
import '@styles/indexHoverCss.css';
import { getCollection } from 'astro:content';
const personalPosts = (await getCollection('personal')).sort(
@@ -10,51 +11,36 @@ const uniPosts = (await getCollection('uni')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---
<header>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<ul>
<h4>Personal</h4>
{
personalPosts.map((post) => (
<li>
<HeaderLink href={`/blog/personal/${post.id}/`}>{post.data.title}</HeaderLink>
</li>
))
}
<hr>
<h4>University</h4>
<h6>(Group Projects)</h6>
{
uniPosts.map((post) => (
<li>
<HeaderLink href={`/blog/university/${post.id}/`}>{post.data.title}</HeaderLink>
</li>
))
}
</ul>
</div>
</nav>
</header>
<style>
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>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<ul>
<h4>Personal</h4>
{
personalPosts.map((post) => (
<li>
<HeaderLink href={`/blog/personal/${post.id}/`}>{post.data.title}</HeaderLink>
</li>
))
}
<hr>
<h4>University</h4>
<h6>(Group Projects)</h6>
{
uniPosts.map((post) => (
<li>
<HeaderLink href={`/blog/university/${post.id}/`}>{post.data.title}</HeaderLink>
</li>
))
}
</ul>
</div>
</nav>
</body>
</html>

13
src/components/HeaderLink.astro
View File

@@ -9,6 +9,13 @@ const subpath = pathname.match(/[^\/]+/g);
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
---
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</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 }
p { color: #cacbcd}
a { color: #cacbcd }
nav::after { background: #101828; }
img { border: 10px solid;
border-color: #ffdf20; }
ul li {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

62
src/pages/index.astro
View File

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

4
src/styles/global.css
View File

@@ -68,10 +68,10 @@ b {
font-weight: 700;
}
a {
color: var(--accent);
color: #734f96;
}
a:hover {
color: var(--accent);
color: var(--help);
}
p {
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;
}