@lydra/slidev-theme-alpaga/example.md

Alpaga is a simple and quick to set up theme for [Slidev](https://github.com/slidevjs/slidev). It's ideal for Markdown notes, booklets or cheatsheets as you can easily customize it to your business colors and identity and export to PDF.

---
theme: ./
colorSchema: 'light'
themeConfig:
  primary: '#fb7756'
  secondary: '#cc7b4b'
  code: 'white'
  subtitle: "Slidev Alpaga Theme"
  logoSrc: "/img/alpaga-logo.png"
  logoUrl: ""
  licenseUrl: "https://creativecommons.org/licenses/by-sa/4.0/deed.fr"
  licenseImg: "/img/license.png"
  authorUrl: "https://lydra.fr"
  author: "Author's Name"
  version: "0.1"

class: text-center
aspectRatio: '4/3'
fonts:
  # basically the text
  sans: 'Montserrat'
  # titles
  serif: 'Comfortaa'
  # for code blocks, inline code, etc.
  mono: 'Fira Code'
title: Example
titleTemplate: '%s - Alpaga'
layout: two-cols
---

<template v-slot:default>

# Theme for Slidev

Alpaga is a simple and quick to set up theme for Slidev. It's ideal for Markdown notes, booklets or cheatsheets as you can easily customize it to your business colors and identity and export to PDF. 

## Customization 

**Light theme, fonts, colors** are customizable from your slides frontmatter like you would do with other [Slidev Themes](https://sli.dev/custom/#frontmatter-configures).


**Logo, author, license and more** on the layout are customizable from the `themeConfig` part of the frontmatter as follows: 

```
themeConfig:
  subtitle: "Slidev Alpaga Theme"
  logoSrc: "/img/dummy-logo.png"
  logoUrl: ""
  license: "https://creativecommons.org"
  licenseImg: "/img/license.png"
  authorUrl: "https://lydra.fr"
  author: "Author's Name"
  version: "0.1"
```
[**To export your booklet**](https://sli.dev/guide/exporting.html) use `slidev export` with the Slidev CLI.  
You can specify the output file name with:  
`slidev export --output my-pdf-export`  

**Enjoy ! 🦙** 

</template>
<template v-slot:right>

Aenean sit amet porta sapien, et tempor nunc. Integer finibus consectetur arcu quis sodales. In sed mattis neque, a maximus nunc. Vivamus in pharetra velit. Praesent auctor bibendum convallis. 

## Curabitur sed risus rutrum

![a llama](/img/pexels-anastasia-yudin-5580714.jpg)
*Photo by [Anastasia Yudin on pexels](https://www.pexels.com/fr-fr/@anastasia-yudin-2240500/)*

Aenean sed ultricies sapien, ut aliquet libero. Vestibulum felis libero, tempus et magna consequat, ultricies rhoncus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras sodales, felis non semper sagittis, dui nibh rhoncus leo, a pretium libero lorem eu magna. Integer at tellus tempor, consequat est at, pharetra lacus. Sed vitae leo lectus. 


</template>
<!--
Here is another comment.
-->

---
layout: two-cols
---

<template v-slot:default>

## 💻 Some Code !

<article class="forecast">
    <h2>Weather forecast for Seattle</h2>
    <article class="day-forecast">
      <div>
          <h3>03 March 2018</h3>
          <span>Rain.</span>
      </div>
      <span class="icon"> 🌧️ </span> 
    </article>
    <article class="day-forecast">
    <div>
        <h3>04 March 2018</h3>
        <span>Periods of rain.</span>
    </div>
    <span class="icon"> ☁️ </span> 
    </article>
</article>

<style>
.forecast {
    margin: 1rem;
    padding: 0.3rem;
    background-color: #eee;
    font-size: 16px;
    color: black;
    h2 {
      font-size: 1.2rem;
      text-align: center;
    }
}
.day-forecast {
    margin: 0.5rem;
    padding: 0.3rem;
    font-size: 0.5em;
    display: flex; 
    justify-content: space-between;
}

.day-forecast {
    background: white;
}

.icon {
  font-size: 3rem;
}

</style>

### 🦙 Curabitur sed risus

```
<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>
```
</template>

<template v-slot:right>

  ## 😎 Nullam suscipit dolor

```mermaid
    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       checkout main
       commit

```

  ## 🐄 Curabitur sit amet
  Nam viverra tincidunt consectetur. Ut congue commodo urna et tincidunt. Nunc diam nibh, consectetur sit amet tristique porttitor, maximus a ligula. 

  - `article` in sem molestie `main`
  - `h1`, `h2` & `h3` fringilla odio ut scelerisque molestie.
  - `header` Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque auctor pellentesque neque, `footer` id faucibus mi.
  - `footer`, quisque porta dictum pellentesque. 

Sed commodo gravida odio sed finibus. Quisque auctor pellentesque neque, id faucibus mi. Morbi vehicula pharetra molestie. Nulla facilisi. Aliquam erat volutpat. Sed vitae ullamcorper eros. 

</template>

---
layout: two-cols
---

<template v-slot:default>

## 🐐 Nullam suscipit dolor

Maecenas non arcu in sem molestie aliquet. Fusce tristique efficitur urna, in sagittis nunc suscipit ut. Aenean felis erat, feugiat sit amet tincidunt at, congue in mi. Curabitur non vehicula mauris. In dui turpis, commodo sit amet auctor a, pretium id elit. Proin elit lectus, luctus a sollicitudin id, tempus placerat ex. Morbi luctus facilisis nunc, at rutrum magna interdum in. Suspendisse pellentesque tincidunt facilisis. Aenean dapibus faucibus sapien non maximus. 


## 🐐 Nullam suscipit dolor

Fusce tristique efficitur urna, in sagittis nunc suscipit ut  
`a --> b & c--> d c --> a`

<center> 
```mermaid
flowchart LR
   a --> b & c--> d 
   c --> a
```
</center>

Suspendisse pellentesque tincidunt facilisis. Aenean dapibus faucibus sapien non maximus. 
</template>

<template v-slot:right>

![another llama](/img/pexels-laraine-davis-1578484.jpg)
*Photo by [Laraine Davis on pexels](https://www.pexels.com/fr-fr/@laraine-davis-734364/)*

</template>