Aquí vai o resumo técnico do proxecto:

Requisitos técnicos — Páxinas web IES do Castro (Programa IB)

Entorno

  • CMS: Drupal — o editor só permite editar o contido HTML interno da páxina, sen acceso a <head> nin CSS global
  • Solución: O bloque <style> e o <link> de fontes van ao comezo do propio HTML do contido

Tipografía

  • Fonte: Source Sans 3 (Google Fonts) — equivalente libre de Xunta Sans
  • Carga: <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet"/>

Paleta de cores

Variable Valor Uso
--azul #007bc4 Color principal, bordos, recuadros, badges
--azul-esc #005A96 Hover, textos sobre fondo claro azul
--azul-pal #d0e8f5 Fondo de citas e avisos
--fondo #f0f2f5 Fondo base — igual ao Drupal do IES do Castro
--fondo-2 #e4e7ec Fondo alternativo para separar seccións
--gris-brd #007bc4 Bordos (mesmo azul principal)
--texto #1A2530 Texto principal
--texto-2 #4A5568 Texto secundario, descricións
--laranxa #E05A1A Creatividade (C)
--verde #2D7D46 Actividade (A)
--ouro #C48A00 Servizo (S)

Regras de cor

  • Sen branco como cor de fondo en ningún elemento
  • Fondo base sempre #f0f2f5 para integrar co Drupal sen corte visual
  • Recuadros destacados en #007bc4 con texto #fff
  • Bordos sempre en #007bc4
  • Seccións alternas entre --fondo (#f0f2f5) e --fondo-2 (#e4e7ec)
  • Textos sobre fondo azul en #fff ou rgba(255,255,255,.85)
  • Enlaces dentro de Drupal necesitan color:#fff !important para evitar que o sistema sobreescriba a cor

Estrutura de seccións

Cada sección segue este patrón:

<section id="nome">
  <div class="container">
    <div class="sec-header">
      <p class="sec-kicker">Etiqueta pequena</p>
      <h2 class="sec-title">Título</h2>
      <p class="sec-lead">Introdución opcional</p>
    </div>
    <!-- contido -->
    <div class="back-top-wrap">
      <a href="#" class="back-top">↑ Volver ao inicio</a>
    </div>
  </div>
</section>

Navegación interna

  • Nav sticky con background: #f0f2f5 e border-bottom: 1px solid #c8cdd6
  • Sen título propio no HTML — o título da páxina ponno Drupal automaticamente
  • Bloque de introdución (intro-band) xusto despois do nav, en #f0f2f5, para continuar visualmente desde o título de Drupal

Galería de imaxes

  • Lightbox en CSS puro, sen JavaScript
  • Grid de 3 columnas en escritorio, 2 en móbil
  • Miniaturas con aspect-ratio: 4/3 e object-fit: cover
  • Cada imaxe precisa a mesma URL nos dous sitios: miniatura e lightbox
  • Para engadir imaxes: subir ao Drupal e copiar a URL do tipo /iesdocastro/sites/centros.edu.xunta.gal.iesdocastro/files/inline-images/nome.jpg

Compatibilidade

  • HTML válido sen <html>, <head> nin <body>— só contido interno
  • CSS todo dentro dun <style> ao inicio do ficheiro
  • Sen JavaScript (agás casos moi específicos e con código mínimo inline)
  • Responsive: breakpoint en 820px

Última modificación: jueves, 16 de abril de 2026, 16:53