slidev-theme-neversink 0.0.3 → 0.1.1

package/components/ArrowHeads.vue

@@ -0,0 +1,6 @@
+<script setup>
+import imgUrl from '../assets/arrowheads.png'
+</script>
+<template>
+  <img :src="imgUrl" alt="Arrowhead" class="w-30" />
+</template>

package/components/Email.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  v: {
+    default: 'null@null.com',
+  },
+})
+</script>
+
+<template>
+  <div class="ns-c-email text-0.85rem text-gray-700 mt-0 tracking-wide leading-none ns-c-iconlink">
+    {{ props.v }} <a href="mailto:" class=""><mdi-email /></a>
+  </div>
+</template>
+
+<style>
+.ns-c-email {
+  font-family: var(--neversink-font-mono);
+  font-weight: 300;
+  letter-spacing: 0.09em;
+}
+</style>

package/docs/.vitepress/config.js

@@ -2,11 +2,12 @@ import { defineConfig } from 'vitepress'
 import Unocss from 'unocss/vite'
 import { sub } from '@mdit/plugin-sub'
 import Mark from 'markdown-it-mark'
+import { version } from '../../package.json'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Slidev Theme Neversink',
-  description: 'An education/academia oriented Slidev theme with whimsical elements',
+  description: 'An education/academic oriented Slidev theme',
   base: '/slidev-theme-neversink/',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -14,6 +15,10 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'Getting started', link: '/getting-started' },
       { text: 'Example Deck', link: 'https://gureckis.github.io/slidev-theme-neversink/example/#1', target: '_self' },
+      {
+        text: `v${version}`,
+        items: [{ text: 'Release Notes', link: 'https://github.com/gureckis/slidev-theme-neversink/releases' }],
+      },
     ],
 
     sidebar: [
@@ -23,6 +28,7 @@ export default defineConfig({
           { text: 'Getting Started', link: '/getting-started' },
           { text: 'Markdown Features', link: '/markdown' },
           { text: 'Colors Schemes', link: '/colors' },
+          { text: 'Styling', link: '/styling' },
           { text: 'Branding', link: '/branding' },
           {
             text: 'Layouts',
@@ -48,11 +54,13 @@ export default defineConfig({
             items: [
               { text: 'Overview', link: '/components' },
               { text: 'Admonitions', link: '/components/admonitions' },
+              { text: 'Email', link: '/components/email' },
               { text: 'SpeechBubble', link: '/components/speechbubble' },
               { text: 'StickyNote', link: '/components/stickynote' },
               { text: 'CreditScroll', link: '/components/creditscroll' },
               { text: 'QRCode', link: '/components/qrcode' },
               { text: 'Kawaii', link: '/components/kawaii' },
+              { text: 'ArrowHeads', link: '/components/arrowheads' },
             ],
           },
           { text: 'Customizing', link: '/customizing' },
@@ -61,7 +69,7 @@ export default defineConfig({
       },
     ],
 
-    socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/gureckis/slidev-theme-neversink' }],
   },
   markdown: {
     config: (md) => {

package/docs/.vitepress/theme/style.css

@@ -109,8 +109,11 @@ mark {
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-home-hero-name-color: black;
+  --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
 }
 
 @media (min-width: 640px) {

package/docs/components/arrowheads.md

@@ -0,0 +1,15 @@
+# ArrowHeads
+
+## Description
+
+Draws a set of hand drawn arrows that point to a central location. Useful to call attention to a particular element on a slide.
+
+## `ArrowHeads` component
+
+```md
+<ArrowHeads v-drag />
+```
+
+Renders as:
+
+<img src="/screenshots/arrowheads.png" alt="ArrowHeads component" width="200px" />

package/docs/components/email.md

@@ -0,0 +1,19 @@
+# Email
+
+## Description
+
+Email is a quick way to format a email addres. In add a `mailto:` link and an icon.
+
+## `Email` component
+
+The `Email` component formats a email address on (usually) title slides
+
+- `v` (required). The email address
+
+```md
+<Email v="todd.gureckis@nyu.edu" />
+```
+
+Renders as:
+
+<img src="/screenshots/email.png" alt="ArrowHeads component" width="200px" />

package/docs/components.md

@@ -16,4 +16,8 @@ The current components are:
 
 - [Kawaii](/components/kawaii) - Modification of select [Vue Kawaii](https://github.com/youngtailors/vue-kawaii) figures that add cute characters to slides.
 
+- [Email](/components/email) - formats email addresses
+
+- [ArrowHeads](/components/arrowheads) - draws a bunch of arrows pointing at a central place. Useful for drawing attention to a particular part of a slide.
+
 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/customizing.md

@@ -7,7 +7,7 @@ Generally you can customize this theme following the recommendations of [Slidev]
 To add custom CSS styles to your project simply create a folder in the same files as your slide markdown file (usually `slides.md`) called `styles`.
 
 ```sh
-your-slidev/
+your-presentation-folder/
   ├── slides.md
   └── styles/
       ├── index.ts
@@ -32,7 +32,7 @@ To customize the fonts used in the theme, you can set the following CSS variable
 :root {
   --neversink-title-font: 'Inter', sans-serif;
   --neversink-main-font: 'Inter', sans-serif;
-  --neversink-mono-font: 'Inter', monospace;
-  --neversink-quote-font: 'Fire Code', monospace;
+  --neversink-mono-font: 'Fira Code', monospace;
+  --neversink-quote-font: 'Fira Code', monospace;
 }
 ```

package/docs/getting-started.md

@@ -1,12 +1,14 @@
 # Getting started with Neversink
 
-The theme depends on Slidev. So you need to have that [installed first](https://sli.dev/guide/install). Then you can install the theme with npm:
+The theme depends on Node.js and [Slidev](https://sli.dev). If you don't have Node.js installed, you can download it from [nodejs.org](https://nodejs.org/). Once you have Node.js installed, you can create a new Slidev project with the Neversink theme by running the following command:
 
 ```bash
-npm install slidev-theme-neversink
+npm init slidev@latest
 ```
 
-Then create a slidev markdown file (e.g., `slides.md`) and add the theme to the frontmatter of your first slide:
+Then answer the sequence of questions. When it asks for the theme select `neversink`.
+
+Alternatively if you already have installed Slidev globally you can just create a slidev markdown file (e.g., `slides.md`) and add the theme to the frontmatter of your first slide:
 
 ```md
 ---
@@ -23,6 +25,7 @@ If you are new to Slidev highly recommend you check out the [Slidev documentatio
 - [Markdown features](markdown.md) - special addons to the Slidev markdown syntax
 - [Color schemes](colors.md) - the color schemes available in Neversink
 - [Branding](branding.md) - how to customize the theme to your brand/logos
+- [Styling](styling.md) - the custom CSS classes available in Neversink
 - [Custom layouts](layouts.md) - the custom slide layouts available in Neversink
 - [Components](components.md) - the custom components such as sticky notes and admonitions
 - [Customizing](customizing.md) - how to customize the theme with your own CSS/fonts, etc...

package/docs/index.md

@@ -3,7 +3,8 @@
 layout: home
 
 hero:
-  name: 'Neversink'
+  name: ''
+  text: 'Neversink'
   tagline: An education/academic Slidev theme
   actions:
     - theme: brand

package/docs/markdown.md

@@ -50,38 +50,3 @@ This is my ==highlighted text==.
 ```
 
 Using the `==` syntax. Like ==this==.
-
-## Icon link
-
-Drops the underline styling from icons.
-
-```
-<a href="https://todd.gureckislab.org" class="iconlink"><mdi-open-in-new /></a>
-```
-
-## Tight bullets
-
-If you want to make bullets a little closer together to make spaceadd the `class='tight'`
-
-```md
-<div class="tight">
-
-- Hi
-- There
-- I need space
-</div>
-```
-
-## V-click faders
-
-If you want to fade out a bullet as you step through, add the `class='fader'`
-
-```md
-<v-clicks at="+0" class="fader">
-
-- This one appears immediately on slide load
-- This is a second click
-- This is a third click
-
-</v-clicks>
-```

package/docs/styling.md

@@ -0,0 +1,179 @@
+# Styling
+
+In addition to [layouts](/layouts) and [components](/components), **Neversink** also
+provides some helpful CSS classes to help with common slide formatting tasks.
+
+These are included in `styles/neversink.css`. Each class in this file begins with `ns-c-` to indicate that it is a Neversink class.
+
+## Colors
+
+In addition to the main color [schemes](/colors) there are some additional short hand classes you can use in your slides content.
+
+| Alias                  | Equivalent                     |
+| ---------------------- | ------------------------------ |
+| `ns-c-bk-scheme`       | `neversink-black-scheme`       |
+| `ns-c-wh-scheme`       | `neversink-white-scheme`       |
+| `ns-c-dk-scheme`       | `neversink-dark-scheme`        |
+| `ns-c-lt-scheme`       | `neversink-light-scheme`       |
+| `ns-c-nv-scheme`       | `neversink-navy-scheme`        |
+| `ns-c-nv-lt-scheme`    | `neversink-navy-light-scheme`  |
+| `ns-c-COLOR-scheme`    | `neversink-COLOR-scheme`       |
+| `ns-c-COLOR-lt-scheme` | `neversink-COLOR-light-scheme` |
+
+where color can be any of the [colors](/colors) in the project.
+
+## Tight bullets
+
+If you want to make bullets a little closer together to make spaceadd the `class='ns-c-tight'`
+
+```md
+<div class="ns-c-tight">
+
+- Hi
+- There
+- I need space
+</div>
+```
+
+Other options are `ns-c-tight` and `ns-c-supertight`.
+
+## V-click faders
+
+If you want to fade out a bullet as you step through, add the `class='ns-c-fader'`
+
+```md
+<v-clicks at="+0" class="ns-c-fader">
+
+- This one appears immediately on slide load
+- This is a second click
+- This is a third click
+
+</v-clicks>
+```
+
+## References
+
+Including references often you want to include them but have them fade a bit relative to the main content of the tslide for this `ns-c-cite` is useful as it
+applies a smaller, italic, and gray color to the text.
+
+```css
+.ns-c-cite {
+  font-size: 0.75em;
+  font-style: italic;
+  @apply text-gray-400;
+}
+```
+
+To position the cittion on the bottom left of the slide add `ns-c-cite-bl` for `bottom-left`.
+
+```css
+.ns-c-cite-bl {
+  text-align: left;
+  margin-bottom: 0.85em;
+  margin-left: 1.5em;
+  margin-top: auto;
+}
+```
+
+## Quote
+
+For quotes that appear outside the context of a [quote layout](/layouts/quote) you can use `ns-c-quote` to apply a larger font size and italic style.
+
+```css
+.ns-c-quote {
+  font-family: var(--neversink-quote-font);
+  font-weight: 300;
+  @apply leading-relaxed;
+}
+```
+
+## Icon links
+
+If you write an icon in a link it includes the underline styleing. To remove that use
+`ns-c-iconlink`.
+
+```css
+/* for links that are icons.  removes underlining which is default for links in markdown parser */
+.ns-c-iconlink a {
+  border-style: none !important;
+  border-bottom: none !important;
+}
+```
+
+## Grids
+
+This is not a specific `ns-c-` class but a general unocss/tailwind utility for making grids.
+
+```html
+<div class="grid grid-cols-2 gap-4  w-full">
+  <div class="grid-item grid-span-1 center">Row 1, Col 1</div>
+  <div class="grid-item grid-span-1 center">Row 1, Col 2</div>
+  <div class="grid-item grid-span-1 center">Row 2, Col 1</div>
+  <div class="grid-item grid-span-1 center">Row 2, Col 2</div>
+</div>
+```
+
+### For putting images in grids
+
+If you want to put images in a grid and have them fill the space you can use the `ns-c-imgtile` class.
+
+```css
+.ns-c-imgtile img {
+  width: 100%;
+  height: fit-content;
+  object-fit: cover;
+}
+```
+
+then you use it like this:
+
+```html
+<div class="grid grid-cols-2 gap-4  w-full">
+  <div class="grid-item grid-span-1 center"><img src="/images/img1.jpg" /></div>
+  <div class="grid-item grid-span-1 center"><img src="/images/img2.jpg" /></div>
+  <div class="grid-item grid-span-1 center"><img src="/images/img3.jpg" /></div>
+  <div class="grid-item grid-span-1 center"><img src="/images/img4.jpg" /></div>
+</div>
+```
+
+## Columns
+
+To make side by side columns use a flex box with `flex-wrap` and `w-1/X` where X is the proportion you want to give to each column.
+
+```html
+<div class="flex flex-wrap ">
+  <div class="w-1/5">Hit wall</div>
+  <div class="w-1/5">Hit wall and goes on floor</div>
+  <div class="w-1/5">Hit wall and goes in bucket</div>
+  <div class="w-1/5">Misses wall</div>
+  <div class="w-1/5">Hit bucket and then hits walls</div>
+</div>
+```
+
+To add a border
+
+```html
+<div class="flex flex-wrap ">
+  <div class="w-1/5 border-1 border-r-0">Hit wall</div>
+  <div class="w-1/5 border-1 border-r-0">Hit wall and goes on floor</div>
+  <div class="w-1/5 border-1 border-r-0">Hit wall and goes in bucket</div>
+  <div class="w-1/5 border-1 border-r-0">Misses wall</div>
+  <div class="w-1/5 border-1">Hit bucket and then hits walls</div>
+</div>
+```
+
+## Borders
+
+I forgot why i made this utility
+
+```css
+.ns-c-border {
+  border-left: 0.25em solid var(--neversink-text-color);
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+```

package/example.md

@@ -289,7 +289,7 @@ align: lt
 The available layouts in **Neversink** currently are:  
 
 
-<div class="tight">
+<div class="ns-c-tight">
 
 <div class='flex flex-wrap'>
 
@@ -478,9 +478,9 @@ Of course you can make bullet lists:
 - Hi
 - There
 
-Also there's a little helper class you can add to make the bullet spacing a bit tighter:
+Also there's a little helper class `ns-c-tight` you can add to make the bullet spacing a bit tighter:
 
-<div class="tight">
+<div class="ns-c-tight">
 
 - Hi
 - There
@@ -574,16 +574,12 @@ You can use HTML and inline CSS to modify the look and feel.
 ---
 layout: quote
 color: sky-light
-quote: "This is a quote slide.  It has a frontmatter option of `quote` which is the text that appears in the quote box and `author` and options for the size of the text(`quotesize: text2xl` and `authorsize: text-l`).  I feel it is a little uninspired but might save you some time."
+quotesize: text-sm
+authorsize: text-sm
 author: "Todd Gureckis"
 ---
 
-
----
-layout: quote
-color: amber-light
----
-
+"This is a quote slide.  It has a frontmatter option of `quote` which is the text that appears in the quote box and `author` and options for the size of the text(`quotesize: text-2xl` and `authorsize: text-l`).  I feel it is a little uninspired but might save you some time."
 
 
 
@@ -625,7 +621,7 @@ I'm v-dragged out and ==floating==.
 
 <IceCream :size="150" mood="lovestruck" color="#FDA7DC" v-drag="[439,341,85,150]" />
 
-<div class="tight" v-drag="[143,33,277,214]">
+<div class="ns-c-tight" v-drag="[143,33,277,214]">
 
 <span class="bg-red-100 text-red-600 p-2 border-l-6 border-2 border-red-200 rounded-lg pl-4 pr-4">Here's a list of somethings</span>
 
@@ -638,7 +634,7 @@ I'm v-dragged out and ==floating==.
 
 </div>
 
-<div class="tight" v-drag="[461,63,293,148,17]">
+<div class="ns-c-tight" v-drag="[461,63,293,148,17]">
 
 <span class="bg-emerald-100 text-emerald-500 p-2 border-l-6 border-2 border-emerald-200 rounded-lg pl-4 pr-4">Here's another list of things</span>
 
@@ -1116,7 +1112,7 @@ layout: default
 
 In addition to these custom layouts, the **Neversink** theme includes a few custom components that can be used in your slides. These include sticky notes, speech bubbles, cute icons, QR codes, and more.  The next few slides walks through them:
 
-<div class="tight">
+<div class="ns-c-tight">
 
 - admonitions
 - sticky notes

package/layouts/cover.vue

@@ -20,10 +20,10 @@ const colorscheme = computed(() => {
 
 <template>
   <div class="slidev-layout cover h-full slidecolor" :class="colorscheme">
-    <div class="my-auto w-full">
+    <div class="myauto w-full">
       <slot />
     </div>
-    <div class="absolute bottom-10">
+    <div class="note absolute bottom-3">
       <slot name="note" />
     </div>
   </div>
@@ -34,19 +34,36 @@ const colorscheme = computed(() => {
 
 .slidev-layout.cover {
   font-family: var(--neversink-main-font);
+
   font-weight: 300;
 }
 
+.slidev-layout.cover {
+  margin-bottom: 0px;
+}
+
+.slidev-layout.cover p {
+  letter-spacing: 0.05em;
+  font-size: 0.85em;
+  line-height: 1.4em;
+}
+
 .slidev-layout.cover strong {
   font-weight: 500;
 }
 
+.slidev-layout.cover .note {
+  font-weight: 300;
+  font-size: 0.9rem;
+}
+
 .slidev-layout.cover h1 {
   font-family: var(--neversink-title-font);
   font-weight: 500;
   font-size: 3em;
   line-height: normal;
   margin-bottom: 0.9rem;
+  margin-top: 40px;
 }
 
 .slidev-layout.cover h2 {
@@ -55,6 +72,7 @@ const colorscheme = computed(() => {
   font-size: 2.5em;
   line-height: normal;
   margin-bottom: 0.9rem;
+  margin-top: 40px;
 }
 
 .slidev-layout.cover h3 {
@@ -63,6 +81,7 @@ const colorscheme = computed(() => {
   font-size: 1.9em;
   line-height: normal;
   margin-bottom: 0.9rem;
+  margin-top: 40px;
 }
 
 .slidev-layout.cover h1 + p {

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { compute_alignment, compute_column_size } from '../layoutHelper'
 
+const slots = useSlots()
+
 const props = defineProps({
   columns: {
     default: 'is-one-half',
@@ -59,7 +61,7 @@ const colorscheme = computed(() => {
   </div>
   <template v-else>
     <div class="flex flex-col h-full w-full">
-      <div class="w-full h-fit min-h-14 pt-2 pb-2 slidecolor" :class="colorscheme">
+      <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">
           <slot name="title" />
         </div>
@@ -74,7 +76,7 @@ const colorscheme = computed(() => {
           </div>
         </div>
       </div>
-      <div class="slidev-layout toptitlecontent h-fit w-full">
+      <div v-if="$slots.default" class="h-fit w-full">
         <slot name="default" />
       </div>
     </div>
@@ -86,6 +88,42 @@ const colorscheme = computed(() => {
   padding-top: 1.3rem;
 }
 
+.slidev-layout.toptitlecontent h1 + ul {
+  margin-top: 0em;
+}
+.slidev-layout.toptitlecontent h2 + ul {
+  margin-top: 0em;
+}
+
+.slidev-layout.toptitlecontent h3 + ul {
+  margin-top: 0em;
+}
+
+li li {
+  margin-top: 0.5em; /* Adjust this value as needed */
+}
+
+.slidev-layout.toptitlecontent h1 {
+  font-size: 1.4em;
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  margin-bottom: 0rem;
+}
+
+.slidev-layout.toptitlecontent h2 {
+  font-size: 1.4em;
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  margin-bottom: 0rem;
+}
+
+.slidev-layout.toptitlecontent h3 {
+  font-size: 1.1em;
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  margin-bottom: 0rem;
+}
+
 .toptitlebar {
   padding: 0;
   margin: 0;

package/layouts/top-title.vue

@@ -43,7 +43,7 @@ const colorscheme = computed(() => {
   </div>
   <template v-else>
     <div class="flex flex-col h-full w-full">
-      <div class="w-full h-fit min-h-14 pt-2 pb-2 slidecolor" :class="colorscheme">
+      <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">
           <slot name="title" />
         </div>
@@ -51,7 +51,7 @@ const colorscheme = computed(() => {
       <div class="slidev-layout toptitlecontent h-fit w-full">
         <slot name="content" />
       </div>
-      <div class="slidev-layout toptitlecontent h-fit w-full">
+      <div v-if="$slots.default" class="slidev-layout default h-fit w-full">
         <slot name="default" />
       </div>
     </div>

package/layouts/two-cols-title.vue

@@ -105,7 +105,7 @@ const flexclass = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style>
 .slidev-layout.two-cols-header,
 .slidev-layout.two-cols-footer {
   display: grid;
@@ -129,6 +129,18 @@ const flexclass = computed(() => {
   margin-bottom: 1rem;
 }
 
+.slidev-layout.two-cols-header .title h1 + p,
+.slidev-layout.two-cols-footer .title h1 + p {
+  margin-top: 0.2em;
+  margin-bottom: 0;
+}
+
+.slidev-layout.two-cols-header .title p,
+.slidev-layout.two-cols-footer .title p {
+  margin-top: 0.2em;
+  margin-bottom: 0;
+}
+
 .slidev-layout.two-cols .left-col,
 .slidev-layout.two-cols-header .left-col,
 .slidev-layout.two-cols-footer .left-col {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-neversink",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "author": "gureckis",
   "type": "module",
   "keywords": [

package/styles/base.css

@@ -5,8 +5,9 @@
 :root {
   --neversink-title-font: 'Inter', sans-serif;
   --neversink-main-font: 'Inter', sans-serif;
-  --neversink-mono-font: 'Inter', monospace;
-  --neversink-quote-font: 'Fire Code', monospace;
+  --neversink-mono-font: 'Fira Code', monospace;
+  --neversink-quote-font: 'Fira Code', monospace;
+  --font-mono: 'Courier New', Courier, monospace;
   @apply neversink-white-scheme; /* apply the default white scheme everywhere */
 }
 
@@ -16,7 +17,7 @@
 #page-root {
   font-family: var(--neversink-main-font);
   font-weight: 400;
-  letter-spacing: 0.015em;
+  letter-spacing: 0.015rem;
 }
 
 /* binds variable to the color of a slide*/
@@ -25,16 +26,17 @@
   color: var(--neversink-text-color);
 }
 
+.slidev-layout p {
+  line-height: normal;
+}
 /* adjust default bullets */
 .slidev-layout li {
   margin-bottom: 1em;
   line-height: 1.5em;
 }
 
-/* adds a modifier class which reduces the space between bullets */
-.tight li {
-  line-height: 1em;
-  margin-bottom: 0.5em;
+.slidev-layout ul {
+  margin-top: 0.7em;
 }
 
 /* change the bold and strong fonts */
@@ -73,12 +75,6 @@
   font-weight: 300;
 }
 
-/* for links that are icons.  removes underlining which is default for links in markdown parser */
-.iconlink a {
-  border-style: none !important;
-  border-bottom: none !important;
-}
-
 /* default layout */
 
 .my-auto p {
@@ -196,11 +192,6 @@ img {
   pointer-events: none;
 }
 
-.fader .slidev-vclick-prior {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
 html.dark {
   /* dark mode css here */
   .lectureno {

package/styles/index.ts

@@ -5,6 +5,7 @@ import './bubbles.css'
 import './stickynote.css'
 import './base.css'
 import './colors.css'
+import './neversink-c.css'
 
 // import './code.css'
 // import './layout.css'

package/styles/neversink-c.css

@@ -0,0 +1,110 @@
+/* neversink-c.css
+   provides custom helper classes for the Neversink theme 
+   the have the namespace ns-c- for 'neversink convenience' 
+   these provide simple styles for common elements
+   in talks
+
+   In addition to these there are shorthands for color schemes
+
+   ns-c-bk-scheme
+   ns-c-wh-scheme
+   ns-c-dk-scheme
+   ns-c-lt-scheme
+   ns-c-nv-scheme
+   ns-c-nv-lt-scheme
+   ns-c-red-scheme
+   ns-c-red-lt-scheme
+   and
+   ns-c-XX-scheme
+   ns-c-XX-lt-scheme
+   ...
+   where XX can be
+    slate, 
+    gray, 
+    zinc, 
+    neutral, 
+    stone, 
+    red, 
+    orange, 
+    amber, 
+    yellow, 
+    lime, 
+    green, 
+    emerald, 
+    teal, 
+    cyan, 
+    sky, 
+    blue, 
+    indigo, 
+    violet, 
+    purple, 
+    fuchsia, 
+    pink, 
+    rose, 
+    navy
+
+
+*/
+/* adds a modifier class which reduces the space between bullets */
+.ns-c-tight li {
+  line-height: normal;
+  margin-bottom: 0.4em;
+  margin-top: 0.4em;
+}
+
+.ns-c-verytight li {
+  line-height: normal;
+  margin-bottom: 0.1em;
+}
+
+.ns-c-supertight li {
+  line-height: normal;
+  margin-bottom: 0;
+}
+
+.ns-c-cite {
+  font-size: 0.75em;
+  font-style: italic;
+  @apply text-gray-400;
+}
+
+.ns-c-cite-bl {
+  text-align: left;
+  margin-bottom: 0.85em;
+  margin-left: 1.5em;
+  margin-top: auto;
+}
+
+.ns-c-quote {
+  font-family: var(--neversink-quote-font);
+  font-weight: 300;
+  @apply leading-relaxed;
+}
+
+.ns-c-border {
+  border-left: 0.25em solid var(--neversink-text-color);
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.ns-c-imgtile img {
+  width: 100%;
+  height: fit-content;
+  object-fit: cover;
+}
+
+/* for links that are icons.  removes underlining which is default for links in markdown parser */
+.ns-c-iconlink a {
+  border-style: none !important;
+  border-bottom: none !important;
+}
+
+/* fader for past bullets */
+.ns-c-fader .slidev-vclick-prior {
+  opacity: 0.3;
+  pointer-events: none;
+}

package/uno.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'unocss'
 import presetUno from '@unocss/preset-uno'
 import { colors } from '@unocss/preset-mini'
 import transformerDirectives from '@unocss/transformer-directives'
+import { version } from './package.json'
 
 // Tailwind CSS color palette
 const colornames = [
@@ -53,124 +54,98 @@ const generate_color_schemes = (colors) => {
   const schemes = []
   const classes = []
 
-  schemes.push([
-    `neversink-black-scheme`,
-    {
-      '--neversink-bg-color': colors['black'],
-      '--neversink-bg-code-color': colors['gray'][600],
-      '--neversink-fg-code-color': colors['white'],
-      '--neversink-fg-color': colors['white'],
-      '--neversink-text-color': colors['white'],
-      '--neversink-border-color': colors['white'],
-      '--neversink-highlight-color': '#FFA500',
-    },
-  ])
-  classes.push('neversink-black-scheme')
-
-  schemes.push([
-    `neversink-white-scheme`,
-    {
-      '--neversink-bg-color': colors['white'],
-      '--neversink-bg-code-color': colors['gray'][100],
-      '--neversink-fg-code-color': colors['black'],
-      '--neversink-fg-color': colors['black'],
-      '--neversink-text-color': colors['black'],
-      '--neversink-border-color': colors['gray'][950],
-      '--neversink-highlight-color': '#FFA500',
-    },
-  ])
-  classes.push('neversink-white-scheme')
-
-  schemes.push([
-    `neversink-dark-scheme`,
-    {
-      '--neversink-bg-color': colors['gray'][800],
-      '--neversink-bg-code-color': colors['gray'][600],
-      '--neversink-fg-code-color': colors['white'],
-      '--neversink-fg-color': colors['gray'][100],
-      '--neversink-text-color': colors['gray'][100],
-      '--neversink-border-color': colors['gray'][100],
-      '--neversink-highlight-color': '#FFA500',
-    },
-  ])
-  classes.push('neversink-dark-scheme')
-
-  schemes.push([
-    `neversink-light-scheme`,
-    {
-      '--neversink-bg-color': colors['gray'][100],
-      '--neversink-bg-code-color': colors['gray'][200],
-      '--neversink-fg-color': colors['gray'][800],
-      '--neversink-text-color': colors['gray'][800],
-      '--neversink-border-color': colors['gray'][800],
-      '--neversink-highlight-color': '#FFA500',
-    },
-  ])
-  classes.push('neversink-light-scheme')
+  const addScheme = (longName, shortName, styles) => {
+    schemes.push([longName, styles])
+    schemes.push([shortName, styles])
+    classes.push(longName, shortName)
+  }
+
+  addScheme('neversink-black-scheme', 'ns-c-bk-scheme', {
+    '--neversink-bg-color': colors['black'],
+    '--neversink-bg-code-color': colors['gray'][600],
+    '--neversink-fg-code-color': colors['white'],
+    '--neversink-fg-color': colors['white'],
+    '--neversink-text-color': colors['white'],
+    '--neversink-border-color': colors['white'],
+    '--neversink-highlight-color': '#FFA500',
+  })
+
+  addScheme('neversink-white-scheme', 'ns-c-wh-scheme', {
+    '--neversink-bg-color': colors['white'],
+    '--neversink-bg-code-color': colors['gray'][100],
+    '--neversink-fg-code-color': colors['black'],
+    '--neversink-fg-color': colors['black'],
+    '--neversink-text-color': colors['black'],
+    '--neversink-border-color': colors['gray'][950],
+    '--neversink-highlight-color': '#FFA500',
+  })
+
+  addScheme('neversink-dark-scheme', 'ns-c-dk-scheme', {
+    '--neversink-bg-color': colors['gray'][800],
+    '--neversink-bg-code-color': colors['gray'][600],
+    '--neversink-fg-code-color': colors['white'],
+    '--neversink-fg-color': colors['gray'][100],
+    '--neversink-text-color': colors['gray'][100],
+    '--neversink-border-color': colors['gray'][100],
+    '--neversink-highlight-color': '#FFA500',
+  })
+
+  addScheme('neversink-light-scheme', 'ns-c-lt-scheme', {
+    '--neversink-bg-color': colors['gray'][100],
+    '--neversink-bg-code-color': colors['gray'][200],
+    '--neversink-fg-color': colors['gray'][800],
+    '--neversink-text-color': colors['gray'][800],
+    '--neversink-border-color': colors['gray'][800],
+    '--neversink-highlight-color': '#FFA500',
+  })
 
   for (const color of colornames) {
     if (color == 'navy') {
-      schemes.push([
-        `neversink-navy-scheme`,
-        {
-          '--neversink-bg-color': '#2a373a',
-          '--neversink-bg-code-color': colors['gray'][200],
-          '--neversink-fg-color': colors['gray'][300],
-          '--neversink-text-color': colors['gray'][300],
-          '--neversink-border-color': colors['gray'][300],
-          '--neversink-highlight-color': '#FFA500',
-        },
-      ])
-      classes.push('neversink-navy-scheme')
-
-      schemes.push([
-        `neversink-navy-light-scheme`,
-        {
-          '--neversink-bg-color': colors['gray'][50],
-          '--neversink-bg-code-color': colors['gray'][400],
-          '--neversink-fg-color': '#2a373a',
-          '--neversink-text-color': '#2a373a',
-          '--neversink-border-color': '#2a373a',
-          '--neversink-highlight-color': '#FFA500',
-        },
-      ])
-      classes.push('neversink-navy-light-scheme')
+      addScheme('neversink-navy-scheme', 'ns-c-nv-scheme', {
+        '--neversink-bg-color': '#2a373a',
+        '--neversink-bg-code-color': colors['gray'][200],
+        '--neversink-fg-color': colors['gray'][300],
+        '--neversink-text-color': colors['gray'][300],
+        '--neversink-border-color': colors['gray'][300],
+        '--neversink-highlight-color': '#FFA500',
+      })
+
+      addScheme('neversink-navy-light-scheme', 'ns-c-nv-lt-scheme', {
+        '--neversink-bg-color': colors['gray'][50],
+        '--neversink-bg-code-color': colors['gray'][400],
+        '--neversink-fg-color': '#2a373a',
+        '--neversink-text-color': '#2a373a',
+        '--neversink-border-color': '#2a373a',
+        '--neversink-highlight-color': '#FFA500',
+      })
     } else {
-      // push the normal theme
-      schemes.push([
-        `neversink-${color}-scheme`,
-        {
-          '--neversink-bg-color': colors[color][500],
-          '--neversink-bg-code-color': colors[color][600],
-          '--neversink-fg-code-color': colors[color][100],
-          '--neversink-fg-color': colors[color][100],
-          '--neversink-text-color': colors[color][100],
-          '--neversink-border-color': colors[color][100],
-          '--neversink-highlight-color': colors[color][100],
-          '--neversink-admon-bg-color': colors[color][500],
-          '--neversink-admon-border-color': colors[color][300],
-          '--neversink-admon-text-color': colors[color][100],
-        },
-      ])
-      classes.push(`neversink-${color}-scheme`)
-
-      // push the light theme
-      schemes.push([
-        `neversink-${color}-light-scheme`,
-        {
-          '--neversink-bg-color': colors[color][100],
-          '--neversink-bg-code-color': colors[color][200],
-          '--neversink-fg-code-color': colors[color][500],
-          '--neversink-fg-color': colors[color][600],
-          '--neversink-text-color': colors[color][500],
-          '--neversink-border-color': colors[color][500],
-          '--neversink-highlight-color': colors[color][500],
-          '--neversink-admon-bg-color': colors[color][100],
-          '--neversink-admon-border-color': colors[color][300],
-          '--neversink-admon-text-color': colors[color][600],
-        },
-      ])
-      classes.push(`neversink-${color}-light-scheme`)
+      const shortColor = color.slice(0, 2)
+
+      addScheme(`neversink-${color}-scheme`, `ns-c-${shortColor}-scheme`, {
+        '--neversink-bg-color': colors[color][500],
+        '--neversink-bg-code-color': colors[color][600],
+        '--neversink-fg-code-color': colors[color][100],
+        '--neversink-fg-color': colors[color][100],
+        '--neversink-text-color': colors[color][100],
+        '--neversink-border-color': colors[color][100],
+        '--neversink-highlight-color': colors[color][100],
+        '--neversink-admon-bg-color': colors[color][500],
+        '--neversink-admon-border-color': colors[color][300],
+        '--neversink-admon-text-color': colors[color][100],
+      })
+
+      addScheme(`neversink-${color}-light-scheme`, `ns-c-${shortColor}-lt-scheme`, {
+        '--neversink-bg-color': colors[color][100],
+        '--neversink-bg-code-color': colors[color][200],
+        '--neversink-fg-code-color': colors[color][500],
+        '--neversink-fg-color': colors[color][600],
+        '--neversink-text-color': colors[color][500],
+        '--neversink-border-color': colors[color][500],
+        '--neversink-highlight-color': colors[color][500],
+        '--neversink-admon-bg-color': colors[color][100],
+        '--neversink-admon-border-color': colors[color][300],
+        '--neversink-admon-text-color': colors[color][600],
+      })
     }
   }
   return { classes: classes, schemes: schemes }
@@ -195,7 +170,7 @@ const generateRows = (max) => {
 
 const schemes = generate_color_schemes(colors)
 
-console.log('Loading Neversink theme uno.config.ts...')
+console.log(`Loading Neversink ${version} theme uno.config.ts...`)
 export default defineConfig({
   // ...UnoCSS options
   presets: [presetUno()],

package/vite.config.ts

@@ -2,8 +2,9 @@ import { defineConfig } from 'vite'
 //import MarkdownItMagicLink from 'markdown-it-magic-link'
 import { sub } from '@mdit/plugin-sub'
 import Mark from 'markdown-it-mark'
+import { version } from './package.json'
 
-console.log('Loading Neversink theme vite.config.ts...')
+console.log(`Loading Neversink ${version} theme vite.config.ts...`)
 export default defineConfig({
   slidev: {
     markdown: {

package/docs/markdown-examples.md

@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).