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="space-my-8">
<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)`}
</h2>

2
src/containers/CodeStats.jsx
View file

@ -71,7 +71,7 @@ const CodeStats = () => {
<div className="space-my-8">
<section className="container">
<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`}
</h2>
<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="space-my-8">
<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}`}
</h2>
{posts.map((post) => (

89
src/index.css
View file

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

6
src/templates/BlogTemplate.jsx
View file

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