Bienvenido a otra entrada de DailyCode. Mi día hoy no fue según lo planeado, pero igual programé algo.

El día de hoy sólo corregí estilos del blog. Cuando agregué la entrada de DailyCode#1, el template del post tenía ciertos bugs debido a los estilos del tag <pre></pre> , del cual no había aplicado ningún estilo.

¿Cuál es el tag <pre>?

El tag <pre> significa “preformatted text”, o en español ”texto preformateado”. El texto escrito dentro de este tag la fuente tiene un ancho fijo y conservará tanto espacios como saltos de lineas.

Como el tag conserva el ancho fijo del texto (si no se le provee ninguno), al escribir texto muy largos, el ancho de este sobrescribirá el que tiene el elemento padre.

Debido a que yo lo utilicé para escribir un comando de la terminal muy largo todo se salió de control. Para arreglarlo utilicé los estilos.

.post__body > pre {
  max-width: 59vw;
}

Bien. Con eso, ya tenía un gran problema arreglado. El siguiente a solucionar era arreglar los estilos del tag <code> que utilicé para representar dependencias que instalé.

Tag <code>

Al igual que <pre>, <code> es utilizados para textos preformateados. Sin embargo, este tag es utilizado para indicar que el texto escrito dentro es un pequeño fragmento de código de programación.

Mi problema era que los todos los estilos del post están en una plantilla y tengo que escribir los estilos de la forma .post__body > cualquier hijo estilo que quiera escribir que es la regla de CSS donde se le da estilos a los elementos que sean hijos directos de .post__body.

Peeero… el <code> al cual quería dar estilos estaba dentro de una lista, que también tenía listas anidadas. Era algo así:

<ul>
  <li>
    <code>dependencia</code>
    <ul>
      <li>
        <code>dependencia</code>
        <a>algún link</a>
      </li>
      ...
    </ul>
  </li>
  ...
</ul>

Por lo que decidí utilizar estilos globales para todo tag <code>, esté o no dentro de .post__body. Hice esto porque en ningún otro lado del blog aparecerá este elemento solo, excepto en los post. Por lo que los estilos quedaron:

code {
  background-color: hsl(340, 70%, 90%);
  border-radius: .2rem;
  padding: .1rem .3rem .2rem;
  font-family: 'Ubuntu Mono', monospace;
}

Pero como esto es CSS, arreglar unos estilos pueden dañar otros, si no tienes en cuenta la cascada de estilos.

Otro problemas con estilos

El nuevo problema a resolver era que dentro del tag <pre> estaba un <code>. Como estaba cambiando el color de fondo en <code> de forma global, también estaba afectando a los code dentro de <pre>. Por ello entré en crisis hasta que pensé en agregar el estilo ningún fondo a los <code> que sean hijos de <pre>:

.post__body > pre > code {
  background: none;
}

De esta forma pase de tener esto:

A algo como esto:

Otros cambios realizados

Ya que estaba agregando estilos, decidí agregar otros que no estaban.

El primero fue para las imágenes, las cuales tampoco tenían un estilo establecido sobre el ancho a tomar (Creo que gatsby las hacer responsive por defecto, de momento no lo sé).

Lo que quería era centrar las imágenes y GIF utilizados y aumentar el tamaño que ocupan. No encontré una forma de centrar las imágenes, de momento, porque no se me venía alguna propiedad a usar en un p que contiene una img sin cambiar todos los demás p que no tienen imagen.

Cambiar el tamaño que ocupan lo hice un con la propiedad min-width:

.post__body > p img {
  min-width: 40%;
}

El último fue cambiar los estilos de un link que esta dentro de una lista anidada como la que mostré arriba.

Debido a que ya yo había agregado estilos a los links normales, sólo tenía que agregar un selector de CSS para el link que quería. De modo que agregué el selector:

.post__body > ul > li > ul > li > a {...}

Sin embargo, este selector no soluciona todo mi problema, porque sólo agrega los estilos a los links que estan dentro de un li que tiene una lista anidada. No sé si el selector .post__body a me funcione, pero definitivamente lo probaré en otro momento.

Nos leemos

Eso fueron todos los cambios que realicé hoy. Si sabes la respuesta al problema que tengo con los links, envíame un tweet (o un DM, si prefieres) y me ayudarás un montón. Si no igual, escríbeme y cuéntame sobre qué problema de programación tienes y, si puedo ayudarte lo haré con todo gusto. Nos leemos. 👋🏼

Artículos de referencia

• CSS-TRICKS: Considerations for styling the pre tag
• MDN: <code>: The Inline Code element