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

style: improve mobile
All checks were successful
Deploy Blog / deploy (push) Successful in 1m55s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-29 19:11:22 +00:00
parent 529888ad7e
commit 3ff472f5f6
9 changed files with 198 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/components/EolasListing.jsx
View file

@ -3,57 +3,57 @@ import eolasApi from "@/api/eolas-api"
import { convertDate } from "@/utils/convertDate" import { convertDate } from "@/utils/convertDate"
const EolasEntries = ({ entries }) => { const EolasEntries = ({ entries }) => {
return ( return (
entries && entries &&
entries.map((entry, i) => ( entries.map((entry, i) => (
<ul> <ul>
<li className="mb-4"> <li className="mb-4">
<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]"> <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed"> <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
{convertDate(entry.last_modified)} {convertDate(entry.last_modified)}
</span> </span>
<a <a
href={`https://eolas.systemsobscure.net/entries/${entry.title}`} href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
key={i} key={i}
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 " className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
> >
{entry.title.replace(/_/g, " ")} {entry.title.replace(/_/g, " ")}
</a> </a>
</div> </div>
</li> </li>
</ul> </ul>
)) ))
) )
} }
const EolasListing = () => { const EolasListing = () => {
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
queryKey: [`eolas_listing`], queryKey: [`eolas_listing`],
queryFn: () => queryFn: () =>
eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data), eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
}) })
return ( return (
<div className="container mx-auto p-4 grow"> <div className="container mx-auto py-4 px-1 md: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]! inline-block h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home scanlined px-2">
{`zettelkasten recent`} {`eolas recent`}
</h2> </h2>
{isLoading && <div>Loading...</div>} {isLoading && <div>Loading...</div>}
{error ? ( {error ? (
<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20"> <div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
Error fetching recent learning Error fetching recent learning
</div> </div>
) : ( ) : (
<EolasEntries entries={data?.data} /> <EolasEntries entries={data?.data} />
)} )}
</section> </section>
</div> </div>
</div> </div>
) )
} }
export default EolasListing export default EolasListing

4
src/containers/CodeStats.jsx
View file

@ -67,11 +67,11 @@ const CodeStats = () => {
.slice(0, 4) .slice(0, 4)
return ( return (
<div className="container mx-auto p-4 grow"> <div className="container mx-auto py-4 px-1 md:p-4 grow ">
<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]! inline-block h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#458588]! h2-home scanlined px-2">
{`code stats`} {`code stats`}
</h2> </h2>
<div className="mb-4 text-sm text-muted"> <div className="mb-4 text-sm text-muted">

8
src/containers/PostListing.jsx
View file

@ -5,23 +5,23 @@ import { convertDate } from "@/utils/convertDate"
const PostListing = ({ posts, title, showAllButton }) => { const PostListing = ({ posts, title, showAllButton }) => {
return ( return (
<div className="container mx-auto p-4 grow"> <div className="container mx-auto py-4 px-1 md: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 block h2-home"> <h2 className="text-2xl font-semibold mb-4 block h2-home scanlined px-2">
{`${title}`} {`${title}`}
</h2> </h2>
{posts.map((post) => ( {posts.map((post) => (
<ul> <ul>
<li className="mb-4"> <li className="mb-4">
<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]"> <div className="flex justify-between flex-col relative hover:bg-[#504945]">
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed"> <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
{convertDate(post.date)} {convertDate(post.date)}
</span> </span>
<Link <Link
to={`/posts/${post.slug}`} to={`/posts/${post.slug}`}
key={post.slug} key={post.slug}
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1" className="overflow-hidden text-ellipsis whitespace-nowrap min-w-0"
> >
{post.title} {post.title}
</Link> </Link>

92
src/index.css
View file

@ -1,94 +1,94 @@
@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 url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import "./styles/_variables.css"; @import "./styles/_variables.css";
@import "tailwindcss"; @import "tailwindcss";
@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: "Inter"; font-family: "Inter";
} }
figcaption { figcaption {
font-weight: 500; font-weight: 500;
font-family: "Inter"; font-family: "Inter";
} }
h1 { h1 {
color: var(--color-orange-light); color: var(--color-orange-light);
font-family: "Inter"; font-family: "Inter";
} }
h2 { h2 {
font-family: "Inter"; font-family: "Inter";
color: var(--color-green-light); color: var(--color-green-light);
} }
.h2-home { .h2-home {
font-family: "Inter"; font-family: "Inter";
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-family: "Inter"; font-family: "Inter";
font-weight: 600 !important; font-weight: 600 !important;
} }
.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/about.jsx
View file

@ -4,7 +4,7 @@ import portrait from "../images/portrait-compressed.jpg"
const AboutPage = () => { const AboutPage = () => {
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto p-4"> <div className="container mx-auto py-4 px-1 md:p-4">
<figure className="w-full flex flex-col items-center mb-6"> <figure className="w-full flex flex-col items-center mb-6">
<div className="scanlined inline-block"> <div className="scanlined inline-block">
<img <img

8
src/pages/home.jsx
View file

@ -10,7 +10,7 @@ const HomePage = () => {
const { posts } = usePosts() const { posts } = usePosts()
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto p-4 grow"> <div className="container mx-auto md:p-4 py-4 px-1 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="space-y-4"> <section className="space-y-4">
<div className="gap-6 flex flex-col items-center sm:flex-row"> <div className="gap-6 flex flex-col items-center sm:flex-row">
@ -23,7 +23,7 @@ const HomePage = () => {
systems obscure systems obscure
</div> </div>
</h1> </h1>
<p className="text-center sm:text-left md:text-left text-muted font-medium text-lg"> <p className="text-center sm:text-left md:text-left text-muted font-medium">
Another software engineer with a blog. This is my technical Another software engineer with a blog. This is my technical
scrapbook and digital garden. scrapbook and digital garden.
</p> </p>
@ -40,10 +40,10 @@ const HomePage = () => {
posts={posts.filter((post) => post.tags.includes("highlight"))} posts={posts.filter((post) => post.tags.includes("highlight"))}
/> />
<div className="container mx-auto p-4 grow"> <div className="container mx-auto md:p-4 py-4 px-1 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]! block h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
{`projects`} {`projects`}
</h2> </h2>
<ul> <ul>

2
src/styles/_variables.css
View file

@ -36,7 +36,7 @@
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.205 0 0);
--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: "Jetbrains Mono";
--font-sansserif: "Inter", sans-serif; --font-sansserif: "Inter", sans-serif;
} }

80
src/templates/BlogTemplate.jsx
View file

@ -5,41 +5,41 @@ 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 py-4 px-1 md: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-2"> <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-bold [&>h2]:my-4 [&>h2]: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]! [&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
[&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]! [&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
@ -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="md: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 text-sm"> <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