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

Merge branch 'style/beige-accent'
All checks were successful
Deploy Blog / deploy (push) Successful in 1m46s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-10-22 18:29:26 +01:00
commit dbcc643222
4 changed files with 197 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
src/components/Header.tsx
View file

@ -6,103 +6,103 @@ import { Link } from "react-router"
import headerImage from "../images/radigue_gruvbox.png" import headerImage from "../images/radigue_gruvbox.png"
import controlPanel from "../images/control-panel.png" import controlPanel from "../images/control-panel.png"
import { import {
NavigationMenu, NavigationMenu,
NavigationMenuContent, NavigationMenuContent,
NavigationMenuItem, NavigationMenuItem,
NavigationMenuLink, NavigationMenuLink,
NavigationMenuList, NavigationMenuList,
NavigationMenuTrigger, NavigationMenuTrigger,
navigationMenuTriggerStyle, navigationMenuTriggerStyle,
NavigationMenuViewport, NavigationMenuViewport,
} from "@/components/ui/navigation-menu" } from "@/components/ui/navigation-menu"
import { Toggle } from "@/components/ui/toggle" import { Toggle } from "@/components/ui/toggle"
const Menu = () => { const Menu = () => {
return ( return (
<NavigationMenu> <NavigationMenu>
<NavigationMenuList> <NavigationMenuList>
{/* Desktop menu - hidden on mobile, visible on md+ */} {/* Desktop menu - hidden on mobile, visible on md+ */}
<div className="hidden md:flex md:space-x-3"> <div className="hidden md:flex md:space-x-3">
<NavigationMenuItem className=""> <NavigationMenuItem className="">
<NavigationMenuLink <NavigationMenuLink
asChild asChild
className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`} className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
> >
<Link to="/posts/page/1">Posts</Link> <Link to="/posts/page/1">Posts</Link>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem className=""> <NavigationMenuItem className="">
<NavigationMenuLink <NavigationMenuLink
asChild asChild
className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`} className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
> >
<Link to="/about">About</Link> <Link to="/about">About</Link>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
</div> </div>
{/* Mobile dropdown - visible only on small screens */} {/* Mobile dropdown - visible only on small screens */}
<NavigationMenuItem className="md:hidden px-4"> <NavigationMenuItem className="md:hidden px-4">
<NavigationMenuTrigger className="border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold border-none"> <NavigationMenuTrigger className="border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold border-none">
<MenuIcon /> <MenuIcon />
</NavigationMenuTrigger> </NavigationMenuTrigger>
<NavigationMenuContent className="bg-accent/20 border-none active:border-none"> <NavigationMenuContent className="bg-accent/20 border-none active:border-none">
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link to="/posts/page/1" className="block"> <Link to="/posts/page/1" className="block">
Posts Posts
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link to="/about" className="block"> <Link to="/about" className="block">
About About
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
<NavigationMenuViewport /> <NavigationMenuViewport />
</NavigationMenu> </NavigationMenu>
) )
} }
const Header = () => { const Header = () => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
return ( return (
<header className="w-full h-15 flex items-center justify-center border-b border-border border-b-1 fixed top-0 z-20 bg-sidebar"> <header className="w-full h-15 flex items-center justify-center border-b border-border border-b-1 fixed top-0 z-20 bg-sidebar">
<div <div
className="absolute inset-0 opacity-70 dark:opacity-40" className="absolute inset-0 opacity-70 dark:opacity-40"
style={{ style={{
backgroundImage: `url(${headerImage})`, backgroundImage: `url(${headerImage})`,
backgroundSize: "cover", backgroundSize: "cover",
backgroundPosition: "center 30%", backgroundPosition: "center 30%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
filter: "blur(0px) grayscale(10%)", filter: "blur(0px) grayscale(10%)",
}} }}
/> />
<div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/30 to-background/40 dark:from-background/60 dark:via-background/50 dark:to-background/60" /> <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/30 to-background/40 dark:from-background/60 dark:via-background/50 dark:to-background/60" />
<div className="w-full px-0 md:px-4 flex items-center justify-between"> <div className="w-full px-0 md:px-4 flex items-center justify-between">
<div className="flex items-center md:px-0 px-4"> <div className="flex items-center md:px-0 px-4">
<Button <Button
variant="ghost" variant="ghost"
asChild asChild
className="border-0 rounded bg-accent/40 backdrop-blur-sm hover:bg-background/40 active:bg-background/40 focus-visible:outline-none transition-colors" className="border-0 rounded bg-accent/40 backdrop-blur-sm hover:bg-background/40 active:bg-background/40 focus-visible:outline-none transition-colors"
// className="border-0 rounded-none bg-background/20 backdrop-blur-sm hover:bg-background/40 transition-colors" // className="border-0 rounded-none bg-background/20 backdrop-blur-sm hover:bg-background/40 transition-colors"
// className="border-0 rounded-none bg-background/40 backdrop-blur-md hover:bg-background transition-colors" // className="border-0 rounded-none bg-background/40 backdrop-blur-md hover:bg-background transition-colors"
// //
//className="border md:border-none rounded-none z-500" //className="border md:border-none rounded-none z-500"
> >
<Link to="/"> <Link to="/">
<span className="text-xl tracking-normal font-semibold"> <span className="text-xl tracking-normal font-semibold">
Systems Obscure Systems Obscure
</span> </span>
</Link> </Link>
</Button> </Button>
</div> </div>
<div className="flex itemr justify-between md:gap-4 z-500"> <div className="flex itemr justify-between md:gap-4 z-500">
{/* {/*
<Toggle <Toggle
className="border bg-background rounded-none" className="border bg-background rounded-none"
pressed={theme === "dark"} pressed={theme === "dark"}
@ -115,9 +115,9 @@ const Header = () => {
*/} */}
<Menu /> <Menu />
{/* {/*
<div className="hidden md:block"> <div className="hidden md:block">
<Button variant="ghost"> <Button variant="ghost">
<GitMerge /> Forgejo <GitMerge /> Forgejo
@ -126,10 +126,10 @@ const Header = () => {
</div> </div>
*/} */}
</div> </div>
</div> </div>
</header> </header>
) )
} }
export { Header } export { Header }

10
src/pages/about.tsx
View file

@ -21,7 +21,7 @@ const AboutPage = () => {
<a <a
href="https://www.tnmoc.org/" href="https://www.tnmoc.org/"
target="_blank" target="_blank"
className="text-[#83a598] hover:text-accent/90" className="text-primary hover:text-primary/80"
> >
National Museum of Computing National Museum of Computing
</a> </a>
@ -43,7 +43,7 @@ const AboutPage = () => {
<a <a
href="https://en.wikipedia.org/wiki/ITV_(TV_network)" href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
target="_blank" target="_blank"
className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-4" className="underline decoration-1 hover:text-primary/80 underline-offset-4"
> >
ITV ITV
</a>{" "} </a>{" "}
@ -53,7 +53,7 @@ const AboutPage = () => {
<a <a
href="https://en.wikipedia.org/wiki/BBC" href="https://en.wikipedia.org/wiki/BBC"
target="_blank" target="_blank"
className="underline decoration-1 text-[#83a598] hover:text-accent/90underline-offset-4" className="underline decoration-1 hover:text-primary/80 underline-offset-4"
> >
BBC BBC
</a>{" "} </a>{" "}
@ -61,7 +61,7 @@ const AboutPage = () => {
<a <a
href="https://www.arria.com/" href="https://www.arria.com/"
target="_blank" target="_blank"
className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-4" className="underline decoration-1 hover:text-primary/80 underline-offset-4"
> >
Arria NLG Arria NLG
</a>{" "} </a>{" "}
@ -96,7 +96,7 @@ const AboutPage = () => {
I self-host my own Git forge at{" "} I self-host my own Git forge at{" "}
<a <a
href="https://forgejo.systemsobscure.net/thomasabishop" href="https://forgejo.systemsobscure.net/thomasabishop"
className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-2" className="underline decoration-1 hover:text-primary/80 underline-offset-4"
> >
forgejo.systemsobscure.net forgejo.systemsobscure.net
</a>{" "} </a>{" "}

148
src/styles/_variables.css
View file

@ -1,38 +1,38 @@
:root { :root {
--radius: 0.3rem; --radius: 0.3rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.145 0 0); --foreground: oklch(0.145 0 0);
--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: oklch(0.205 0 0); --primary: oklch(0.205 0 0);
--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: oklch(0.97 0 0); --muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.556 0 0);
--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: oklch(0.985 0 0); --sidebar: oklch(0.985 0 0);
--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", monospace; --font-monospaced: "Jetbrains Mono", monospace;
--font-sansserif: "Inter", sans-serif; --font-sansserif: "Inter", sans-serif;
} }
/* .dark { */ /* .dark { */
@ -70,45 +70,45 @@
/* } */ /* } */
.dark { .dark {
--background: oklch(0.2 0 0); --background: oklch(0.2 0 0);
/* Softer dark gray instead of 0.145 */ /* Softer dark gray instead of 0.145 */
--foreground: oklch(0.9 0 0); --foreground: oklch(0.9 0 0);
/* Softer off-white instead of 0.985 */ /* Softer off-white instead of 0.985 */
--card: oklch(0.22 0 0); --card: oklch(0.22 0 0);
/* Slightly lighter card */ /* Slightly lighter card */
--card-foreground: oklch(0.9 0 0); --card-foreground: oklch(0.9 0 0);
/* Match foreground */ /* Match foreground */
--popover: oklch(0.22 0 0); --popover: oklch(0.22 0 0);
--popover-foreground: oklch(0.9 0 0); --popover-foreground: oklch(0.9 0 0);
--primary: oklch(0.85 0 0); --primary: oklch(0.85 0 0);
/* Less harsh white */ /* Less harsh white */
--primary-foreground: oklch(0.22 0 0); --primary-foreground: oklch(0.22 0 0);
--secondary: oklch(0.3 0 0); --secondary: oklch(0.3 0 0);
/* Lighter secondary */ /* Lighter secondary */
--secondary-foreground: oklch(0.9 0 0); --secondary-foreground: oklch(0.9 0 0);
--muted: oklch(0.3 0 0); --muted: oklch(0.3 0 0);
--muted-foreground: oklch(0.65 0 0); --muted-foreground: oklch(0.65 0 0);
/* Slightly softer */ /* Slightly softer */
--accent: #458588; --accent: #a89984;
--accent-foreground: oklch(0.9 0 0); --accent-foreground: oklch(0.9 0 0);
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 15%); --border: oklch(1 0 0 / 15%);
/* Slightly more visible borders */ /* Slightly more visible borders */
--input: oklch(1 0 0 / 18%); --input: oklch(1 0 0 / 18%);
--ring: oklch(0.556 0 0); --ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.22 0 0); --sidebar: oklch(0.22 0 0);
/* Match card */ /* Match card */
--sidebar-foreground: oklch(0.9 0 0); --sidebar-foreground: oklch(0.9 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.9 0 0); --sidebar-primary-foreground: oklch(0.9 0 0);
--sidebar-accent: oklch(0.3 0 0); --sidebar-accent: oklch(0.3 0 0);
--sidebar-accent-foreground: oklch(0.9 0 0); --sidebar-accent-foreground: oklch(0.9 0 0);
--sidebar-border: oklch(1 0 0 / 15%); --sidebar-border: oklch(1 0 0 / 15%);
--sidebar-ring: oklch(0.556 0 0); --sidebar-ring: oklch(0.556 0 0);
} }

52
src/templates/BlogTemplate.tsx
View file

@ -10,31 +10,31 @@ const BlogTemplate = () => {
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>
{!post ? ( {!post ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<> <>
<div className="mb-5"> <div className="mb-5">
<h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2> <h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
</div> </div>
<div className="flex md:flex-row md:justify-between flex-col mb-8"> <div className="flex md:flex-row md:justify-between flex-col mb-8">
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{convertDate(post?.date)} {convertDate(post?.date)}
</span> </span>
<div className="flex gap-1 mt-3 md:mt-0"> <div className="flex gap-1 mt-3 md:mt-0">
{post?.tags?.map((tag, i) => ( {post?.tags?.map((tag, i) => (
<Badge asChild variant="secondary" className=""> <Badge asChild variant="secondary" className="">
<Link key={i} to={`/tags/${tag}`}> <Link key={i} to={`/tags/${tag}`}>
{tag} {tag}
</Link> </Link>
</Badge> </Badge>
))} ))}
</div> </div>
</div> </div>
<div <div
className=" className="
[&>h2]:text-xl [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8 [&>h2]:text-xl [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5 [&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4 [&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4
@ -58,7 +58,7 @@ const BlogTemplate = () => {
[&>li]:leading-[1.6] [&>li]:leading-[1.6]
[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal [&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal
[&>p]:mt-6 [&>p]:leading-[1.6] [&>p]:mt-6 [&>p]:leading-[1.6]
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-accent/80 [&_a]:text-[#83a598] [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground
[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto [&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
[&>figure>img]:w-full [&>figure>img]:w-full
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center [&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center