refactor: Update Carousel styling and image dimensions

Signed-off-by: Austin Hornhead <augustthegreat.cool@gmail.com>
Pool-Of-Tears · May 23, 2024 · b81b512 · b81b512
1 parent 20d23e8
commit b81b512
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -87,19 +87,19 @@ export function CarouselFeatured() {
         slidesToShow: 1,
       }}
       orientation="vertical"
-      className="w-full max-w-xs"
+      className="mx-auto w-2/3 max-w-lg sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/3"
     >
       <CarouselContent>
         {images.map((image, index) => (
           <CarouselItem key={index} className="pl-1 basis-full w-full">
-              <Card className="bg-transparent border-0 shadow-none">
-                <CardContent className="flex w-full basis-full aspect-auto items-center justify-center p-1">
-                  <img src={image} className="fill-background" style={{objectFit: 'cover', objectPosition: 'center'}} />
-                </CardContent>
-              </Card>
+            <Card className="bg-transparent border-0 shadow-none">
+              <CardContent className="flex w-full basis-full aspect-auto items-center justify-center p-1">
+                <img src={image} className="fill-background" style={{ objectFit: 'cover', objectPosition: 'center' }} />
+              </CardContent>
+            </Card>
           </CarouselItem>
         ))}
       </CarouselContent>
     </Carousel>
-  )
+  );
 }
diff --git a/src/index.css b/src/index.css
@@ -168,7 +168,7 @@ set custom font and dim image background when in dark mode
 }
 
 .carousel {
-  width: 80%;
+  width: 90%;
   max-width: 32rem;
   margin-left: auto;
   margin-right: auto;

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -34,11 +34,11 @@ const Section = ({ type, CarouselComponent, reverse }) => {
             />
             <h2 className="title text-center">{sectionData.title}</h2>
             <p className="text-center">{sectionData.description}</p>
-            <div className="flex flex-col my-10 mx-5 p-10 bg-accent/80 rounded-lg text-center shadow-xl">
+            <div className="flex flex-col my-10 mx-5 p-5 sm:p-10 bg-accent/80 rounded-lg text-center shadow-xl">
               <h3>{home.feat[1]}</h3>
               <ul className="text-left overflow-auto h-[300px] md:h-auto md:overflow-visible">
                 {sectionData.features.map((item, index) => (
-                  <li key={index} className="list-disc ml-5 text-base">
+                  <li key={index} className="list-disc ml-5 text-sm sm:text-base">
                     {item}
                   </li>
                 ))}
@@ -67,7 +67,7 @@ const Home = () => {
       <Section type="myne" CarouselComponent={CarouselMyne} reverse={true} />
       <section id="featured" className="mx-auto my-5 p-2 text-center">
         <div className="mx-auto w-full justify-center animate-slidein opacity-0 [--slidein-delay:500ms]">
-          <h2>{home.feat[0]}</h2>
+          <h3>{home.feat[0]}</h3>
           <CarouselFeatured />
         </div>
       </section>