---
class: "center"
---
# Fully responsive CSS only slide system
===
---
class: "center"
---
# No Javascript needed
*(only for parsing markdown if wanted)*
*(currently only chrome and safari because container queries)*
===
# Fully customizable
- setting css properties
- settings front matter in markdown version
- per slide or globally
===
# CSS Properties
* --ratio-width: 16;
* --ratio-height:9;
* --bgColor: #fff;
* --bgOverlay: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8));
* --bgImage: url('')
* --fontFamily: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
* --h1Size: 72;
* --h1Color: #111;
===
* --h2Size: 40;
* --h2Color: #111;
* --textSize: 24;
* --textColor: #111;
* --paddingSize: 24;
===
# Also available as CSS part selectors
* ::part(ul)
* ::part(li)
* ::part(p)
* ::part(h1)
* ::part(h2)
===
# Write with markdown
```html
<pudymody-slidy no-scrollbar parse>
---
class: "center"
---
# Fully responsive CSS only slide system
===
# Or with HTML
```html
<pudymody-slidy no-scrollbar>
<section><div class="wrapper"># My title</div></section>
<section><div class="wrapper center"># Slide 2</div></section>
</pudymody-slidy>
```
===
---
class: "center"
---
Read more on my [blog post](https://pudymody.netlify.app/blog/2022-10-14-fully-responsive-css-slide-system/) or the [source in github](https://github.com/pudymody/slidy)