changed font size and added blog item

This commit is contained in:
becarta
2025-02-26 02:35:19 +01:00
parent a8509de9e4
commit 2e4284cba3
7 changed files with 451 additions and 10 deletions

View File

@@ -44,7 +44,7 @@ const {
{description && (
<div class="text-muted mt-2 overflow-hidden">
<div
class={twMerge('text-sm max-h-[4.5rem] hover:max-h-[300px] transition-all duration-500 ease-description', descriptionClass, itemClasses?.description)}
class={twMerge('text-sm max-h-[6rem] hover:max-h-[300px] transition-all duration-500 ease-description', descriptionClass, itemClasses?.description)}
set:html={description}
/>
</div>

View File

@@ -51,7 +51,7 @@ const {
<div class={`relative ${compact ? 'mb-6' : 'mb-12'}`}>
{/* Year marker (if available) */}
{year && (
<div class={twMerge("absolute left-4 md:left-1/2 transform -translate-x-1/2 -top-4 font-bold text-xs z-10", yearClass)}>
<div class={twMerge("absolute left-4 md:left-1/2 transform -translate-x-1/2 -top-4 font-bold text-sm z-10", yearClass)}>
{year}
</div>
)}
@@ -89,7 +89,7 @@ const {
<div class="w-6 h-1 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
</div>
<div
class={twMerge(`text-muted ${compact ? 'text-xs' : 'text-sm'} opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out`, descriptionClass, itemClasses?.description)}
class={twMerge(`text-muted ${compact ? 'text-sm' : 'text-sm'} opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out`, descriptionClass, itemClasses?.description)}
set:html={description}
/>
</div>

View File

@@ -86,7 +86,7 @@ const {
{description && (
<div class="text-muted mt-2 overflow-hidden">
<div
class={twMerge('text-sm max-h-[2.5rem] md:max-h-none hover:max-h-[300px] transition-all duration-500 ease-staggered', descriptionClass, itemClasses?.description)}
class={twMerge('text-sm max-h-[4rem] md:max-h-none hover:max-h-[300px] transition-all duration-500 ease-staggered', descriptionClass, itemClasses?.description)}
set:html={description}
/>
</div>

View File

@@ -63,14 +63,14 @@ const {
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex-1">
<div>
{name && <p class="text-sm font-semibold line-clamp-2">{name}</p>}
{issueDate && <p class="text-xs text-muted">{issueDate}</p>}
{issueDate && <p class="text-sm text-muted">{issueDate}</p>}
</div>
</a>
</div>
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="block">
<div class="text-xs text-muted overflow-hidden">
<div class="max-h-[8rem] hover:max-h-[300px] transition-all duration-500 ease-cert">
<div class="text-sm text-muted overflow-hidden">
<div class="max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-cert">
{description}
</div>
</div>

View File

@@ -37,7 +37,7 @@ const {
<h3 class="text-base font-semibold">{title}</h3>
</div>
<div class="text-muted overflow-hidden">
<p class="text-xs max-h-[8rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
<p class="text-sm max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
</div>
</div>
))}

View File

@@ -45,8 +45,8 @@ const timelineItems = items.map(item => {
}
return {
title: `<span class="${compact ? 'text-lg' : 'text-xl'}">${item.title}</span>${item.company ? `<span class="block ${compact ? 'text-xs' : 'text-sm'} font-normal text-gray-600 dark:text-gray-400">${item.company}</span>` : ''}`,
description: `<div class="transform-origin-top transition-transform duration-300">${item.description || ''}${item.description && (item.date || item.location) ? '<div class="mt-2"></div>' : ''}${item.date ? `<span class="block text-xs font-semibold text-gray-500 dark:text-gray-400">${item.date}</span>` : ''}${item.location ? `<span class="block text-xs text-gray-500 dark:text-gray-400">${item.location}</span>` : ''}</div>`,
title: `<span class="${compact ? 'text-lg' : 'text-xl'}">${item.title}</span>${item.company ? `<span class="block ${compact ? 'text-sm' : 'text-sm'} font-normal text-gray-600 dark:text-gray-400">${item.company}</span>` : ''}`,
description: `<div class="transform-origin-top transition-transform duration-300">${item.description || ''}${item.description && (item.date || item.location) ? '<div class="mt-2"></div>' : ''}${item.date ? `<span class="block text-sm font-semibold text-gray-500 dark:text-gray-400">${item.date}</span>` : ''}${item.location ? `<span class="block text-sm text-gray-500 dark:text-gray-400">${item.location}</span>` : ''}</div>`,
icon: item.icon || 'tabler:briefcase',
classes: item.classes,
year,