diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml index 9f57f22..8827136 100644 --- a/.github/workflows/docker-build.yml +++ b/.github/workflows/docker-build.yml @@ -2,7 +2,7 @@ name: Build and Push Astro Homepage on: push: - branches: [ "master" ] + branches: ["master"] workflow_dispatch: jobs: diff --git a/package-lock.json b/package-lock.json index b393a5b..3884fcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" } diff --git a/package.json b/package.json index 939e61f..3dd1d6e 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/components/Header.astro b/src/components/Header.astro index c32204a..ad378f9 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -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(), ); --- - -
- -
- + + + + + + + + + diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index dc1f244..be56944 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -9,6 +9,13 @@ const subpath = pathname.match(/[^\/]+/g); const isActive = href === pathname || href === '/' + (subpath?.[0] || ''); --- - - - + + + + + + + + + + diff --git a/src/content/blog/personal/fileclap.mdx b/src/content/blog/personal/fileclap.mdx index 59eceec..89438cd 100644 --- a/src/content/blog/personal/fileclap.mdx +++ b/src/content/blog/personal/fileclap.mdx @@ -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 { diff --git a/src/content/blog/personal/general.md b/src/content/blog/personal/general.md index 18115cb..28746e0 100644 --- a/src/content/blog/personal/general.md +++ b/src/content/blog/personal/general.md @@ -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; diff --git a/src/content/blog/personal/horsa.md b/src/content/blog/personal/horsa.md index f4d46d6..8c7fa74 100644 --- a/src/content/blog/personal/horsa.md +++ b/src/content/blog/personal/horsa.md @@ -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; diff --git a/src/content/blog/personal/osuProgress.md b/src/content/blog/personal/osuProgress.md index 72162d2..0964450 100644 --- a/src/content/blog/personal/osuProgress.md +++ b/src/content/blog/personal/osuProgress.md @@ -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; diff --git a/src/content/blog/personal/pwaplayer.md b/src/content/blog/personal/pwaplayer.md index 982af48..6184dad 100644 --- a/src/content/blog/personal/pwaplayer.md +++ b/src/content/blog/personal/pwaplayer.md @@ -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; diff --git a/src/content/blog/university/eai-presentation.md b/src/content/blog/university/eai-presentation.md index 94ce9e4..c899883 100644 --- a/src/content/blog/university/eai-presentation.md +++ b/src/content/blog/university/eai-presentation.md @@ -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; diff --git a/src/content/blog/university/eai.md b/src/content/blog/university/eai.md index e3af71b..9528dcc 100644 --- a/src/content/blog/university/eai.md +++ b/src/content/blog/university/eai.md @@ -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; diff --git a/src/content/blog/university/eai.xmpp.md b/src/content/blog/university/eai.xmpp.md index 0b5d55b..3d31693 100644 --- a/src/content/blog/university/eai.xmpp.md +++ b/src/content/blog/university/eai.xmpp.md @@ -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; diff --git a/src/content/blog/university/gc-project.md b/src/content/blog/university/gc-project.md index e039612..502d916 100644 --- a/src/content/blog/university/gc-project.md +++ b/src/content/blog/university/gc-project.md @@ -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; diff --git a/src/content/blog/university/gwa.md b/src/content/blog/university/gwa.md index 8192e90..6b96bc0 100644 --- a/src/content/blog/university/gwa.md +++ b/src/content/blog/university/gwa.md @@ -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; diff --git a/src/content/blog/university/ina2.md b/src/content/blog/university/ina2.md index c5d9b3f..2c4ee18 100644 --- a/src/content/blog/university/ina2.md +++ b/src/content/blog/university/ina2.md @@ -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; diff --git a/src/content/blog/university/ise-tweeter.md b/src/content/blog/university/ise-tweeter.md index 532f7c9..385c54c 100644 --- a/src/content/blog/university/ise-tweeter.md +++ b/src/content/blog/university/ise-tweeter.md @@ -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; diff --git a/src/content/blog/university/mandelbrot.md b/src/content/blog/university/mandelbrot.md index 99be976..5024186 100644 --- a/src/content/blog/university/mandelbrot.md +++ b/src/content/blog/university/mandelbrot.md @@ -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; diff --git a/src/content/blog/university/messanger.md b/src/content/blog/university/messanger.md index 55ac728..47f4b55 100644 --- a/src/content/blog/university/messanger.md +++ b/src/content/blog/university/messanger.md @@ -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; diff --git a/src/content/blog/university/picShare.md b/src/content/blog/university/picShare.md index a6af728..9a23996 100644 --- a/src/content/blog/university/picShare.md +++ b/src/content/blog/university/picShare.md @@ -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; diff --git a/src/content/blog/university/project-1.md b/src/content/blog/university/project-1.md index dd29a4a..4bed638 100644 --- a/src/content/blog/university/project-1.md +++ b/src/content/blog/university/project-1.md @@ -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; diff --git a/src/pages/index.astro b/src/pages/index.astro index 3c4ec1b..a690f9a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -26,18 +26,6 @@ if (response.ok) { @@ -123,39 +116,28 @@ if (response.ok) {
-
- {images.map((src) => ( + {[...images, ...images].map((src) => ( - - - ))} - - {images.map((src) => ( - - + ))}
+ { + + }
- {shuffled.slice().reverse().map((src) => ( + {[...shuffled,...shuffled].map((src) => ( - + - ))} - {shuffled.slice().reverse().map((src) => ( - - - - ))} + )) + }
-
+ - - - diff --git a/src/styles/global.css b/src/styles/global.css index d098577..1b43c0a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; diff --git a/src/styles/indexHoverCss.css b/src/styles/indexHoverCss.css new file mode 100644 index 0000000..c9554d9 --- /dev/null +++ b/src/styles/indexHoverCss.css @@ -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; +}