1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-05 19:15:30 -04:00

correct some flex/grid spacings

This commit is contained in:
2025-05-08 10:07:40 -04:00
parent d98c3bb775
commit eab84bfee9
19 changed files with 84 additions and 136 deletions
+3 -4
View File
@@ -4,7 +4,7 @@ import { Analytics } from "@vercel/analytics/next";
import { ThemeProvider, ThemeScript } from "@/components/layout/theme-context";
import Header from "@/components/layout/header";
import Footer from "@/components/layout/footer";
import { SkipNavLink, SkipNavTarget } from "@/components/layout/skip-nav";
import SkipNavButton, { SKIP_NAV_ID } from "@/components/layout/skip-nav";
import { defaultMetadata } from "@/lib/metadata";
import { GeistMono, GeistSans } from "@/lib/fonts";
import siteConfig from "@/lib/config/site";
@@ -64,13 +64,12 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
<body className="bg-background text-foreground font-sans antialiased">
<ThemeProvider>
<SkipNavLink />
<SkipNavButton />
<div className="mx-auto w-full max-w-4xl px-5">
<Header className="mt-4 mb-6 w-full" />
<main>
<SkipNavTarget />
<main id={SKIP_NAV_ID} tabIndex={-1}>
{children}
</main>
+5 -5
View File
@@ -85,17 +85,17 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
}}
/>
<div className="text-foreground/70 -mt-1 flex flex-wrap justify-items-start space-x-4 text-[0.8rem] leading-9 tracking-wide md:text-[0.85rem]">
<div className="text-foreground/70 -mt-1 flex flex-wrap justify-items-start gap-x-4 text-[0.8rem] leading-9 tracking-wide md:text-[0.85rem]">
<Link
href={`/${POSTS_DIR}/${frontmatter!.slug}`}
className={"text-foreground/70 flex items-center space-x-2 whitespace-nowrap hover:no-underline"}
className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
>
<CalendarDaysIcon className="inline size-4 shrink-0" />
<Time date={frontmatter!.date} format="MMMM d, y" />
</Link>
{frontmatter!.tags && (
<div className="flex flex-wrap items-center space-x-2 whitespace-nowrap">
<div className="flex flex-wrap items-center gap-x-2 whitespace-nowrap">
<TagIcon className="inline size-4 shrink-0" />
{frontmatter!.tags.map((tag) => (
<span
@@ -113,13 +113,13 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
<Link
href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
title={`Edit "${frontmatter!.title}" on GitHub`}
className={"text-foreground/70 flex items-center space-x-2 whitespace-nowrap hover:no-underline"}
className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
>
<SquarePenIcon className="inline size-4 shrink-0" />
<span>Improve This Post</span>
</Link>
<div className="flex min-w-14 items-center space-x-2 whitespace-nowrap">
<div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
<EyeIcon className="inline size-4 shrink-0" />
<Suspense
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
+2 -2
View File
@@ -37,7 +37,7 @@ const Page = async () => {
Object.entries(postsByYear).forEach(([year, posts]) => {
sections.push(
<section className="my-8 first-of-type:mt-0" key={year}>
<section className="my-8 first-of-type:mt-6 last-of-type:mb-6" key={year}>
<h2 className="mt-0 mb-4 text-3xl font-bold md:text-4xl">{year}</h2>
<ul className="space-y-4">
{posts.map(({ slug, date, title, htmlTitle, views }) => (
@@ -50,7 +50,7 @@ const Page = async () => {
dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
/>
{views > 0 && (
<span className="bg-muted text-muted-foreground inline-flex h-5 flex-nowrap items-center space-x-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
<span className="bg-muted text-muted-foreground inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
<EyeIcon className="inline-block size-4 shrink-0" />
<span className="inline-block leading-5">
{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(views)}
+3 -3
View File
@@ -191,15 +191,15 @@ const Page = () => {
<Link href="/contact" title="Send an email" className="[--primary:#de0c0c] dark:[--primary:#ff5050]">
email
</Link>{" "}
<sup className="mx-0.5 text-[0.6rem]">
<sup className="mx-[3px] text-[0.6rem]">
<Link
href="https://jrvs.io/pgp"
rel="pgpkey"
title="My Public Key"
className="text-nowrap decoration-1 [--primary:var(--muted-foreground)]"
>
<LockIcon className="mr-0.5 inline size-3 align-text-top" />
<code className="mx-0.5 tracking-wider text-wrap [word-spacing:-0.25em]">2B0C 9CF2 51E6 9A39</code>
<LockIcon className="mr-[5px] inline size-3 align-text-top" />
<code className="tracking-wider text-wrap [word-spacing:-3px]">2B0C 9CF2 51E6 9A39</code>
</Link>
</sup>
,{" "}
+6 -1
View File
@@ -1,5 +1,6 @@
import PageTitle from "@/components/layout/page-title";
import Marquee from "@/components/marquee";
import Comments from "@/components/comments";
import { createMetadata } from "@/lib/metadata";
import { ComicNeue } from "@/lib/fonts";
@@ -11,7 +12,7 @@ export const metadata = createMetadata({
export const WarningMarquee = () => (
<Marquee>
<span className="leading-none select-none">
<span className="leading-none">
🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
<code className="text-[0.9rem] font-normal">
color: <span style={{ color: "#32cd32" }}>limegreen</span>
@@ -148,3 +149,7 @@ _[April 2018](https://hungry-mayer-40e790.netlify.app/) ([view source](https://g
![March 2020](./images/2020_03.png)
_[March 2020](https://quiet-truffle-92842d.netlify.app/) ([view source](https://github.com/jakejarvis/jarv.is-hugo))_
---
<Comments title="Previously on..." />
+5 -5
View File
@@ -57,16 +57,16 @@ const Page = async () => {
<div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
{repos?.map((repo) => (
<div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3">
<div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
<Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
{repo!.name}
</Link>
{repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
<div className="flex flex-wrap space-x-4 *:inline-flex *:flex-nowrap *:items-center *:text-[0.825rem] *:leading-loose *:whitespace-nowrap">
<div className="flex flex-wrap gap-x-4 text-[0.825rem] leading-loose whitespace-nowrap">
{repo!.primaryLanguage && (
<div className="text-muted-foreground space-x-2">
<div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
{repo!.primaryLanguage.color && (
<span
className="inline-block size-4 rounded-full"
@@ -81,7 +81,7 @@ const Page = async () => {
<Link
href={`${repo!.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
>
<StarIcon className="inline-block size-4 shrink-0" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
@@ -92,7 +92,7 @@ const Page = async () => {
<Link
href={`${repo!.url}/network/members`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
>
<GitForkIcon className="inline-block size-4" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>