slidev-theme-anova
An Anova theme for Slidev.
You can see a live example here.
Using this theme
Install Manually
If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:
$ npm install @slidev/cli @slidev/theme-default
$ touch slides.md
$ npx slidev
Please note if you are using pnpm, you will need to enable shamefully-hoist option for Slidev to work properly:
echo 'shamefully-hoist=true' >> .npmrc
Install Globally
Available since slidev v0.14
You can install Slidev globally with the following command
$ npm i -g @slidev/cli
And then use slidev everywhere without creating a project every time.
$ slidev
This command will also try to use local @slidev/cli if it has been found in the node_modules.
Install this theme
Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.
(It's published on NPM here).
Simply add:
---
theme: anova-basic
---to your slides.md frontmatter.
Learn more about how to use a theme.
About
This theme is inspired by the @slidev/theme-apple Basic Black/White theme on the Apple Keynote application.
We've made use of Work Sans, the Anova branding font, and added some styling utilities to conform to the Anova brand guidelines.
Layouts
This theme provides the following layouts:
Title
Usage:
---
layout: title-right
---
# Presentation title
Presentation subtitle
::author::
Your Name here
::date::
2022.05.13
::logo::
<img src="/anova.svg" height="92" />
Title & Photo
Usage:
---
layout: intro-image
image: 'image-url'
---
<div class="absolute top-10">
<span class="font-700">
Author and Date
</span>
</div>
<div class="absolute bottom-10">
<h1>Presentation title</h1>
<p>Presentation subtitle</p>
</div>
Title & Photo right
Usage:
---
layout: intro-image-right
image: 'image-url'
---
# Slide Title
## Slide Subtitle
Title, Bullets & Image
Usage:
---
layout: image-right
image: 'image-url'
---
# Slide Title
## Slide Subtitle
* Slide bullet text
Title & Bullets
Layout used by default
Bullets
Usage:
---
layout: bullets
---
* Slide bullet text
Section
Usage:
---
layout: section
---
# Section Title
Statement
Usage:
---
layout: statement
---
# Statement
Big fact
Usage:
---
layout: fact
---
# 100%
Fact information
Quote
Usage:
---
layout: quote
---
# "Notable quote"
Attribution
Photo - 3
Usage:
---
layout: 3-images
imageLeft: 'image-url'
imageTopRight: 'image-url'
imageBottomRight: 'image-url'
---
Photo
Usage:
---
layout: image
image: 'image-url'
---