slidev-theme-neversink 0.2.0 → 0.3.0

package/docs/components/thumb.md

@@ -0,0 +1,37 @@
+# Thumb
+
+## Description
+
+Draws a set of illustration of a hand with a thumb. Useful icon but larger than using the slidev icondes.
+
+## `Thumb` component
+
+The Thumbs component has the following props:
+
+- `dir` (optional) the thumb could point up or down
+- `color` (optional) the color scheme of the thumb. the default is 'white'. The best options tend to be the light colors (e.g., `green-light`, `red-light`, `blue-light`)
+- `width` (optional) the initial width of the image. Default is 140px
+
+```md
+<Thumb color='green-light' width="300px" v-drag />
+```
+
+Renders as:
+
+<Thumb color='green-light' width="300px"/>
+
+```md
+<Thumb color="sky-light"  v-drag />
+```
+
+Renders as:
+
+<Thumb color="sky-light" />
+
+```md
+<Thumb color="red-light" dir='down' v-drag />
+```
+
+Renders as:
+
+<Thumb color="red-light" dir='down'/>

package/docs/components/vdragline.md

@@ -0,0 +1,6 @@
+# VDragLine
+
+## Description
+
+Draws a line using the dragging feature.
+See [VDragArrow](https://sli.dev/builtin/components#vdragarrow) in the main slidev. This uses the same props as the [`Line` component](/components/line).

package/docs/components.md

@@ -18,6 +18,16 @@ The current components are:
 
 - [Email](/components/email) - formats email addresses
 
+- [ArrowDraw](/components/arrowdraw) - draws a hand-drawn looking arrow
+
 - [ArrowHeads](/components/arrowheads) - draws a bunch of arrows pointing at a central place. Useful for drawing attention to a particular part of a slide.
 
+- [Thumb](/components/thumb) - draws a hand with thumb up or down. Useful for signaling agreement or disagreement.
+
+- [Line](/components/line) - draws a straight line (no arrowheads)
+
+- [VDragLine](/components/vdragline) - draws a straight line (no arrowheads), the v-drag version.
+
+- [Box](/components/box) - draws a box or rectangle shape
+
 Most component can just be included in-line in your markdown. However, in some cases it can make sense to position these components using the `v-drag` directive. For example, the `SpeechBubble` component can be positioned using the `v-drag` directive to place it in a specific location on the slide. This can be useful for creating custom layouts or animations. In that case, it makes sense to keep the component in the [default slot](/layouts#slots) of each layout.

package/docs/layouts/side-title.md

@@ -10,11 +10,11 @@ In the conception of this design system, the entire slide is divided into 12 equ
 
 <img src="/layouts/side-title-12row.svg" alt="side-title slide example" width="600" />
 
-For example, if `columns: is-6` is specified in the frontmatter, the title will be allocated 6 units and the main content will be allocated 6 units like this:
+For example, if `titlewidth: is-6` is specified in the frontmatter, the title will be allocated 6 units and the main content will be allocated 6 units like this:
 
 <img src="/layouts/side-title-is-6.svg" alt="side-title slide example" width="600" />
 
-If `columns: is-3` is specified, the title will be allocated 3 units and the content will be allocated 9 units like this:
+If `titlewidth: is-3` is specified, the title will be allocated 3 units and the content will be allocated 9 units like this:
 
 <img src="/layouts/side-title-is-3.svg" alt="side-title slide example" width="600" />
 

package/docs/markdown.md

@@ -20,7 +20,7 @@ Make this **bold** using markdown.
 </div>
 ```
 
-With the new before the markdown text begins.
+with the new line before the markdown text begins.
 
 This is also true around [slots in layouts](/layouts#slots).
 

package/docs/parts/layoutpicker.md

@@ -15,7 +15,7 @@
         </a>
     </div>
     <div class="grid-item grid-col-span-1">
-        <a href="layouts/two-cols-header">
+        <a href="layouts/two-cols-title">
             <img src="/screenshots/8.png" alt="two-col-header slide example" width="300" class="screenshot mb-10 mt-10"/>
         </a>
     </div>

package/docs/styling.md

@@ -37,7 +37,7 @@ If you want to make bullets a little closer together to make spaceadd the `class
 
 Other options are `ns-c-tight` and `ns-c-supertight`.
 
-## V-click faders
+## `v-clicks` faders
 
 If you want to fade out a bullet as you step through, add the `class='ns-c-fader'`
 
@@ -100,6 +100,8 @@ If you write an icon in a link it includes the underline styleing. To remove tha
 }
 ```
 
+Aliases include `ns-c-plainlink` and `ns-c-nounderline`.
+
 ## Grids
 
 This is not a specific `ns-c-` class but a general unocss/tailwind utility for making grids.

package/example.md

@@ -10,10 +10,7 @@ neversink_string: "Neversink Example Deck"
 # Neversink
 
 A [Slidev](https://sli.dev) theme designed by **Todd Gureckis**   
-<div class="iconlink">
-
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
 
 
@@ -89,63 +86,69 @@ The project uses tailwind-like color schemes arranged in ==monochromatic pairs==
 
 **B&W**:
 
+<div class="leading-[1.5em]">
 <span class="text-white bg-black p-1 pl-3 pr-3 m-1 rounded font-size-3">black</span>
-<span class="text-black bg-white border-1 border-solid border-black p1 pl-3 pr-3 m-1 rounded font-size-3">white</span>
-<span class="text-gray-100 bg-gray-800 p1 pl-3 pr-3 m-1 rounded font-size-3">dark</span>
-<span class="text-gray-800 bg-gray-100 p1 pl-3 pr-3 m-1 rounded font-size-3">light</span>
+<span class="text-black bg-white border-1 border-solid border-black p-1 pl-3 pr-3 m-1 rounded font-size-3">white</span>
+<span class="text-gray-100 bg-gray-800 p-1 pl-3 pr-3 m-1 rounded font-size-3">dark</span>
+<span class="text-gray-800 bg-gray-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">light</span>
+
+</div>
 
 **Light**:
 
-<span class="bg-slate-100 text-slate-500 p1 pl-3 pr-3 m-1 rounded font-size-3">slate-light</span>
-<span class="bg-gray-100 text-gray-500 p1 pl-3 pr-3 m-1 rounded font-size-3">gray-light</span>
-<span class="bg-zinc-100 text-zinc-500 p1 pl-3 pr-3 m-1 rounded font-size-3">zinc-light</span>
-<span class="bg-neutral-100 text-neutral-500 p1 pl-3 pr-3 m-1 rounded font-size-3">neutral-light</span>
-<span class="bg-stone-100 text-stone-500 p1 pl-3 pr-3 m-1 rounded font-size-3">stone-light</span>
-<span class="bg-red-100 text-red-500 p1 pl-3 pr-3 m-1 rounded font-size-3">red-light</span>
-<span class="bg-orange-100 text-orange-500 p1 pl-3 pr-3 m-1 rounded font-size-3">orange-light</span>
-<span class="bg-amber-100 text-amber-500 p1 pl-3 pr-3 m-1 rounded font-size-3">amber-light</span>
-<span class="bg-yellow-100 text-yellow-500 p1 pl-3 pr-3 m-1 rounded font-size-3">yellow-light</span><br />
-<span class="bg-lime-100 text-lime-500 p1 pl-3 pr-3 m-1 rounded font-size-3">lime-light</span>
-<span class="bg-green-100 text-green-500 p1 pl-3 pr-3 m-1 rounded font-size-3">green-light</span>
-<span class="bg-emerald-100 text-emerald-500 p1 pl-3 pr-3 m-1 rounded font-size-3">emerald-light</span>
-<span class="bg-teal-100 text-teal-500 p1 pl-3 pr-3 m-1 rounded font-size-3">teal-light</span>
-<span class="bg-cyan-100 text-cyan-500 p1 pl-3 pr-3 m-1 rounded font-size-3">cyan-light</span>
-<span class="bg-sky-100 text-sky-500 p1 pl-3 pr-3 m-1 rounded font-size-3">sky-light</span>
-<span class="bg-blue-100 text-blue-500 p1 pl-3 pr-3 m-1 rounded font-size-3">blue-light</span>
-<span class="bg-indigo-100 text-indigo-500 p1 pl-3 pr-3 m-1 rounded font-size-3">indigo-light</span>
-<span class="bg-violet-100 text-violet-500 p1 pl-3 pr-3 m-1 rounded font-size-3">violet-light</span><br />
-<span class="bg-purple-100 text-purple-500 p1 pl-3 pr-3 m-1 rounded font-size-3">purple-light</span>
-<span class="bg-pink-100 text-pink-500 p1 pl-3 pr-3 m-1 rounded font-size-3">pink-light</span>
-<span class="bg-rose-100 text-rose-500 p1 pl-3 pr-3 m-1 rounded font-size-3">rose-light</span>
-<span class="bg-fuchsia-100 text-fuchsia-500 p1 pl-3 pr-3 m-1 rounded font-size-3">fuchsia-light</span>
-<span class="bg-gray-50 text-navy-900 p1 pl-3 pr-3 m-1 rounded font-size-3">navy-light</span>
+<div class="leading-[1.5em]">
+<span class="bg-slate-100 text-slate-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">slate-light</span>
+<span class="bg-gray-100 text-gray-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">gray-light</span>
+<span class="bg-zinc-100 text-zinc-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">zinc-light</span>
+<span class="bg-neutral-100 text-neutral-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">neutral-light</span>
+<span class="bg-stone-100 text-stone-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">stone-light</span>
+<span class="bg-red-100 text-red-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">red-light</span>
+<span class="bg-orange-100 text-orange-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">orange-light</span>
+<span class="bg-amber-100 text-amber-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">amber-light</span>
+<span class="bg-yellow-100 text-yellow-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">yellow-light</span><br />
+<span class="bg-lime-100 text-lime-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">lime-light</span>
+<span class="bg-green-100 text-green-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">green-light</span>
+<span class="bg-emerald-100 text-emerald-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">emerald-light</span>
+<span class="bg-teal-100 text-teal-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">teal-light</span>
+<span class="bg-cyan-100 text-cyan-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">cyan-light</span>
+<span class="bg-sky-100 text-sky-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">sky-light</span>
+<span class="bg-blue-100 text-blue-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">blue-light</span>
+<span class="bg-indigo-100 text-indigo-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">indigo-light</span>
+<span class="bg-violet-100 text-violet-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">violet-light</span><br />
+<span class="bg-purple-100 text-purple-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">purple-light</span>
+<span class="bg-pink-100 text-pink-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">pink-light</span>
+<span class="bg-rose-100 text-rose-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">rose-light</span>
+<span class="bg-fuchsia-100 text-fuchsia-500 p-1 pl-3 pr-3 m-1 rounded font-size-3">fuchsia-light</span>
+<span class="bg-gray-50 text-navy-900 p-1 pl-3 pr-3 m-1 rounded font-size-3">navy-light</span>
+</div>
 
 **Regular**:
 
-<span class="bg-slate-500 text-slate-100 p1 pl-3 pr-3 m-1 rounded font-size-3">slate</span>
-<span class="bg-gray-500 text-gray-100 p1 pl-3 pr-3 m-1 rounded font-size-3">gray</span>
-<span class="bg-zinc-500 text-zinc-100 p1 pl-3 pr-3 m-1 rounded font-size-3">zinc</span>
-<span class="bg-neutral-500 text-neutral-100 p1 pl-3 pr-3 m-1 rounded font-size-3">neutral</span>
-<span class="bg-stone-500 text-stone-100 p1 pl-3 pr-3 m-1 rounded font-size-3">stone</span>
-<span class="bg-red-500 text-red-100 p1 pl-3 pr-3 m-1 rounded font-size-3">red</span>
-<span class="bg-orange-500 text-orange-100 p1 pl-3 pr-3 m-1 rounded  font-size-3">orange</span>
-<span class="bg-amber-500 text-amber-100 p1 pl-3 pr-3 m-1 rounded font-size-3">amber</span>
-<span class="bg-yellow-500 text-yellow-100 p1 pl-3 pr-3 m-1 rounded font-size-3">yellow</span>
-<span class="bg-lime-500 text-lime-100 p1 pl-3 pr-3 m-1 rounded font-size-3">lime</span>
-<span class="bg-green-500 text-green-100 p1 pl-3 pr-3 m-1 rounded font-size-3">green</span>
-<span class="bg-emerald-500 text-emerald-100 p1 pl-3 pr-3 m-1 rounded font-size-3">emerald</span>
-<span class="bg-teal-500 text-teal-100 p1 pl-3 pr-3 m-1 rounded font-size-3">teal</span>
-<span class="bg-cyan-500 text-cyan-100 p1 pl-3 pr-3 m-1 rounded font-size-3">cyan</span><br/>
-<span class="text-gray-300 bg-navy-900 p1 pl-3 pr-3 m-1 rounded font-size-3">navy</span>
-<span class="bg-sky-500 text-sky-100 p1 pl-3 pr-3 m-1 rounded font-size-3">sky</span>
-<span class="bg-blue-500 text-blue-100 p1 pl-3 pr-3 m-1 rounded font-size-3">blue</span>
-<span class="bg-indigo-500 text-indigo-100 p1 pl-3 pr-3 m-1 rounded font-size-3">indigo</span>
-<span class="bg-violet-500 text-violet-100 p1 pl-3 pr-3 m-1 rounded font-size-3">violet</span>
-<span class="bg-purple-500 text-purple-100 p1 pl-3 pr-3 m-1 rounded font-size-3">purple</span>
-<span class="bg-pink-500 text-pink-100 p1 pl-3 pr-3 m-1 rounded font-size-3">pink</span>
-<span class="bg-rose-500 text-rose-100 p1 pl-3 pr-3 m-1 rounded font-size-3">rose</span>
-<span class="bg-fuchsia-500 text-fuchsia-100 p1 pl-3 pr-3 m-1 rounded font-size-3">fuchsia</span>
-
+<div class="leading-[1.5em]">
+<span class="bg-slate-500 text-slate-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">slate</span>
+<span class="bg-gray-500 text-gray-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">gray</span>
+<span class="bg-zinc-500 text-zinc-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">zinc</span>
+<span class="bg-neutral-500 text-neutral-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">neutral</span>
+<span class="bg-stone-500 text-stone-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">stone</span>
+<span class="bg-red-500 text-red-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">red</span>
+<span class="bg-orange-500 text-orange-100 p-1 pl-3 pr-3 m-1 rounded  font-size-3">orange</span>
+<span class="bg-amber-500 text-amber-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">amber</span>
+<span class="bg-yellow-500 text-yellow-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">yellow</span>
+<span class="bg-lime-500 text-lime-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">lime</span>
+<span class="bg-green-500 text-green-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">green</span>
+<span class="bg-emerald-500 text-emerald-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">emerald</span>
+<span class="bg-teal-500 text-teal-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">teal</span>
+<span class="bg-cyan-500 text-cyan-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">cyan</span><br/>
+<span class="text-gray-300 bg-navy-900 p-1 pl-3 pr-3 m-1 rounded font-size-3">navy</span>
+<span class="bg-sky-500 text-sky-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">sky</span>
+<span class="bg-blue-500 text-blue-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">blue</span>
+<span class="bg-indigo-500 text-indigo-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">indigo</span>
+<span class="bg-violet-500 text-violet-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">violet</span>
+<span class="bg-purple-500 text-purple-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">purple</span>
+<span class="bg-pink-500 text-pink-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">pink</span>
+<span class="bg-rose-500 text-rose-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">rose</span>
+<span class="bg-fuchsia-500 text-fuchsia-100 p-1 pl-3 pr-3 m-1 rounded font-size-3">fuchsia</span>
+</div>
 
 ---
 layout: default
@@ -342,10 +345,7 @@ layout: cover
 # This is the `cover` layout
 
 **Todd Gureckis**   
-<div class="iconlink">
-
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
 :: note ::
 
@@ -364,10 +364,7 @@ color: dark
 # This is the `cover` layout
 
 **Todd Gureckis**   
-<div class="iconlink">
-
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
 :: note ::
 
@@ -386,14 +383,12 @@ color: amber
 # This is the `cover` layout
 
 **Todd Gureckis**   
-<div class="iconlink">
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
 
 :: note ::
 
-<div class="fw-200" >
+<div class="fw-200">
 
 \* Here we set `color: amber` in the frontmatter.
 
@@ -408,10 +403,8 @@ color: amber-light
 # This is the `cover` layout
 
 **Todd Gureckis**   
-<div class="iconlink">
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
 
 :: note ::
 
@@ -430,10 +423,8 @@ color: pink
 ### This is the `cover` layout with a longer title for your talk you just use more `#`s
 
 **Todd Gureckis**   
-<div class="iconlink">
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
 
 :: note ::
 
@@ -452,10 +443,8 @@ color: emerald-light
 # This is the `intro` layout
 
 **Todd Gureckis**   
-<div class="iconlink">
+_New York University_ <a href="https://todd.gureckislab.org" class="ns-c-iconlink"><mdi-open-in-new /></a>  
 
-_New York University_ <a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>  
-</div>
 
 <br />
 
@@ -560,7 +549,7 @@ layout: section
 color: navy
 ---
 
-<div class="w-1/2 ml-30">
+<div class="w-2/3 ml-30">
 
 # The `section` layout
 <hr>
@@ -1066,6 +1055,7 @@ title: Top Title (Another)
 
 # `top-title`: A variation with different parameters
 
+
 :: content ::
 
 Todd has used this navy color on many projects in the past. This is a top title layout.
@@ -1294,6 +1284,16 @@ Result:
 <QRCode value="https://gureckislab.org" :size="200" render-as='svg'/>
 
 
+
+---
+layout: default
+title: Lines
+---
+
+# Lines
+
+<Line :x1=0 :y1=0 :x2=200 :y2=200 :width=2 color='red-400' v-drag="[326,136,250,250]" />
+
 ---
 layout: side-title
 side: left

package/layoutHelper.ts

@@ -1,4 +1,41 @@
 import type { CSSProperties } from 'vue'
+import { colors } from '@unocss/preset-mini'
+
+export function resolveColor(colorName: string, defaultColor: string = '#000000'): string {
+  // If the input is already a hex code, return it
+  if (/^#([0-9A-F]{3}){1,2}$/i.test(colorName)) {
+    return colorName
+  }
+
+  // Split the color name into base and shade
+  const [baseColor, shade] = colorName.toLowerCase().split('-')
+
+  // Function to find the color in the colors object
+  function findColor(obj: any, base: string, shade?: string): string | null {
+    if (base in obj) {
+      if (shade && typeof obj[base] === 'object' && shade in obj[base]) {
+        return obj[base][shade]
+      } else if (!shade && typeof obj[base] === 'string') {
+        return obj[base]
+      }
+    }
+
+    for (const value of Object.values(obj)) {
+      if (typeof value === 'object' && value !== null) {
+        const result = findColor(value, base, shade)
+        if (result) return result
+      }
+    }
+
+    return null
+  }
+
+  // Search for the color in the UnoCSS colors object
+  const hexCode = findColor(colors, baseColor, shade)
+
+  // If a valid color is found, return its hex code; otherwise, return the default color
+  return hexCode || defaultColor
+}
 
 /**
  * Resolve urls from frontmatter and append with the base url

package/layouts/section.vue

@@ -38,7 +38,7 @@ const colorscheme = computed(() => {
 .slidev-layout.section h1 {
   font-family: var(--neversink-title-font);
   font-weight: 500;
-  font-size: 1.8em;
+  font-size: 2.8em;
   padding-bottom: 0.3rem;
   line-height: normal;
 }
@@ -47,12 +47,14 @@ const colorscheme = computed(() => {
   font-family: var(--neversink-title-font);
   font-weight: 500;
   font-size: 2.5em;
+  line-height: normal;
 }
 
 .slidev-layout.section h3 {
   font-family: var(--neversink-title-font);
   font-weight: 500;
   font-size: 1.9em;
+  line-height: normal;
 }
 
 .slidev-layout.section {

package/layouts/side-title.vue

@@ -83,7 +83,7 @@ const colorscheme = computed(() => {
 
     <p>The <code>color</code> parameter determines color of the title.</p>
   </div>
-  <template v-else>
+  <div class="h-full" v-else>
     <div v-if="side === 'left'" class="flex h-full w-full">
       <div class="slidecolor column-title" :class="colorscheme">
         <div class="slidev-layout sidetitle w-full p-6" :class="alignment.l"><slot name="title" /></div>
@@ -106,7 +106,7 @@ const colorscheme = computed(() => {
         <div class="slidev-layout sidetitle w-full p-6" :class="alignment.r"><slot name="title" /></div>
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style>

package/layouts/top-title-two-cols.vue

@@ -62,11 +62,11 @@ const colorscheme = computed(() => {
   <template v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
-        <div class="slidev-layout toptitlebar p-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment.t">
+        <div class="slidev-layout toptitle title p-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment.t">
           <slot name="title" />
         </div>
       </div>
-      <div class="slidev-layout toptitlecontent w-full">
+      <div class="slidev-layout toptitle content w-full">
         <div class="flex flex-row h-full w-full">
           <div class="col-left" :class="alignment.l">
             <slot name="left" />
@@ -84,14 +84,14 @@ const colorscheme = computed(() => {
 </template>
 
 <style>
-.slidev-layout.toptitlecontent {
+.slidev-layout.toptitle .content {
   padding-top: 1.3rem;
 }
 
-.slidev-layout.toptitlecontent h1 + ul {
+.slidev-layout.toptitle .content h1 + ul {
   margin-top: 0em;
 }
-.slidev-layout.toptitlecontent h2 + ul {
+.slidev-layout.toptitle .content h2 + ul {
   margin-top: 0em;
 }
 
@@ -110,59 +110,63 @@ li li {
   margin-bottom: 0rem;
 }
 
-.slidev-layout.toptitlecontent h2 {
+.slidev-layout.toptitle .content h2 {
   font-size: 1.4em;
   font-family: var(--neversink-title-font);
   font-weight: 500;
   margin-bottom: 0rem;
 }
 
-.slidev-layout.toptitlecontent h3 {
+.slidev-layout.toptitle .content h3 {
   font-size: 1.1em;
   font-family: var(--neversink-title-font);
   font-weight: 500;
   margin-bottom: 0rem;
 }
 
-.toptitlebar {
+.slidev-layout .toptitle .title {
   padding: 0;
   margin: 0;
   margin-left: 20px;
   margin-right: 20px;
 }
 
-.slidev-layout.toptitle h1 {
+.slidev-layout.toptitle.title h1 {
   font-size: 1.8em;
   font-family: var(--neversink-title-font);
   font-weight: 500;
-  padding-left: 25px;
   letter-spacing: 0.07em;
 }
 
-.slidev-layout.toptitle h2 {
+.slidev-layout.toptitle.title h2 {
   font-size: 1.5em;
   font-family: var(--neversink-title-font);
   font-weight: 300;
-  padding-left: 25px;
   letter-spacing: 0.07em;
 }
 
-.slidev-layout.toptitle h3 {
+.slidev-layout.toptitle.title h3 {
   font-size: 1.1em;
   font-family: var(--neversink-title-font);
   font-weight: 300;
-  padding-left: 25px;
   letter-spacing: 0.07em;
 }
+
+.slidev-layout.toptitle.title h1 + p,
+.slidev-layout.toptitle.title h2 + p,
+.slidev-layout.toptitle.title h3 + p {
+  margin-top: 0.85em;
+  margin-bottom: 0.3em;
+}
 </style>
 
 <style scoped>
-.slidev-layout.toptitlecontent .col-left {
+.slidev-layout.toptitle.content .col-left {
   flex: v-bind(colwidth.l); /* Makes each column take up equal space */
   margin-right: 15px;
 }
 
-.slidev-layout.toptitlecontent .col-right {
+.slidev-layout.toptitle.content .col-right {
   flex: v-bind(colwidth.r); /*Makes each column take up equal space */
   margin-left: 15px;
 }

package/layouts/top-title.vue

@@ -44,11 +44,11 @@ const colorscheme = computed(() => {
   <template v-else>
     <div class="flex flex-col h-full w-full">
       <div class="w-full h-fit min-h-13 pt-2 pb-2 slidecolor" :class="colorscheme">
-        <div class="slidev-layout toptitlebar p-0 pt-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment">
+        <div class="slidev-layout toptitle title p-0 pt-0 ml-6 mr-6 mt-auto mb-auto" :class="alignment">
           <slot name="title" />
         </div>
       </div>
-      <div class="slidev-layout toptitlecontent h-fit w-full">
+      <div class="slidev-layout toptitle content h-fit w-full">
         <slot name="content" />
       </div>
       <div v-if="$slots.default" class="slidev-layout default h-fit w-full">

package/layouts/two-cols-title.vue

@@ -130,8 +130,12 @@ const flexclass = computed(() => {
 }
 
 .slidev-layout.two-cols-header .title h1 + p,
-.slidev-layout.two-cols-footer .title h1 + p {
-  margin-top: 0.2em;
+.slidev-layout.two-cols-footer .title h1 + p,
+.slidev-layout.two-cols-header .title h2 + p,
+.slidev-layout.two-cols-footer .title h2 + p,
+.slidev-layout.two-cols-header .title h3 + p,
+.slidev-layout.two-cols-footer .title h3 + p {
+  margin-top: 0.1em;
   margin-bottom: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-neversink",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "gureckis",
   "type": "module",
   "keywords": [
@@ -39,7 +39,8 @@
     "pnpm": "^9.4.0",
     "vitepress": "^1.2.3",
     "@slidev/cli": "^0.49.16",
-    "playwright-chromium": "^1.45.0"
+    "playwright-chromium": "^1.45.0",
+    "bumpp": "^9.4.1"
   },
   "scripts": {
     "build": "slidev build example.md -o docs/public/example --base /slidev-theme-neversink/example/",
@@ -50,6 +51,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "ci:publish": "pnpm publish --access public --no-git-checks"
+    "ci:publish": "pnpm publish --access public --no-git-checks",
+    "release": "bumpp package.json"
   }
 }

package/styles/base.css

@@ -17,7 +17,6 @@
 #page-root {
   font-family: var(--neversink-main-font);
   font-weight: 400;
-  letter-spacing: 0.015rem;
 }
 
 /* binds variable to the color of a slide*/
@@ -27,7 +26,7 @@
 }
 
 .slidev-layout p {
-  line-height: normal;
+  line-height: relaxed;
 }
 /* adjust default bullets */
 .slidev-layout li {