index.Rmd

---
title: "xaringan.club"
image: "xaringanclub.png"
links:
  - label: Demo Slides
    url: "https://slides.yihui.org/xaringan"
  - label: GitHub
    url: "https://github.com/yihui/xaringan"
  - label: Wiki
    url: "https://github.com/yihui/xaringan/wiki"
  - label: xaringanthemer
    url: "https://pkg.garrickadenbuie.com/xaringanthemer"
  - label: xaringanExtra
    url: "https://pkg.garrickadenbuie.com/xaringanExtra"
  - label: xaringanBuilder
    url: "https://jhelvy.github.io/xaringanBuilder/"
  - label: xaringancolor
    url: "https://github.com/EmilHvitfeldt/xaringancolor#readme"
output:
  postcards::jolla
---

::: {.lead .text-warning}
The first rule of xaringan club is...<br/>we talk about xaringan.
:::
 
```{css echo=FALSE}
body {
  background-color: #212529;
  color: var(--pink);
  background-image: url("constantin-popp-0xYjdK5kRxM-unsplash.jpg");
  background-size: cover;
  background-position: 20% center;
  background-attachment: fixed;
}
.list-group-item-action.btn-outline-warning {
  background: unset;
  border-color: var(--yellow);
  color: var(--yellow);
}
.list-group-item-action.btn-outline-warning:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}
.col-8.d-sm-none > .list-group > a:hover {
  text-decoration: none;
}
```

```{js echo=FALSE}
document.addEventListener('DOMContentLoaded', function() {
  const logo = document.querySelector('.container .col-12 > img:first-child')
  logo.classList.remove('rounded-circle')
  logo.setAttribute(
    'alt', 
    'Xaringan Club hex logo: a pink and black logo featuring a stylized eye ' +
    'and the words "Xaringan Club" emblazoned on a soap bar. Inspired by the ' + 
    'Xaringan package hex and the Fight Club soap logo. Logo originally ' + 
    'created by Tan Ho and is released under CC0.'
  )
  
  document
    .querySelectorAll(
      '.col-8 > .list-inline > .list-inline-item > a > button, ' +
      '.col-8 > .list-group button.list-group-item-action'
    )
    .forEach(el => {
      el.classList.remove('btn-outline-dark')
      el.classList.add('btn-outline-warning')
    })
})
```