thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: use inter font
All checks were successful
Deploy Blog / deploy (push) Successful in 2m11s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-27 17:22:26 +00:00
parent 09c0a803bf
commit 529888ad7e
4 changed files with 108 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/index.css
View file

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "./styles/_variables.css";
@import "tailwindcss";
@import "tw-animate-css";
@ -17,30 +17,32 @@ body {
}
.condensed {
font-family: "IBM Plex Sans Condensed";
font-family: "Inter";
}
figcaption {
font-weight: 500;
font-family: "IBM Plex Sans Condensed";
font-family: "Inter";
}
h1 {
color: var(--color-orange-light);
font-family: "IBM Plex Sans Condensed";
font-family: "Inter";
}
h2 {
font-family: "IBM Plex Sans";
font-family: "Inter";
color: var(--color-green-light);
}
.h2-home {
font-family: "IBM Plex Sans Condensed";
font-family: "Inter";
font-weight: 600;
}
h3 {
font-family: "IBM Plex Sans";
font-family: "Inter";
font-weight: 600 !important;
}
.monospaced-font {

2
src/styles/_variables.css
View file

@ -37,7 +37,7 @@
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--font-monospaced: "IBM Plex Mono";
--font-sansserif: "IBM Plex Sans", sans-serif;
--font-sansserif: "Inter", sans-serif;
}
@theme inline {

8
src/templates/BlogTemplate.jsx
View file

@ -17,7 +17,7 @@ const BlogTemplate = () => {
) : (
<article className="prose prose-lg max-w-none">
<header className="mb-6 pb-4">
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-2">
{post?.title}
</h1>
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
@ -40,9 +40,9 @@ const BlogTemplate = () => {
<div
className="
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
[&>h2]:text-2xl [&>h2]:font-bold [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
[&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
[&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground

2
src/templates/MainTemplate.jsx
View file

@ -11,7 +11,7 @@ const Header = () => {
<img src={gruvboxComputer} className="w-11" />
</div>
</Link>
<ul class="flex space-x-4 px-4 py-2">
<ul class="flex space-x-4 px-4 py-2 text-sm">
<li class="flex flex-col items-center justify-center">
<Link
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"