my website at ewancroft.uk
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

adjustments

Ewan Croft 806c315a e8e3fa8f

+11 -22
+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 {