css mod

nouzoehiroaki · Feb 3, 2024 · 0eb0ce3 · 0eb0ce3
1 parent 59ca4e0
commit 0eb0ce3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,11 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";
+
+main{
+  margin-left: auto;
+  margin-right: auto;
+}
+.aspect-ratio{
+  aspect-ratio: 16/9;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -22,7 +22,7 @@ export default async function Home() {
   }
   return (
     <>
-      <main className='flex flex-wrap justify-center items-center md:mt-32 mt-20'>
+      <main className='flex flex-wrap justify-center md:mt-32 mt-20 max-w-[1400px]  px-4'>
         <h2 className='text-center w-full font-bold text-3xl mb-2'>
           Book Commerce
         </h2>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -38,7 +38,7 @@ export default async function ProfilePage() {
       </div>
 
       <span className='font-medium text-lg mb-4 mt-4 block'>購入した記事</span>
-      <div className='flex items-center gap-6'>
+      <div className='flex gap-6 justify-center'>
         {purchasesDetailBooks.map((purchasesDetailBook: BookType) => (
           <PurchasesDetailBook
             key={purchasesDetailBook.id}

diff --git a/src/components/layouts/Book/Book.tsx b/src/components/layouts/Book/Book.tsx
@@ -79,19 +79,18 @@ const Book = ({ book, isPurchase }: BookProps) => {
         }
       `}</style>
 
-      <div className='flex flex-col items-center m-4'>
-        <a onClick={handlePurchaseClick} className='cursor-pointer shadow-2xl duration-300 hover:translate-y-1 hover:shadow-none'>
+      <div className='flex flex-col m-4 w-[30%]'>
+        <a onClick={handlePurchaseClick} className='cursor-pointer shadow-2xl duration-300 hover:translate-y-1 hover:shadow-none h-full bg-slate-100'>
           <Image
             priority
             src={book.thumbnail.url}
             alt={book.title}
             width={450}
             height={350}
-            className='rounded-t-md'
+            className='rounded-t-md object-cover aspect-ratio'
           />
-          <div className='px-4 py-4 bg-slate-100 rounded-b-md'>
-            <h2 className='text-lg font-semibold'>{book.title}</h2>
-            <p className='mt-2 text-lg text-slate-600'>この本は○○...</p>
+          <div className='px-4 py-4 rounded-b-md'>
+            <h2 className='text-md font-semibold'>{book.title}</h2>
             <p className='mt-2 text-md text-slate-700'>値段:{book.price}円</p>
           </div>
         </a>

diff --git a/src/components/layouts/PurchasesDetailBook/PurchasesDetailBook.tsx b/src/components/layouts/PurchasesDetailBook/PurchasesDetailBook.tsx
@@ -12,17 +12,17 @@ const PurchasesDetailBook = ({ PurchasesDetailBook }: PurchasesDetailBookprops)
   return (
     <Link
       href={`/book/${PurchasesDetailBook.id}`}
-      className='cursor-pointer shadow-2xl duration-300 hover:translate-y-1 hover:shadow-none'
+      className='cursor-pointer shadow-2xl duration-300 hover:translate-y-1 hover:shadow-none w-[30%] bg-slate-100'
     >
       <Image
         priority
         src={PurchasesDetailBook.thumbnail.url}
         alt={PurchasesDetailBook.title}
         width={450}
         height={350}
-        className='rounded-t-md'
+        className='rounded-t-md object-cover aspect-ratio'
       />
-      <div className='px-4 py-4 bg-slate-100 rounded-b-md'>
+      <div className='px-4 py-4 rounded-b-md'>
         <h2 className='text-lg font-semibold'></h2>
         {/* <p className="mt-2 text-lg text-slate-600">この本は○○...</p> */}
         <p className='mt-2 text-md text-slate-700'>値段：{PurchasesDetailBook.price}円</p>