interim commit
This commit is contained in:
parent
b384f1b30a
commit
708372e190
4 changed files with 267 additions and 265 deletions
|
|
@ -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-bold">
|
<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 }
|
||||||
|
|
|
||||||
|
|
@ -2,109 +2,113 @@ import MainTemplate from "@/templates/MainTemplate"
|
||||||
import portrait from "../images/portrait-compressed.jpg"
|
import portrait from "../images/portrait-compressed.jpg"
|
||||||
|
|
||||||
const AboutPage = () => {
|
const AboutPage = () => {
|
||||||
return (
|
return (
|
||||||
<MainTemplate>
|
<MainTemplate>
|
||||||
<div className="mb-5 ">
|
<div className="mb-5 ">
|
||||||
<h2 className="scroll-m-20 text-3xl font-semibold lg:text-3xl pb-3">
|
<h2 className="scroll-m-20 text-3xl font-bold lg:text-3xl pb-3">
|
||||||
About
|
About
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<figure className="w-full flex flex-col items-center mb-6">
|
<figure className="w-full flex flex-col items-center mb-6">
|
||||||
<img
|
<img
|
||||||
alt="A portrait of the blog author"
|
alt="A portrait of the blog author"
|
||||||
src={portrait}
|
src={portrait}
|
||||||
className="w-0 flex"
|
className="w-0 flex"
|
||||||
/>
|
/>
|
||||||
<figcaption className="text-sm text-muted-foreground mt-3 text-center">
|
<figcaption className="text-sm text-muted-foreground mt-3 text-center">
|
||||||
Pictured with the WITCH computer at the{" "}
|
Pictured with the WITCH computer at the{" "}
|
||||||
<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>
|
||||||
, Bletchley Park.
|
, Bletchley Park.
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
I'm a self-taught software engineer based on the south coast of England.
|
I'm a self-taught software engineer based on the south coast of England.
|
||||||
This blog is my technical scrapbook. I document the details of my
|
This blog is my technical scrapbook. I document the details of my
|
||||||
technical life so I can have a record of progress when I look back.{" "}
|
technical life so I can have a record of progress when I look back.{" "}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
I completed a degree in Philosophy at the University of Warwick (2009)
|
I completed a degree in Philosophy at the University of Warwick (2009)
|
||||||
and hold a Postgraduate Certificate of Education (2011).
|
and hold a Postgraduate Certificate of Education (2011).
|
||||||
</p>
|
</p>
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Currently I work for{" "}
|
Currently I work for{" "}
|
||||||
<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>{" "}
|
||||||
{""}
|
{""}
|
||||||
as a backend software engineer. Before that, I worked as a full-stack
|
as a backend software engineer. Before that, I worked as a full-stack
|
||||||
engineer at the{" "}
|
engineer at the{" "}
|
||||||
<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>{" "}
|
||||||
and as a frontend engineer at{" "}
|
and as a frontend engineer at{" "}
|
||||||
<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>{" "}
|
||||||
and in several web developer roles. Before software I was a
|
and in several web developer roles. Before software I was a
|
||||||
teacher.{" "}
|
teacher.{" "}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Some things I like:
|
Some things I like:
|
||||||
<ul className="pt-2">
|
<ul className="pt-2">
|
||||||
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
|
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
|
||||||
<li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
|
<li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
|
||||||
<li className="mb-1">🛸 Science fiction </li>
|
<li className="mb-1">🛸 Science fiction </li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Some things I'm interested in:
|
Some things I'm interested in:
|
||||||
<ul className="pt-2">
|
<ul className="pt-2">
|
||||||
<li className="mb-1">🧑💻 Self-hosting and digital resiliance</li>
|
<li className="mb-1">🧑💻 Self-hosting and digital resiliance</li>
|
||||||
<li className="mb-1">🖳 The history of computing and networks</li>
|
<li className="mb-1">🖳 The history of computing and networks</li>
|
||||||
<li className="mb-1">🇮🇪 Irish history and culture</li>
|
<li className="mb-1">🇮🇪 Irish history and culture</li>
|
||||||
<li className="mb-1">☸️ Buddhism</li>
|
<li className="mb-1">☸️ Buddhism</li>
|
||||||
{/*
|
{/*
|
||||||
|
|
||||||
<li className="mb-1">📡 Civil communications infrastructure</li>
|
<li className="mb-1">📡 Civil communications infrastructure</li>
|
||||||
*/}
|
*/}
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
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>{" "}
|
||||||
rather than use Microsoft GitHub. You can view my personal projects
|
rather than use Microsoft GitHub. You can view my personal projects
|
||||||
there.
|
there.
|
||||||
</p>
|
</p>
|
||||||
</MainTemplate>
|
|
||||||
)
|
<h3 className="scroll-m-20 text-2xl font-bold lg:text-2xl pt-6 pb-3">
|
||||||
|
Wot is the image in the header?
|
||||||
|
</h3>
|
||||||
|
</MainTemplate>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { AboutPage }
|
export { AboutPage }
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,7 @@ const BlogTemplate = () => {
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
<h2 className="text-3xl font-semibold lg:text-3xl">
|
<h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
|
||||||
{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">
|
||||||
|
|
@ -60,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
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue