@puzzleitc/slidev-theme-puzzle 1.0.0 → 1.1.1

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "overrides": [
+    {
+      "files": ["example.md"],
+      "options": {
+        "parser": "slidev",
+        "plugins": ["prettier-plugin-slidev"]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @puzzleitc/slidev-theme-puzzle Changelog
+
+# 1.1.1
+
+- Fixed "end" layout horizontal alignment
+
+# 1.1.0
+
+- Improved general styling
+- Added "meet" layout
+
+## 1.0.0
+
+- Initial release with basic styling & "agenda" layout

package/README.md

@@ -1,23 +1,23 @@
 # slidev-theme-puzzle
 
-[![NPM version](https://img.shields.io/npm/v/slidev-theme-puzzle?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-puzzle)
+[![NPM version](https://img.shields.io/npm/v/@puzzleitc/slidev-theme-puzzle?color=3AB9D4&label=)](https://www.npmjs.com/package/@puzzleitc/slidev-theme-puzzle)
 
 A Puzzle ITC theme for [Slidev](https://github.com/slidevjs/slidev).
 
 ![Cover slide](./example-export/1.png)
 
-![Default slide](./example-export/3.png)
+![Default slide](./example-export/6.png)
 
-![Intro slide](./example-export/4.png)
+![Intro slide](./example-export/7.png)
 
-![End slide](./example-export/8.png)
+![End slide](./example-export/11.png)
 
 ## 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>puzzle</b>
+theme: <b>"@puzzleitc/slidev-theme-puzzle"</b>
 ---</code></pre>
 
 Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
@@ -26,10 +26,14 @@ Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-them
 
 This theme provides the following layouts:
 
-- `agenda` for an slide with the table of contents
+- `agenda` for a slide with the table of contents
 
 ![Agenda slide](./example-export/2.png)
 
+- `meet` for a slide to present one or more members
+
+![Agenda slide](./example-export/3.png)
+
 ## Contributing
 
 - `pnpm install`

package/example.md

@@ -5,7 +5,7 @@ layout: cover
 
 # Slidev Theme<br><span class="highlight">Puzzle</span>
 
-Firstname lastname
+Firstname lastname \
 <a href="mailto:email@puzzle.ch">email@puzzle.ch</a>
 
 ---
@@ -20,6 +20,97 @@ layout: agenda
 - Our Services
 - Q&A
 
+---
+layout: meet
+---
+
+# Nice to meet you
+
+::members::
+
+<div>
+  <img src="./images/Tux.png" alt="Daniel Müller">
+
+Daniel Müller
+
+Key Account Manager \
+mueller@puzzle.ch
+
+</div>
+
+<div>
+  <img src="./images/Tux.png" alt="Maria Meier">
+
+Maria Meier
+
+Members Coach \
+meier@puzzle.ch
+
+</div>
+
+<div>
+  <img src="./images/Tux.png" alt="Peter Schmid">
+
+Peter Schmid
+
+Software Engineer, \
+Member of the Technical Board \
+schmid@puzzle.ch
+
+</div>
+
+<!--
+Get member photos here:
+
+https://files.puzzle.ch/apps/files/files/6267463?dir=/ux/Projects/Puzzle/00_Puzzle%20Team/00_Member_Fotos/03_Rund%20fuer%20Praesis/Assets_BG_Unifarbe
+-->
+
+---
+layout: meet
+---
+
+# Nice to meet you
+
+::members::
+
+<div>
+  <img src="./images/Tux.png" alt="Daniel Müller">
+
+Daniel Müller
+
+Key Account Manager \
+mueller@puzzle.ch
+
+</div>
+
+<div>
+  <img src="./images/Tux.png" alt="Maria Meier">
+
+Maria Meier
+
+Members Coach \
+meier@puzzle.ch
+
+</div>
+
+---
+layout: meet
+---
+
+# Nice to meet you
+
+::members::
+
+<div>
+  <img src="./images/Tux.png" alt="Daniel Müller">
+
+Daniel Müller
+
+Key Account Manager \
+mueller@puzzle.ch
+
+</div>
+
 ---
 
 # What is Slidev?

package/layouts/meet.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="slidev-layout meet">
+    <slot />
+    <div class="members">
+      <slot name="members" />
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puzzleitc/slidev-theme-puzzle",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Slidev theme for Puzzle ITC corporate design",
   "type": "module",
   "keywords": [
@@ -11,12 +11,20 @@
   "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.5"
   },
   "devDependencies": {
     "@slidev/cli": "^52.11.5",
-    "playwright-chromium": "^1.58.2"
+    "playwright-chromium": "^1.58.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-slidev": "^1.0.5"
   },
   "//": "Learn more: https://sli.dev/guide/write-theme.html",
   "slidev": {
@@ -24,14 +32,9 @@
     "defaults": {
       "fonts": {
         "sans": "Roboto",
-        "mono": "Fira Code"
+        "mono": "Fira Code",
+        "weights": "200,300,400,600"
       }
     }
-  },
-  "scripts": {
-    "build": "slidev build example.md",
-    "dev": "slidev example.md --open",
-    "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png"
   }
-}
+}

package/styles/layout.css

@@ -13,12 +13,34 @@
   --puzzle-brand7: #69b978; /* Emerald */
   --puzzle-brand8: #61b44b; /* Brilliant Green */
   --puzzle-brand9: #1b2d53; /* Prussian Blue */
+
+  --slidev-font-weight-base: 300;
 }
 
 /* General */
 
+body {
+  font-weight: 300;
+}
+
+.slidev-layout h1,
+.slidev-layout h2,
+.slidev-layout h3,
+.slidev-layout h4 {
+  font-weight: 400;
+}
+
 .slidev-layout h1 {
-  color: #15508b;
+  color: var(--puzzle-brand9);
+}
+
+.slidev-layout h2 {
+  color: var(--puzzle-brand2);
+}
+
+.slidev-layout a {
+  color: var(--puzzle-brand4);
+  border-style: solid;
 }
 
 .slidev-layout.cover,
@@ -71,13 +93,7 @@
   @apply mb-0;
   opacity: 1;
   font-size: 24px;
-  line-height: 1.15;
-}
-
-.slidev-layout.cover h1 + p a {
-  @apply block mt-1;
-  border: 0;
-  font-size: 20px;
+  line-height: 1.25;
 }
 
 /* Layout "intro" */
@@ -107,6 +123,7 @@
   background-position: right bottom;
   background-size: 400px;
   text-align: left !important;
+  place-content: center start !important;
 }
 
 .slidev-layout.end h1 {
@@ -136,12 +153,20 @@
   background-repeat: no-repeat;
   background-position: right bottom;
   background-size: 300px;
-  
+}
+
+.slidev-layout.agenda ol.slidev-toc-list {
+  list-style: disc;
 }
 
 .slidev-layout.agenda h1 {
   font-size: 70px;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.6em;
+}
+
+.slidev-layout.agenda a {
+  color: black;
+  border: 0;
 }
 
 /* Layout "quote" */
@@ -152,3 +177,64 @@
     @apply mt-2;
   }
 }
+
+/* Layout "meet" */
+.slidev-page:has(.slidev-layout.meet) {
+  background: linear-gradient(
+    0deg,
+    var(--puzzle-brand7) 0%,
+    var(--puzzle-brand7) 50%,
+    white 50%
+  );
+  padding: 1rem;
+}
+
+.slidev-layout.meet {
+  background-color: var(--puzzle-brand2);
+  border-radius: 2rem;
+}
+
+.slidev-layout.meet .members {
+  display: flex;
+  align-items: start;
+  justify-content: space-around;
+}
+
+.slidev-layout.meet,
+.slidev-layout.meet h1,
+.slidev-layout.meet a {
+  color: white;
+}
+
+.slidev-layout.meet h1 {
+  font-size: 70px;
+  margin-bottom: 3rem;
+}
+
+.slidev-layout.meet .members > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.slidev-layout.meet .members > div > img {
+  width: 200px;
+  margin-bottom: 1rem;
+  border-radius: 50%;
+}
+
+.slidev-layout.meet .members > div .name,
+.slidev-layout.meet .members > div > p:first-of-type {
+  font-size: 1.5em;
+  margin-bottom: 0;
+}
+
+.slidev-layout.meet .members > div .title,
+.slidev-layout.meet .members > div p:last-of-type {
+  font-size: 1.2em;
+}
+
+.slidev-layout.meet .members > div p:last-of-type a {
+  font-size: 1.1rem;
+}