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

style: tweak h2 font family

Browse source
This commit is contained in:
Thomas Bishop 2025-12-05 17:05:46 +00:00
parent 3bd6633a1d
commit e970ea7842
6 changed files with 53 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/EolasListing.jsx
View file

@ -37,7 +37,7 @@ const EolasListing = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-2"> <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-2 h2-home">
{`> recent learning (external)`} {`> recent learning (external)`}
</h2> </h2>

2
src/containers/CodeStats.jsx
View file

@ -71,7 +71,7 @@ const CodeStats = () => {
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between"> <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1"> <h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1 h2-home">
{`> code stats`} {`> code stats`}
</h2> </h2>
<div className="mb-4 text-sm text-muted"> <div className="mb-4 text-sm text-muted">

2
src/containers/PostListing.jsx
View file

@ -8,7 +8,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 scanlined block px-2"> <h2 className="text-2xl font-semibold mb-4 scanlined block px-2 h2-home">
{`> ${title}`} {`> ${title}`}
</h2> </h2>
{posts.map((post) => ( {posts.map((post) => (

89
src/index.css
View file

@ -4,86 +4,89 @@
@import "tw-animate-css"; @import "tw-animate-css";
* { * {
outline-color: color-mix(in srgb, var(--ring) 50%, transparent); outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
} }
html { html {
font-family: var(--font-sansserif); font-family: var(--font-sansserif);
} }
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
} }
.condensed { .condensed {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
figcaption { figcaption {
font-weight: 500; font-weight: 500;
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
h1 { h1 {
color: var(--color-orange-light); color: var(--color-orange-light);
font-family: "IBM Plex Sans Condensed";
font-family: "IBM Plex Sans Condensed";
} }
h2 { h2 {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans";
color: var(--color-green-light); color: var(--color-green-light);
}
.h2-home {
font-family: "IBM Plex Sans Condensed";
} }
h3 { h3 {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans";
} }
.monospaced-font { .monospaced-font {
font-family: "iA Writer Mono"; font-family: "iA Writer Mono";
} }
.scanlined { .scanlined {
position: relative; position: relative;
/* Add this */ /* Add this */
} }
.scanlined::after { .scanlined::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px); background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
background-size: 2px 2px; background-size: 2px 2px;
background-repeat: repeat; background-repeat: repeat;
pointer-events: none; pointer-events: none;
z-index: 9999; z-index: 9999;
/* Might want to lower this too */ /* Might want to lower this too */
} }
code { code {
font-family: var(--font-monospaced); font-family: var(--font-monospaced);
} }
p code { p code {
color: var(--foreground); color: var(--foreground);
background: #504945; background: #504945;
font-size: 14px; font-size: 14px;
padding: 0.2rem 0.3rem; padding: 0.2rem 0.3rem;
border-radius: var(--radius); border-radius: var(--radius);
font-weight: 500; font-weight: 500;
} }
.shiki { .shiki {
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
border-radius: 0; border-radius: 0;
overflow-x: auto; overflow-x: auto;
margin: 1.5rem 0; margin: 1.5rem 0;
line-height: 1.3; line-height: 1.3;
/* counter-reset: line; */ /* counter-reset: line; */
font-family: var(--font-monospaced) !important; font-family: var(--font-monospaced) !important;
font-size: 14px !important; font-size: 14px !important;
} }

2
src/pages/home.jsx
View file

@ -43,7 +43,7 @@ const HomePage = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2"> <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2 h2-home">
{`> projects`} {`> projects`}
</h2> </h2>
<ul> <ul>

6
src/templates/BlogTemplate.jsx
View file

@ -40,9 +40,9 @@ const BlogTemplate = () => {
<div <div
className=" className="
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]! [&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fe8019]!
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#fabd2f] [&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[##fe8019]
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fabd2f] [&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fe8019]
[&>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