responsive Carousel

cern-sis · Oct 27, 2023 · e84bb90 · e84bb90
1 parent fc49f64
commit e84bb90
Showing 1 changed file with 6 additions and 13 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -21,7 +21,6 @@ const Home: NextPage<HomePagePops> = ({ lectures }) => {
   useEffect(() => {
     document.title = "Home | CERN Academic Training";
   }, []);
-  // window.scrollTo(0, 0);
   const AcademicTrainingCaption = styled(Link)`
     color: #fff !important;
     font: normal normal normal 14px Abolition;
@@ -51,11 +50,13 @@ const Home: NextPage<HomePagePops> = ({ lectures }) => {
     margin-top: 0;
     object-fit: cover;
     object-position: 50% 50%;
-    background-repeat: no-repeat;
+    background-repeat: repeat-x;
     opacity: 0.9;
+    height: calc(100vh - 40px);
   }
     `;
 
+
   const CaptionFrame = styled.div`
     margin: 0% 15% 0% 15%;
     width: 70%; /*small screens*/
@@ -100,7 +101,6 @@ const Home: NextPage<HomePagePops> = ({ lectures }) => {
     display: flex;
     background: transparent;
     height: 100%;
-    zindex: 1;
   `;
   const AcademicTrainingDecoration = styled.div`
     // margin-top: 25%;
@@ -130,32 +130,25 @@ const Home: NextPage<HomePagePops> = ({ lectures }) => {
           </AcademicTrainingDecoration>
           <Title type="warning">
             <AcademicTrainingCaption href="/">
-              ACADEMIC TRAINING{" "}
+              ACADEMIC TRAINING!{" "}
             </AcademicTrainingCaption>
           </Title>
         </CaptionFrame>
       </SlideWrapper>
       <Carousel
         style={{
           display: "flex",
-          flexDirection: "column",
-          background: "pink",
-          height: "calc(100vh - 40px)",
         }}
         autoplay
         dots={false}
       >
         {photos.map((photo) => {
           return (
-            <div key={photo.src}>
-              <div>
-                <CarouselImage alt={photo.alt} src={photo.src} />
-              </div>
-            </div>
+                <CarouselImage alt={photo.alt} src={photo.src} key={photo.src}/>
           );
         })}
       </Carousel>
-      <div style={{ background: "linear-gradient(160deg, #0b1117 0, #0033a0 100%) no-repeat", padding: "3% 7% 0% 7%" }}>
+      <div style={{position: "absolute", background: "linear-gradient(160deg, #0b1117 0, #0033a0 100%) no-repeat", padding: "3% 7% 0% 7%" }}>
         <div>
           <MostRecentCaption level={5}>MOST RECENT</MostRecentCaption>
         </div>