Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/g4lvan/demo_page_colegio.github.io/llms.txt

Use this file to discover all available pages before exploring further.

El sitio es completamente responsive, construido desde cero con Flexbox y CSS Grid, sin depender de ningún framework CSS externo como Bootstrap o Tailwind. El layout se adapta a tres rangos de pantalla —tablet, móvil y móvil pequeño— utilizando media queries basadas en max-width. Todos los ajustes responsive se declaran al final de cada hoja de estilo, separados del resto del CSS por comentarios de sección. El archivo global styles.css cubre los breakpoints de 1024px y 768px; las hojas de subpágina añaden 480px cuando sus contenidos lo requieren.

​
Técnicas de layout utilizadas

Flexbox

Usado para el layout del header (logo + navegación + buscador), filas de botones, agrupaciones de metadatos en cards (.info, .botones_accion, .izquierda) y columnas del footer. Permite alinear y distribuir elementos en una sola dirección con control preciso del espaciado.

CSS Grid

Usado para grids de cards de noticias (.ult_noticias), grids de acceso rápido (.accesos), el layout principal de dos columnas en páginas internas (.contenido_noticias, .content, .principal_cont) y la estructura del footer (.principal_footer). Permite definir columnas proporcionales y reorganizarlas en media queries con una sola propiedad.

CSS Custom Properties

Los design tokens de color y tipografía definidos en :root garantizan que los colores, tipografías y radios de borde sean consistentes en todos los breakpoints sin duplicar valores.

Media Queries

Breakpoints declarados con max-width al final de cada hoja de estilo. Los estilos base apuntan a escritorio (desktop-first en la práctica), y las media queries sobrescriben layout, tipografía y espaciado para pantallas más pequeñas. styles.css usa 1024px y 768px; las hojas de subpágina añaden 480px cuando su contenido lo requiere.

​
Breakpoints

Los breakpoints son consistentes en todos los archivos CSS del proyecto. Cada hoja de estilo por página replica el mismo esquema de breakpoints para header y footer (componentes compartidos), y agrega los ajustes específicos de su contenido.
BreakpointAncho máximoArchivos que lo declaran
Tablet1024pxstyles.css, nosotros.css, noticias.css, recursos.css
Mobile768pxstyles.css, nosotros.css, noticias.css, recursos.css, contacto.css
Mobile pequeño480pxnosotros.css, noticias.css, recursos.css
styles.css solo declara media queries para 1024px y 768px — no incluye un breakpoint de 480px. Los ajustes tipográficos para pantallas muy angostas (reducción de font-size en títulos) están definidos únicamente en las hojas de estilo de subpágina que los necesitan: nosotros.css, noticias.css y recursos.css. contacto.css tampoco declara 480px; su único breakpoint es 768px, donde el layout pasa a columna única.

​
Flexbox en el header

El header es el componente compartido más representativo del uso de Flexbox. Usa justify-content: space-between para empujar el logo/nav al lado izquierdo y el buscador al extremo derecho. En tablet el nav se convierte en una segunda fila con flex-wrap: wrap, y en mobile el logo reduce su tamaño y los links de navegación se reorganizan. 
/* — Desktop: distribución horizontal completa */
header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  gap: 2rem;
  border-bottom: 1px solid var(--text-secondary);
}

header .izquierda {
  display: flex;
  align-items: center;
  gap: 3rem;
}

header nav {
  display: flex;
  align-items: center;
  gap: 3rem;
  justify-content: center;
}

header .links_navegacion {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

​
Menú hamburguesa mobile

El sitio no implementa un menú hamburguesa con JavaScript en esta versión. La navegación mobile se adapta mediante media queries: en max-width: 1024px el nav ocupa el ancho completo de una segunda fila (width: 100%; justify-content: center), y en max-width: 768px los links se reducen en tamaño y gap, y admiten salto de línea con flex-wrap: wrap. Esta estrategia mantiene todos los enlaces visibles sin ocultar el nav.
/* — Tablet (≤ 1024px): nav en segunda fila centrado */
@media (max-width: 1024px) {
  header {
    flex-wrap: wrap;
    gap: 1rem;
  }

  header nav {
    width: 100%;
    justify-content: center;
  }

  header .links_navegacion {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  header h1 {
    font-size: 1.4rem;
  }
}

/* — Mobile (≤ 768px): logo y texto reducidos */
@media (max-width: 768px) {
  header .izquierda {
    gap: 1rem;
  }

  header h1 {
    font-size: 1.2rem;
    flex-wrap: wrap;
  }

  .logo {
    height: 40px;
    margin-left: 0;
  }

  .links_navegacion {
    font-size: 0.9rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  input[type="search"] {
    width: 120px;
    font-size: 0.9rem;
  }
}

​
Ejemplo de grid responsivo

​
Grid de accesos rápidos (página de inicio)

El grid de cuatro columnas de accesos rápidos en styles.css pasa por tres estados según el breakpoint: 
/* — Desktop: 4 columnas iguales */
.accesos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px;
}

/* — Tablet (≤ 1024px): 2 columnas */
@media (max-width: 1024px) {
  .accesos {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 40px;
  }
}

/* — Mobile (≤ 768px): 1 columna */
@media (max-width: 768px) {
  .accesos {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .card_rapido {
    width: 100%;
    height: auto;
    padding: 2rem;
  }
}

​
Grid de noticias en la página de inicio

/* — Desktop: 3 columnas */
.ult_noticias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
}

/* — Tablet (≤ 1024px): 2 columnas */
@media (max-width: 1024px) {
  .ult_noticias {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: auto;
    padding: 0 2rem;
  }
}

/* — Mobile (≤ 768px): 1 columna */
@media (max-width: 768px) {
  .ult_noticias {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

​
Grid principal de páginas internas (noticias, recursos)

Las páginas internas usan un grid 2fr 1fr que separa el contenido principal de la columna lateral. En tablet y mobile ambas columnas pasan a una sola: 
/* — noticias.css: Desktop — contenido principal + columna lateral */
.contenido_noticias {
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding: 2rem;
}

/* — recursos.css: Desktop — contenido + sidebar */
.content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 70px;
}

/* — Tablet (≤ 1024px): columna única */
@media (max-width: 1024px) {
  .contenido_noticias {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

​
Grid del footer

/* — Desktop: 3 columnas proporcionales */
footer .principal_footer {
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  gap: 100px;
}

/* — Tablet (≤ 1024px): 2 columnas iguales */
@media (max-width: 1024px) {
  footer .principal_footer {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* — Mobile (≤ 768px): 1 columna */
@media (max-width: 768px) {
  footer .principal_footer {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  footer {
    padding: 40px 20px;
  }
}

​
Pruebas en dispositivos

El sitio fue diseñado y validado para los siguientes rangos de pantalla:
  • 📱 Móviles pequeños — hasta 480px (iPhone SE, Galaxy A series) — ajustes tipográficos en hojas de subpágina
  • 📱 Móviles — hasta 768px (iPhone 14, Pixel, Galaxy S series) — columna única en todos los grids
  • 💻 Tablets — hasta 1024px (iPad, tablets Android) — reducción de columnas en grids de contenido
  • 🖥 Laptops y escritorio — por encima de 1024px — layout completo de escritorio
Para probar el comportamiento responsive sin un dispositivo físico, usa la herramienta DevTools de Chrome o Firefox: abre las herramientas de desarrollo (F12), activa el modo de dispositivo con Ctrl + Shift + M y selecciona un preset de dispositivo o arrastra el ancho manualmente para verificar los cambios de layout en cada breakpoint.

Build docs developers (and LLMs) love

Get started for freeTalk to us