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

Compare commits

merge into: thomasabishop:main
Branches Tags
thomasabishop:main
thomasabishop:ham-post
thomasabishop:restyle
...
pull from: thomasabishop:restyle
Branches Tags
thomasabishop:main
thomasabishop:ham-post
thomasabishop:restyle
Sign in to create a new pull request.

1 commit
main ... restyle

Author SHA1 Message Date
thomasabishop
741a1b6429 interim commit 2026-03-01 15:24:59 +00:00
10 changed files with 332 additions and 326 deletions
Show stats 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 py-4 px-1 md: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]! h2-home scanlined px-2"> <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home">
{`eolas recent`} {`Recent learning`}
</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

2
src/components/LanguagesChart.jsx
View file

@ -2,7 +2,7 @@ import MetricBar from "./MetricBar"
const LanguagesChart = ({ chartData, error }) => { const LanguagesChart = ({ chartData, error }) => {
return ( return (
<div className="bg-sidebar p-3 my-4"> <div className="bg-sidebar p-3 my-4 mx-2 rounded-2xl">
<div className="text-muted-foreground text-sm pb-2"> <div className="text-muted-foreground text-sm pb-2">
programming languages programming languages
</div> </div>

2
src/components/Scorecard.jsx
View file

@ -1,6 +1,6 @@
const Scorecard = ({ title, metric }) => { const Scorecard = ({ title, metric }) => {
return ( return (
<div className="bg-sidebar p-3"> <div className="bg-sidebar p-3 rounded-2xl">
<div className="text-muted-foreground text-sm">{title}</div> <div className="text-muted-foreground text-sm">{title}</div>
<div className="text-lg">{metric}</div> <div className="text-lg">{metric}</div>
</div> </div>

4
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]! h2-home scanlined px-2"> <h2 className="text-3xl font-semibold mb-4 text-[#458588]! h2-home">
{`code stats`} {`code stats`}
</h2> </h2>
<div className="mb-4 text-sm text-muted"> <div className="mb-4 text-sm text-muted">
@ -79,7 +79,7 @@ const CodeStats = () => {
{convertDateFriendly(data?.to)} {convertDateFriendly(data?.to)}
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mx-2">
<Scorecard <Scorecard
title="time coding" title="time coding"
metric={ metric={

4
src/containers/PostListing.jsx
View file

@ -8,13 +8,13 @@ const PostListing = ({ posts, title, showAllButton }) => {
<div className="container mx-auto py-4 px-1 md: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 scanlined px-2"> <h2 className="text-3xl font-semibold mb-4 block h2-home">
{`${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 flex-col relative hover:bg-[#504945]"> <div className="flex justify-between flex-col relative hover:bg-[#504945] hover:rounded-2xl p-2">
<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>

96
src/index.css
View file

@ -4,91 +4,97 @@
@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: "IBM Plex Sans";
} }
figcaption { figcaption {
font-weight: 500; font-weight: 500;
font-family: "Inter"; font-family: "IBM Plex Sans";
} }
h1 { h1 {
color: var(--color-orange-light); color: var(--color-orange-light);
font-family: "Inter"; font-family: "IBM Plex Sans";
} }
h2 { h2 {
font-family: "Inter"; font-family: "IBM Plex Sans";
color: var(--color-green-light); color: var(--color-green-light);
} }
.h2-home { .h2-home {
font-family: "Inter"; font-family: "IBM Plex Sans";
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-family: "Inter"; font-family: "IBM Plex Sans";
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,
li {
font-size: 1.125rem !important;
line-height: 1.8 !important;
} }
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;
} }

122
src/pages/home.jsx
View file

@ -4,72 +4,72 @@ import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg" import gruvboxComputer from "../images/gruvbox-computer.svg"
import EolasListing from "@/components/EolasListing" import EolasListing from "@/components/EolasListing"
import CodeStats from "../containers/CodeStats" import CodeStats from "../containers/CodeStats"
// import TodayILearned from "@/containers/TodayILearned"
const HomePage = () => { const HomePage = () => {
const { posts } = usePosts() const { posts } = usePosts()
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto md:p-4 py-4 px-1 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">
<div className="scanlined"> <div className="">
<img src={gruvboxComputer} className="md:w-80 w-50" /> <img
</div> src={gruvboxComputer}
<div> className="md:w-80 w-50 rounded-2xl"
<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left"> />
<div className="scanlined inline-block py-1 px-2"> </div>
systems obscure <div>
</div> <h1 className="text-5xl font-bold py-3 text-center sm:text-left md:text-left">
</h1> <div className="">systems obscure</div>
<p className="text-center sm:text-left md:text-left text-muted font-medium"> </h1>
A wizard who goes to bed early. This is my technical scrapbook <p className="text-center sm:text-left md:text-left text-muted font-medium text-lg mt-1">
and digital garden. A wizard who goes to bed early. This is my technical scrapbook
</p> and digital garden.
</div> </p>
</div> </div>
</section> </div>
</div> </section>
</div> </div>
</div>
<PostListing title="recent posts" posts={posts.slice(0, 5)} /> <PostListing title="recent posts" posts={posts.slice(0, 5)} />
<PostListing <PostListing
title="highlights" title="highlights"
posts={posts.filter((post) => post.tags.includes("highlight"))} posts={posts.filter((post) => post.tags.includes("highlight"))}
/> />
<div className="container mx-auto md:p-4 py-4 px-1 grow"> <div className="container mx-auto md:p-4 py-4 px-1 grow mb-4">
<div className="space-my-8"> <div className="">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2"> <h2 className="text-3xl font-semibold mb-4 text-[#d3869b]! h2-home">
{`projects`} {`projects`}
</h2> </h2>
<ul> <ul className="p-2">
<li className="pb-2"> <li className="pb-2">
<a <a
className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium" className="underline underline-offset-4 text-primary hover:text-primary/80 font-medium text-xl"
href="https://eolas.systemsobscure.net" href="https://eolas.systemsobscure.net"
target="_blank" target="_blank"
> >
eolas eolas
</a> </a>
</li> </li>
<li> <li>
<p className=""> <p className="">
A public frontend for my local Zettelkasten created with A public frontend for my local Zettelkasten created with
NodeJS, Python and React. NodeJS, Python and React.
</p> </p>
</li> </li>
</ul> </ul>
</section> </section>
</div> </div>
</div> </div>
<CodeStats /> <CodeStats />
<EolasListing /> <EolasListing />
</MainTemplate> </MainTemplate>
) )
} }
export { HomePage } export { HomePage }

148
src/styles/_variables.css
View file

@ -1,79 +1,79 @@
:root { :root {
--radius: 0.3rem; --radius: 0.3rem;
--background: #282828; --background: #282828;
--foreground: #ebdbb2; --foreground: #fbf1c7;
--sidebar: #3c3836; --sidebar: #3c3836;
--color-red-light: #fb4934; --color-red-light: #fb4934;
--color-orange-light: #fe8019; --color-orange-light: #fe8019;
--color-green-light: #b8bb26; --color-green-light: #b8bb26;
--color-aqua-muted: #689d6a; --color-aqua-muted: #689d6a;
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0 0);
--primary: #8ec07c; --primary: #8ec07c;
--primary-muted: #689d6a; --primary-muted: #689d6a;
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.205 0 0);
--muted: #bdae93; --muted: #bdae93;
--muted-foreground: #928374; --muted-foreground: #928374;
--accent: oklch(0.97 0 0); --accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0); --border: oklch(0.922 0 0);
--input: oklch(0.922 0 0); --input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0); --ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: oklch(0.97 0 0);
--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: "Jetbrains Mono"; --font-monospaced: "Jetbrains Mono";
--font-sansserif: "Inter", sans-serif; --font-sansserif: "IBM Plex Sans", sans-serif;
} }
@theme inline { @theme inline {
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-xl: calc(var(--radius)); --radius-xl: calc(var(--radius));
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-card: var(--card); --color-card: var(--card);
--color-card-foreground: var(--card-foreground); --color-card-foreground: var(--card-foreground);
--color-popover: var(--popover); --color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground); --color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary); --color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground); --color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary); --color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground); --color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted); --color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground); --color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground); --color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive); --color-destructive: var(--destructive);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--color-chart-1: var(--chart-1); --color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2); --color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3); --color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4); --color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5); --color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar); --color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
} }

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 py-4 px-1 md: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-5xl font-bold mb-4 inline-block">
{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="">
{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 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="md:py-6 pb-4"> <header className="md:py-6 pb-4">
<nav className="bg-sidebar container mx-auto justify-between flex gap-1"> <nav className="bg-sidebar container mx-auto justify-between flex gap-1 rounded-r-2xl">
<Link to="/"> <Link to="/">
<div className="scanlined"> <div className="">
<img src={gruvboxComputer} className="w-11" /> <img src={gruvboxComputer} className="w-12" />
</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 hover:text-[#689d6a] condensed font-semibold text-xl"
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 hover:text-[#689d6a] condensed font-semibold text-xl"
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 rounded-2xl p-2">
<nav> <nav className="">
<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