1 CSS

Para incorporar CSS en un documento .qmd se han de hacer dos cosas:

crear un documento .css , y
referenciarlo en el yaml del .qmd.

Veámos cómo referenciar el archivo css en el yaml en 3 situaciones:

Si el fichero .css estuviese en la misma carpeta que el .qmd, entonces el yaml del documento .qmd sería algo como:

---
title: "Mi super-título"
format: html
css: my_styles.css
---

Si el fichero .css que quieres referenciar estuviese en una subcarpeta llamada assets dentro de la carpeta donde está el .qmd, entonces, el yaml del documento .qmd quedaría como:

---
title: "Mi super-título"
format: html
css: asets/my_styles.css
---

Si el fichero .css que quieres referenciar estuviese en la carpeta assets, en la raiz del Qproject, entonces, el yaml del documento .qmd quedaría como:

---
title: "Mi super-título"
format: html
css: "`r here::here('assets', 'ember.scss')`"
---

1.0.1 Rotar una imagen

Esta perfectamente explicado aquí

En el .qmd tendrías que incluir lo siguiente:

::: rotate-img
![](my_imagen.jpg){.absolute height=300}
:::

El fichero my_styles.css debería contener:

.rotate-img img {
  transform: rotate(40deg);
}

También se puede rotar una imagen sin utilizar .css. Se haría utilizando un fenced div , concretamente así:

:::{.class .absolute top="35%" left="10%" width="350px" style="transform: rotate(-15deg);"}
![](my_imagen.jpg)
:::

2 SCSS

2.1 Biblio

Styling and Templating Quarto Documents son unas slides, con video y repo sobre, evidentemente, styling qmd`s. Tiene varios ejemplos sobre colores, fuentes y además, sobre como hacer una template.
Aquí tienes las variables SASS de revealjs y sus valores por defectos, y aquí las de html Bootstrap. En html theming tienes los 25 themes from the Bootswatch project.
Una template vacia q usa Emil Hvitfeldt para sus presentaciones. Esta vacía pero tiene como meter JS en Revelajs y tiene los events de Reveals y en la web de Silvia Canelon lo usa.

2.2 Trucos

2.2.1 Cajas flex

Este scss crea una clase para un contenedor de columnas flexibles, donde cada columna es una caja con borde rosita, esquinas redondeadas y sombra.

// my Estilo para las COLUMNAS con CAJAS (flex)
// Variables de color
$xxcol-bg: #f0f8ff;      // color de fondo de la caja
$xxcol-border: #e75480;  // color del borde (rosa elegante)

// Estilo para las columnas con cajas
.xx-columnas-cajas {
  display: flex;
  gap: 1em;

  .columna {
    flex: 1;
    background: $xxcol-bg;
    border: 2px solid $xxcol-border;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
}

Para usar este estilo en tu documento .qmd tendrías que:

::: {.xx-columnas-cajas}
::: {.columna}
:::
::: {.columna}
:::
:::

El resultado seria más o menos lo que estas viendo ahora:

2.2.2 Cambiar color links

Aquí hay un archivo .scss de Mine. Pone en el yaml: linkcolor: “#866fa3”¹ y luego lo referencia en el archivo .scss para hacer que los links se hagan más tenues y se subrayen cuando estás sobre ellos².

$hover-color: lighten($link-color, 40%);

a{
  color: $link-color;
  text-decoration: none;
  
  &:hover{
    color: $hover-color;
    border-bottom: 1px solid $hover-color;
  }
  
}

2.2.3 Tunear los call-outs

En este video @ggnot explica cómo crear CUSTOM Callout Boxes in Quarto. Tiene un repositorio con un ejemplo. Hace falta definir un archivo .scss.

El documento .qmd sería así:

---
title: "Custom Callouts"
author: "Melissa Van Bussel"
format:
  html:
    theme: custom.scss
---

:::::{.solutionbox}
::::{.solutionbox-header}
:::{.solutionbox-icon}
:::
This is my test solution
::::
:::{.solutionbox-body}
And some content inside of it
:::
:::::

El fichero custom.scss sería así:

/*-- scss:defaults --*/

// replicate the CSS for a callout box with a custom title, icon, and default appearance

.solutionbox {
  margin-top: 1em;
  margin-bottom: 1em;  
  border-radius: .25rem;
  border-left: solid #acacac .3rem;
  border-right: solid 0.5px silver;
  border-top: solid 0.5px silver;
  border-bottom: solid 0.5px silver;
  border-left-color: #9834eb !important;
}

.solutionbox-icon {
  height: 0.9rem;
  width: 0.9rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 0.9rem 0.9rem;
  margin-top: .5rem;
  padding-right: 1.25rem;
  background-image: url('imagenes/flor.jpg');
}

.solutionbox-header {
  //margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: none;
  font-weight: 600;
  opacity: 85%;
  font-size: 0.9rem;
  padding-left: 0.5em;
  padding-right: 0.5em;
  display: flex;
  background-color: #f5e8ff;
  height: 2em;
  overflow: hidden;
}

.solutionbox-header p {
  padding-top: 0.2em;
}

.solutionbox-body {
  font-size: 0.9rem;
  font-weight: 400;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.solutionbox-body > :last-child {
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

2.2.4 Colores

En estas slides de Emil Hvitfeldt se explica cómo cambiar los colores de un tema. Se hace con un archivo .scss y se referencia en el yaml del .qmd. Los H1 son el mismo color que H2 pero mas oscuros. El código es:

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

/*-- scss:rules --*/
h1 {
  color: darken($theme-blue, 50%);
}

h2, h3, h4 {
  color: $theme-blue;
}

2.2.5 Fuentes

En estas slides de Emil Hvitfeldt se explica cómo cambiar las fuentes de un tema.

2.2.6 TOC

En la web de Silvia Canelon, concretamente en este post. El fichero scss está aquí

// Table of contents
$toc-color:                   $link-color;
$toc-active-border:           $toc-color;
$toc-inactive-border:         lighten($toc-color, 50%);

Notas

Es el color “Glossy Grape”↩︎
Para mi gusto se atenúan demasiado, igual en lugar de un 40% hay que poner otro %↩︎

Reutilizar

CC BY 4.0