slidev-theme-neversink 0.0.0

package/layouts/section.vue

@@ -0,0 +1,84 @@
+<script setup lang="js">
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    default: 'white',
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+
+<template>
+  <div class="slidev-layout section slidecolor" :class="colorscheme">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.slidev-layout.section {
+  display: grid;
+  height: 100%;
+}
+
+.slidev-layout.section hr {
+  border: 0;
+  border-top: 1px solid var(--neversink-border-color);
+  margin: 0;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+/* cover slide type */
+.slidev-layout.section h1 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 1.8em;
+  padding-bottom: 0.3rem;
+  line-height: normal;
+}
+
+.slidev-layout.section h2 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 2.5em;
+}
+
+.slidev-layout.section h3 {
+  font-family: var(--neversink-title-font);
+  font-weight: 500;
+  font-size: 1.9em;
+}
+
+.slidev-layout.section {
+  font-family: var(--neversink-main-font);
+  font-weight: 300;
+}
+
+.slidev-layout.section strong {
+  font-weight: 500;
+}
+
+.slidev-layout.section h1 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.section h2 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+
+.slidev-layout.section h3 + p {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+}
+</style>

package/layouts/side-title.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { compute_alignment, compute_column_size } from '../layoutHelper'
+
+const slots = useSlots()
+
+const props = defineProps({
+  side: {
+    default: 'l',
+  },
+  color: {
+    default: 'light',
+  },
+  titlewidth: {
+    default: 'is-one-third',
+  },
+  align: {
+    default: 'auto',
+  },
+})
+
+const side = computed(() => {
+  if (props.side === 'left' || props.side === 'l') {
+    return 'left'
+  } else if (props.side === 'right' || props.side === 'r') {
+    return 'right'
+  } else {
+    return 'error'
+  }
+})
+const colwidth = computed(() => compute_column_size(props.titlewidth))
+
+const alignment = computed(() => {
+  let aligncode = ''
+  if (props.align == 'auto' && (props.side === 'l' || props.side === 'left')) {
+    aligncode = 'rm-lt'
+  } else if (props.align == 'auto' && (props.side === 'r' || props.side === 'right')) {
+    aligncode = 'lt-lm'
+  } else {
+    aligncode = props.align
+  }
+
+  const parts = aligncode.split('-')
+  return { l: compute_alignment(parts[0]), r: compute_alignment(parts[1]) }
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div v-if="side == 'error' || colwidth == 'error'" class="slidev-layout default error">
+    <span class="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:
+      <code>color: {{ props.color }}</code
+      >, <code>columns: {{ props.columns }}</code> and <code>align: {{ props.align }}</code
+      >.
+    </p>
+    <p>The "slots" of the page are default and <code>:: content ::</code></p>
+    <p>
+      Options for <code>columns</code> are divided into 12 column units. So with <code>columns: is-1-11</code> the left
+      column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only specifying
+      the left column (<code>columns: is-1</code> does the same thing). In addition there are short hands like
+      <code>columns: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
+    </p>
+    <p>
+      Here are a bunch of examples:
+      <code>
+        is-1, is-2, is-3, is-3-9, is-4-8, is-5-7, is-one-quarter, is-one-third, is-one-half, is-two-thirds,
+        is-three-quarters
+      </code>
+    </p>
+
+    <p>
+      The <code>align</code> parameter determines how the columns look. The notation is for example
+      <code>align: cm-cm</code>. The first part for the left column, and the third part is for the right column. The
+      first letter is (<code>c</code> for center, <code>l</code> for left, <code>r</code> for right). This applies to
+      all three second. For the columns the second letter is vertical alignment (<code>t</code> for top,
+      <code>m</code> for middle, <code>b</code> for bottom).
+    </p>
+
+    <p>The <code>color</code> parameter determines color of the title.</p>
+  </div>
+  <template 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>
+      </div>
+      <div class="column-content">
+        <div class="slidev-layout h-fit w-full" :class="alignment.r">
+          <slot name="content" />
+          <slot name="default" />
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex h-full w-full">
+      <div class="column-content">
+        <div class="slidev-layout h-fit w-full" :class="alignment.l">
+          <slot name="content" />
+          <slot name="default" />
+        </div>
+      </div>
+      <div class="slidecolor column-title" :class="colorscheme">
+        <div class="slidev-layout sidetitle w-full p-6" :class="alignment.r"><slot name="title" /></div>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style>
+.slidev-layout.sidetitle {
+  height: fit-content;
+}
+
+.slidev-layout.sidetitle hr {
+  border: 0;
+  border-top: 1px solid var(--neversink-border-color);
+  margin: 0;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.slidev-layout.sidetitle code {
+  background: none;
+}
+.slidev-layout.sidetitle h1 {
+  margin-bottom: 5;
+}
+</style>
+<style scoped>
+.column-title {
+  flex: v-bind(colwidth.l); /* although this is mapped to 'left' it is reversed when needed in the template*/
+  display: flex;
+}
+
+.column-content {
+  flex: v-bind(colwidth.r); /* although this is mapped to 'right' it is reversed when needed in the template*/
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { compute_alignment, compute_column_size } from '../layoutHelper'
+
+const props = defineProps({
+  columns: {
+    default: 'is-one-half',
+  },
+  align: {
+    default: 'l-lt-lt',
+  },
+  color: {
+    default: 'light',
+  },
+})
+
+const colwidth = computed(() => compute_column_size(props.columns))
+
+const alignment = computed(() => {
+  const parts = props.align.split('-')
+  return { t: compute_alignment(parts[0]), l: compute_alignment(parts[1]), r: compute_alignment(parts[2]) }
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div
+    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>
+    <hr />
+    <p>
+      There are three parameters: <code>columns</code>, <code>align</code>, and <code>color</code>. Currently:
+      <code>columns: {{ props.columns }} </code>, <code>align: {{ props.align }} </code>, and
+      <code>color: {{ props.color }} </code>.
+    </p>
+    <p>
+      The "slots" of the page are default <code>:: title ::</code>, <code>:: left ::</code>, and
+      <code>:: right ::</code>
+    </p>
+    <p>
+      Options for <code>columns</code> are divided into 12 column units. So with <code>columns: is-1-11</code> the left
+      column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only specifying
+      the left column (<code>columns: is-1</code> does the same thing). In addition there are short hands like
+      <code>columns: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
+    </p>
+    <p>
+      The <code>align</code> parameter determines how the columns look. The notation is for example
+      <code>align: c-cm-cm</code>. The first part is for the title, the second for the left column, and the third part
+      is for the right column. The first letter is (<code>c</code> for center, <code>l</code> for left,
+      <code>r</code> for right). This applies to all three second. For the columns the second letter is vertical
+      alignment (<code>t</code> for top, <code>m</code> for middle, <code>b</code> for bottom).
+    </p>
+
+    <p>The <code>color</code> parameter determines color of the title.</p>
+  </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="slidev-layout toptitlebar 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="flex flex-row h-full w-full">
+          <div class="col-left" :class="alignment.l">
+            <slot name="left" />
+          </div>
+          <div class="col-right" :class="alignment.r">
+            <slot name="right" />
+          </div>
+        </div>
+      </div>
+      <div class="slidev-layout toptitlecontent h-fit w-full">
+        <slot name="default" />
+      </div>
+    </div>
+  </template>
+</template>
+
+<style>
+.slidev-layout.toptitlecontent {
+  padding-top: 1.3rem;
+}
+
+.toptitlebar {
+  padding: 0;
+  margin: 0;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.slidev-layout.toptitle 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 {
+  font-size: 1.5em;
+  font-family: var(--neversink-title-font);
+  font-weight: 300;
+  padding-left: 25px;
+  letter-spacing: 0.07em;
+}
+
+.slidev-layout.toptitle h3 {
+  font-size: 1.1em;
+  font-family: var(--neversink-title-font);
+  font-weight: 300;
+  padding-left: 25px;
+  letter-spacing: 0.07em;
+}
+</style>
+
+<style scoped>
+.slidev-layout.toptitlecontent .col-left {
+  flex: v-bind(colwidth.l); /* Makes each column take up equal space */
+  margin-right: 15px;
+}
+
+.slidev-layout.toptitlecontent .col-right {
+  flex: v-bind(colwidth.r); /*Makes each column take up equal space */
+  margin-left: 15px;
+}
+</style>

package/layouts/top-title.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { compute_alignment, compute_column_size } from '../layoutHelper'
+
+const slots = useSlots()
+
+const props = defineProps({
+  color: {
+    default: 'light',
+  },
+  align: {
+    default: 'l',
+  },
+})
+
+const alignment = computed(() => {
+  return compute_alignment(props.align)
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+<template>
+  <div v-if="alignment == 'error'" class="slidev-layout default error">
+    <span class="warning"><b>Error</b>: invalid layout params.</span>
+    <hr />
+    <p>
+      There are two parameters: <code>color</code> <code>align</code>. Currently:
+      <code>color: {{ props.color }}</code> and <code>align: {{ props.align }}</code
+      >.
+    </p>
+    <p>
+      The "slots" of the page are <code>:: title ::</code>, <code>:: content ::</code>, and the implicit default slot
+    </p>
+
+    <p>
+      The <code>align</code> parameter determines how the title is aligned. The letter is (<code>c</code> for center,
+      <code>l</code> for left, <code>r</code> for right).
+    </p>
+
+    <p>The <code>color</code> parameter determines color of the title.</p>
+  </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="slidev-layout toptitlebar 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">
+        <slot name="content" />
+      </div>
+      <div class="slidev-layout toptitlecontent h-fit w-full">
+        <slot name="default" />
+      </div>
+    </div>
+  </template>
+</template>
+
+<style>
+/* the style for this is coming from top-title-two-cols.vue*/
+</style>

package/layouts/two-cols-title.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { compute_alignment, compute_column_size } from '../layoutHelper'
+
+const slots = useSlots()
+
+const props = defineProps({
+  columns: {
+    default: 'is-one-half',
+  },
+  align: {
+    default: 'l-lt-lt',
+  },
+  color: {
+    default: 'white',
+  },
+  titlepos: {
+    default: 't',
+    validator: (value) => {
+      return ['t', 'b', 'n'].includes(value)
+    },
+  },
+})
+
+const alignment = computed(() => {
+  const parts = props.align.split('-')
+  return { t: compute_alignment(parts[0]), l: compute_alignment(parts[1]), r: compute_alignment(parts[2]) }
+})
+
+const colwidth = computed(() => compute_column_size(props.columns))
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const flexclass = computed(() => {
+  if (slots.title != undefined) {
+    if (props.titlepos == 't') {
+      return 'slidev-layout two-cols-header'
+    } else if (props.titlepos == 'b') {
+      return 'slidev-layout two-cols-footer'
+    } else {
+      return 'slidev-layout two-cols'
+    }
+  } else {
+    return 'slidev-layout two-cols'
+  }
+})
+</script>
+
+<!-- default.vue -->
+<template>
+  <div
+    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>
+    <hr />
+    <p>
+      There are four parameters: <code>columns</code>, <code>align</code>, <code>color</code>, and
+      <code>titlepos</code>. Currently: <code>columns: {{ props.columns }}</code
+      >, <code>align: {{ props.align }} </code>, <code>color: {{ props.color }} </code>, and
+      <code>titlepos: {{ props.titlepos }} </code>.
+    </p>
+    <p>
+      Options for <code>columns</code> are divided into 12 column units. So with <code>columns: is-1-11</code> the left
+      column is 1/12 wide and the the right columns is 11/12 wide. The component admits a short had of only specifying
+      the left column (<code>columns: is-1</code> does the same thing). In addition there are short hands like
+      <code>columns: is-one-quarter</code> which resolves to <code>is-3-9</code>, etc...
+    </p>
+    <p>
+      Here are a bunch of examples:
+      <code>
+        is-1, is-2, is-3, is-4, is-5, is-6, is-7, is-8, is-9, is-10, is-11, is-1-11, is-2-10, is-3-9, is-4-8, is-5-7,
+        is-6-6, is-7-5, is-8-4, is-9-3, is-10-2, is-11-1, is-one-quarter, is-one-third, is-one-half, is-two-thirds,
+        is-three-quarters
+      </code>
+    </p>
+    <p>
+      In addition you can specify "slots" of the page with <code>:: title ::</code>, <code>:: left ::</code>, and
+      <code>:: right::</code>. Title is optional.
+    </p>
+    <p>
+      The <code>align</code> parameter determines how the columns look. The notation is for example
+      <code>align: c-cm-cm</code>. The first part is for the title, the second for the left column, and the third part
+      is for the right column. The first letter is (<code>c</code> for center, <code>l</code> for left,
+      <code>r</code> for right). This applies to all three second. For the columns the second letter is vertical
+      alignment (<code>t</code> for top, <code>m</code> for middle, <code>b</code> for bottom).
+    </p>
+  </div>
+  <div v-else class="slidecolor" :class="flexclass + ' ' + colorscheme">
+    <div v-if="$slots.title && props.titlepos != 'n'" class="title" :class="alignment.t">
+      <slot name="title" />
+    </div>
+    <div v-if="$slots.left" class="left-col" :class="alignment.l">
+      <slot name="left" />
+    </div>
+
+    <div v-if="$slots.right" class="right-col" :class="alignment.r">
+      <slot name="right" />
+    </div>
+    <div v-if="$slots.default" class="end">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slidev-layout.two-cols-header,
+.slidev-layout.two-cols-footer {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr); /* 12 columns */
+  grid-template-rows: auto 1fr auto; /* top header and content */
+}
+
+.slidev-layout.two-cols {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr); /* 12 columns */
+  grid-template-rows: auto auto; /* top header and content */
+}
+
+.slidev-layout.two-cols-header .title {
+  grid-area: 1 / 1 / 2 / span 12; /* full width */
+  margin-bottom: 1rem;
+}
+
+.slidev-layout.two-cols-footer .title {
+  grid-area: 3 / 1 / 4 / span 12; /* full width */
+  margin-bottom: 1rem;
+}
+
+.slidev-layout.two-cols .left-col,
+.slidev-layout.two-cols-header .left-col,
+.slidev-layout.two-cols-footer .left-col {
+  margin-right: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.slidev-layout.two-cols .right-col,
+.slidev-layout.two-cols-header .right-col,
+.slidev-layout.two-cols-footer .right-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.slidev-layout.two-cols-header .end,
+.slidev-layout.two-cols-footer .end {
+  grid-area: 4 / 1 / 5 / span 12; /* full width */
+}
+
+.slidev-layout.two-cols .end {
+  grid-area: 3 / 1 / 4 / span 12; /* full width */
+}
+</style>
+
+<style scoped>
+/* 1-11 */
+.two-cols-footer .left-col,
+.two-cols-header .left-col {
+  grid-area: 2 / 1 / 3 / span v-bind(colwidth.l);
+}
+
+.two-cols-footer .right-col,
+.two-cols-header .right-col {
+  grid-area: 2 / v-bind(colwidth.l + 1) / 3 / span v-bind(colwidth.r);
+}
+
+.two-cols .left-col {
+  grid-area: 1 / 1 / 2 / span v-bind(colwidth.l);
+}
+
+.two-cols .right-col {
+  grid-area: 1 / v-bind(colwidth.l + 1) / 2 / span v-bind(colwidth.r);
+}
+</style>