Merge pull request #15 from IEEE-ESTl/responsive

Improve UI errors and Add use of native modes such as underline
IEEE-ESTl · Apr 7, 2024 · 82ca44c · 82ca44c
2 parents 204d13c + c5a6fd0
commit 82ca44c
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.5.5",
     "@astrojs/react": "^3.0.10",
+    "@fontsource/open-sauce-sans": "^5.0.7",
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.19",
     "astro": "^4.4.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
@@ -52,6 +52,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
     section {
         width: 100%;
         overflow: hidden;
+        margin-bottom: 100px;
     }
 
     article {
@@ -82,7 +83,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
     }
 
     img {
-        width: 300px;
+        width: 280px;
     }
 
     @media (max-width: 1030px) {

diff --git a/src/components/Events.tsx b/src/components/Events.tsx
@@ -40,7 +40,7 @@ const buildStyle = ({ animation }: { animation?: string }) => {
 export default function App() {
   return (
     <>
-      <div className="container" id="Eventos">
+      <div className="container">
         <h2 className="events">
           <span className="span-events" data-content="Conferecias">
             Conferecias

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -15,40 +15,54 @@ import GitHubIcon from "./icons/GitHub.astro";
 ---
 
 <div class="menuInicio">
-    <img src={branchLogo.src} class="logoIEEE" alt="Logo de IEEE" />
-
-    <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 && (
-        <a class="socialNetwoks" href={
-          config.socialNetworks.instagram
-        } target="_blank" rel="noopener noreferrer">
+  <img src={branchLogo.src} class="logoIEEE" alt="Logo de IEEE" />
+
+  <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="#Próximamente">Próximamente</a></button>
+    <button class="botonNav"><a href="#Únete">Únete</a></button>
+    <button class="botonNav"><a href="#FAQ">FAQ</a></button>
+  </div>
+
+  <div class="Redes-Inicio">
+    {
+      config.socialNetworks.instagram && (
+        <a
+          class="socialNetwoks"
+          href={config.socialNetworks.instagram}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <InstagramIcon />
         </a>
-      )}
+      )
+    }
 
-      {config.socialNetworks.linkedin && (
-        <a class="socialNetwoks" href={
-          config.socialNetworks.linkedin
-        } target="_blank" rel="noopener noreferrer">
+    {
+      config.socialNetworks.linkedin && (
+        <a
+          class="socialNetwoks"
+          href={config.socialNetworks.linkedin}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <LinkedInIcon />
         </a>
-      )}
+      )
+    }
 
-      {config.socialNetworks.github && (
-        <a class="socialNetwoks" href={
-          config.socialNetworks.github
-        } target="_blank" rel="noopener noreferrer">
+    {
+      config.socialNetworks.github && (
+        <a
+          class="socialNetwoks"
+          href={config.socialNetworks.github}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <GitHubIcon />
         </a>
-      )}
-    </div>
-  </div>
+      )
+    }
+  </div>
+</div>
diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
@@ -11,21 +11,32 @@ import imageMosaic3 from "/public/Inicio/3.jpg";
 import config from "../../config.json";
 
 import Carousel from "./Carousel.astro";
+
+import "@fontsource/open-sauce-sans/400.css";
+import "@fontsource/open-sauce-sans/600.css";
 ---
 
 <section id="Inicio">
   <div class="containerInicio">
     <section class="filtroInicio">
       <div class="contenedorBienvenida">
         <div class="textobienvenida">
-          <h1>{config.branchName}</h1>
-          <p>
+          <h1
+            style="font-family: 'Open Sauce Sans', sans-serif; font-weight: 600;"
+          >
+            {config.branchName}
+          </h1>
+          <p
+            style="font-family: 'Open Sauce Sans', sans-serif; font-weight: 500; font-size: .5em;"
+          >
             {" "}
             {config.branchDescription}{" "}
           </p>
           <div class="divContactar">
             <button class="Contactar1">Contactar</button>
-            <button class="Contactar2">Eventos</button>
+            <button class="Contactar2" onclick="location.href='#Eventos'"
+              >Eventos</button
+            >
           </div>
         </div>
         <div class="imagenesbienvenida">
@@ -38,7 +49,5 @@ import Carousel from "./Carousel.astro";
       </div>
       <Carousel />
     </section>
-
-    <div class="esferaAzul ubicacionEsfera"></div>
   </div>
-</section>
+</section>
diff --git a/src/components/Titulos.astro b/src/components/Titulos.astro
@@ -1,58 +1,46 @@
 ---
 interface Props {
-	titulo: string;
+    titulo: string;
 }
-const { titulo } = Astro.props
+const { titulo } = Astro.props;
 ---
+
 <section>
-    <h1 class="titulo">{titulo}</h1>
-    <div class="underline"></div>
-    <br/>
+    <h1 class={"titulo"} id={titulo}>
+        {titulo}
+    </h1>
+    <br />
 </section>
 
 <style>
     .titulo {
-        color: #035B98;
-        font-size: 70px;	
-        font-family: "Cousine", monospace;
+        color: #035b98;
+        font-size: 70px;
         line-height: 1;
         text-align: left;
-        padding-top: 4rem;
-        padding-bottom: 1rem;	
+        padding-top: 1.2rem;
+        padding-bottom: 1rem;
         padding-right: 1rem;
         padding-left: 1rem;
-
+        text-decoration: underline;
     }
 
-    @media screen and (max-width:1030px)
-    {
-        .titulo
-        {
+
+    @media screen and (max-width: 1030px) {
+        .titulo {
             font-size: 50px;
         }
     }
 
-
-
-    .underline
-    {
-        margin-left: 2rem;
-        width: 150px;
-        float: left;
-        border: 10px solid #035B98;
-    }
-
-    @media screen and (max-width:800px)
-    {
-    .titulo
-        {
+    @media screen and (max-width: 800px) {
+        .titulo {
             text-align: left;
         }
-    .underline
-        {
-            float: left;
-            position: relative;
-            left: 5%;
+    }
+
+    @media screen and (max-width: 668px) {
+        .titulo {
+            font-size: 35px;
         }
     }
-</style>
+</style>
diff --git a/src/components/cssEvents/Events.css b/src/components/cssEvents/Events.css
@@ -1,7 +1,3 @@
-* {
-  font-family: "Cousine", monospace;
-}
-
 .eventName {
   text-align: center;
   font-size: 2rem;

diff --git a/src/components/cssInicio/contenedorBienvenida.css b/src/components/cssInicio/contenedorBienvenida.css
@@ -8,7 +8,6 @@
 .contenedorBienvenida {
   display: flex;
   flex-direction: row;
-  font-family: "Cousine", monospace;
 }
 
 @media (max-width: 1030px) {
@@ -37,7 +36,6 @@ h1 {
   margin-bottom: 10px;
   font-size: 1.2rem;
   line-height: 1.5;
-  font-family: "Cousine", monospace;
   font-weight: 400;
   letter-spacing: 0.5px;
   color: black;
@@ -58,7 +56,6 @@ h1 {
     margin-bottom: 10px;
     font-size: 1.2rem;
     line-height: 1.5;
-    font-family: "Cousine", monospace;
     font-weight: 300;
     letter-spacing: 0.5px;
     color: black;
@@ -79,7 +76,7 @@ h1 {
     padding: 0px;
     padding-left: 4px;
     padding-right: 4px;
-    font-size: 1.5rem;
+    font-size: 1.8rem;
   }
 
   .textobienvenida p {

diff --git a/src/components/cssInicio/navInicio.css b/src/components/cssInicio/navInicio.css
@@ -163,7 +163,3 @@
     transition: transform 0.2s ease;
 }
 
-.botonNav,
-.irInicio {
-    font-family: "Courier Prime", monospace;
-}
diff --git a/src/components/cssInicio/variables.css b/src/components/cssInicio/variables.css
@@ -1,6 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
 :root {
   --fondo: #ffffff;
   --azulfuerte: #0371A4;

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,9 @@
 ---
 import logo from "/public/SB-Logo.png";
 import config from "../../config.json";
+
+import "@fontsource/open-sauce-sans/400.css";
+import "@fontsource/open-sauce-sans/800.css";
 ---
 
 <!doctype html>
@@ -16,3 +19,9 @@ import config from "../../config.json";
     <slot />
   </body>
 </html>
+
+<style>
+  body {
+    font-family: "Open Sauce Sans", sans-serif;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,7 +16,7 @@ import Titulos from "../components/Titulos.astro";
 <Layout title="Welcome to StudentWebHub">
   <Header />
   <Inicio />
-  <Titulos titulo="Evéntos" />
+  <Titulos titulo="Eventos" />
 
   <h2>
     Nos esforzamos por ofrecer una amplia gama de actividades diseñadas para
@@ -25,7 +25,7 @@ import Titulos from "../components/Titulos.astro";
   </h2>
 
   <Events client:load />
-  <Titulos titulo="Próximo" />
+  <Titulos titulo="Próximamente" />
 
   <h2>
     ¡Prepárate para sumergirte en una serie emocionante de eventos que están a
@@ -35,7 +35,7 @@ import Titulos from "../components/Titulos.astro";
 
   <Soon client:load />
 
-  <div class="unete">
+  <div class="Únete">
     <Titulos titulo="Únete" />
 
     <h2>
@@ -64,9 +64,19 @@ import Titulos from "../components/Titulos.astro";
       font-size: 1.3rem;
       font-weight: 400;
       text-align: center;
-      padding: 2rem;
+      padding: 0px;
       text-align: center;
       line-height: 1.5;
+      padding-left: 20rem;
+      padding-right: 20rem;
+      font-weight: 500;
+    }
+
+    @media (max-width: 1669px) {
+      h2 {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
     }
 
     @media (max-width: 768px) {