gabeefranco/gabeefran.co-blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partial font swap

Browse source
This commit is contained in:
Gabriel Franco 2026-09-19 11:13:42 -03:00
parent 31b2346c62
commit ce5912caaf
5 changed files with 17 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Footer.astro
View file

@ -10,7 +10,7 @@ const t = useTranslations(lang);
const year = new Date().getFullYear();
---
<footer class="border-t border-border/80">
<footer class="border-t border-border/80 font-mono">
<div class="mx-auto flex max-w-3xl flex-col gap-2 px-4 py-8 text-sm text-text-muted sm:flex-row sm:items-center sm:justify-between sm:px-6">
<p>
&copy; {year} <span class="font-mono text-text">gabeefranco</span> &middot; {t('footer.rights')}

12
src/components/Header.astro
View file

@ -29,20 +29,20 @@ function isActive(href: string): boolean {
---
<header class="sticky top-0 z-40 border-b border-border/80 bg-bg/85 backdrop-blur">
<div class="mx-auto flex max-w-3xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
<div class="mx-auto flex max-w-4/5 items-center justify-between gap-4 px-4 py-3 sm:px-6">
<a href={homeHref} class="flex shrink-0 items-center gap-2.5" aria-label={t('site.name')}>
<img src="/favicon.svg" alt="" width="32" height="32" class="size-8" />
<span class="font-mono text-[15px] font-semibold tracking-tight text-text">{t('site.name')}</span>
</a>
<div class="flex items-center gap-2">
<nav class="hidden items-center gap-1 sm:flex" aria-label={t('nav.menu')}>
<nav class="hidden items-center gap-1 sm:flex justify-right" aria-label={t('nav.menu')}>
{navLinks.map((link) => (
<a
href={link.href}
aria-current={isActive(link.href) ? 'page' : undefined}
class:list={[
'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
'px-2 py-1 text-sm font-medium font-mono hover:underline',
isActive(link.href)
? 'bg-primary/10 text-primary'
: 'text-text-muted hover:bg-surface-alt hover:text-text',
@ -58,9 +58,9 @@ function isActive(href: string): boolean {
hreflang={otherLang}
title={t('lang.switch')}
aria-label={`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
class="grid size-9 shrink-0 place-items-center rounded-full border border-border text-xs font-bold uppercase text-text-muted transition-colors hover:border-primary hover:text-primary"
class="text-accent bg-accent/10 px-2 py-1 font-mono text-xs hover:underline hover:cursor-pointer"
>
{otherLang}
{`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
</a>
<ThemeToggle lang={lang} />
@ -83,7 +83,7 @@ function isActive(href: string): boolean {
href={link.href}
aria-current={isActive(link.href) ? 'page' : undefined}
class:list={[
'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
'rounded-lg px-3 py-2 text-xs font-medium transition-colors',
isActive(link.href)
? 'bg-primary/10 text-primary'
: 'text-text-muted hover:bg-surface-alt hover:text-text',

10
src/components/HomeContent.astro
View file

@ -15,7 +15,7 @@ const postsHref = getLocalizedPath('/posts', lang);
const aboutHref = getLocalizedPath('/about', lang);
---
<section class="mx-auto max-w-3xl px-4 pb-4 pt-14 sm:px-6 sm:pt-20">
<section class="mx-auto max-w-3xl px-4 pb-4 pt-14 sm:px-6 sm:pt-20 font-mono">
<div class="flex flex-col items-start gap-8 sm:flex-row sm:items-center">
<img
src="/logo.png"
@ -28,16 +28,16 @@ const aboutHref = getLocalizedPath('/about', lang);
<p class="text-sm font-semibold uppercase tracking-wide text-primary">{t('hero.kicker')}</p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-text sm:text-4xl">{t('hero.title')}</h1>
<p class="mt-4 max-w-xl text-lg leading-relaxed text-text-muted">{t('hero.subtitle')}</p>
<div class="mt-6 flex flex-wrap gap-3">
<div class="mt-6 flex flex-wrap gap-5">
<a
href={postsHref}
class="rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-primary-hover"
class="text-primary hover:underline font-bold px-2 py-1 bg-primary/10"
>
{t('hero.cta.posts')}
</a>
<a
href={aboutHref}
class="rounded-full border border-border px-5 py-2.5 text-sm font-semibold text-text transition-colors hover:border-primary hover:text-primary"
class="text-text hover:underline font-bold px-2 py-1 bg-text/5"
>
{t('hero.cta.about')}
</a>
@ -46,7 +46,7 @@ const aboutHref = getLocalizedPath('/about', lang);
</div>
</section>
<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6">
<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6 font-mono">
<div class="flex items-baseline justify-between gap-4">
<div>
<h2 class="text-xl font-semibold text-text">{t('home.recent')}</h2>

6
src/components/PostCard.astro
View file

@ -13,12 +13,12 @@ const href = getLocalizedPath(`/posts/${slugOf(post)}`, lang);
const tagsHref = (tag: string) => getLocalizedPath(`/tags/${tag}`, lang);
---
<article class="group border-b border-border py-6 first:pt-0 last:border-b-0">
<article class="group border-b border-border py-6 first:pt-0 last:border-b-0 font-mono">
<a href={href} class="block">
<time datetime={post.data.pubDate.toISOString()} class="text-xs font-medium uppercase tracking-wide text-text-muted">
{formatDate(post.data.pubDate, lang)}
</time>
<h3 class="mt-1.5 text-xl font-semibold text-text transition-colors group-hover:text-primary">
<h3 class="mt-1.5 text-xl font-semibold text-text transition-colors group-hover:text-primary group-hover:underline">
{post.data.title}
</h3>
<p class="mt-1.5 text-[15px] leading-relaxed text-text-muted">{post.data.description}</p>
@ -28,7 +28,7 @@ const tagsHref = (tag: string) => getLocalizedPath(`/tags/${tag}`, lang);
{post.data.tags.map((tag) => (
<a
href={tagsHref(tag)}
class="rounded-full bg-surface-alt px-2.5 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-accent/15 hover:text-accent"
class="text-text-muted bg-text-muted/10 px-1 py-0.5 text-sm hover:text-accent hover:bg-accent/10"
>
#{tag}
</a>

34
src/components/ThemeToggle.astro
View file

@ -15,44 +15,14 @@ const t = useTranslations(lang);
type="button"
aria-label={t('theme.switch')}
title={t('theme.switch')}
class="grid size-9 shrink-0 place-items-center rounded-full border border-border text-text-muted transition-colors hover:border-primary hover:text-primary"
class="text-accent bg-accent/10 px-2 py-1 font-mono text-xs hover:underline hover:cursor-pointer"
>
<svg
id="theme-toggle-sun"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="hidden size-[18px]"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
></path>
</svg>
<svg
id="theme-toggle-moon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="hidden size-[18px]"
>
<path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z"></path>
</svg>
{t('theme.switch')}
</button>
<script is:inline>
(function () {
const btn = document.getElementById('theme-toggle');
const sun = document.getElementById('theme-toggle-sun');
const moon = document.getElementById('theme-toggle-moon');
if (!btn || !sun || !moon) return;
function sync() {
const isDark = document.documentElement.classList.contains('dark');