Merge pull request 'Font Change' (#3) from dev into main

Reviewed-on: #3
This commit is contained in:
kitty 2025-03-05 16:01:09 +00:00
commit d84ece67b6
7 changed files with 20 additions and 19 deletions

View File

@ -16,7 +16,7 @@ import profilePicture from "@/assets/profile-picture.png";
draggable="false" draggable="false"
class="mx-auto size-32 rounded-full" class="mx-auto size-32 rounded-full"
/> />
<h1 class="mt-4 text-center text-3xl font-JetBrainsMonoNLNerdFont-Regular">{SITE.name}</h1> <h1 class="mt-4 text-center text-3xl">{SITE.name}</h1>
<p <p
class="mt-1 text-balance text-center text-sm text-lightModeForegroundMuted dark:text-darkModeForegroundMuted" class="mt-1 text-balance text-center text-sm text-lightModeForegroundMuted dark:text-darkModeForegroundMuted"
> >

View File

@ -7,7 +7,7 @@ const { post } = Astro.props;
<li class="flex flex-col text-center no-underline"> <li class="flex flex-col text-center no-underline">
<a href={`/blog/${post.slug}`}> <a href={`/blog/${post.slug}`}>
<span <span
class="flex flex-wrap justify-center text-balance text-2xl font-medium" class="flex flex-wrap justify-center text-balance text-2xl"
>{post.data.title}</span >{post.data.title}</span
> >
<div <div

View File

@ -9,7 +9,7 @@ import Footer from "@/components/Footer.astro";
<BaseHead> <BaseHead>
<slot name="head" /> <slot name="head" />
</BaseHead> </BaseHead>
<body class="mx-auto min-h-screen max-w-xs p-3 font-mono sm:p-6"> <body class="mx-auto min-h-screen max-w-xs font-JetBrainsMono p-3 sm:p-6">
<main> <main>
<slot /> <slot />
</main> </main>

View File

@ -31,7 +31,7 @@ const { Content } = await entry.render();
<main> <main>
<a <a
href="/" href="/"
class="block py-3 text-lg font-medium uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground" class="block py-3 text-lg uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground"
>{`← ${SITE.name}`}</a >{`← ${SITE.name}`}</a
> >
{ {
@ -44,7 +44,7 @@ const { Content } = await entry.render();
) )
} }
<h1 <h1
class="mt-6 flex flex-wrap justify-center text-balance text-2xl font-medium text-lightModeForeground dark:text-darkModeForeground" class="mt-6 flex flex-wrap justify-center text-balance text-2xl text-lightModeForeground dark:text-darkModeForeground"
> >
{entry.data.title} {entry.data.title}
</h1> </h1>
@ -59,7 +59,7 @@ const { Content } = await entry.render();
</div> </div>
<a <a
href="/" href="/"
class="block py-3 text-lg font-medium uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground" class="block py-3 text-lg uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground"
>{`← ${SITE.name}`}</a >{`← ${SITE.name}`}</a
> >
</main> </main>

View File

@ -1,15 +1,15 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@font-face {
font-family: 'jb';
src: url("/src/assets/JetBrainsMonoNLNerdFont-Regular.ttf") format("ttf");
}
@layer base {
:root {
color-scheme: light dark;
font-family: 'jb';
@layer base {
@font-face {
font-family: JetBrainsMono;
font-weight: 700;
src: url("../assets/fonts/JetBrainsMonoNLNerdFont-Regular.ttf");
}
:root {
color-scheme: dark;
/* replace colors from here... */ /* replace colors from here... */
--light-mode-background: 240 240 240; --light-mode-background: 240 240 240;
--light-mode-foreground: 0 0 0; --light-mode-foreground: 0 0 0;
@ -44,12 +44,13 @@
--dark-mode-custom-link-text-hover: 255 255 255; --dark-mode-custom-link-text-hover: 255 255 255;
/* ...to here */ /* ...to here */
} }
html {
font-family: "JetB";
}
body { body {
background-color: light-dark( background-color: light-dark(
rgb(var(--light-mode-background)), rgb(var(--light-mode-background)),
rgb(var(--dark-mode-background)) rgb(var(--dark-mode-background))
); );
font-family: 'jb';
} }
} }

View File

@ -8,7 +8,7 @@ export default {
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
customFont: ['"JetBrainsMonoNLNerdFont-Regular.ttf"', ""], JetBrainsMono: ['JetBrainsMono'],
}, },
colors: { colors: {
lightModeBackground: lightModeBackground: