Git Product home page Git Product logo

slidev-theme-unicorn's Introduction

slidev-theme-unicorn

NPM version

A Unicorn theme for Slidev.

This theme is based on dawntraoz.com website design.

Live demo: https://unicorn-theme.dawntraoz.com/

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: unicorn
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Common properties

By default any layout will contain a header and a footer expecting:

---
logoHeader: 'https://www.dawntraoz.com/images/logo.svg'
website: 'dawntraoz.com'
handle: 'dawntraoz'
---

If you don't add this property it will be an empty slide expecting your content:

With properties Without properties
introDark introLight

Intro intro

Usage:

  • Add intro in the layout field.
  • Add your profile image in the introImage field.
---
layout: intro
introImage: 'https://img2.storyblok.com/312x312/filters:format(webp)/f/79165/400x400/1082ff0d24/dawntraoz-alba-silvente.jpg'
---
Dark Light
introDark introLight

Default cover

Cover is the default layout when none is specified.

Usage:

---
layout: cover
---
Dark Light
introDark introLight

Presentation cover-logos

Usage:

  • Add cover-logos in the layout field.
  • Add an Array of logo URLs in the logos field.
---
layout: cover-logos
logos: [
  'https://img2.storyblok.com/588x0/filters::format(webp)/f/86387/x/21aa32ed18/logo-normal.svg',
  'https://nuxtjs.org/logos/nuxt-emoji.png',
]
---
Dark Light
introDark introLight

Table of contents table-contents

Usage:

  • Add table-contents in the layout field.
  • Add an Array of hexadecimal colours in the gradientColors field to fill the illustration.
---
layout: table-contents
gradientColors: ['#8EC5FC', '#E0C3FC']
---
Dark (added gradient) Light (default gradient)
introDark introLight

New section slide new-section

Always in dark version

Usage:

  • Add new-section in the layout field.
---
layout: new-section
---
Dark Light
introDark introLight

Image Centered image-center

The content will be place before the image, you can add a title, subtitle to give context to the image.

---
layout: image-center
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
imageWidth: '450'
imageHeight: '950'
---
Dark Light
introDark introLight

Text centered center

---
layout: center
---
Dark Light
introDark introLight

Contributing

  • npm install
  • npm run dev to start theme preview of example.md
  • Edit the example.md and style to see the changes
  • npm run export to generate the preview PDF
  • npm run screenshot to generate the preview PNG

slidev-theme-unicorn's People

Contributors

dawntraoz avatar hipsterbrown avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

slidev-theme-unicorn's Issues

Importing Gilroy Font from public is giving a 404

# Steps to reproduce

  1. Install theme
  2. Add theme to slides

# Error
Screenshot 2021-06-10 at 12 38 36

Failed to load resource: the server responded with a status of 404 (Not Found)

I'm having the same issue with all the assets in public

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.