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

style: tweak border radiis and mobile
All checks were successful
Deploy Blog / deploy (push) Successful in 2m21s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-08-13 16:47:27 +01:00
parent 1b0f918622
commit b1f3cde3a6
7 changed files with 341 additions and 342 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/Header.tsx
View file

@ -1,7 +1,7 @@
// @ts-nocheck
import { Button } from "@/components/ui/button"
import { useTheme } from "@/context/ThemeProvider"
import { MoonStar } from "lucide-react"
import { MoonStar, MenuIcon } from "lucide-react"
import { Link } from "react-router"
import {
NavigationMenu,
@ -21,7 +21,7 @@ const Menu = () => {
<NavigationMenuList>
{/* Desktop menu - hidden on mobile, visible on md+ */}
<div className="hidden md:flex md:space-x-1">
<NavigationMenuItem>
<NavigationMenuItem className="border">
<NavigationMenuLink
asChild
className={navigationMenuTriggerStyle()}
@ -29,7 +29,7 @@ const Menu = () => {
<Link to="/posts/page/1">Posts</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuItem className="border">
<NavigationMenuLink
asChild
className={navigationMenuTriggerStyle()}
@ -40,17 +40,19 @@ const Menu = () => {
</div>
{/* Mobile dropdown - visible only on small screens */}
<NavigationMenuItem className="md:hidden">
<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
<NavigationMenuItem className="md:hidden px-4">
<NavigationMenuTrigger className="border rounded-none">
<MenuIcon />
</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink asChild>
<Link to="/posts/page/1" className="block px-2 py-1.5">
<Link to="/posts/page/1" className="block">
Posts
</Link>
</NavigationMenuLink>
<NavigationMenuLink asChild>
<Link to="/about" className="block px-2 py-1.5">
<Link to="/about" className="block">
About
</Link>
</NavigationMenuLink>
@ -67,27 +69,26 @@ const Header = () => {
return (
<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-sidebar">
<div className="w-full px-0 md:px-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<Button variant="ghost" asChild>
<div className="flex items-center md:px-0 px-4">
<Button
variant="ghost"
asChild
className="border md:border-none rounded-none"
>
<Link to="/">
<span className="text-lg tracking-normal font-semibold">
Systems Obscure
</span>
<span className="text-lg font-semibold">Systems Obscure</span>
</Link>
</Button>
</div>
<div className="flex items-center justify-between gap-2">
<div className="flex itemr justify-between md:gap-4">
<Toggle
className="border bg-background rounded-none"
pressed={theme === "dark"}
onPressedChange={() =>
setTheme(theme === "dark" ? "light" : "dark")
}
>
{/*
<MoonStar />
*/}
<span className="">Dark theme</span>
<MoonStar size={10} />
</Toggle>
<Menu />

5
src/components/ui/navigation-menu.tsx
View file

@ -74,10 +74,15 @@ function NavigationMenuTrigger({
{...props}
>
{children}{" "}
{/*
<ChevronDownIcon
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
*/}
</NavigationMenuPrimitive.Trigger>
)
}

6
src/containers/PostListing.tsx
View file

@ -44,7 +44,11 @@ const PostListing = ({ posts, title, showAllButton }) => {
))}
</div>
{showAllButton && (
<Button asChild variant="secondary" className="w-full mt-4">
<Button
asChild
variant="secondary"
className="w-full mt-4 rounded-none border-1"
>
<Link to="/posts/page/1">View all</Link>
</Button>
)}

6
src/pages/about.tsx
View file

@ -43,7 +43,7 @@ const AboutPage = () => {
<a
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
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 hover:text-primary/80 underline-offset-2 font-medium"
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 hover:text-primary/80 underline-offset-2"
className="underline decoration-1 hover:text-primary/80 underline-offset-4"
>
Arria NLG
</a>{" "}

19
src/pages/home.tsx
View file

@ -2,43 +2,32 @@ import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import roundedPortrait from "../images/round-portrait.png"
import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Link } from "react-router"
const HomePage = () => {
const { posts } = usePosts()
return (
<MainTemplate>
<div className="mb-7 border border-foreground py-6 px-6 md:py-8 md:px-8 dark:bg-sidebar">
<div className="mb-7 border border-foreground py-6 px-6 md:px-8 md:pt-9 dark:bg-sidebar">
<div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
{/* Image - centers on mobile, left-aligned on desktop */}
<div className="flex-shrink-0">
<img
src={roundedPortrait}
alt="Profile picture"
className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain"
className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain border-2 rounded-full"
/>
</div>
{/* Text content */}
<div className="text-center md:text-left flex-1">
<h1 className="scroll-m-20 text-2xl font-semibold">
Another software engineer with a blog
</h1>
<p className="leading-[1.7] mt-5">
I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and
digital garden.
I'm a self-taught software engineer from London. This blog is a
technical scrapbook and digital garden.
</p>
</div>
</div>
</div>
{/*
*/}
<PostListing
title="Recent posts"

2
src/styles/syntax-highlighting.css
View file

@ -12,7 +12,7 @@ p code {
.shiki {
padding: 1rem 1.2rem;
border-radius: var(--radius);
border-radius: 0;
overflow-x: auto;
margin: 1.5rem 0;
line-height: 1.3;

2
src/templates/BlogTemplate.tsx
View file

@ -60,7 +60,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-muted-foreground [&_a]:font-medium
[&_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