slidev-theme-neversink 0.1.0 → 0.2.0

package/docs/.vitepress/config.js

@@ -17,7 +17,7 @@ export default defineConfig({
       { 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/slidevjs/slidev/releases' }],
+        items: [{ text: 'Release Notes', link: 'https://github.com/gureckis/slidev-theme-neversink/releases' }],
       },
     ],
 

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/markdown.md

@@ -50,27 +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>
-```
-
-````
-
-## 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

@@ -37,6 +37,20 @@ 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
+
+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
@@ -86,9 +100,24 @@ If you write an icon in a link it includes the underline styleing. To remove tha
 }
 ```
 
-## For putting images in grids
+## 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;
@@ -96,7 +125,44 @@ If you write an icon in a link it includes the underline styleing. To remove tha
 }
 ```
 
-## Border
+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
 

package/layoutHelper.ts

@@ -34,29 +34,29 @@ export function handleBackground(background?: string, dim = false): CSSPropertie
 export function compute_alignment(val) {
   switch (val) {
     case 'ct':
-      return 'center top'
+      return 'ns-c-center ns-c-top'
     case 'cm':
-      return 'center middle'
+      return 'ns-c-center ns-c-middle'
     case 'cb':
-      return 'center bottom'
+      return 'ns-c-center ns-c-bottom'
     case 'lt':
-      return 'left top'
+      return 'ns-c-left ns-c-top'
     case 'lm':
-      return 'left middle'
+      return 'ns-c-left ns-c-middle'
     case 'lb':
-      return 'left bottom'
+      return 'ns-c-left ns-c-bottom'
     case 'rt':
-      return 'right top'
+      return 'ns-c-right ns-c-top'
     case 'rm':
-      return 'right middle'
+      return 'ns-c-right ns-c-middle'
     case 'rb':
-      return 'right bottom'
+      return 'ns-c-right ns-c-bottom'
     case 'c':
-      return 'center top'
+      return 'ns-c-center ns-c-top'
     case 'l':
-      return 'left top'
+      return 'ns-c-left ns-c-top'
     case 'r':
-      return 'right top'
+      return 'ns-c-right ns-c-top'
     default:
       return 'error'
   }

package/layouts/side-title.vue

@@ -50,7 +50,7 @@ const colorscheme = computed(() => {
 </script>
 <template>
   <div v-if="side == 'error' || colwidth == 'error'" class="slidev-layout default error">
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are three parameters: <code>color</code>, <code>columns</code> and <code>align</code>. Currently:

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

@@ -32,7 +32,7 @@ const colorscheme = computed(() => {
     v-if="colwidth == 'error' || alignment.t == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are three parameters: <code>columns</code>, <code>align</code>, and <code>color</code>. Currently:

package/layouts/top-title.vue

@@ -23,7 +23,7 @@ const colorscheme = computed(() => {
 </script>
 <template>
   <div v-if="alignment == 'error'" class="slidev-layout default error">
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are two parameters: <code>color</code> <code>align</code>. Currently:

package/layouts/two-cols-title.vue

@@ -54,7 +54,7 @@ const flexclass = computed(() => {
     v-if="colwidth == 'error' || alignment.t == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are four parameters: <code>columns</code>, <code>align</code>, <code>color</code>, and
@@ -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/layouts/two-cols.vue

@@ -35,7 +35,7 @@ const colorscheme = computed(() => {
     v-if="colwidth == 'error' || alignment.l == 'error' || alignment.r == 'error'"
     class="slidev-layout default error"
   >
-    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <span class="ns-c-warning"><b>Error</b>: invalid layout params.</span>
     <hr />
     <p>
       There are two parameters: <code>columns</code> and <code>align</code>. Currently:

package/package.json

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

package/styles/base.css

@@ -35,6 +35,10 @@
   line-height: 1.5em;
 }
 
+.slidev-layout ul {
+  margin-top: 0.7em;
+}
+
 /* change the bold and strong fonts */
 .slidev-layout strong,
 .slidev-layout b {
@@ -125,50 +129,6 @@
   margin-top: 1.5em;
 }
 
-/* columns stuff */
-.warning {
-  color: red;
-}
-.error {
-  font-size: 0.9em;
-}
-
-.left {
-  justify-content: left; /* Left align the content */
-  text-align: left;
-  align-items: start;
-}
-
-.center {
-  justify-content: center; /* Horizontally center the content */
-  text-align: center;
-  align-items: center;
-}
-
-.right {
-  justify-content: right; /* Right align the content */
-  text-align: right;
-  align-items: end;
-}
-
-.top {
-  margin-top: 0;
-  margin-bottom: auto;
-}
-.middle {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-.bottom {
-  margin-top: auto;
-  margin-bottom: 0;
-}
-
-/* a new tight bullet list */
-/* .tight {
-  margin-top: 1em;
-} */
-
 .bwimg {
   filter: grayscale(100%) contrast(150%) brightness(120%);
   display: inline;
@@ -188,11 +148,6 @@ img {
   pointer-events: none;
 }
 
-.ns-c-fader .slidev-vclick-prior {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
 html.dark {
   /* dark mode css here */
   .lectureno {

package/styles/neversink-c.css

@@ -45,10 +45,51 @@
 
 
 */
+
+/* columns stuff */
+.ns-c-warning {
+  color: red;
+}
+.ns-c-error {
+  font-size: 0.9em;
+}
+
+.ns-c-left {
+  justify-content: left; /* Left align the content */
+  text-align: left;
+  align-items: start;
+}
+
+.ns-c-center {
+  justify-content: center; /* Horizontally center the content */
+  text-align: center;
+  align-items: center;
+}
+
+.ns-c-right {
+  justify-content: right; /* Right align the content */
+  text-align: right;
+  align-items: end;
+}
+
+.ns-c-top {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+.ns-c-middle {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.ns-c-bottom {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
 /* 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 {
@@ -101,3 +142,9 @@
   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 = [
@@ -169,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: {