slidev-theme-the-unnamed 0.0.13 → 0.0.15

package/README.md

@@ -24,6 +24,7 @@ The theme currently has the following layouts:
 - `cover`
 - `center`
 - `section`
+- `two-cols`
 - `about-me`
 - and the ones from Slidev itself
 
@@ -88,6 +89,28 @@ background: <image url or HEX or rbg or rgba> (optional)
 ---
 ```
 
+### Two columns
+
+![](/assets/two-cols.png)
+
+**Usage**
+
+```yaml
+---
+layout: two-cols
+---
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+```
+
 ### Default
 
 ![](/assets/default.png)
@@ -101,7 +124,6 @@ background: <image url or HEX or rbg or rgba> (optional)
 ---
 ```
 
-
 ## Cusomizations
 
 You can customize the theme by adding the following frontmatter to your `slides.md`.
@@ -121,6 +143,8 @@ themeConfig:
   accents-blue: "#5EADF2"
   accents-vulcan: "#0E131F"
 
+  header-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+
   default-headingBg: var(--slidev-theme-accents-yellow)
   default-headingColor: var(--slidev-theme-accents-vulcan)
   default-background: var(--slidev-theme-background)
@@ -149,4 +173,4 @@ themeConfig:
 <br />
 <br />
 
-[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed&countColor=%23F141A8)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed)
+[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed&countColor=%23F141A8)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed)

package/changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.0.15] - 2023-10-18
+
+- Added box shadow to the header + `header-shadow` theme option
+
+## [0.0.14] - 2023-10-17
+
+- Added styles for the two-column layout
+
 ## [0.0.13] - 2023-10-05
 
 - Remove backdrop if no background is set on cover

package/example.md

@@ -16,6 +16,8 @@ themeConfig:
   accents-blue: "#5EADF2"
   accents-vulcan: "#0E131F"
 
+  header-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+
   default-headingBg: var(--slidev-theme-accents-yellow)
   default-headingColor: var(--slidev-theme-accents-vulcan)
   default-background: var(--slidev-theme-background)
@@ -81,6 +83,20 @@ layout: center
 
 Subtitle for the center layout
 
+---
+layout: two-cols
+---
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+
 ---
 
 # Code with Shiki and The unnamed theme

package/layouts/cover.vue

@@ -8,7 +8,6 @@ const props = defineProps({
 })
 
 const slideBg = handleBackground(props.background, true);
-console.log(slideBg);
 const style = computed(() => slideBg)
 </script>
 

package/layouts/two-cols.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+  },
+  layoutClass: {
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="slidev-layout two-columns w-full h-full grid grid-cols-2"
+    :class="props.layoutClass"
+  >
+    <div class="col-left" :class="props.class">
+      <slot />
+    </div>
+
+    <div class="col-right" :class="props.class">
+      <slot name="right" />
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-the-unnamed",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "keywords": [
     "slidev-theme",
     "slidev"

package/styles/layout.css

@@ -20,6 +20,9 @@
   --slidev-theme-accents-blue: #5eadf2;
   --slidev-theme-accents-vulcan: #0e131f;
 
+  /* Header shadow */
+  --slidev-theme-header-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+
   /*  Default */
   --slidev-theme-default-headingBg: var(--slidev-theme-accents-yellow);
   --slidev-theme-default-headingColor: var(--slidev-theme-accents-vulcan);
@@ -153,6 +156,7 @@
 .slidev-layout.intro,
 .slidev-layout.default,
 .slidev-layout.center,
+.slidev-layout.two-columns,
 .slidev-layout[layout="default"],
 .about-me {
   h1 {
@@ -163,6 +167,7 @@
     z-index: 1;
 
     &::before {
+      box-shadow: var(--slidev-theme-header-shadow);
       content: " ";
       display: block;
       position: absolute;
@@ -320,6 +325,19 @@
   }
 }
 
+/* Two columns */
+.slidev-layout.two-columns {
+  background: var(--slidev-theme-default-background);
+
+  h1 {
+    color: var(--slidev-theme-default-headingColor);
+
+    &::before {
+      background: var(--slidev-theme-default-headingBg);
+    }
+  }
+}
+
 /* About me slide */
 .about-me {
   background: var(--slidev-theme-aboutme-background);