my website at ewancroft.uk
adjustments
+11
-22
+11
-22
src/lib/components/archive/ArchiveCard.svelte
+11
-22
src/lib/components/archive/ArchiveCard.svelte
···
3
3
import { quintOut } from "svelte/easing";
4
4
import { formatDate, formatNumber } from "$utils/formatters";
5
5
import { getMilestone } from "$utils/milestones";
6
-
import DocumentIcon from "$components/icons/utility/DocumentIcon.svelte";
7
-
import LinkExternalIcon from "$components/icons/utility/LinkExternalIcon.svelte";
8
-
import CoffeeIcon from "$components/icons/utility/CoffeeIcon.svelte";
9
-
import ClockIcon from "$components/icons/utility/ClockIcon.svelte";
10
-
import BookIcon from "$components/icons/utility/BookIcon.svelte";
11
-
import BooksIcon from "$components/icons/utility/BooksIcon.svelte";
6
+
7
+
// Import necessary icons
8
+
import { DocumentIcon, LinkExternalIcon, CoffeeIcon, ClockIcon, BookIcon, BooksIcon } from "$components/icons";
12
9
13
10
export let type: 'post' | 'link';
14
11
export let post: any = {}; // For post type
···
87
84
<!-- Header section with title and type indicator -->
88
85
<header class="card-header">
89
86
{#if type === 'post'}
90
-
<div class="type-indicator post-indicator">
91
-
<DocumentIcon size="14" />
87
+
<div class="post-indicator">
88
+
<DocumentIcon size="20" />
92
89
<span class="sr-only">Blog post</span>
93
90
</div>
94
91
{:else}
95
-
<div class="type-indicator link-indicator">
96
-
<LinkExternalIcon size="14" />
92
+
<div class="link-indicator">
93
+
<LinkExternalIcon size="20" />
97
94
<span class="sr-only">External link</span>
98
95
</div>
99
96
{/if}
···
281
278
margin-bottom: 16px;
282
279
}
283
280
284
-
.type-indicator {
281
+
.post-indicator, .link-indicator {
282
+
background: var(--card-bg);
283
+
color: var(--text-color);
284
+
opacity: 0.8;
285
285
flex-shrink: 0;
286
286
padding: 6px;
287
-
border-radius: 6px;
288
287
margin-top: 2px;
289
288
transition: all 0.3s ease;
290
-
}
291
-
292
-
.post-indicator, .link-indicator {
293
-
background: var(--button-bg);
294
-
color: var(--text-color);
295
-
opacity: 0.8;
296
-
}
297
-
298
-
.group:hover .type-indicator {
299
-
transform: scale(1.1);
300
289
}
301
290
302
291
.card-title {