Add Responsive

IEEE-ESTl · Apr 7, 2024 · dca5f9d · dca5f9d
1 parent d83629b
commit dca5f9d
Show file tree

Hide file tree

Showing 13 changed files with 290 additions and 158 deletions.
diff --git a/public/Inicio/undraw_programming_re_kg9v.svg b/public/Inicio/undraw_programming_re_kg9v.svg
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
@@ -85,6 +85,17 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
         width: 300px;
     }
 
+    @media (max-width: 1030px) {
+        article {
+            animation: carouselMove 30s linear infinite;
+            margin-top: 50px;
+
+            & img {
+                width: 200px;
+            }
+        }
+    }
+
     @keyframes carouselMove {
         0% {
             transform: translateX(0);

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -44,4 +44,4 @@ const FAQ = [
       ))
     }
   </section>
-</section>
+</section>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -17,11 +17,14 @@ import GitHubIcon from "./icons/GitHub.astro";
 <div class="menuInicio">
     <img src={branchLogo.src} class="logoIEEE" alt="Logo de IEEE" />
 
-    <button class="botonNav"><a href="#Inicio">Inicio</a></button>
-    <button class="botonNav"><a href="#Eventos">Eventos</a></button>
-    <button class="botonNav"><a href="#Soon">Próximamente</a></button>
-    <button class="botonNav"><a href="#Unete">Únete</a></button>
-    <button class="botonNav"><a href="#Faq">FAQ</a></button>
+    <div class="navInicio">
+      <button class="botonNav"><a href="#Inicio">Inicio</a></button>
+      <button class="botonNav"><a href="#Eventos">Eventos</a></button>
+      <button class="botonNav"><a href="#Soon">Próximamente</a></button>
+      <button class="botonNav"><a href="#Unete">Únete</a></button>
+      <button class="botonNav"><a href="#Faq">FAQ</a></button>
+    </div>
+
     <div class="Redes-Inicio">
 
       {config.socialNetworks.instagram && (

diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
@@ -18,7 +18,7 @@ import Carousel from "./Carousel.astro";
     <section class="filtroInicio">
       <div class="contenedorBienvenida">
         <div class="textobienvenida">
-          <h1>{"Bienvenido a " + config.branchName}</h1>
+          <h1>{config.branchName}</h1>
           <p>
             {" "}
             {config.branchDescription}{" "}
@@ -41,4 +41,4 @@ import Carousel from "./Carousel.astro";
 
     <div class="esferaAzul ubicacionEsfera"></div>
   </div>
-</section>
+</section>
diff --git a/src/components/Soon.tsx b/src/components/Soon.tsx
@@ -4,72 +4,54 @@ import "swiper/css/effect-coverflow";
 import "swiper/css/pagination";
 import "./cssSoon/soon.css";
 import { EffectCoverflow, Pagination } from "swiper/modules";
-import cw from "../../public/SoonEvents/cw.jpeg";
-import w1 from "../../public/SoonEvents/weekend1.jpeg";
-import w2 from "../../public/SoonEvents/weekend2.jpeg";
-import w3 from "../../public/SoonEvents/weekend3.jpeg";
-import w4 from "../../public/SoonEvents/weekend4.jpeg";
-import w5 from "../../public/SoonEvents/weekend5.jpeg";
-import w6 from "../../public/SoonEvents/weekend6.jpeg";
-import w7 from "../../public/SoonEvents/weekend7.jpeg";
+
+import comingSoon from "/public/Inicio/undraw_programming_re_kg9v.svg";
 
 type Card = {
   src: string;
 };
 
-const card: Card[] = [
-  {
-    src: cw.src,
-  },
-  {
-    src: w1.src,
-  },
-  {
-    src: w2.src,
-  },
-  {
-    src: w3.src,
-  },
-  {
-    src: w4.src,
-  },
-  {
-    src: w5.src,
-  },
-  {
-    src: w6.src,
-  },
-  {
-    src: w7.src,
-  },
-];
+const card: Card[] = [];
 
 export default function App() {
   return (
     <>
+
       {" "}
-      <Swiper
-        effect={"coverflow"}
-        grabCursor={true}
-        centeredSlides={true}
-        slidesPerView={"auto"}
-        coverflowEffect={{
-          rotate: 50,
-          stretch: 0,
-          depth: 100,
-          modifier: 1,
-          slideShadows: true,
-        }}
-        pagination={true}
-        modules={[EffectCoverflow, Pagination]}
-        className="mySwiper1"
-      >
-        {card.map((Card, index) => (
-          <SwiperSlide key={index}>
-            <img src={Card.src} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
+      {card.length === 0 && (
+        <div style={{ textAlign: "center" }}>
+          <img src={comingSoon.src} style={{ width: "300px" }} />
+          <h1
+            style={{ color: "#035B98" }}
+          >Proximamente...</h1>
+        </div>
+      )}
+
+      {card.length !== 0 && (
+        <Swiper
+          effect={"coverflow"}
+          grabCursor={true}
+          centeredSlides={true}
+          slidesPerView={"auto"}
+          coverflowEffect={{
+            rotate: 50,
+            stretch: 0,
+            depth: 100,
+            modifier: 1,
+            slideShadows: true,
+          }}
+          pagination={true}
+          modules={[EffectCoverflow, Pagination]}
+          className="mySwiper1"
+        >
+          {card.map((Card, index) => (
+            <SwiperSlide key={index}>
+              <img src={Card.src} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+
     </>
   );
 }
diff --git a/src/components/Titulos.astro b/src/components/Titulos.astro
@@ -23,6 +23,17 @@ const { titulo } = Astro.props
         padding-left: 1rem;
 
     }
+
+    @media screen and (max-width:1030px)
+    {
+        .titulo
+        {
+            font-size: 50px;
+        }
+    }
+
+
+
     .underline
     {
         margin-left: 2rem;

diff --git a/src/components/cssEvents/Events.css b/src/components/cssEvents/Events.css
@@ -62,9 +62,23 @@ img {
   margin: 0 0 16px;
 }
 
+@media (max-width: 1030px) {
+  .container {
+    flex-direction: column;
+    gap: 0;
+  }
+
+
+
+  .events {
+    display: none;
+  }
+
+}
+
 .span-events {
   color: rgb(75, 75, 75);
-  font-size: 2.8rem;
+  font-size: 4rem;
   font-weight: 700;
   text-transform: uppercase;
   display: block;
@@ -88,6 +102,7 @@ img {
 }
 
 @keyframes a {
+
   0%,
   16.667%,
   100% {
@@ -101,6 +116,7 @@ img {
 }
 
 @keyframes a2 {
+
   0%,
   100% {
     opacity: 0;
@@ -118,6 +134,7 @@ img {
 }
 
 @keyframes a3 {
+
   0%,
   50%,
   100% {
@@ -128,4 +145,4 @@ img {
   83.333% {
     opacity: 1;
   }
-}
+}
diff --git a/src/components/cssInicio/contenedorBienvenida.css b/src/components/cssInicio/contenedorBienvenida.css
@@ -4,46 +4,89 @@
   padding: 0;
   scroll-behavior: smooth;
 }
+
 .contenedorBienvenida {
-  margin-top: 15vh;
   display: flex;
   flex-direction: row;
   font-family: "Cousine", monospace;
 }
 
+@media (max-width: 1030px) {
+  .contenedorBienvenida {
+    flex-direction: column;
+    margin-top: 4vh;
+  }
+}
+
 h1 {
   margin: 10px;
 }
 
 .textobienvenida {
   width: 45%;
   padding: 35px;
-  padding-top: 13vh;
   padding-left: 6vw;
-  color: black;
-  font-size: 1.9rem;
+  color: #0371A4;
+  font-size: 3rem;
 }
 
 .textobienvenida p {
   padding-left: 3px;
   text-align: justify;
   color: black;
   margin-bottom: 10px;
-
   font-size: 1.2rem;
-
   line-height: 1.5;
-
   font-family: "Cousine", monospace;
-
   font-weight: 400;
-
   letter-spacing: 0.5px;
-
   color: black;
+  font-size: 1.2rem;
+}
+
 
-
+@media (max-width: 1330px) {
+  .textobienvenida {
+    width: auto;
+    font-size: 2.4rem;
+  }
 
+  .textobienvenida p {
+    padding-left: 3px;
+    text-align: justify;
+    color: black;
+    margin-bottom: 10px;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    font-family: "Cousine", monospace;
+    font-weight: 300;
+    letter-spacing: 0.5px;
+    color: black;
+    font-size: 1rem;
+    padding-right: 50px;
+  }
+}
+
+@media (max-width: 1030px) {
+  .textobienvenida {
+    padding-top: 0px;
+  }
+}
+
+@media (max-width: 668px) {
+
+  .textobienvenida {
+    padding: 0px;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: 1.5rem;
+  }
+
+  .textobienvenida p {
+    font-size: .8rem;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
 }
 
 .imagenesbienvenida {
@@ -58,13 +101,19 @@ h1 {
   align-items: center;
 }
 
+@media (max-width: 1030px) {
+  .imagenesbienvenida {
+    display: none;
+  }
+}
+
 .logotiposBienvenida {
-
   background-color: transparent;
 }
 
 .divContactar {
   margin-left: 30px;
+  margin-top: 20px;
 }
 
 .Contactar1,
@@ -82,6 +131,16 @@ h1 {
   font-size: 1.2rem;
 }
 
+@media (max-width: 1030px) {
+
+  .Contactar1,
+  .Contactar2 {
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: .9rem;
+  }
+}
+
 .Contactar1 {
   background-color: var(--azulfuerte);
   color: white;
@@ -130,7 +189,8 @@ h1 {
 
   margin-left: 22px;
 }
+
 a {
   text-decoration: none;
   color: black;
-}
+}