Merge pull request #28 from crow-fox/fix/layout

Fix/layout
crow-fox · May 4, 2024 · 840b674 · 840b674
2 parents 3edeeb5 + 4465171
commit 840b674
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 23 deletions.
diff --git a/app/_features/color/ColorGridItem.tsx b/app/_features/color/ColorGridItem.tsx
@@ -55,7 +55,7 @@ export function ColorGridItem({ color, tailwindColors }: Props) {
       ].join(" ")}
     >
       <div
-        className="grid h-10 w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800  "
+        className="grid h-10 w-full min-w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800  "
         style={{
           backgroundColor: color.value,
           color:

diff --git a/app/_features/color/ColorGridTable.tsx b/app/_features/color/ColorGridTable.tsx
@@ -15,7 +15,7 @@ export function ColorGridTable() {
   const tailwindColorGrades = getTailwindColorGrades(tailwindThemeColors);
 
   return (
-    <div className=" grid grid-cols-[minmax(0,1fr)] justify-center overflow-x-auto">
+    <div className=" grid  overflow-x-auto">
       <table className=" relative w-full border-collapse">
         <thead>
           <tr>

diff --git a/app/_features/color/FallbackColorGridItem.tsx b/app/_features/color/FallbackColorGridItem.tsx
@@ -21,7 +21,7 @@ export function FallbackColorGridItem({ color }: Props) {
   return (
     <div className="grid gap-y-3 p-2 hover:shadow-[inset_0_0_0_2px_black]">
       <div
-        className="grid h-10 w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800 "
+        className="grid h-10 w-full min-w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800 "
         style={{
           backgroundColor: color.value,
         }}

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,9 +17,9 @@ export default function RootLayout({
     <html lang="ja" suppressHydrationWarning>
       <body>
         <ThemeProvider>
-          <div className="grid min-h-svh grid-rows-[auto_1fr_auto] bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
-            <header className=" grid border-b border-gray-200 p-4 dark:border-gray-700">
-              <nav>
+          <div className="grid min-h-svh grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] grid-rows-[auto_1fr_auto] bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
+            <header className=" grid grid-cols-subgrid border-b border-gray-200 p-4 [grid-column:1/-1] dark:border-gray-700">
+              <nav className=" grid [grid-column:2]">
                 <ul className=" flex flex-wrap items-center gap-4">
                   <li className=" mr-auto">
                     <Link href="/" className="underline underline-offset-2">
@@ -40,9 +40,11 @@ export default function RootLayout({
                 </ul>
               </nav>
             </header>
-            <main className="px-4 py-8">{children}</main>
-            <footer className="p-4">
-              <p className="grid justify-center">
+            <main className="grid grid-cols-subgrid py-8 [grid-column:1/-1] ">
+              <div className=" [grid-column:2]">{children}</div>
+            </main>
+            <footer className="grid grid-cols-subgrid py-4 [grid-column:1/-1]">
+              <p className="grid justify-center [grid-column:2]">
                 <a href="https://github.com/crow-fox">
                   <small className="text-sm">&copy; crow-fox</small>
                 </a>

diff --git a/app/page.tsx b/app/page.tsx
@@ -11,7 +11,7 @@ export default function Home() {
   const tailwindColors = getTailwindColors(tailwindThemeColors);
 
   return (
-    <div className="grid justify-center gap-y-8">
+    <div className="grid gap-y-8">
       <div className=" grid gap-y-2">
         <h1 className=" text-lg font-bold">Tailwind Color Contrast Grid</h1>
         <Suspense fallback={<p>読み込み中...</p>}>

diff --git a/app/reference/page.tsx b/app/reference/page.tsx
@@ -15,19 +15,17 @@ const references = [
 
 export default function ReferencePage() {
   return (
-    <div className="mx-auto grid w-[min(100%,40rem)] gap-y-8">
-      <div className=" grid gap-y-4 ">
-        <h1 className=" text-lg font-bold">参考サイト</h1>
-        <ul className=" grid list-disc gap-y-2 pl-4">
-          {references.map((reference) => (
-            <li key={reference.href}>
-              <ReferenceLink href={reference.href}>
-                {reference.title}
-              </ReferenceLink>
-            </li>
-          ))}
-        </ul>
-      </div>
+    <div className=" grid gap-y-4 ">
+      <h1 className=" text-lg font-bold">参考サイト</h1>
+      <ul className=" grid list-disc gap-y-2 pl-4">
+        {references.map((reference) => (
+          <li key={reference.href}>
+            <ReferenceLink href={reference.href}>
+              {reference.title}
+            </ReferenceLink>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }