slidev-theme-measurelab 0.1.0

package/layouts/two-cols-pic.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  section?: string
+  heading?: string
+  class?: string
+}>()
+
+const isDark = computed(() => {
+  return props.class?.includes('dark')
+})
+</script>
+
+<template>
+  <div
+    class="slidev-layout two-cols-pic"
+    :class="[$props.class, { 'is-dark': isDark }]"
+  >
+    <!-- Grid background -->
+    <div class="grid-bg">
+      <img src="/contact-grid-background.svg" alt="" />
+    </div>
+
+    <!-- Header -->
+    <div class="slide-header">
+      <span v-if="section" class="section-label">{{ section }}</span>
+      <span v-else class="section-label"></span>
+      <div class="header-logo">
+        <img
+          v-show="!isDark"
+          src="/measurelab_logo.svg"
+          alt="Measurelab"
+        />
+        <img
+          v-show="isDark"
+          src="/measurelab-dark-logo.svg"
+          alt="Measurelab"
+        />
+      </div>
+    </div>
+
+    <!-- Title -->
+    <h1 v-if="heading" class="slide-title">{{ heading }}</h1>
+
+    <!-- Two column content -->
+    <div class="slide-columns">
+      <div class="col-left">
+        <slot name="default" />
+      </div>
+      <div class="col-right">
+        <slot name="right" />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="slide-footer">
+      <div class="footer-left">
+        <span class="copyright">© <strong>Measurelab</strong></span>
+        <span class="confidential">All rights reserved. Company confidential.</span>
+      </div>
+      <div class="footer-right">
+        <span class="page-number">{{ $slidev?.nav.currentPage }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.two-cols-pic {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  background: #ffffff;
+  color: #081f30;
+  overflow: hidden;
+}
+
+.two-cols-pic.is-dark {
+  background: #081f30;
+  color: #f9f9f9;
+}
+
+/* Grid background */
+.grid-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 3rem;
+  pointer-events: none;
+}
+
+.grid-bg img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.two-cols-pic.is-dark .grid-bg {
+  opacity: 0.3;
+}
+
+/* Header */
+.slide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 2.5rem;
+  position: relative;
+  z-index: 10;
+}
+
+.section-label {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: inherit;
+}
+
+.header-logo {
+  height: 1.25rem;
+}
+
+.header-logo img {
+  height: 100%;
+  width: auto;
+}
+
+/* Title */
+.slide-title {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 20px 0 1.5rem 0;
+  padding: 0 2.5rem;
+  color: inherit;
+  position: relative;
+  z-index: 10;
+}
+
+/* Two column content */
+.slide-columns {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  padding: 0 2.5rem;
+  position: relative;
+  z-index: 10;
+  color: inherit;
+}
+
+.col-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.col-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.col-left :deep(h1) {
+  font-size: 2rem !important;
+  font-weight: 600 !important;
+  line-height: 1.2;
+  margin: 0 0 1rem 0;
+  color: inherit;
+}
+
+.col-left :deep(h2) {
+  font-size: 1.35rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 1rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(h3) {
+  font-size: 1.125rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 0.75rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(p) {
+  font-size: 1.125rem !important;
+  line-height: 1.6;
+  margin: 0;
+  color: inherit;
+}
+
+.col-left :deep(ul),
+.col-left :deep(ol) {
+  margin: 0;
+  padding-left: 1.5rem;
+  list-style: disc;
+}
+
+.col-left :deep(li) {
+  font-size: 1.125rem !important;
+  line-height: 1.6;
+  margin: 0.5rem 0;
+  color: inherit;
+}
+
+.col-left :deep(li::marker) {
+  color: #6dd750;
+}
+
+.col-left :deep(h4) {
+  font-size: 1rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 0.5rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(ol) {
+  list-style: decimal;
+}
+
+.col-left :deep(ol li::marker) {
+  color: #6dd750;
+}
+
+.col-left :deep(blockquote) {
+  border-left: 4px solid #6dd750;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: inherit;
+  opacity: 0.8;
+}
+
+/* Right column image styling */
+.col-right :deep(img) {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+
+/* Footer */
+.slide-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2.5rem;
+  position: relative;
+  z-index: 10;
+  color: inherit;
+}
+
+.footer-left {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: inherit;
+}
+
+.footer-left strong {
+  font-weight: 500;
+}
+
+.footer-right {
+  font-size: 0.75rem;
+  color: inherit;
+}
+</style>

package/layouts/two-cols.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  section?: string
+  heading?: string
+  class?: string
+}>()
+
+const isDark = computed(() => {
+  return props.class?.includes('dark')
+})
+</script>
+
+<template>
+  <div
+    class="slidev-layout two-cols"
+    :class="[$props.class, { 'is-dark': isDark }]"
+  >
+    <!-- Grid background -->
+    <div class="grid-bg">
+      <img src="/contact-grid-background.svg" alt="" />
+    </div>
+
+    <!-- Header -->
+    <div class="slide-header">
+      <span v-if="section" class="section-label">{{ section }}</span>
+      <span v-else class="section-label"></span>
+      <div class="header-logo">
+        <img
+          v-show="!isDark"
+          src="/measurelab_logo.svg"
+          alt="Measurelab"
+        />
+        <img
+          v-show="isDark"
+          src="/measurelab-dark-logo.svg"
+          alt="Measurelab"
+        />
+      </div>
+    </div>
+
+    <!-- Title -->
+    <h1 v-if="heading" class="slide-title">{{ heading }}</h1>
+
+    <!-- Two column content -->
+    <div class="slide-columns">
+      <div class="col-left">
+        <slot name="default" />
+      </div>
+      <div class="col-right">
+        <slot name="right" />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="slide-footer">
+      <div class="footer-left">
+        <span class="copyright">© <strong>Measurelab</strong></span>
+        <span class="confidential">All rights reserved. Company confidential.</span>
+      </div>
+      <div class="footer-right">
+        <span class="page-number">{{ $slidev?.nav.currentPage }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.two-cols {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  background: #ffffff;
+  color: #081f30;
+  overflow: hidden;
+}
+
+.two-cols.is-dark {
+  background: #081f30;
+  color: #f9f9f9;
+}
+
+/* Grid background */
+.grid-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 3rem;
+  pointer-events: none;
+}
+
+.grid-bg img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.two-cols.is-dark .grid-bg {
+  opacity: 0.3;
+}
+
+/* Header */
+.slide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 2.5rem;
+  position: relative;
+  z-index: 10;
+}
+
+.section-label {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: inherit;
+}
+
+.header-logo {
+  height: 1.25rem;
+}
+
+.header-logo img {
+  height: 100%;
+  width: auto;
+}
+
+/* Title */
+.slide-title {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 20px 0 1.5rem 0;
+  padding: 0 2.5rem;
+  color: inherit;
+  position: relative;
+  z-index: 10;
+}
+
+/* Two column content */
+.slide-columns {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  padding: 0 2.5rem;
+  position: relative;
+  z-index: 10;
+  color: inherit;
+}
+
+.col-left,
+.col-right {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.col-left :deep(h1),
+.col-right :deep(h1) {
+  font-size: 2rem !important;
+  font-weight: 600 !important;
+  line-height: 1.2;
+  margin: 0 0 1rem 0;
+  color: inherit;
+}
+
+.col-left :deep(h2),
+.col-right :deep(h2) {
+  font-size: 1.35rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 1rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(h4),
+.col-right :deep(h4) {
+  font-size: 1rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 0.5rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(h3),
+.col-right :deep(h3) {
+  font-size: 1.125rem !important;
+  font-weight: 500 !important;
+  line-height: 1.3;
+  margin: 0.75rem 0 0.125rem 0;
+  color: inherit;
+}
+
+.col-left :deep(p),
+.col-right :deep(p) {
+  font-size: 1.125rem !important;
+  line-height: 1.6;
+  margin: 0;
+  color: inherit;
+}
+
+.col-left :deep(ul),
+.col-left :deep(ol),
+.col-right :deep(ul),
+.col-right :deep(ol) {
+  margin: 0;
+  padding-left: 1.5rem;
+  list-style: disc;
+}
+
+.col-left :deep(li),
+.col-right :deep(li) {
+  font-size: 1.125rem !important;
+  line-height: 1.6;
+  margin: 0.5rem 0;
+  color: inherit;
+}
+
+.col-left :deep(li::marker),
+.col-right :deep(li::marker) {
+  color: #6dd750;
+}
+
+.col-left :deep(ol),
+.col-right :deep(ol) {
+  list-style: decimal;
+}
+
+.col-left :deep(ol li::marker),
+.col-right :deep(ol li::marker) {
+  color: #6dd750;
+}
+
+.col-left :deep(blockquote),
+.col-right :deep(blockquote) {
+  border-left: 4px solid #6dd750;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: inherit;
+  opacity: 0.8;
+}
+
+/* Footer */
+.slide-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2.5rem;
+  position: relative;
+  z-index: 10;
+  color: inherit;
+}
+
+.footer-left {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: inherit;
+}
+
+.footer-left strong {
+  font-weight: 500;
+}
+
+.footer-right {
+  font-size: 0.75rem;
+  color: inherit;
+}
+</style>

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "slidev-theme-measurelab",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Measurelab branded theme for Slidev presentations",
+  "author": "Measurelab",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Measurelab/ml-slidev-theme.git"
+  },
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "measurelab",
+    "analytics",
+    "presentations"
+  ],
+  "files": [
+    "layouts",
+    "styles",
+    "setup",
+    "public",
+    "global.css"
+  ],
+  "engines": {
+    "slidev": ">=0.48.0"
+  },
+  "slidev": {
+    "colorSchema": "both",
+    "defaults": {
+      "fonts": {
+        "sans": "Poppins",
+        "mono": "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+      },
+      "transition": "slide-left"
+    }
+  },
+  "main": "styles/index.ts",
+  "scripts": {
+    "dev": "slidev slides.md --open",
+    "build": "slidev build slides.md",
+    "export": "slidev export slides.md"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.1.0"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^0.50.0",
+    "@slidev/types": "^0.50.0",
+    "typescript": "^5.3.0",
+    "vue": "^3.4.0"
+  }
+}

package/public/background-header-circles.svg

@@ -0,0 +1,69 @@
+<svg width="1920" height="694" viewBox="0 0 1920 694" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2299_17582" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="694">
+<rect width="1920" height="694" fill="url(#paint0_radial_2299_17582)"/>
+</mask>
+<g mask="url(#mask0_2299_17582)">
+<rect width="1920" height="1" fill="#ECECEC"/>
+<rect y="77" width="1920" height="1" fill="#ECECEC"/>
+<rect y="154" width="1920" height="1" fill="#ECECEC"/>
+<rect y="231" width="1920" height="1" fill="#ECECEC"/>
+<rect y="308" width="1920" height="1" fill="#ECECEC"/>
+<rect y="385" width="1920" height="1" fill="#ECECEC"/>
+<rect y="462" width="1920" height="1" fill="#ECECEC"/>
+<rect y="539" width="1920" height="1" fill="#ECECEC"/>
+<rect y="616" width="1920" height="1" fill="#ECECEC"/>
+<rect y="693" width="1920" height="1" fill="#ECECEC"/>
+<rect x="36" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="113" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="190" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="267" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="344" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="421" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="498" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="575" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="652" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="729" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="806" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="883" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="960" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1037" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1114" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1191" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1268" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1345" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1422" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1499" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1576" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1653" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1730" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1807" y="-32" width="1" height="1080" fill="#ECECEC"/>
+<rect x="1884" y="-32" width="1" height="1080" fill="#ECECEC"/>
+</g>
+<mask id="mask1_2299_17582" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="617">
+<rect width="1920" height="617" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_2299_17582)">
+<circle cx="1884.5" cy="308.5" r="308" transform="rotate(-180 1884.5 308.5)" stroke="#70E45C"/>
+<circle cx="1884" cy="309" r="230.5" transform="rotate(-180 1884 309)" stroke="#70E45C"/>
+<circle cx="1730.5" cy="308.5" r="77" transform="rotate(-180 1730.5 308.5)" stroke="#70E45C"/>
+<circle cx="1730.5" cy="308.5" r="4.5" transform="rotate(-180 1730.5 308.5)" fill="#FF8506"/>
+<circle cx="1537" cy="308" r="38.5" stroke="#70E45C"/>
+<circle cx="1537.5" cy="307.5" r="4.5" fill="#FF8506"/>
+<circle cx="1884" cy="308" r="38.5" stroke="#70E45C"/>
+<circle cx="1884.5" cy="307.5" r="4.5" fill="#FF8506"/>
+<circle cx="36.5" cy="308.5" r="308" stroke="#70E45C"/>
+<circle cx="38" cy="309" r="230.5" stroke="#70E45C"/>
+<circle cx="191.5" cy="308.5" r="77" stroke="#70E45C"/>
+<circle cx="191.5" cy="308.5" r="4.5" fill="#FF8506"/>
+<circle cx="383" cy="309" r="38.5" stroke="#70E45C"/>
+<circle cx="383.5" cy="308.5" r="4.5" fill="#FF8506"/>
+<circle cx="36" cy="308" r="38.5" stroke="#70E45C"/>
+<circle cx="36.5" cy="307.5" r="4.5" fill="#FF8506"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_2299_17582" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(960 329.313) rotate(90) scale(364.687 1008.93)">
+<stop stop-color="#D9D9D9"/>
+<stop offset="1" stop-color="#737373" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

package/public/background-illustration.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>