Estilos personalizados

Vamos a añadir algún toque personal a nuestro libro. Comenzamos por crear una subcarpeta theme:

miProyecto/
     ├── acciones/
     ├── book/
     ├── temporal/
     │     
     ├── theme/
     │
     ├── book.toml
     ├── .gitignore
     └── src
         ├── capitulo1.md
         ├── capitulo2.md
         ├── capitulo3.md
         └── SUMMARY.md 

En ese directorio ponemos un archivo estilos.css con un contenido que puede ser algo así como:

p { text-align: justify;}

h1 { font-size: 3em;}

h2 { border-bottom: 1px solid teal;}

h3 { font-style: italic; }

.menu-title { color: chocolate; }
    
.conmarco {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                       0 6px 20px 0 rgba(0, 0, 0, 0.19);
           padding: 10px;
          }

Veamos lo que significa esto:

• me gusta que los párrafos regulares <p> muestren el texto justificado, ajustado a los margenes izquierdo y derecho a la vez.

• he aumentado el tamaño de letra de los títulos de nivel 1 a tres veces el texto regular

• he añadido una línea de borde inferior a los títulos de nivel 2 (secciones), con un pixel de grosor (un punto en pantalla) y color azulado (teal)

• he puesto en cursiva los títulos de nivel 3

• he puesto el título superior de cada página en un color rojizo suave (chocolate)

He creado una clase “conmarco” para aplicar a bloques de la página. Se usa así:

<div class=conmarco>

<p>Texto a mostrar resaltado</p>

<p>Debe escribirse directamente en HTML</p>

</div>

Lo que muestra:

No olvidar que todo lo delimitado entre etiquetas <div> debe escribirse en formato HTML. La sintaxis markdown no tiene efecto en estos bloques.

Para que nuestros archivos CSS tengan efecto, hemos de ponerlos en el archivo de configuración book.toml:

[output.html]
additional-css = ["theme/estilos1.css" , "theme/estilos2.css"]

Nótese que es una lista de ficheros. Si solo es uno, no olvidar los corchetes:

[output.html]
additional-css = ["theme/estilos.css"]