💅🏿 Arreglos css

src/componentes/Indice.astro

@@ -59,6 +59,8 @@ const elementosAbreviados = ['intro', 'I.', 'II.', 'III.', 'IV.', 'conclusion'];
 </script>
 
 <style lang="scss">
+  @import '../scss/_constantes.scss';
+
   #indice {
     position: fixed;
     margin-left: 2em;
@@ -71,6 +73,7 @@ const elementosAbreviados = ['intro', 'I.', 'II.', 'III.', 'IV.', 'conclusion'];
     }
     li {
       margin-bottom: 1.2em;
+      max-width: 145px;
     }
   }
 
@@ -99,4 +102,10 @@ const elementosAbreviados = ['intro', 'I.', 'II.', 'III.', 'IV.', 'conclusion'];
       color: var(--amarilloSol);
     }
   }
+
+  @media screen and (min-width: $corte3) {
+  }
+
+  @media screen and (min-width: $corte4) {
+  }
 </style>

src/componentes/graficas/proyecto1/Puntos.astro

@@ -32,8 +32,17 @@ const { cantidad, fechaInicio, fechaFin, texto } = Astro.props;
       const formatoNumero = new Intl.NumberFormat('es-CO');
       const totalVictimas = +cantidad;
       const pasoConteo = (totalVictimas / 100) | 0;
-      escalar();
-      window.addEventListener('resize', escalar);
+      const corte1 = window.matchMedia('(min-width: 760px)');
+      const corte2 = window.matchMedia('(min-width: 1200px)');
+      let corte = 2;
+      let tamañoFila1 = '2em';
+      let tamañoFila2 = '10em';
+      let tamañoFila3 = '1.6em';
+      let xFila2 = 100;
+      let xFila3 = 200;
+
+      escalarLienzo();
+      window.addEventListener('resize', escalarLienzo);
 
       duranteInterseccion(contenedor, enVista, false, { threshold: 0 }, fueraDeVista);
 
@@ -47,7 +56,26 @@ const { cantidad, fechaInicio, fechaFin, texto } = Astro.props;
         conteo = 0;
       }
 
-      function escalar() {
+      function escalarLienzo() {
+        if (corte2.matches) {
+          corte = 2;
+          tamañoFila1 = '2em';
+          tamañoFila2 = '10em';
+          tamañoFila3 = '1.6em';
+        } else if (corte1.matches) {
+          corte = 1;
+          tamañoFila1 = '1.5em';
+          tamañoFila2 = '7em';
+          tamañoFila3 = '1em';
+        } else {
+          corte = 0;
+          tamañoFila1 = '1em';
+          tamañoFila2 = '3.5em';
+          tamañoFila3 = '0.8em';
+          xFila2 = 30;
+          xFila3 = 15;
+        }
+
         const menu = document.getElementById('menu');
         const altoMenu = menu.clientHeight;
         const { top, width } = contenedor.getBoundingClientRect();
@@ -61,24 +89,37 @@ const { cantidad, fechaInicio, fechaFin, texto } = Astro.props;
       }
 
       function pintar() {
-        if (conteo < totalVictimas) {
-          conteo += pasoConteo;
-        } else {
-          conteo = totalVictimas;
-        }
-
         ctx.fillRect(0, 0, lienzo.width, lienzo.height);
         ctx.save();
         ctx.fontKerning = 'none';
-        ctx.font = '600 2em Nohemi';
+        ctx.font = `600 ${tamañoFila1} Nohemi`;
         ctx.fillStyle = '#FFFFFF';
         ctx.fillText(textoFechas, 90, 200);
-        ctx.font = '900 10em Nohemi';
-        ctx.fillText(formatoNumero.format(conteo), 100, 400);
-        ctx.font = '500 1.6em Nohemi';
-        ctx.fillText(texto, 200, 450);
+        ctx.font = `900 ${tamañoFila2} Nohemi`;
+        ctx.fillText(formatoNumero.format(conteo), xFila2, 400);
+
+        ctx.font = `500 ${tamañoFila3} Nohemi`;
+
+        if (corte === 0) {
+          const partes = texto.split(' ');
+          const mitad = Math.ceil(partes.length / 2);
+          const primera = partes.filter((_, i) => i <= mitad);
+          const segunda = partes.filter((_, i) => i > mitad);
+          ctx.fillText(primera.join(' '), xFila3, 450);
+          ctx.fillText(segunda.join(' '), xFila3, 450 + 30);
+        } else {
+          ctx.fillText(texto, xFila3, 450);
+        }
+
         ctx.restore();
         relojLienzo = requestAnimationFrame(pintar);
+
+        if (conteo < totalVictimas) {
+          conteo += pasoConteo;
+        } else {
+          conteo = totalVictimas;
+          // window.cancelAnimationFrame(relojLienzo);
+        }
       }
     }
   }

src/pages/proyecto2.astro

@@ -209,18 +209,3 @@ const elementosIndice = [
   import desvanecer from '@/ambages/desvanecer';
   desvanecer(document.getElementById('introduccion'));
 </script>
-
-<style lang="scss">
-  // Borrar eventualmente esta clase
-  .comentario {
-    color: rgb(216, 213, 37);
-    font-weight: bold;
-
-    &::before {
-      content: '(';
-    }
-    &::after {
-      content: ')';
-    }
-  }
-</style>

src/pages/proyecto3.astro

@@ -21,6 +21,7 @@ import Personitas from '@/componentes/Personitas.astro';
 
   <main id="proyecto3">
     <Indice elementos={elementosIndice} />
+
     <section id="introduccion" class="anchoTitulo alto100">
       <div class="pegarTitulo">
         <h1 class="tituloProyecto">Trayectorias de maltrato</h1>
@@ -34,30 +35,29 @@ import Personitas from '@/componentes/Personitas.astro';
       <Desliza />
     </section>
 
-    <section id="seccionContexto" class="columnas seccion">
+    <section class="columnas seccion" id="seccionContexto">
       <div class="tituloSeccion">
         <h3 class="subtitulo">Crecer con miedo</h3>
       </div>
 
       <div class="columna">
-        <div class="narracion">
-          <p>
-            La infancia y la adolescencia son etapas claves para el desarrollo humano. En estos periodos se configuran
-            nuestros procesos de lenguaje, cognitivos, conductuales y emocionales. Por lo tanto, lo que vivimos en los
-            primeros años de vida y los entornos a los cuales estamos expuestos configuran la arquitectura del cerebro y
-            afectan en gran medida cómo se desarrolla.
-          </p>
-          <p>
-            El contexto social, las interacciones con un entorno sensible y disponible y la existencia de vínculos
-            seguros son fundamentales en las primeras etapas de vida. La relación que tenemos con nuestros cuidadores y
-            con los adultos importantes cuando somos niños tiene efectos importantes en nuestra salud fisica, mental y
-            emocional, incluso durante la adultez.
-          </p>
-          <p>
-            Experimentar violencia durante la infancia puede generar problemas de salud física y mental en niños,
-            jovenes y adultos, disminuir la capacidad de regular nuestras emociones, confiar y conectar con los demás.
-          </p>
-        </div>
+        <p class="narracion">
+          La infancia y la adolescencia son etapas claves para el desarrollo humano. En estos periodos se configuran
+          nuestros procesos de lenguaje, cognitivos, conductuales y emocionales. Por lo tanto, lo que vivimos en los
+          primeros años de vida y los entornos a los cuales estamos expuestos configuran la arquitectura del cerebro y
+          afectan en gran medida cómo se desarrolla.
+        </p>
+        <p class="narracion">
+          El contexto social, las interacciones con un entorno sensible y disponible y la existencia de vínculos seguros
+          son fundamentales en las primeras etapas de vida. La relación que tenemos con nuestros cuidadores y con los
+          adultos importantes cuando somos niños tiene efectos importantes en nuestra salud fisica, mental y emocional,
+          incluso durante la adultez.
+        </p>
+        <p class="narracion">
+          Experimentar violencia durante la infancia puede generar problemas de salud física y mental en niños, jovenes
+          y adultos, disminuir la capacidad de regular nuestras emociones, confiar y conectar con los demás.
+        </p>
+
         <p class="destacado">
           Según la teoría de los ciclos de violencia, ser víctima de violencia (física y emocional) por parte de los
           padres o cuidadores principales aumenta las probabilidades de ser víctima de violencia por parte de la pareja

src/scss/_diagramacion.scss

@@ -2,17 +2,6 @@
   min-height: 100vh;
 }
 
-.contenidoColumna {
-  max-width: 90vw;
-  margin: 0 auto;
-  font-size: 1.2em;
-}
-
-.tituloProyecto {
-  font-size: 2.3em;
-  margin-bottom: 0.3em;
-}
-
 .subtitulo {
   font-size: 2em;
   font-weight: 500;
@@ -24,36 +13,10 @@
   font-weight: 400;
 }
 
-.anchoTitulo {
-  max-width: 90vw;
-  margin: 0 auto;
-}
-
 .abrirGlosario {
   cursor: pointer;
   color: var(--moradoUva);
   &:hover {
     font-weight: 700;
   }
 }
-
-@media screen and (min-width: $corte3) {
-  .contenidoColumna {
-    max-width: 60vw;
-  }
-}
-
-@media screen and (min-width: $corte4) {
-  .contenidoColumna {
-    max-width: 41vw;
-  }
-
-  .tituloProyecto {
-    font-size: 5em;
-    max-width: 80vw;
-  }
-  .anchoTitulo {
-    max-width: 70vw;
-    margin: 0 auto;
-  }
-}