Rediseño de la estructura y apariencia básica de un sitio web (III)

Previamente en esta serie:

• Descargué y vinculé a la página el Andy Bell reset CSS, un archivo CSS para sobreescribir los estilos predefinidos de los navegadores.
• Definí y apliqué propiedades personalizadas CSS para los colores y las tipografías a utilizar en la página.
• Agregué algunos contenidos a la cabecera (una imagen SVG que hacía las veces de logo del sitio) y al pie de la página (un icono de HTML5 que, además, vinculé con el validador de código html de la W3C).

Decidí empezar esta tercera parte con la creación de los estilos para algunos elementos de los artículos del sitio. Pero, antes de trabajar sobre eso le definí un padding (para asignarle una especie de “margen interior”) al elemento <article> de 1em a los costados y de 2em arriba (como se ve en la regla destacada en rojo en la próxima muestra del código del archivo estilos.css).

Luego sí, creé 8 nuevas propiedades personalizadas CSS en el :root (resaltadas en azul a continuación). Siete de ellas estaban relacionadas con dimensiones e interlineados de los textos para tener la tarea simplificada cuando llegara el momento de redefinir los tamaños para pantallas más grandes. La octava propiedad que definí era más genérica y establecía una unidad de “distancia”.

También definí otras propiedades personalizadas para agregar variaciones tonales a los colores principal y secundario. Como se ve en el próximo código, resaltado con magenta, definí una versión “clara” y una “oscura” para esos dos colores que ya tenía definidos. Inclusive, cambié el color que había definido para para el texto (en la variable --color-texto-base) con los mismos valores que definí para la versión oscura del color principal del sitio.

Luego, como quería que el tamaño de letra (que llamé --body-size) y su interlineado (que llamé --body-line-height) fueran también los predefinidos de todos los textos de la página, los asigné en el selector *, que ya tenía asignado (desde la parte anterior de esta serie) otra propiedad personalizada para definir la familia tipográfica básica del sitio.

Entonces, como se ve destacado en verde, agregué las propiedades personalizadas recién definidas (y algunas más) no sólo al selector *, sino también a h1, h2, h3, figcaption y a las etiquetas p, dentro de article.

:root {
 --color-principal: #242c51;
 --color-principal-claro: #6f7aa3;
 --color-principal-oscuro: #0d1229;
 --color-secundario: #f3603b;
 --color-secundario-claro: #ffab96;
 --color-secundario-oscuro: #eb3f0c;
 --color-texto-base: #0d1229;
 --color-de-fondo: #fff0ed;
 --tipografia-con-serifa: 'Volkhov';
 --tipografia-sin-serifa: 'Sarabun';
 --body-size: 1.125rem;
 --body-line-height: 1.618;
 --heading-line-height: 1.35;
 --figcaption-size: 0.9rem;
 --h1-size: 2.95rem;
 --h2-size: 1.82rem;
 --h3-size: 1.48rem;
 --distancia: 1em;
}

* {
 font-family: var(--tipografia-sin-serifa), sans-serif;
 font-size: var(--body-size);
 line-height: var(--body-line-height);
}

body { ... }

header { ... }

header img { ... }

article {
 padding: 2em 1em 0;
}

h1, h2, h3 {
 color: var(--color-principal);
 font-family: var(--tipografia-con-serifa), sans-serif;
 font-weight: bold;
 margin-bottom: calc(var(--distancia) * 0.5);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--heading-line-height);
}

h2 {
 font-size: var(--h2-size);
}

h3 {
 font-size: var(--h3-size);
}

figcaption {
  font-family: var(--tipografia-con-serifa), serif;
  font-size: var(--figcaption-size);
  font-style: italic;
  margin-top: calc(var(--distancia) * 0.5);
  margin-bottom: var(--distancia);
  margin-left: var(--distancia);
}

article p {
 margin-bottom: var(--distancia);
}

footer a, footer a:visited { ... }

footer { ... }

Como se ve en el código precedente, el valor que guardé en la propiedad personalizada --distancia no me resultaba para el valor de margin-top que quería para el selector figcaption y de margin-bottom que quería para los elementos h1, h2 y h3, entonces, para no crear nuevas propiedades personalizadas, utilicé la función calc y, multiplicando por 0,5 obtuve la mitad del valor “distancia”.

Para probar cómo quedaban los los párrafos y los títulos h2 y h3, agregué algunos en el código HTML y, en un navegador a 450 px de ancho, la página se veía así:

Definir algunos otros elementos del artículo

Para darle formato a algunas partes del artículo tomé como referencia esta imagen que especifica las partes de una noticia (tomada de: Enciclopedia Humanidades):

Entonces en el código HTML:

• para agregar una “bajada” al título del artículo (etiqueta <h1>) hice uso de la etiqueta <hgroup> que agrupa el título con una subsiguiente etiqueta <p>, como se ve en el próximo código, destacado en rojo.
• para agregar el nombre del autor del artículo y su fecha de publicación, coloqué una segunda etiqueta <p> dentro del <hgroup> con esa información, como se ve a continuación, destacado en verde.
• para el caso en que el artículo llevase un introducción (o “entradilla”, como dice en la imagen de arriba) le asigné al primer párrafo una clase de nombre intro (como se ve remarcado en azul) y, al siguiente párrafo, que sería el primero del artículo propiamente dicho, le asigné una clase de nombre primer-parrafo (como se ve indicado en magenta):

<!DOCTYPE html>
<html lang="es">
    <head> ... </head>
    <body>
        <header> ... </header>
        <main>
           <article>
            <hgroup>
                <h1>Título del artículo</h1>
                <p>“Bajada” del título del artículo</p>
                <p><a rel="author" href="#">Nombre del autor del texto</a> | Publicado el <time datetime="2022-11-03">3 de noviembre de 2022</time></p>
            </hgroup>
            <figure> ... </figure>
            <p class="intro"> ... </p>
            <p class="primer-parrafo"> ... </p>
           <h2> ... </h2>
            <p> ... </p>
           <h3> ... </h3>
            <p> ... </p>
           </article>
        </main>
      <footer> ... </footer>
      <script type= ... ></script>
      <script nomodule ... ></script>     
    </body>
</html>

En la hoja de estilos, a esa primera etiquta <p> que sigue a la etiqueta <h1>, dentro de la etiqueta <hgroup> y, a su vez, dentro de la sección <article>, le asigné (como se ve destacado en rojo en el próximo código) un estilo similar al que había definido para las etiquetas <h2>, pero sin negritas.

Además, para darle formato al nombre del autor y la fecha, le agregué el código resaltado en verde y definí la clase intro para la introducción del artículo (con el código remarcado en azul) y la clase primer-parrafo (con el código destacado con magenta):

:root { ... }

* { ... }

body { ... }

header { ... }

header img { ... }

article { ... }

h1, h2, h3 { ... }

h1 { ... }

h2 { ... }

h3 { ... }

article hgroup h1+p {
 font-size: var(--h2-size);
 font-family: var(--tipografia-con-serifa), serif;
 font-weight: normal;
 margin-bottom: var(--distancia);
 line-height: var(--heading-line-height);
}

article hgroup p:nth-child(3),
article hgroup p:nth-child(3) a,
article hgroup p:nth-child(3) time {
 font-size: calc(var(--body-size) * 0.8);
 line-height: calc(var(--body-line-height) * 0.6);  
 font-variant: small-caps;
 text-align: right;
}

article hgroup p:nth-child(3) a {
  font-weight: bold;
}

article hgroup p:nth-child(3) {
 border-top: 1px var(--color-principal) solid;  
}

article .intro {
  font-family: var(--tipografia-con-serifa), serif;
  font-style: italic;
  padding: var(--distancia);
  background-color: var(--color-secundario-claro);
}

article .intro::first-line {
  font-variant: small-caps;
  font-weight: bold;
}

figcaption { ... }

article p.primer-parrafo::first-letter {
  font-size: calc(var(--body-size)*3);
  line-height: calc(var(--body-line-height)/3);
  color: var(--color-principal);
}

article p { ... }

footer a, footer a:visited { ... }

footer { ... }

Como se ve, al nombre del autor del artículo lo definí en negrita () y a la clase intro la definí con un recuadro con el color secundario claro de fondo y la primera línea del párrafo en versalitas y negritas.

A la primera letra del párrafo con el estilo primer-parrafo la definí como capitular (primero le aumenté el tamaño del cuerpo 3 veces y luego le reduje el alto de la línea a un tercio) y le di el color principal.

Hecho esto, así se veía la página:

Más contenido en la cabecera

Para terminar esta parte, agregué en el header del archivo HTML lo que sería el nombre del sitio, su lema o eslogan y el icono del menú cerrado (el menú hamburguesa) como se ve a continuación, resaltados en rojo:

[ ...]

<header>
  <a href="#" class="logo-principal">
    <img src="images/undraw_designer_re_5v95.svg" alt="">
  </a>
  <hgroup>
    <h1>Nombre del sitio</h1>
    <p>Lema del sitio</p>
  </hgroup>
  <nav>
    <ion-icon size="large" name="menu"></ion-icon>
  </nav>
</header>

[ ... ]


Y en la hoja de estilos: 

Como se ve en el próximo código, resaltado en rojo:

• le eliminé el padding inferior al header.
• Definí al header como una grilla,
• de 2 columnas, la primera de ellas de 6rem de ancho (el mismo ancho que luego le definí al logo del sitio)
• y con una separación entre celdas de 1em.
  

Además, eliminé la regla que definía el ancho de 35% del selector img que contenía al logo y agregué otra que definía el ancho de la clase .logo-principal como de 6rem. (como se ve en el próximo código, destacado en azul).

Luego, con el código que se ve coloreado de verde, le di formato al título y al lema del sitio.

Al hgroup que agrupa al título y lema del sitio lo centré verticalmente con respecto al logo (con el código destacado con magenta) y para el selector nav (que es el que contenía el ícono del menú) establecí:

• el color principal para el ícono
• el color secundario claro para el fondo
• que la celda que definía en la grilla ocupara 2 columnas
• que estuviera alineado al final de esa celda.

Todo eso es lo que se ve a continuación en el código coloreado de anaranjado.

:root { ... }

* { ... }

body { ... }

header {
 background-color: var(--color-principal);
 padding: 20px 20px 0px;
 display: grid;
 grid-template-columns: 6rem 1fr;
 grid-gap: 1em;
}

header img {
  width: 35%;
}

.logo-principal {
  width: 6rem;
}

header hgroup h1 {
 color: var(--color-secundario-claro);
 font-family: var(--tipografia-sin-serifa);
 font-size: var(--h2-size);
}

header hgroup h1+p {
 font-size: var(--h3-size);
 font-family: var(--tipografia-con-serifa);
 font-weight: normal;
 font-style: italic;
 color: var(--color-principal-claro);
 margin-top: calc(var(--distancia) * -0.3);
 line-height: var(--heading-line-height);
}

header hgroup {
 align-self: center;    
}

header nav {
 grid-column: span 2;
 justify-self: end;
 color: var(--color-principal);
 line-height: 1;
  background-color: var(--color-secundario-claro);
}

article { ... }

h1, h2, h3 { ... }

h1 { ... }

h2 { ... }

h3 { ... }

figcaption { ... }

article p { ... }

footer a, footer a:visited { ... }

footer { ... }

Así que esta tercera parte terminó con la página viéndose así:

---

En la próxima parte de esta serie voy a contar los pasos que seguí para:

• Crear los estilos de otros elementos que se puedan necesitar para un artículo como, por ejemplo, listas ordenadas y desordenadas, tablas y citas.
• Definir la apariencia y comportamiento de los vínculos.
• Comparar el estado del código html que había escrito hasta el momento con el que sugiere html5boilerplate, para ver qué estaría faltando.
  
• Comentar las reglas de estilo y separar las hojas de estilo por áreas, para convertirlos en archivos más pequeños, manejables y fáciles de mantener y corregir.