├── components ├── .gitkeep ├── LayoutHeader.vue └── LayoutFooter.vue ├── _redirects ├── .npmrc ├── .npmignore ├── public ├── storyblok.png ├── nuxt-emoji-white.png ├── fonts │ └── Gilroy-Bold.woff ├── logo.svg └── section-illustration.svg ├── .gitignore ├── screenshots ├── new-section.png ├── dark-theme-center.png ├── dark-theme-cover.png ├── dark-theme-intro.png ├── light-theme-cover.png ├── light-theme-intro.png ├── light-theme-center.png ├── dark-theme-cover-logos.png ├── dark-theme-cover-table.png ├── light-theme-cover-code.png ├── dark-theme-image-centered.png ├── dark-theme-table-content.png ├── light-theme-cover-logos.png ├── light-theme-cover-table.png ├── light-theme-image-center.png ├── light-theme-table-content.png ├── dark-theme-cover-code-snippet.png └── dark-theme-center-without-header-footer.png ├── styles ├── index.ts ├── code.css └── layout.css ├── layouts ├── cover.vue ├── center.vue ├── default.vue ├── image-center.vue ├── intro.vue ├── cover-logos.vue ├── new-section.vue └── table-contents.vue ├── windi.config.ts ├── layoutHelper.ts ├── package.json ├── example.md └── README.md /components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # for pnpm 2 | shamefully-hoist=true 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | screenshots 2 | .github 3 | dist 4 | public/nuxt-emoji-white.png 5 | public/storyblok.png -------------------------------------------------------------------------------- /public/storyblok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/public/storyblok.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local 5 | index.html 6 | .remote-assets 7 | .idea/ 8 | .env 9 | -------------------------------------------------------------------------------- /public/nuxt-emoji-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/public/nuxt-emoji-white.png -------------------------------------------------------------------------------- /screenshots/new-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/new-section.png -------------------------------------------------------------------------------- /public/fonts/Gilroy-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/public/fonts/Gilroy-Bold.woff -------------------------------------------------------------------------------- /screenshots/dark-theme-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-center.png -------------------------------------------------------------------------------- /screenshots/dark-theme-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-cover.png -------------------------------------------------------------------------------- /screenshots/dark-theme-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-intro.png -------------------------------------------------------------------------------- /screenshots/light-theme-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-cover.png -------------------------------------------------------------------------------- /screenshots/light-theme-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-intro.png -------------------------------------------------------------------------------- /screenshots/light-theme-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-center.png -------------------------------------------------------------------------------- /styles/index.ts: -------------------------------------------------------------------------------- 1 | // inherit from base layouts, remove it to get full customizations 2 | import './layout.css' 3 | import './code.css' 4 | -------------------------------------------------------------------------------- /screenshots/dark-theme-cover-logos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-cover-logos.png -------------------------------------------------------------------------------- /screenshots/dark-theme-cover-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-cover-table.png -------------------------------------------------------------------------------- /screenshots/light-theme-cover-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-cover-code.png -------------------------------------------------------------------------------- /screenshots/dark-theme-image-centered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-image-centered.png -------------------------------------------------------------------------------- /screenshots/dark-theme-table-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-table-content.png -------------------------------------------------------------------------------- /screenshots/light-theme-cover-logos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-cover-logos.png -------------------------------------------------------------------------------- /screenshots/light-theme-cover-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-cover-table.png -------------------------------------------------------------------------------- /screenshots/light-theme-image-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-image-center.png -------------------------------------------------------------------------------- /screenshots/light-theme-table-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/light-theme-table-content.png -------------------------------------------------------------------------------- /screenshots/dark-theme-cover-code-snippet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-cover-code-snippet.png -------------------------------------------------------------------------------- /screenshots/dark-theme-center-without-header-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/HEAD/screenshots/dark-theme-center-without-header-footer.png -------------------------------------------------------------------------------- /layouts/cover.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /layouts/center.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /components/LayoutHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /components/LayoutFooter.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /layouts/image-center.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 34 | -------------------------------------------------------------------------------- /layouts/intro.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | -------------------------------------------------------------------------------- /windi.config.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { mergeWindicssConfig, defineConfig } from 'vite-plugin-windicss' 3 | import BaseConfig from '@slidev/client/windi.config' 4 | 5 | // extend the base config 6 | export default mergeWindicssConfig( 7 | BaseConfig, 8 | defineConfig({ 9 | extract: { 10 | include: [ 11 | resolve(__dirname, '**/*.{vue,ts}'), 12 | ], 13 | }, 14 | shortcuts: { 15 | // custom the default background 16 | 'bg-main': 'bg-gradient-to-r from-white to-purple-50 text-gray-900 dark:(from-fuchsia-700 to-purple-800 text-white)', 17 | }, 18 | theme: { 19 | extend: { 20 | // fonts can be replaced here, remember to update the web font links in `index.html` 21 | fontFamily: { 22 | title: ['Gilroy Bold', 'sans-serif'], 23 | }, 24 | }, 25 | }, 26 | }), 27 | ) 28 | -------------------------------------------------------------------------------- /layoutHelper.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties } from 'vue' 2 | 3 | /** 4 | * Resolve urls from frontmatter and append with the base url 5 | */ 6 | export function resolveAssetUrl(url: string) { 7 | if (url.startsWith('/')) 8 | return import.meta.env.BASE_URL + url.slice(1) 9 | return url 10 | } 11 | 12 | export function handleBackground(background?: string, dim = false, backgroundSize = 'cover'): CSSProperties { 13 | const isColor = background && (background[0] === '#' || background.startsWith('rgb')) 14 | 15 | const style = { 16 | background: isColor 17 | ? background 18 | : undefined, 19 | color: (background && !isColor) 20 | ? 'white' 21 | : undefined, 22 | backgroundImage: isColor 23 | ? undefined 24 | : background 25 | ? dim 26 | ? `linear-gradient(#0005, #0008), url(${resolveAssetUrl(background)})` 27 | : `url("${resolveAssetUrl(background)}")` 28 | : undefined, 29 | backgroundRepeat: 'no-repeat', 30 | backgroundPosition: 'center', 31 | backgroundSize, 32 | } 33 | 34 | if (!style.background) 35 | delete style.background 36 | 37 | return style 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidev-theme-unicorn", 3 | "version": "1.1.2", 4 | "author": "Alba Silvente", 5 | "description": "A Unicorn theme for Slidev", 6 | "keywords": [ 7 | "slidev-theme", 8 | "slidev", 9 | "unicorn", 10 | "dawntraoz" 11 | ], 12 | "license": "MIT", 13 | "private": false, 14 | "homepage": "https://unicorn-theme.dawntraoz.com/", 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/Dawntraoz/slidev-theme-unicorn.git" 18 | }, 19 | "bugs": "https://github.com/Dawntraoz/slidev-theme-unicorn/issues", 20 | "slidev": { 21 | "colorSchema": "both", 22 | "highlighter": "all" 23 | }, 24 | "scripts": { 25 | "dev": "slidev example.md --open", 26 | "build": "slidev build example.md && cp -r _redirects ./dist/_redirects", 27 | "export": "slidev export example.md", 28 | "screenshot": "slidev export example.md --format png" 29 | }, 30 | "dependencies": { 31 | "@slidev/cli": "^0.48.5", 32 | "@slidev/client": "^0.48.5", 33 | "@slidev/theme-default": "^0.25.0" 34 | }, 35 | "devDependencies": { 36 | "playwright-chromium": "^1.42.1" 37 | }, 38 | "engines": { 39 | "node": ">=20.0.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /layouts/cover-logos.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 42 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /layouts/new-section.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 33 | 34 | 52 | -------------------------------------------------------------------------------- /styles/code.css: -------------------------------------------------------------------------------- 1 | @import 'prism-theme-vars/base.css'; 2 | @import 'codemirror-theme-vars/base.css'; 3 | @import 'prism-theme-vars/to-codemirror.css'; 4 | 5 | :root { 6 | --prism-font-family: var(--slidev-code-font-family); 7 | } 8 | 9 | html:not(.dark) { 10 | --prism-foreground: #393a34; 11 | --prism-background: #f8f8f8; 12 | --prism-comment: #a0ada0; 13 | --prism-string: #b56959; 14 | --prism-literal: #2f8a89; 15 | --prism-number: #296aa3; 16 | --prism-keyword: #1c6b48; 17 | --prism-function: #6c7834; 18 | --prism-boolean: #1c6b48; 19 | --prism-constant: #a65e2b; 20 | --prism-deleted: #a14f55; 21 | --prism-class: #2993a3; 22 | --prism-builtin: #ab5959; 23 | --prism-property: #b58451; 24 | --prism-namespace: #b05a78; 25 | --prism-punctuation: #8e8f8b; 26 | --prism-decorator: #bd8f8f; 27 | --prism-regex: #ab5e3f; 28 | --prism-json-property: #698c96; 29 | } 30 | 31 | html.dark { 32 | --prism-foreground: #d4cfbf; 33 | --prism-background: #1b1b1b; 34 | --prism-comment: #758575; 35 | --prism-string: #d48372; 36 | --prism-literal: #429988; 37 | --prism-keyword: #4d9375; 38 | --prism-boolean: #1c6b48; 39 | --prism-number: #6394bf; 40 | --prism-variable: #c2b36e; 41 | --prism-function: #a1b567; 42 | --prism-deleted: #a14f55; 43 | --prism-class: #54b1bf; 44 | --prism-builtin: #e0a569; 45 | --prism-property: #dd8e6e; 46 | --prism-namespace: #db889a; 47 | --prism-punctuation: #858585; 48 | --prism-decorator: #bd8f8f; 49 | --prism-regex: #ab5e3f; 50 | --prism-json-property: #6b8b9e; 51 | --prism-line-number: #888888; 52 | --prism-line-number-gutter: #eeeeee; 53 | --prism-line-highlight-background: #444444; 54 | --prism-selection-background: #444444; 55 | } 56 | 57 | pre[class*='language-'] { 58 | @apply p-2; 59 | } 60 | 61 | :not(pre) > code { 62 | font-size: 0.9em; 63 | background: var(--prism-background); 64 | @apply font-light py-0.5 rounded; 65 | } 66 | 67 | 68 | :not(pre) > code:before, 69 | :not(pre) > code:after { 70 | content: '`'; 71 | opacity: 0.50; 72 | } 73 | 74 | :not(pre) > code:before { 75 | margin-right: -0.08em; 76 | } 77 | -------------------------------------------------------------------------------- /styles/layout.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Gilroy Bold"; 3 | font-style: normal; 4 | font-weight: bold; 5 | font-display: swap; 6 | src: local("Gilroy Bold"), 7 | url("../public/fonts/Gilroy-Bold.woff") format("woff"); 8 | } 9 | 10 | :root { 11 | --slidev-theme-primary: #5d8392; 12 | } 13 | 14 | .slidev-layout { 15 | @apply p-10 h-full flex flex-col; 16 | 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | p, 22 | div { 23 | @apply select-none; 24 | } 25 | 26 | pre, 27 | code { 28 | @apply select-text; 29 | } 30 | 31 | h1, 32 | h2, 33 | h3, 34 | h4, 35 | h5, 36 | h6 { 37 | @apply font-bold font-title bg-clip-text text-transparent bg-gradient-to-r from-fuchsia-700 to-purple-800 dark:(from-white to-purple-50); 38 | } 39 | 40 | h1 { 41 | @apply text-4xl mb-4; 42 | } 43 | 44 | h2 { 45 | @apply text-2xl; 46 | } 47 | 48 | h3 { 49 | @apply text-lg uppercase tracking-widest font-500; 50 | } 51 | 52 | p:not(.mb-0) { 53 | @apply mb-4 leading-6; 54 | } 55 | 56 | strong { 57 | @apply text-purple-800 dark:text-purple-100; 58 | } 59 | 60 | h1 + p { 61 | @apply -mt-3 opacity-70; 62 | } 63 | 64 | p + h2, 65 | ul + h2, 66 | table + h2 { 67 | @apply mt-10; 68 | } 69 | 70 | ul { 71 | list-style: circle; 72 | } 73 | 74 | ol { 75 | list-style: decimal; 76 | } 77 | 78 | li { 79 | @apply ml-1.1em pl-0.2em leading-1.8em; 80 | } 81 | 82 | blockquote { 83 | @apply text-sm px-2 py-1 bg-$prism-background border-$slidev-theme-primary border-l rounded; 84 | } 85 | 86 | blockquote > * { 87 | @apply my-0; 88 | } 89 | 90 | table { 91 | @apply w-full; 92 | } 93 | 94 | tr { 95 | @apply border-b border-gray-400 border-opacity-20; 96 | } 97 | 98 | th { 99 | @apply text-left font-400; 100 | } 101 | 102 | a { 103 | @apply border-current border-b border-dashed hover:(text-primary border-solid); 104 | } 105 | 106 | td, 107 | th { 108 | @apply p-2 py-3; 109 | } 110 | 111 | b, 112 | strong { 113 | @apply font-600; 114 | } 115 | 116 | kbd { 117 | @apply border border-gray-400 border-b-2 border-opacity-20 rounded; 118 | @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-xs font-mono; 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /example.md: -------------------------------------------------------------------------------- 1 | --- 2 | theme: ./ 3 | colorSchema: 'light' 4 | layout: intro 5 | logoHeader: '/logo.svg' 6 | website: 'dawntraoz.com' 7 | handle: 'dawntraoz' 8 | introImage: 'https://img2.storyblok.com/312x312/filters:format(webp)/f/79165/400x400/1082ff0d24/dawntraoz-alba-silvente.jpg' 9 | --- 10 | 11 | # Unicorn slidev theme 12 | 13 | Presentation slides for developers 14 | 15 | 16 |
17 | 18 | Press Space for next page 19 | 20 |
21 | 22 | --- 23 | logoHeader: '/logo.svg' 24 | website: 'dawntraoz.com' 25 | handle: 'dawntraoz' 26 | layout: cover-logos 27 | logos: [ 28 | 'https://img2.storyblok.com/256x0/filters:format(webp)/f/86387/x/4cf6a70a8c/logo-white-text.svg', 29 | '/nuxt-emoji-white.png', 30 | '/storyblok.png' 31 | ] 32 | --- 33 | 34 | Frontend Developer Consultant at **@passionpeopleNL** 35 | Blogger, speaker and open source lover 36 | 37 | Ambassador at **@nuxt_js** and **@storyblok** 38 | 39 | --- 40 | logoHeader: '/logo.svg' 41 | website: 'dawntraoz.com' 42 | handle: 'dawntraoz' 43 | layout: table-contents 44 | gradientColors: ['#A21CAF', '#5B21B6'] 45 | --- 46 | 47 | # What is Slidev? 48 | 49 | Slidev is a slides maker and presenter designed for developers, consist of the following features 50 | 51 | - 📝 **Text-based** - focus on the content with Markdown 52 | - 🎨 **Themable** - create your theme 53 | - 🧑‍💻 **Developer Friendly** - code highlighting, live coding 54 | - 🤹 **Interactive** - embedding Vue components 55 | - 🎥 **Recording** - built-in recording and camera view 56 | - 📤 **Portable** - export into PDF, PNGs, or even a host it 57 | - 🛠 **Hackable** - anything possible on a webpage 58 | 59 | --- 60 | logoHeader: '/logo.svg' 61 | website: 'dawntraoz.com' 62 | handle: 'dawntraoz' 63 | layout: new-section 64 | sectionImage: 'https://images.unsplash.com/photo-1711091189179-53ec364d4bf3?q=80&w=3054&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' 65 | --- 66 | 67 | # This is a new section 68 | Some content to explain 69 | 70 | 73 | 74 | --- 75 | logoHeader: '/logo.svg' 76 | website: 'dawntraoz.com' 77 | handle: 'dawntraoz' 78 | --- 79 | 80 | # Navigation 81 | 82 | Hover on the bottom-left corner to see the navigation's controls panel 83 | 84 | ### Keyboard Shortcuts 85 | 86 | | | | 87 | | --- | --- | 88 | | space / tab / right | next animation or slide | 89 | | left | previous animation or slide | 90 | | up | previous slide | 91 | | down | next slide | 92 | 93 | --- 94 | logoHeader: '/logo.svg' 95 | website: 'dawntraoz.com' 96 | handle: 'dawntraoz' 97 | layout: image-center 98 | image: 'https://source.unsplash.com/collection/94734566/1920x1080' 99 | imageWidth: '450' 100 | imageHeight: '950' 101 | --- 102 | 103 | # Image centered 104 | 105 | Making use of `image-center` layout. 106 | 107 | --- 108 | logoHeader: '/logo.svg' 109 | website: 'dawntraoz.com' 110 | handle: 'dawntraoz' 111 | layout: cover 112 | --- 113 | 114 | # Code 115 | 116 | Use code snippets and get the highlighting directly! 117 | 118 | ```ts 119 | interface User { 120 | id: number 121 | firstName: string 122 | lastName: string 123 | role: string 124 | } 125 | 126 | function updateUser(id: number, update: Partial) { 127 | const user = getUser(id) 128 | const newUser = {...user, ...update} 129 | saveUser(id, newUser) 130 | } 131 | ``` 132 | 133 | --- 134 | layout: center 135 | --- 136 | 137 | # Thank you 138 | 139 | [Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev) 140 | -------------------------------------------------------------------------------- /layouts/table-contents.vue: -------------------------------------------------------------------------------- 1 | 113 | 114 | 124 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # slidev-theme-unicorn 2 | 3 | [![NPM version](https://img.shields.io/npm/v/slidev-theme-unicorn?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-unicorn) 4 | 5 | A Unicorn theme for [Slidev](https://github.com/slidevjs/slidev). 6 | 7 | This theme is based on [dawntraoz.com](https://www.dawntraoz.com/) website design. 8 | 9 | Live demo: https://unicorn-theme.dawntraoz.com/ 10 | 11 | ## Install 12 | 13 | Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically. 14 | 15 | 
---
 16 | theme: unicorn
 17 | ---
18 | 19 | Learn more about [how to use a theme](https://sli.dev/themes/use). 20 | 21 | ## Layouts 22 | 23 | This theme provides the following layouts: 24 | 25 | ### Common properties 26 | 27 | By default any layout will contain a header and a footer expecting: 28 | 29 | ``` 30 | --- 31 | logoHeader: 'https://www.dawntraoz.com/images/logo.svg' 32 | website: 'dawntraoz.com' 33 | handle: 'dawntraoz' 34 | --- 35 | ``` 36 | 37 | If you don't add this property it will be an empty slide expecting your content: 38 | 39 | With properties | Without properties 40 | :-------------------------:|:-------------------------: 41 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-center.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-center-without-header-footer.png) 42 | 43 | --- 44 | 45 | ### Intro `intro` 46 | 47 | Usage: 48 | 49 | - Add `intro` in the layout field. 50 | - Add your profile image in the `introImage` field. 51 | 52 | ``` 53 | --- 54 | layout: intro 55 | introImage: 'https://img2.storyblok.com/312x312/filters:format(webp)/f/79165/400x400/1082ff0d24/dawntraoz-alba-silvente.jpg' 56 | --- 57 | ``` 58 | 59 | Dark | Light 60 | :-------------------------:|:-------------------------: 61 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-intro.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-intro.png) 62 | 63 | --- 64 | 65 | ### Default `cover` 66 | 67 | Cover is the default layout when none is specified. 68 | 69 | Usage: 70 | 71 | ``` 72 | --- 73 | layout: cover 74 | --- 75 | ``` 76 | 77 | Dark | Light 78 | :-------------------------:|:-------------------------: 79 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-cover.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-cover.png) 80 | 81 | --- 82 | 83 | ### Presentation `cover-logos` 84 | 85 | Usage: 86 | 87 | - Add `cover-logos` in the layout field. 88 | - Add an Array of logo URLs in the `logos` field. 89 | 90 | ``` 91 | --- 92 | layout: cover-logos 93 | logos: [ 94 | 'https://img2.storyblok.com/588x0/filters::format(webp)/f/86387/x/21aa32ed18/logo-normal.svg', 95 | 'https://nuxtjs.org/logos/nuxt-emoji.png', 96 | ] 97 | --- 98 | ``` 99 | 100 | Dark | Light 101 | :-------------------------:|:-------------------------: 102 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-cover-logos.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-cover-logos.png) 103 | 104 | --- 105 | 106 | ### Table of contents `table-contents` 107 | 108 | Usage: 109 | 110 | - Add `table-contents` in the layout field. 111 | - Add an Array of hexadecimal colours in the `gradientColors` field to fill the illustration. 112 | 113 | ``` 114 | --- 115 | layout: table-contents 116 | gradientColors: ['#8EC5FC', '#E0C3FC'] 117 | --- 118 | ``` 119 | 120 | Dark (added gradient) | Light (default gradient) 121 | :-------------------------:|:-------------------------: 122 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-table-content.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-table-content.png) 123 | 124 | --- 125 | 126 | ### New section slide `new-section` 127 | 128 | > Always in dark version 129 | 130 | Usage: 131 | 132 | - Add `new-section` in the layout field. 133 | 134 | ``` 135 | --- 136 | layout: new-section 137 | --- 138 | ``` 139 | 140 | Dark | Light 141 | :-------------------------:|:-------------------------: 142 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/new-section.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/new-section.png) 143 | 144 | --- 145 | 146 | ### Image Centered `image-center` 147 | 148 | The content will be place before the image, you can add a title, subtitle to give context to the image. 149 | 150 | ``` 151 | --- 152 | layout: image-center 153 | image: 'https://source.unsplash.com/collection/94734566/1920x1080' 154 | imageWidth: '450' 155 | imageHeight: '950' 156 | --- 157 | ``` 158 | 159 | Dark | Light 160 | :-------------------------:|:-------------------------: 161 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-image-centered.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-image-center.png) 162 | 163 | --- 164 | 165 | ### Text centered `center` 166 | 167 | ``` 168 | --- 169 | layout: center 170 | --- 171 | ``` 172 | 173 | Dark | Light 174 | :-------------------------:|:-------------------------: 175 | ![introDark](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/dark-theme-center.png) | ![introLight](https://raw.githubusercontent.com/Dawntraoz/slidev-theme-unicorn/master/screenshots/light-theme-center.png) 176 | 177 | --- 178 | 179 | ## Contributing 180 | 181 | - `pnpm install` 182 | - `pnpm dev` to start theme preview of `example.md` 183 | - Edit the `example.md` and style to see the changes 184 | - `pnpm export` to generate the preview PDF 185 | - `pnpm screenshot` to generate the preview PNG 186 | -------------------------------------------------------------------------------- /public/section-illustration.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------