chore: minor tweaks

* Fix flexboxes
* Center page content by default
* Clarify vendored tailwind plugin by renaming to `headless-tailwind.ts`

src/components/Admonition.tsx

@@ -82,11 +82,11 @@ export function Admonition({
 }: RenderableProps<AdmonitionProps>): JSX.Element {
   return (
     <div
-      class={`w-2/3 flex-col divide-y rounded-lg border-2 *:px-4 ${getAdmonitionStyles(
+      class={`w-2/3 flex flex-col divide-y rounded-lg border-2 *:px-4 ${getAdmonitionStyles(
         type,
       )}`}
     >
-      <div class="flex items-center *:mr-4">
+      <div class="flex flex-row items-center *:mr-4">
         <AdmonitionIcon type={type} /> {getTitle(type)}
       </div>
       <div>{children}</div>

src/components/Cover.tsx

@@ -33,7 +33,7 @@ export function Cover({
   icon = <Logo />,
 }: RenderableProps<CoverProps>): JSX.Element {
   return (
-    <div class="flex justify-center bg-green-500 px-4 py-8 dark:bg-green-700">
+    <div class="flex flex-row justify-center bg-green-500 px-4 py-8 dark:bg-green-700">
       <div class="flex max-w-screen-sm flex-col items-center justify-center gap-y-4 text-balance text-center lg:max-w-screen-md">
         {icon}
         <h1 class="text-4xl font-bold">{title}</h1>

src/components/Footer.tsx

@@ -199,7 +199,7 @@ function RenderAbouts(): JSX.Element {
 function Who(): JSX.Element {
   return (
     <>
-      <div class="flex items-center gap-1">
+      <div class="flex flex-row items-center gap-1">
         <IconSolarPanel2
           class="inline-block size-6 min-w-6"
           aria-hidden="true"

src/components/Header.tsx

@@ -31,13 +31,13 @@ export function Header({ active }: HeaderProps): JSX.Element {
       <HomeLink />
       <ul class="flex flex-row flex-wrap items-center gap-6">
         {menus.map((menu: Menu) => (
-          <li key={menu.title} class="flex h-8 items-end">
+          <li key={menu.title} class="flex flex-row h-8 items-end">
             <HeaderMenu {...menu} active={active.startsWith(menu.url)} />
           </li>
         ))}
         {extraMenus.map(
           ({ title, url }: BasicMenu): JSX.Element => (
-            <li class="flex h-8 items-end">
+            <li class="flex flex-row h-8 items-end">
               <LinkMenu active={active === url} title={title} url={url} />
             </li>
           ),
@@ -55,7 +55,7 @@ export function Header({ active }: HeaderProps): JSX.Element {
 function HomeLink(): JSX.Element {
   return (
     <a
-      class="flex flex-1 items-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      class="flex flex-row flex-1 items-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
       href="/"
     >
       <IconSolarPanel2 aria-hidden="true" class="size-6" />

src/routes/_layout.tsx

@@ -14,7 +14,7 @@ import { Header } from "../components/Header.tsx";
  */
 export default function Layout({ Component, url }: PageProps): JSX.Element {
   return (
-    <div class="flex min-h-screen flex-col">
+    <div class="flex min-h-screen flex-col justify-center">
       <Partial name="body">
         <Header active={url.pathname} />
         <Component />

src/tailwind.config.ts

@@ -2,7 +2,7 @@ import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 // import headless from "@headlessui/tailwindcss";
-import headless from "./utils/headless.ts";
+import headless from "./utils/headless-tailwind.ts";
 
 export default {
   content: ["{routes,islands,components}/**/*.{ts,tsx}"],