mifi
911093f0b6
- Migrates the site to Svelte 5 - Still generates a static site with inlined critical path CSS for the ultimate in performance - Opens up future possibilities for site growth Reviewed-on: #1 Co-authored-by: mifi <badmf@mifi.dev> Co-committed-by: mifi <badmf@mifi.dev>
66 lines
1.8 KiB
Svelte
66 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { engagements } from '$lib/data/engagements';
|
|
</script>
|
|
|
|
<section id="engagements" class="section" aria-labelledby="engagements-heading">
|
|
<div class="container">
|
|
<h2 id="engagements-heading" class="section-title">Recent Engagements</h2>
|
|
<dl class="engagements-list">
|
|
{#each engagements as engagement (engagement.title)}
|
|
<div class="engagement">
|
|
<dt>{engagement.title}</dt>
|
|
<dd>{engagement.description}</dd>
|
|
</div>
|
|
{/each}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.engagements-list {
|
|
max-width: var(--max-text-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.engagement {
|
|
margin-bottom: var(--space-xl);
|
|
padding-bottom: var(--space-lg);
|
|
padding-left: var(--space-md);
|
|
border-left: 3px solid var(--color-border);
|
|
transition: border-color var(--transition-base);
|
|
|
|
&:hover,
|
|
&:focus-within {
|
|
border-left-color: var(--color-primary);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
padding-left: var(--space-sm);
|
|
}
|
|
|
|
@media (prefers-contrast: high) {
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
& dt {
|
|
margin-bottom: var(--space-sm);
|
|
font-size: var(--font-size-large);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
& dd {
|
|
margin: 0;
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-relaxed);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
</style>
|