Skip to content

Commit db691f5

Browse files
cb341cb341
authored
Feature/improvements (#6)
* minimize css * Remove some classes * remove unused class * Simplify css * Improve copy button * Refactor styles, copy button * Strip layout * Refactor * Improve tags * Refactor date format * More love and refactoring <3 * Update line height etc * Add responsive table * Refactor links
1 parent 97e94fa commit db691f5

2 files changed

Lines changed: 97 additions & 22 deletions

File tree

‎src/components/NavLink.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
interface Props {
3+
href: string;
4+
external?: boolean;
5+
target?: string;
6+
rel?: string;
7+
'aria-label'?: string;
8+
}
9+
10+
const { href, external = false, target, rel, 'aria-label': ariaLabel } = Astro.props;
11+
12+
let isActive = !external && Astro.url.pathname.startsWith(href);
13+
if (isActive && href === "/" && Astro.url.pathname !== "/") {
14+
isActive = false;
15+
}
16+
17+
const linkProps = {
18+
href,
19+
...(external && { target, rel }),
20+
...(ariaLabel && { 'aria-label': ariaLabel }),
21+
...(isActive && !external && { 'aria-current': 'page' as const }),
22+
};
23+
---
24+
25+
<a {...linkProps}>
26+
{isActive && !external ? <b><slot /></b> : <slot />}
27+
</a>

‎src/layouts/BaseLayout.astro‎

Lines changed: 70 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const {
99
} = Astro.props.frontmatter || Astro.props;
1010
import { ViewTransitions } from "astro:transitions";
1111
import Footer from "../components/Footer.astro";
12+
import NavLink from "../components/NavLink.astro";
1213
1314
const defaultTitle = "Dani Bengl - Full-Stack Developer";
1415
const defaultDescription =
@@ -128,11 +129,6 @@ const structuredData = {
128129
outline-offset: 2px;
129130
}
130131

131-
nav ul li a[aria-current="page"] {
132-
color: #e74c3c;
133-
font-weight: 600;
134-
}
135-
136132
@media (prefers-reduced-motion: reduce) {
137133
*,
138134
*::before,
@@ -156,35 +152,59 @@ const structuredData = {
156152
cursor: pointer;
157153
font-family: inherit;
158154
}
155+
156+
.astro-code {
157+
font-size: 0.8rem;
158+
}
159+
160+
h1, h2, h3 {
161+
line-height: 1.2;
162+
}
163+
164+
table td, table th {
165+
border-bottom: 1px solid #ddd;
166+
}
167+
168+
@media (max-width: 768px) {
169+
.mobile-table thead { display: none; }
170+
.mobile-table tr { display: block; border-bottom: 1px solid #ddd }
171+
.mobile-table td {
172+
display: block; border-bottom: none;
173+
}
174+
.mobile-table td:before {
175+
content: attr(data-label) ": ";
176+
font-weight: bold;
177+
}
178+
}
159179
</style>
160180
</head>
161181
<body>
162182
<a href="#main-content" class="skip-nav">Skip to main content</a>
163183

164184
<header role="banner">
165-
<h1><center><a href="/" aria-label="CB341.DEV - Home">CB341.DEV</a></center></h1>
185+
<h1><center><NavLink href="/" aria-label="CB341.DEV - Home">CB341.DEV</NavLink></center></h1>
166186
<nav role="navigation" aria-label="Main navigation">
167187
<center>
168-
<a href="/" aria-current={Astro.url.pathname === "/" ? "page" : undefined}>Home</a>
169-
|
170-
<a href="/about" aria-current={Astro.url.pathname === "/about" ? "page" : undefined}>About</a>
171-
|
172-
<a href="/uses" aria-current={Astro.url.pathname === "/uses" ? "page" : undefined}>Uses</a>
173-
|
174-
<a href="/til" aria-current={Astro.url.pathname === "/til" ? "page" : undefined}>TIL</a>
175-
|
176-
<a href="/blog" aria-current={Astro.url.pathname.startsWith("/blog") ? "page" : undefined}>Blog</a>
177-
|
178-
<a href="/projects" aria-current={Astro.url.pathname.startsWith("/projects") ? "page" : undefined}>Projects</a>
188+
<NavLink href="/">Home</NavLink>
189+
|
190+
<NavLink href="/about">About</NavLink>
191+
|
192+
<NavLink href="/uses">Uses</NavLink>
193+
|
194+
<NavLink href="/til">TIL</NavLink>
195+
|
196+
<NavLink href="/blog">Blog</NavLink>
197+
|
198+
<NavLink href="/projects">Projects</NavLink>
179199
</center>
180200
</nav>
181201
<nav class="social-nav" role="navigation" aria-label="Social media links">
182202
<center>
183-
<a href="https://www.codewars.com/users/CuddlyBunion341" target="_blank" rel="noopener noreferrer" aria-label="Codewars profile (opens in new tab)">Codewars</a>
203+
<NavLink href="https://www.codewars.com/users/CuddlyBunion341" external target="_blank" rel="noopener noreferrer" aria-label="Codewars profile (opens in new tab)">Codewars</NavLink>
184204
|
185-
<a href="https://www.linkedin.com/in/daniel-bengl-aa5225221/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn profile (opens in new tab)">LinkedIn</a>
205+
<NavLink href="https://www.linkedin.com/in/daniel-bengl-aa5225221/" external target="_blank" rel="noopener noreferrer" aria-label="LinkedIn profile (opens in new tab)">LinkedIn</NavLink>
186206
|
187-
<a href="https://github.com/CuddlyBunion341" target="_blank" rel="noopener noreferrer" aria-label="GitHub profile (opens in new tab)">GitHub</a>
207+
<NavLink href="https://github.com/CuddlyBunion341" external target="_blank" rel="noopener noreferrer" aria-label="GitHub profile (opens in new tab)">GitHub</NavLink>
188208
</center>
189209
</nav>
190210
</header>
@@ -227,8 +247,36 @@ const structuredData = {
227247
});
228248
}
229249

230-
document.addEventListener("DOMContentLoaded", addCopyButtons);
231-
document.addEventListener("astro:page-load", addCopyButtons);
250+
function makeTablesResponsive() {
251+
const tables = document.querySelectorAll("table");
252+
253+
tables.forEach((table) => {
254+
if (table.hasAttribute("data-responsive")) return;
255+
table.setAttribute("data-responsive", "true");
256+
257+
const headers = Array.from(table.querySelectorAll("thead th")).map(th => th.textContent?.trim() || "");
258+
259+
table.classList.add("mobile-table");
260+
261+
const rows = table.querySelectorAll("tbody tr");
262+
rows.forEach((row) => {
263+
const cells = row.querySelectorAll("td");
264+
cells.forEach((cell, index) => {
265+
if (headers[index]) {
266+
cell.setAttribute("data-label", headers[index]);
267+
}
268+
});
269+
});
270+
});
271+
}
272+
273+
function initializeEnhancements() {
274+
addCopyButtons();
275+
makeTablesResponsive();
276+
}
277+
278+
document.addEventListener("DOMContentLoaded", initializeEnhancements);
279+
document.addEventListener("astro:page-load", initializeEnhancements);
232280
</script>
233281
</body>
234282
</html>

0 commit comments

Comments
 (0)
⚡