Merge branch 'style/beige-accent'
All checks were successful
Deploy Blog / deploy (push) Successful in 1m46s
All checks were successful
Deploy Blog / deploy (push) Successful in 1m46s
This commit is contained in:
commit
dbcc643222
4 changed files with 197 additions and 197 deletions
|
|
@ -6,103 +6,103 @@ import { Link } from "react-router"
|
|||
import headerImage from "../images/radigue_gruvbox.png"
|
||||
import controlPanel from "../images/control-panel.png"
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenuViewport,
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenuViewport,
|
||||
} from "@/components/ui/navigation-menu"
|
||||
|
||||
import { Toggle } from "@/components/ui/toggle"
|
||||
const Menu = () => {
|
||||
return (
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{/* Desktop menu - hidden on mobile, visible on md+ */}
|
||||
<div className="hidden md:flex md:space-x-3">
|
||||
<NavigationMenuItem className="">
|
||||
<NavigationMenuLink
|
||||
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`}
|
||||
>
|
||||
<Link to="/posts/page/1">Posts</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem className="">
|
||||
<NavigationMenuLink
|
||||
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`}
|
||||
>
|
||||
<Link to="/about">About</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</div>
|
||||
return (
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{/* Desktop menu - hidden on mobile, visible on md+ */}
|
||||
<div className="hidden md:flex md:space-x-3">
|
||||
<NavigationMenuItem className="">
|
||||
<NavigationMenuLink
|
||||
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`}
|
||||
>
|
||||
<Link to="/posts/page/1">Posts</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem className="">
|
||||
<NavigationMenuLink
|
||||
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`}
|
||||
>
|
||||
<Link to="/about">About</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</div>
|
||||
|
||||
{/* Mobile dropdown - visible only on small screens */}
|
||||
<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">
|
||||
<MenuIcon />
|
||||
</NavigationMenuTrigger>
|
||||
{/* Mobile dropdown - visible only on small screens */}
|
||||
<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">
|
||||
<MenuIcon />
|
||||
</NavigationMenuTrigger>
|
||||
|
||||
<NavigationMenuContent className="bg-accent/20 border-none active:border-none">
|
||||
<NavigationMenuLink asChild>
|
||||
<Link to="/posts/page/1" className="block">
|
||||
Posts
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link to="/about" className="block">
|
||||
About
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenu>
|
||||
)
|
||||
<NavigationMenuContent className="bg-accent/20 border-none active:border-none">
|
||||
<NavigationMenuLink asChild>
|
||||
<Link to="/posts/page/1" className="block">
|
||||
Posts
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link to="/about" className="block">
|
||||
About
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenu>
|
||||
)
|
||||
}
|
||||
|
||||
const Header = () => {
|
||||
const { theme, setTheme } = useTheme()
|
||||
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">
|
||||
<div
|
||||
className="absolute inset-0 opacity-70 dark:opacity-40"
|
||||
style={{
|
||||
backgroundImage: `url(${headerImage})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center 30%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
filter: "blur(0px) grayscale(10%)",
|
||||
}}
|
||||
/>
|
||||
const { theme, setTheme } = useTheme()
|
||||
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">
|
||||
<div
|
||||
className="absolute inset-0 opacity-70 dark:opacity-40"
|
||||
style={{
|
||||
backgroundImage: `url(${headerImage})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center 30%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
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="flex items-center md:px-0 px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
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-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 md:border-none rounded-none z-500"
|
||||
>
|
||||
<Link to="/">
|
||||
<span className="text-xl tracking-normal font-semibold">
|
||||
Systems Obscure
|
||||
</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex itemr justify-between md:gap-4 z-500">
|
||||
{/*
|
||||
<div className="w-full px-0 md:px-4 flex items-center justify-between">
|
||||
<div className="flex items-center md:px-0 px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
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-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 md:border-none rounded-none z-500"
|
||||
>
|
||||
<Link to="/">
|
||||
<span className="text-xl tracking-normal font-semibold">
|
||||
Systems Obscure
|
||||
</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex itemr justify-between md:gap-4 z-500">
|
||||
{/*
|
||||
<Toggle
|
||||
className="border bg-background rounded-none"
|
||||
pressed={theme === "dark"}
|
||||
|
|
@ -115,9 +115,9 @@ const Header = () => {
|
|||
|
||||
*/}
|
||||
|
||||
<Menu />
|
||||
<Menu />
|
||||
|
||||
{/*
|
||||
{/*
|
||||
<div className="hidden md:block">
|
||||
<Button variant="ghost">
|
||||
<GitMerge /> Forgejo
|
||||
|
|
@ -126,10 +126,10 @@ const Header = () => {
|
|||
</div>
|
||||
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export { Header }
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const AboutPage = () => {
|
|||
<a
|
||||
href="https://www.tnmoc.org/"
|
||||
target="_blank"
|
||||
className="text-[#83a598] hover:text-accent/90"
|
||||
className="text-primary hover:text-primary/80"
|
||||
>
|
||||
National Museum of Computing
|
||||
</a>
|
||||
|
|
@ -43,7 +43,7 @@ const AboutPage = () => {
|
|||
<a
|
||||
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
|
||||
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
|
||||
</a>{" "}
|
||||
|
|
@ -53,7 +53,7 @@ const AboutPage = () => {
|
|||
<a
|
||||
href="https://en.wikipedia.org/wiki/BBC"
|
||||
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
|
||||
</a>{" "}
|
||||
|
|
@ -61,7 +61,7 @@ const AboutPage = () => {
|
|||
<a
|
||||
href="https://www.arria.com/"
|
||||
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
|
||||
</a>{" "}
|
||||
|
|
@ -96,7 +96,7 @@ const AboutPage = () => {
|
|||
I self-host my own Git forge at{" "}
|
||||
<a
|
||||
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
|
||||
</a>{" "}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
:root {
|
||||
--radius: 0.3rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-monospaced: "Jetbrains Mono", monospace;
|
||||
--font-sansserif: "Inter", sans-serif;
|
||||
--radius: 0.3rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-monospaced: "Jetbrains Mono", monospace;
|
||||
--font-sansserif: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* .dark { */
|
||||
|
|
@ -70,45 +70,45 @@
|
|||
/* } */
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.2 0 0);
|
||||
/* Softer dark gray instead of 0.145 */
|
||||
--foreground: oklch(0.9 0 0);
|
||||
/* Softer off-white instead of 0.985 */
|
||||
--card: oklch(0.22 0 0);
|
||||
/* Slightly lighter card */
|
||||
--card-foreground: oklch(0.9 0 0);
|
||||
/* Match foreground */
|
||||
--popover: oklch(0.22 0 0);
|
||||
--popover-foreground: oklch(0.9 0 0);
|
||||
--primary: oklch(0.85 0 0);
|
||||
/* Less harsh white */
|
||||
--primary-foreground: oklch(0.22 0 0);
|
||||
--secondary: oklch(0.3 0 0);
|
||||
/* Lighter secondary */
|
||||
--secondary-foreground: oklch(0.9 0 0);
|
||||
--muted: oklch(0.3 0 0);
|
||||
--muted-foreground: oklch(0.65 0 0);
|
||||
/* Slightly softer */
|
||||
--accent: #458588;
|
||||
--background: oklch(0.2 0 0);
|
||||
/* Softer dark gray instead of 0.145 */
|
||||
--foreground: oklch(0.9 0 0);
|
||||
/* Softer off-white instead of 0.985 */
|
||||
--card: oklch(0.22 0 0);
|
||||
/* Slightly lighter card */
|
||||
--card-foreground: oklch(0.9 0 0);
|
||||
/* Match foreground */
|
||||
--popover: oklch(0.22 0 0);
|
||||
--popover-foreground: oklch(0.9 0 0);
|
||||
--primary: oklch(0.85 0 0);
|
||||
/* Less harsh white */
|
||||
--primary-foreground: oklch(0.22 0 0);
|
||||
--secondary: oklch(0.3 0 0);
|
||||
/* Lighter secondary */
|
||||
--secondary-foreground: oklch(0.9 0 0);
|
||||
--muted: oklch(0.3 0 0);
|
||||
--muted-foreground: oklch(0.65 0 0);
|
||||
/* Slightly softer */
|
||||
--accent: #a89984;
|
||||
|
||||
--accent-foreground: oklch(0.9 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 15%);
|
||||
/* Slightly more visible borders */
|
||||
--input: oklch(1 0 0 / 18%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.22 0 0);
|
||||
/* Match card */
|
||||
--sidebar-foreground: oklch(0.9 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.9 0 0);
|
||||
--sidebar-accent: oklch(0.3 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.9 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 15%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
--accent-foreground: oklch(0.9 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 15%);
|
||||
/* Slightly more visible borders */
|
||||
--input: oklch(1 0 0 / 18%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.22 0 0);
|
||||
/* Match card */
|
||||
--sidebar-foreground: oklch(0.9 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.9 0 0);
|
||||
--sidebar-accent: oklch(0.3 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.9 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 15%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,31 +10,31 @@ const BlogTemplate = () => {
|
|||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
|
||||
return (
|
||||
<MainTemplate>
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
|
||||
</div>
|
||||
<div className="flex md:flex-row md:justify-between flex-col mb-8">
|
||||
<span className="text-muted-foreground">
|
||||
{convertDate(post?.date)}
|
||||
</span>
|
||||
<div className="flex gap-1 mt-3 md:mt-0">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Badge asChild variant="secondary" className="">
|
||||
<Link key={i} to={`/tags/${tag}`}>
|
||||
{tag}
|
||||
</Link>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<MainTemplate>
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
|
||||
</div>
|
||||
<div className="flex md:flex-row md:justify-between flex-col mb-8">
|
||||
<span className="text-muted-foreground">
|
||||
{convertDate(post?.date)}
|
||||
</span>
|
||||
<div className="flex gap-1 mt-3 md:mt-0">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Badge asChild variant="secondary" className="">
|
||||
<Link key={i} to={`/tags/${tag}`}>
|
||||
{tag}
|
||||
</Link>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="
|
||||
[&>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
|
||||
[&>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_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]
|
||||
[&_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>img]:w-full
|
||||
[&>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