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 "./styles/_variables.css";
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
@ -17,30 +17,32 @@ body {
} }
.condensed { .condensed {
font-family: "IBM Plex Sans Condensed"; font-family: "Inter";
} }
figcaption { figcaption {
font-weight: 500; font-weight: 500;
font-family: "IBM Plex Sans Condensed"; font-family: "Inter";
} }
h1 { h1 {
color: var(--color-orange-light); color: var(--color-orange-light);
font-family: "IBM Plex Sans Condensed"; font-family: "Inter";
} }
h2 { h2 {
font-family: "IBM Plex Sans"; font-family: "Inter";
color: var(--color-green-light); color: var(--color-green-light);
} }
.h2-home { .h2-home {
font-family: "IBM Plex Sans Condensed"; font-family: "Inter";
font-weight: 600;
} }
h3 { h3 {
font-family: "IBM Plex Sans"; font-family: "Inter";
font-weight: 600 !important;
} }
.monospaced-font { .monospaced-font {

2
src/styles/_variables.css
View file

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

86
src/templates/BlogTemplate.jsx
View file

@ -5,44 +5,44 @@ import { convertDate } from "@/utils/convertDate"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
const BlogTemplate = () => { const BlogTemplate = () => {
const { slug } = useParams() const { slug } = useParams()
const { posts } = usePosts() const { posts } = usePosts()
const post = posts?.find((x) => x.slug === slug) const post = posts?.find((x) => x.slug === slug)
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
{!post ? ( {!post ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<article className="prose prose-lg max-w-none"> <article className="prose prose-lg max-w-none">
<header className="mb-6 pb-4"> <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} {post?.title}
</h1> </h1>
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium"> <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
<time datetime={convertDate(post?.date)} className="text-sm"> <time datetime={convertDate(post?.date)} className="text-sm">
{convertDate(post?.date)} {convertDate(post?.date)}
</time> </time>
<div className="flex flex-wrap gap-3 align-center"> <div className="flex flex-wrap gap-3 align-center">
{post?.tags?.map((tag, i) => ( {post?.tags?.map((tag, i) => (
<Link <Link
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]" className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
key={i} key={i}
to={`/tags/${tag}`} to={`/tags/${tag}`}
> >
{tag} {tag}
</Link> </Link>
))} ))}
</div> </div>
</div> </div>
</header> </header>
<div <div
className=" className="
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#ebdbb2]! [&>h2]:text-2xl [&>h2]:font-bold [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#ebdbb2]! [&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#ebdbb2]! [&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4 [&>p]:leading-7 [&>p:not(:first-child)]:mt-4
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6 [&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground
@ -65,13 +65,13 @@ const BlogTemplate = () => {
[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted [&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right [&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
" "
dangerouslySetInnerHTML={{ __html: post?.html }} dangerouslySetInnerHTML={{ __html: post?.html }}
/> />
</article> </article>
)} )}
</div> </div>
</MainTemplate> </MainTemplate>
) )
} }
export default BlogTemplate export default BlogTemplate

110
src/templates/MainTemplate.jsx
View file

@ -3,66 +3,66 @@
import gruvboxComputer from "../images/gruvbox-computer.svg" import gruvboxComputer from "../images/gruvbox-computer.svg"
import { Link } from "react-router" import { Link } from "react-router"
const Header = () => { const Header = () => {
return ( return (
<header className="py-6"> <header className="py-6">
<nav className="bg-sidebar container mx-auto justify-between flex gap-1"> <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
<Link to="/"> <Link to="/">
<div className="scanlined"> <div className="scanlined">
<img src={gruvboxComputer} className="w-11" /> <img src={gruvboxComputer} className="w-11" />
</div> </div>
</Link> </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"> <li class="flex flex-col items-center justify-center">
<Link <Link
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg" class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
to="/posts" to="/posts"
> >
posts posts
</Link> </Link>
</li> </li>
<li class="flex flex-col items-center justify-center"> <li class="flex flex-col items-center justify-center">
<Link <Link
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg" class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
to="/about" to="/about"
> >
about about
</Link> </Link>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
) )
} }
const Footer = () => { const Footer = () => {
return ( return (
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8"> <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
<nav> <nav>
<ul className="flex flex-row justify-start gap-4"> <ul className="flex flex-row justify-start gap-4">
<li className="flex flex-col items-center justify-center"> <li className="flex flex-col items-center justify-center">
<a <a
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold" className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
href="https://forgejo.systemsobscure.net/thomasabishop" href="https://forgejo.systemsobscure.net/thomasabishop"
target="blank" target="blank"
> >
forgejo forgejo
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
</footer> </footer>
) )
} }
const MainTemplate = ({ children }) => { const MainTemplate = ({ children }) => {
return ( return (
<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper"> <div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0"> <main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
<Header /> <Header />
<div>{children}</div> <div>{children}</div>
<Footer /> <Footer />
</main> </main>
</div> </div>
) )
} }
export default MainTemplate export default MainTemplate