Merge pull request #14 from IEEE-ESTl/responsive

Add Responsive
IEEE-ESTl · Apr 7, 2024 · baefc3b · baefc3b
2 parents 664b15c + dca5f9d
commit baefc3b
Show file tree

Hide file tree

Showing 18 changed files with 379 additions and 181 deletions.
diff --git a/config.json b/config.json
@@ -3,6 +3,7 @@
     "branchDescription": "Somos un grupo de estudiantes apasionados por el saber. Nuestro objetivo es fomentar el conocimiento técnico, la colaboración y la innovación.",
     "socialNetworks": {
         "instagram": "https://www.instagram.com/ieee.estl/",
-        "linkedin": "https://www.linkedin.com/company/ieee-estl"
+        "linkedin": "https://www.linkedin.com/company/ieee-estl",
+        "github": "https://github.com/IEEE-ESTl/IEEE-ESTl-Student-Web-Hub"
     }
 }
diff --git a/public/Inicio/undraw_programming_re_kg9v.svg b/public/Inicio/undraw_programming_re_kg9v.svg
diff --git a/public/Inicio/undraw_welcome_cats_thqn.svg b/public/Inicio/undraw_welcome_cats_thqn.svg
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
@@ -57,7 +57,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
     article {
         display: flex;
         width: 200%;
-        margin-top: 60px;
+        margin-top: 100px;
         animation: carouselMove 50s linear infinite;
     }
 
@@ -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
@@ -6,26 +6,25 @@ import "./cssInicio/variables.css";
 
 import branchLogo from "/public/Inicio/ieeelogo1.png";
 
-import imageMosaic from "/public/Inicio/1.png";
-import imageMosaic2 from "/public/Inicio/2.png";
-import imageMosaic3 from "/public/Inicio/3.jpg";
-
 import config from "../../config.json";
 
 import InstagramIcon from "./icons/Instagram.astro";
 import LinkedInIcon from "./icons/LinkedIn.astro";
 
-import Carousel from "./Carousel.astro";
+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 && (
@@ -43,5 +42,13 @@ import Carousel from "./Carousel.astro";
           <LinkedInIcon />
         </a>
       )}
+
+      {config.socialNetworks.github && (
+        <a class="socialNetwoks" href={
+          config.socialNetworks.github
+        } target="_blank" rel="noopener noreferrer">
+          <GitHubIcon />
+        </a>
+      )}
     </div>
   </div>
diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
@@ -4,17 +4,12 @@ import "./cssInicio/fondo.css";
 import "./cssInicio/navInicio.css";
 import "./cssInicio/variables.css";
 
-import branchLogo from "/public/Inicio/ieeelogo1.png";
-
 import imageMosaic from "/public/Inicio/1.png";
 import imageMosaic2 from "/public/Inicio/2.png";
 import imageMosaic3 from "/public/Inicio/3.jpg";
 
 import config from "../../config.json";
 
-import InstagramIcon from "./icons/Instagram.astro";
-import LinkedInIcon from "./icons/LinkedIn.astro";
-
 import Carousel from "./Carousel.astro";
 ---
 
@@ -23,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}{" "}
@@ -46,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;