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

add custom fonts
All checks were successful
Deploy Blog / deploy (push) Successful in 1m56s
Details

Browse source
This commit is contained in:
Thomas Bishop 2026-03-24 17:42:26 +00:00
parent febb0af236
commit 770cca3259
10 changed files with 153 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/fonts/DejaVuSans-Bold.ttf Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans-BoldOblique.ttf Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans-BoldOblique.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans-Oblique.ttf Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans-Oblique.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans.ttf Normal file
View file

Binary file not shown.

BIN
public/fonts/DejaVuSans.woff2 Normal file
View file

Binary file not shown.

153
src/index.css
View file

@ -1,128 +1,149 @@
@media (min-width: 768px) { @media (min-width: 768px) {
main { main {
max-width: 768px; max-width: 768px;
margin: 0 1.5rem; margin: 0 1.5rem;
} }
.post-listing-item { .post-listing-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.post-listing-item { .post-listing-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.title-link { .title-link {
letter-spacing: 0 !important; letter-spacing: 0 !important;
} }
} }
.post-listing-item { .post-listing-item {
display: flex; display: flex;
} }
html { html {
font-family: font-family: "DejaVu Sans", sans-serif;
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
} }
.header-links { .header-links {
display: flex; display: flex;
list-style: none; list-style: none;
gap: 1rem; gap: 1rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.plain-link { .plain-link {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.no-bullets { .no-bullets {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
blockquote { blockquote {
font-style: italic; font-style: italic;
} }
figcaption { figcaption {
text-align: center; text-align: center;
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
} }
figure { figure {
text-align: center; text-align: center;
} }
figure img { figure img {
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
min-width: 300px; min-width: 300px;
height: auto; height: auto;
} }
.shiki { .shiki {
padding: 1rem; padding: 1rem;
/* border: 1pt solid black; */ /* border: 1pt solid black; */
background-color: whitesmoke !important; background-color: whitesmoke !important;
overflow: auto; overflow: auto;
} }
.code-stats-sect { .code-stats-sect {
font-family: sans-serif !important; font-family: sans-serif !important;
} }
.code-stat-grid { .code-stat-grid {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.code-stat-label { .code-stat-label {
font-weight: bold; font-weight: bold;
font-family: sans-serif; font-family: sans-serif;
} }
.code-stats-disclaimer { .code-stats-disclaimer {
font-style: italic; font-style: italic;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }
.about-li-padding { .about-li-padding {
padding-right: 1rem; padding-right: 1rem;
} }
h1.site-title, h1.site-title,
h1.post-title { h1.post-title {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.big-title { .big-title {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.blog-meta { .blog-meta {
font-size: 14px; font-size: 14px;
}
@font-face {
font-family: "DejaVu Sans";
src: url("/fonts/DejaVuSans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("/fonts/DejaVuSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("/fonts/DejaVuSans-Oblique.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "DejaVu Sans";
src: url("/fonts/DejaVuSans-BoldOblique.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
} }

123
src/templates/MainTemplate.jsx
View file

@ -2,71 +2,80 @@
import { Link } from "react-router" import { Link } from "react-router"
const Header = () => { const Header = () => {
return ( return (
<header> <header>
<nav className=""> <nav className="">
<h1 className="site-title"> <h1 className="site-title">
<Link className="title-link plain-link" to="/"> <Link className="title-link plain-link" to="/">
Systems Obscure Systems Obscure
</Link> </Link>
</h1> </h1>
<ul className="header-links"> <ul className="header-links">
<li> <li>
<Link to="/">Home</Link> <Link to="/">Home</Link>
</li> </li>
<li> <li>
<Link to="/posts">Posts</Link> <Link to="/posts">Posts</Link>
</li> </li>
<li> <li>
<Link to="/about">About</Link> <Link to="/about">About</Link>
</li> </li>
<li className="flex flex-col items-center justify-center"> <li className="flex flex-col items-center justify-center">
<a <a
className="" className=""
href="https://forgejo.systemsobscure.net/thomasabishop" href="https://forgejo.systemsobscure.net/thomasabishop"
target="blank" target="blank"
> >
Code Code
</a> </a>
</li> </li>
</ul> <li className="flex flex-col items-center justify-center">
</nav> <a
</header> className=""
) href="https://fosstodon.org/@systemsobscure"
rel="me"
target="blank"
>
Fosstodon
</a>
</li>
</ul>
</nav>
</header>
)
} }
const Footer = () => { const Footer = () => {
return ( return (
<footer className="mx-auto"> <footer className="mx-auto">
<nav> <nav>
<ul className=""> <ul className="">
<li className="flex flex-col items-center justify-center"> <li className="flex flex-col items-center justify-center">
<a <a
className="" className=""
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=""> <div className="">
<main className=""> <main className="">
<Header /> <Header />
<div>{children}</div> <div>{children}</div>
</main> </main>
</div> </div>
) )
} }
export default MainTemplate export default MainTemplate
//antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper //antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper
//main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0 //main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0