slidev-theme-leilei-custom1 0.0.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["antfu.slidev"]
+}

package/README.md

@@ -0,0 +1,50 @@
+# slidev-theme-leilei-custom1
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-leilei-custom1?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-leilei-custom1)
+
+A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
+
+<!--
+  Learn more about how to write a theme:
+  https://sli.dev/guide/write-theme.html
+--->
+
+<!--
+  run `npm run dev` to check out the slides for more details of how to start writing a theme
+-->
+
+<!--
+  Put some screenshots here to demonstrate your theme
+
+  Live demo: [...]
+-->
+
+## Install
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>---
+theme: <b>leilei-custom1</b>
+---</code></pre>
+
+Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
+
+## Layouts
+
+This theme provides the following layouts:
+
+> TODO:
+
+## Components
+
+This theme provides the following components:
+
+> TODO:
+
+## 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

package/example.md

@@ -0,0 +1,80 @@
+---
+theme: ./
+---
+
+# Slidev Theme Starter
+
+Presentation slides for developers
+
+<div class="pt-12">
+  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" flex="~ justify-center items-center gap-2" hover="bg-white bg-opacity-10">
+    Press Space for next page <div class="i-carbon:arrow-right inline-block"/>
+  </span>
+</div>
+
+---
+
+# What is Slidev?
+
+Slidev is a slide maker and presentation tool designed for developers. It includes the following features:
+
+- 📝 **Text-based** - focus on your content with Markdown, then style it later
+- 🎨 **Themable** - themes can be shared and reused as npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embed Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
+
+<br>
+<br>
+
+Read more about [Why Slidev?](https://sli.dev/guide/why)
+
+---
+
+# Navigation
+
+Hover on the bottom-left corner to see the navigation's controls panel
+
+## Keyboard Shortcuts
+
+|     |     |
+| --- | --- |
+| <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
+| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
+| <kbd>up</kbd> | previous slide |
+| <kbd>down</kbd> | next slide |
+
+---
+layout: image-right
+image: https://cover.sli.dev
+---
+
+# Code
+
+Use code snippets and get the highlighting directly!
+
+```ts
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+---
+layout: center
+class: "text-center"
+---
+
+# Learn More
+
+[Documentation](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)

package/layouts/content-1.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout content-1">
+    <div class="pl-40 my-auto w-full block">
+      <slot/>
+    </div>
+  </div>
+</template>

package/layouts/content-2.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout content-2">
+    <div class="pl-40 my-auto w-full block">
+      <slot/>
+    </div>
+  </div>
+</template>

package/layouts/cover.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout cover">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/end.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout end">
+    <div class="my-auto block">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/fact.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout fact">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/image-side.vue

@@ -0,0 +1,19 @@
+<script setup>
+import {defineProps} from 'vue'
+
+const props = defineProps({
+  image: {
+    type: String,
+  }
+})
+</script>
+<template>
+  <div class="slidev-layout image">
+    <div class="image-contaier">
+      <img class="image-item" :src="props.image">
+    </div>
+    <div class="pl-40 my-auto w-full block">
+      <slot/>
+    </div>
+  </div>
+</template>

package/layouts/intro.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout intro">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/section-1.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout section-1 text-center">
+    <div class="my-auto block">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/section-2.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout section-2 text-center">
+    <div class="my-auto block">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/section.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout section w-full h-full grid">
+    <div class="my-auto text-center">
+      <slot />
+    </div>
+  </div>
+</template>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "slidev-theme-leilei-custom1",
+  "version": "0.0.0",
+  "type": "module",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md --open",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "dependencies": {
+    "@slidev/types": "^52.11.2"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.11.2"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "both",
+    "defaults": {
+      "fonts": {
+        "sans": "Nunito Sans",
+        "mono": "Fira Code"
+      }
+    }
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,11 @@
+import type { ShikiSetupReturn } from '@slidev/types'
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+  }
+})

package/styles/index.ts

@@ -0,0 +1,3 @@
+// inherit from base layouts, remove it to get full customizations
+import '@slidev/client/styles/layouts-base.css'
+import './layout.css'

package/styles/layout.css

@@ -0,0 +1,244 @@
+.slidev-layout {
+
+    @apply h-full grid select-none;
+
+    @apply px-14 py-10 text-[1.1rem];
+
+pre, code {
+    @apply select-text;
+}
+
+h1 {
+    @apply text-6xl mb-4 -ml-[0.05em] font-bold leading-20;
+    font-size: 50px;
+    line-height: 80%;
+    letter-spacing: 0.01em;
+    color:orange
+}
+
+h1 + p {
+    @apply opacity-40 -mt-4 text-2xl;
+}
+
+h5 {
+    @apply text-3xl;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 56px;
+    letter-spacing: -0.02em;
+}
+
+h3 {
+    @apply text-sm pt-2 uppercase tracking-widest font-500 -ml-[0.05em];
+}
+
+h3:not(.opacity-100) {
+    @apply opacity-40;
+}
+
+p {
+    @apply my-4 leading-6;
+}
+
+h1 + p {
+    @apply -mt-2 opacity-50 mb-4;
+}
+
+p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+}
+
+ul {
+    list-style: square;
+}
+
+li {
+    @apply ml-1.1em pl-0.2em leading-1.8em;
+}
+
+blockquote {
+    @apply text-sm px-2 py-1 bg-$prism-background border-primary border-left rounded;
+}
+
+blockquote > * {
+    @apply my-0;
+}
+
+table {
+    @apply w-full;
+}
+
+tr {
+    @apply border-b border-gray-400 border-opacity-20;
+}
+
+th {
+    @apply text-left font-400;
+}
+
+a {
+    @apply border-current border-b border-dashed hover:(text-primary border-solid);
+}
+
+td, th {
+    @apply p-2 py-3;
+}
+
+b, strong {
+    @apply font-600;
+}
+
+kbd {
+    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+    @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-sm font-mono;
+}
+
+}
+
+.slidev-layout.image {
+    background-image: url(../backgrounds/image-1.svg);
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: contain;
+
+.block {
+    max-width: 55%;
+    position: absolute;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    right: 60px;
+    bottom: 60px;
+}
+
+img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+.image-contaier {
+    width: 45%;
+    height: 100%;
+}
+
+}
+.slidev-layout.section-1 {
+    background-image: url(../backgrounds/section-1.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+
+h1 {
+    font-size: 56px;
+}
+
+.block {
+    max-width: 600px;
+    margin: auto auto;
+}
+
+}
+.slidev-layout.end {
+    background-image: url(../backgrounds/end.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+
+.block {
+    max-width: 400px;
+    margin: auto 200px;
+}
+
+}
+.slidev-layout.section-2 {
+    background-image: url(../backgrounds/section-2.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+
+h1 {
+    font-size: 56px;
+}
+
+.block {
+    max-width: 600px;
+    margin: 50px auto;
+}
+
+}
+.slidev-layout.content-1 {
+    background-image: url(../backgrounds/content-1.svg);
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: contain;
+
+h1 {
+    font-size: 56px;
+}
+
+.block {
+    max-width: 827px;
+}
+
+}
+.slidev-layout.content-2 {
+    background-image: url(../backgrounds/content-2.svg);
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: contain;
+
+h1 {
+    font-size: 56px;
+}
+
+.block {
+    max-width: 827px;
+}
+
+}
+.slidev-layout.cover {
+    background-image: url(../backgrounds/cover.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+
+.block {
+    max-width: 60%;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.date {
+    color: rgb(221, 221, 221);
+}
+
+.date {
+    background: #393A34;
+    border-radius: 44px;
+    font-size: 24px;
+    padding: 1px 32px;
+}
+
+.logo {
+    width: 33px;
+    height: 33px;
+    background: #393A34;
+    border-radius: 69px;
+}
+
+.company {
+    font-size: 28px;
+}
+
+.company-block {
+    display: flex;
+}
+
+}
+
+.red{
+  color:rgb(253, 104, 104)
+}