Skip to content

Commit bc73fbb

Browse files
bryliebrylie
authored
Merge pull request #31 from brylie/improved-theme
Enhance accessibility and styling across components
2 parents f9dc8db + a4876b7 commit bc73fbb

24 files changed

+1579
-561
lines changed

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"devDependencies": {
1919
"@iconify-json/ic": "^1.2.2",
2020
"@iconify-json/logos": "^1.2.4",
21+
"@iconify-json/mdi": "^1.2.3",
2122
"@iconify-json/skill-icons": "^1.2.0",
2223
"@tailwindcss/typography": "^0.5.16",
2324
"prettier": "^3.5.2",

‎src/components/BlogPostListItem.astro

+41-44
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,47 @@
11
---
22
import { Icon } from "astro-icon/components";
3-
const { title, url, datePublished } = Astro.props;
3+
const { title, url, datePublished, description } = Astro.props;
44
---
55

6-
<li class="blog-post-list-item">
7-
<a href={url} class="blog-post-link">
8-
<Icon name="ic:outline-article" class="icon" size="42" />
9-
<div class="blog-post-content">
10-
<h2>{title}</h2>
11-
<p>Published on: {datePublished}</p>
6+
<article
7+
class="group relative backdrop-blur-sm p-4 hover:bg-gray-50/90 dark:hover:bg-gray-800/50 rounded-lg transition-all duration-300 hover:shadow-sm"
8+
>
9+
<a href={url} class="flex items-start gap-4 hover:no-underline">
10+
<div
11+
class="hidden sm:flex flex-shrink-0 w-10 h-10 bg-teal-100 dark:bg-teal-900/50 text-teal-600 dark:text-teal-400 rounded-lg items-center justify-center group-hover:bg-teal-200 dark:group-hover:bg-teal-900/70 transition-all duration-300 group-hover:scale-110"
12+
>
13+
<Icon
14+
name="mdi:text-box-outline"
15+
class="w-5 h-5 transition-transform duration-300 group-hover:scale-90"
16+
/>
17+
</div>
18+
<div class="flex-grow min-w-0">
19+
<h3
20+
class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-teal-600 dark:group-hover:text-teal-400 transition-colors duration-300 truncate"
21+
>
22+
{title}
23+
</h3>
24+
<div
25+
class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-1 transition-colors group-hover:text-teal-600/70 dark:group-hover:text-teal-400/70"
26+
>
27+
<Icon name="mdi:calendar" class="w-4 h-4 mr-1.5 flex-shrink-0" />
28+
<time datetime={datePublished}>{datePublished}</time>
29+
</div>
30+
{
31+
description && (
32+
<p class="mt-2 text-gray-600 dark:text-gray-300 line-clamp-2 transition-colors group-hover:text-gray-700 dark:group-hover:text-gray-200">
33+
{description}
34+
</p>
35+
)
36+
}
37+
</div>
38+
<div
39+
class="ml-2 self-center opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out"
40+
>
41+
<Icon
42+
name="mdi:chevron-right"
43+
class="w-5 h-5 text-teal-600 dark:text-teal-400"
44+
/>
1245
</div>
1346
</a>
14-
</li>
15-
16-
<style>
17-
.blog-post-list-item {
18-
border: 1px solid #e0e0e0;
19-
border-radius: 8px;
20-
margin: 1em 0;
21-
padding: 1em;
22-
transition: background-color 0.3s;
23-
}
24-
25-
.blog-post-list-item:hover {
26-
background-color: #f9f9f9;
27-
}
28-
29-
.blog-post-link {
30-
display: flex;
31-
align-items: center;
32-
text-decoration: none;
33-
color: inherit;
34-
}
35-
36-
.icon {
37-
margin-right: 1em;
38-
color: #00539f;
39-
}
40-
41-
.blog-post-content h2 {
42-
margin: 0;
43-
font-size: 1.25em;
44-
}
45-
46-
.blog-post-content p {
47-
margin: 0.5em 0 0;
48-
color: #757575;
49-
}
50-
</style>
47+
</article>

‎src/components/Footer.astro

+42-20
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,48 @@ import { SocialPlatform } from "../data/socialPlatforms";
55
import { Icon } from "astro-icon/components";
66
---
77

8-
<footer class="text-center mt-8">
9-
<div class="p-4 bg-teal-900 text-white rounded-lg">
10-
<h2 class="text-2xl font-bold mb-4">Let's connect on:</h2>
11-
<div class="flex justify-center gap-4 flex-wrap">
12-
<Social platform={SocialPlatform.Bluesky} username="brylie.bsky.social" />
13-
<Social platform={SocialPlatform.Dev} username="brylie" />
14-
<Social platform={SocialPlatform.GitHub} username="brylie" />
15-
<Social platform={SocialPlatform.LinkedIn} username="brylie" />
16-
<Social platform={SocialPlatform.YouTube} username="brylie" />
17-
</div>
18-
</div>
19-
<div class="p-4 bg-teal-800 text-white rounded-lg mt-4">
20-
<a
21-
href="/rss.xml"
22-
target="_blank"
23-
class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium border bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors"
8+
<footer
9+
class="mt-auto py-8 bg-gradient-to-b from-transparent to-gray-50/50 dark:to-gray-900/50 border-t border-gray-200 dark:border-gray-800"
10+
>
11+
<div class="max-w-4xl mx-auto px-4">
12+
<!-- Social links section -->
13+
<div
14+
class="bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-600 dark:to-blue-700 text-white rounded-xl shadow-lg overflow-hidden transform transition-transform hover:scale-[1.02] duration-300"
2415
>
25-
<Icon name="ic:round-rss-feed" />
26-
RSS Feed
27-
</a>
16+
<div class="p-6 backdrop-blur-sm bg-black/5 dark:bg-black/20">
17+
<h2 class="text-xl font-bold mb-4 text-center">Let's connect</h2>
18+
<div class="flex flex-wrap justify-center gap-3">
19+
<Social
20+
platform={SocialPlatform.Bluesky}
21+
username="brylie.bsky.social"
22+
/>
23+
<Social platform={SocialPlatform.Dev} username="brylie" />
24+
<Social platform={SocialPlatform.GitHub} username="brylie" />
25+
<Social platform={SocialPlatform.LinkedIn} username="brylie" />
26+
<Social platform={SocialPlatform.YouTube} username="brylie" />
27+
</div>
28+
</div>
29+
</div>
30+
31+
<!-- RSS Feed button -->
32+
<div class="mt-6 text-center">
33+
<a
34+
href="/rss.xml"
35+
target="_blank"
36+
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 hover:scale-105 transition-all duration-300 shadow-sm"
37+
aria-label="RSS Feed"
38+
>
39+
<Icon name="mdi:rss" class="w-5 h-5" />
40+
<span>Subscribe via RSS</span>
41+
</a>
42+
</div>
43+
44+
<!-- Copyright and license info -->
45+
<div class="mt-8 text-center space-y-4">
46+
<License />
47+
<p class="text-sm text-gray-600 dark:text-gray-400">
48+
© {new Date().getFullYear()} Brylie. All rights reserved.
49+
</p>
50+
</div>
2851
</div>
29-
<License />
3052
</footer>

‎src/components/Hamburger.astro

+32-5
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,35 @@
22
33
---
44

5-
<div class="hamburger">
6-
<span class="line"></span>
7-
<span class="line"></span>
8-
<span class="line"></span>
9-
</div>
5+
<button
6+
id="menu-button"
7+
class="md:hidden flex flex-col justify-center items-center w-10 h-10 space-y-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:focus:ring-teal-500 rounded-lg transition-colors"
8+
aria-label="Toggle menu"
9+
aria-expanded="false"
10+
aria-controls="nav-links"
11+
>
12+
<span
13+
class="block w-5 h-0.5 bg-gray-600 dark:bg-gray-300 transition-all duration-300 transform origin-center"
14+
></span>
15+
<span
16+
class="block w-5 h-0.5 bg-gray-600 dark:bg-gray-300 transition-all duration-300"
17+
></span>
18+
<span
19+
class="block w-5 h-0.5 bg-gray-600 dark:bg-gray-300 transition-all duration-300 transform origin-center"
20+
></span>
21+
</button>
22+
23+
<style>
24+
#menu-button[aria-expanded="true"] span:first-child {
25+
transform: translateY(8px) rotate(45deg);
26+
}
27+
28+
#menu-button[aria-expanded="true"] span:nth-child(2) {
29+
opacity: 0;
30+
transform: translateX(-8px);
31+
}
32+
33+
#menu-button[aria-expanded="true"] span:last-child {
34+
transform: translateY(-8px) rotate(-45deg);
35+
}
36+
</style>

‎src/components/Header.astro

+25-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,31 @@
11
---
22
import Hamburger from "./Hamburger.astro";
33
import Navigation from "./Navigation.astro";
4+
import { Icon } from "astro-icon/components";
45
---
56

6-
<header>
7-
<Hamburger />
8-
<Navigation />
7+
<header
8+
class="sticky top-0 z-50 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 py-3 px-4 mb-8 transition-colors"
9+
>
10+
<div class="max-w-6xl mx-auto flex items-center justify-between">
11+
<a href="/" class="group flex items-center gap-2 hover:no-underline">
12+
<div
13+
class="w-8 h-8 bg-gradient-to-br from-teal-400 to-blue-500 dark:from-teal-500 dark:to-blue-600 rounded-lg flex items-center justify-center shadow-sm transition-transform group-hover:scale-110"
14+
>
15+
<Icon name="mdi:code-braces" class="w-5 h-5 text-white" />
16+
</div>
17+
<span
18+
class="text-xl font-bold bg-gradient-to-r from-teal-600 to-blue-600 dark:from-teal-400 dark:to-blue-400 bg-clip-text text-transparent transition-all group-hover:tracking-wide"
19+
>
20+
Brylie
21+
</span>
22+
</a>
23+
24+
<div class="flex items-center gap-3">
25+
<Navigation />
26+
<div class="flex items-center gap-2">
27+
<Hamburger />
28+
</div>
29+
</div>
30+
</div>
931
</header>

‎src/components/License.astro

+25-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
1-
<p class="mt-2 text-sm italic">
2-
brylie.online website content is licensed under a <a
3-
href="http://creativecommons.org/licenses/by/4.0/"
4-
>Creative Commons Attribution 4.0 International License</a
5-
>.
6-
</p>
1+
---
2+
import { Icon } from "astro-icon/components";
3+
---
4+
5+
<div class="flex justify-center items-center gap-2">
6+
<Icon
7+
name="mdi:creative-commons"
8+
class="w-5 h-5 text-gray-600 dark:text-gray-400 transition-colors group-hover:text-teal-600 dark:group-hover:text-teal-400"
9+
/>
10+
<p class="text-sm text-gray-600 dark:text-gray-400">
11+
Content is licensed under a
12+
<a
13+
href="http://creativecommons.org/licenses/by/4.0/"
14+
class="group inline-flex items-center gap-1 text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-teal-500 rounded-sm hover:underline decoration-2 underline-offset-2"
15+
target="_blank"
16+
rel="license noopener noreferrer"
17+
>
18+
Creative Commons Attribution 4.0 International License
19+
<Icon
20+
name="mdi:open-in-new"
21+
class="w-4 h-4 opacity-75 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
22+
/>
23+
</a>.
24+
</p>
25+
</div>

‎src/components/Navigation.astro

+52-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,57 @@
11
---
2+
const pathname = new URL(Astro.request.url).pathname;
3+
const currentPath = pathname.slice(1); // Remove the leading slash
24
5+
const navItems = [
6+
{ path: "", label: "Home" },
7+
{ path: "about/", label: "About" },
8+
{ path: "blog/", label: "Blog" },
9+
{ path: "projects/", label: "Projects" },
10+
{ path: "tags/", label: "Tags" },
11+
];
312
---
413

5-
<div class="nav-links">
6-
<a href={`/`}>Home</a>
7-
<a href={`/about/`}>About</a>
8-
<a href={`/blog/`}>Blog</a>
9-
<a href={`/tags/`}>Tags</a>
10-
<a href={`/projects/`}>Projects</a>
14+
<!-- Desktop Navigation -->
15+
<nav class="hidden md:block">
16+
<ul class="flex space-x-1">
17+
{
18+
navItems.map(({ path, label }) => (
19+
<li>
20+
<a
21+
href={`/${path}`}
22+
class={`px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:scale-105 ${
23+
currentPath === path
24+
? "bg-teal-100 dark:bg-teal-900/50 text-teal-900 dark:text-teal-100 shadow-sm"
25+
: "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800/80"
26+
}`}
27+
aria-current={currentPath === path ? "page" : undefined}
28+
>
29+
{label}
30+
</a>
31+
</li>
32+
))
33+
}
34+
</ul>
35+
</nav>
36+
37+
<!-- Mobile Navigation -->
38+
<div
39+
id="nav-links"
40+
class="nav-links md:hidden fixed w-full top-[70px] left-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm shadow-lg border-t border-gray-200 dark:border-gray-800"
41+
>
42+
{
43+
navItems.map(({ path, label }) => (
44+
<a
45+
href={`/${path}`}
46+
class={`block px-5 py-3.5 text-base transition-colors border-b border-gray-100 dark:border-gray-800 ${
47+
currentPath === path
48+
? "bg-gradient-to-r from-teal-50 to-transparent dark:from-teal-900/30 dark:to-transparent text-teal-900 dark:text-teal-100 font-medium"
49+
: "text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/50"
50+
}`}
51+
aria-current={currentPath === path ? "page" : undefined}
52+
>
53+
{label}
54+
</a>
55+
))
56+
}
1157
</div>

0 commit comments

Comments
 (0)