create-openclass-uniminuto 1.4.0

package/template/theme/uniminuto/layouts/slide-11-dos-titulos-dos-columnas.vue

@@ -0,0 +1,98 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="slide-layout">
+    <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
+
+    <div class="left-title-wrap">
+      <AutoFitText tag="h2" class="column-title" :min="18" :max="36" line-height="1.05">
+        <slot name="leftTitle">Agrega un título</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="right-title-wrap">
+      <AutoFitText tag="h2" class="column-title" :min="18" :max="36" line-height="1.05">
+        <slot name="rightTitle">Agrega un título</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="left-content">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="28" line-height="1.35">
+        <slot name="left" />
+      </AutoFitText>
+    </div>
+
+    <div class="right-content">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="28" line-height="1.35">
+        <slot name="right" />
+      </AutoFitText>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.left-title-wrap,
+.right-title-wrap {
+  position: absolute;
+  z-index: 2;
+  top: 25.5%;
+  height: 6.3%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #233763;
+  color: #ffffff;
+  text-align: center;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.left-title-wrap { left: 0%; width: 44%; }
+.right-title-wrap { left: 56.5%; width: 43.5%; }
+
+.column-title {
+  margin: 0 !important;
+  color: #ffffff !important;
+  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
+  font-weight: 800;
+}
+
+.left-content,
+.right-content {
+  position: absolute;
+  z-index: 2;
+  top: 36%;
+  width: 36%;
+  height: 50%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.left-content { left: 6%; }
+.right-content { left: 56.7%; }
+
+.column-fit :deep(*) { color: #233763 !important; }
+.column-fit :deep(p) { margin: 0 0 0.8rem 0; }
+.column-fit :deep(ul) { list-style-type: disc !important; padding-left: 1.5rem; }
+.column-fit :deep(li) { display: list-item !important; margin-bottom: 0.5rem; }
+.column-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
+</style>

package/template/theme/uniminuto/layouts/slide-12-cierre.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="slide-layout">
+    <img
+      class="slide-bg"
+      src="/fondos/slide-06-cierre.png"
+      alt="Fondo cierre"
+    />
+  </div>
+</template>
+
+<style scoped>
+.slide-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-codigo.vue

@@ -0,0 +1,133 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="slide-layout">
+    <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
+
+    <div class="title-wrap">
+      <AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
+        <slot name="title">Agrega un título</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="code-wrap">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.title-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 3.2%;
+  top: 2%;
+  width: 49%;
+  height: 8%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
+}
+
+.title {
+  margin: 0 !important;
+  color: #ffffff !important;
+  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
+  font-weight: 800;
+}
+
+.code-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 5%;
+  top: 16%;
+  width: 86%;
+  height: 71%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-wrap :deep(div.slidev-code-wrapper),
+.code-wrap :deep(.slidev-code-wrapper) {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-wrap :deep(pre),
+.code-wrap :deep(pre.slidev-code),
+.code-wrap :deep(.slidev-code) {
+  flex: 1;
+  min-height: 0;
+  max-height: 100% !important;
+  height: 100% !important;
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+  background: #0f172a !important;
+  color: #e5e7eb !important;
+  border: 2px solid rgba(242, 181, 27, 0.75);
+  border-radius: 14px;
+  font-size: 0.72rem !important;
+  line-height: 1.5 !important;
+  padding: 1rem 1.2rem !important;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(242, 181, 27, 0.5) transparent;
+}
+
+.code-wrap :deep(pre::-webkit-scrollbar) {
+  width: 6px;
+  height: 6px;
+}
+
+.code-wrap :deep(pre::-webkit-scrollbar-thumb) {
+  background: rgba(242, 181, 27, 0.5);
+  border-radius: 3px;
+}
+
+.code-wrap :deep(code) {
+  background: transparent !important;
+  color: inherit !important;
+  font-size: inherit !important;
+}
+
+.code-wrap :deep(.line-numbers-wrapper) {
+  background: #0f172a !important;
+  border-color: rgba(242, 181, 27, 0.3) !important;
+}
+
+.code-wrap :deep(.slidev-code-copy) {
+  color: #e5e7eb !important;
+  background: rgba(15, 23, 42, 0.7) !important;
+  border-radius: 6px;
+  padding: 2px;
+}
+
+.code-wrap :deep(.slidev-code-copy:hover) {
+  color: #f2b51b !important;
+  background: rgba(15, 23, 42, 0.95) !important;
+}
+</style>

package/template/theme/uniminuto/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "slidev-theme-uniminuto",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./styles/index.ts",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "slidev": {
+    "colorSchema": "light"
+  }
+}

package/template/theme/uniminuto/styles/base.css

@@ -0,0 +1,109 @@
+/* =========================================================
+   Bloques de código institucionales con scroll
+   Se activa en la diapositiva con:
+   class: codigo-slide
+========================================================= */
+
+.codigo-slide .slidev-code-wrapper {
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+.codigo-slide pre,
+.codigo-slide pre.slidev-code,
+.codigo-slide .slidev-code {
+    max-height: 340px !important;
+    overflow: auto !important;
+
+    background: #0f172a !important;
+    color: #e5e7eb !important;
+
+    border: 2px solid rgba(242, 181, 27, 0.75);
+    border-radius: 18px;
+
+    padding: 1rem 1.2rem !important;
+
+    font-size: 0.78rem !important;
+    line-height: 1.45 !important;
+
+    box-shadow:
+        0 18px 35px rgba(15, 23, 42, 0.20),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.codigo-slide pre code,
+.codigo-slide pre.slidev-code code,
+.codigo-slide .slidev-code code {
+    font-family:
+        "Cascadia Code",
+        "Fira Code",
+        "JetBrains Mono",
+        "Consolas",
+        monospace !important;
+
+    color: #e5e7eb !important;
+}
+
+/* Evita que Slidev opaque líneas no resaltadas */
+.codigo-slide pre .line,
+.codigo-slide pre.slidev-code .line,
+.codigo-slide .slidev-code .line {
+    opacity: 1 !important;
+    filter: none !important;
+    min-height: 1.45em;
+}
+
+/* Evita que los tokens queden apagados */
+.codigo-slide pre .line span,
+.codigo-slide pre.slidev-code .line span,
+.codigo-slide .slidev-code .line span {
+    opacity: 1 !important;
+    filter: none !important;
+}
+
+/* Comentarios */
+.codigo-slide pre .token.comment,
+.codigo-slide pre .token.prolog,
+.codigo-slide pre .token.doctype,
+.codigo-slide pre .token.cdata {
+    color: #94a3b8 !important;
+    opacity: 1 !important;
+}
+
+/* Números de línea */
+.codigo-slide pre .line-number,
+.codigo-slide pre .line-numbers,
+.codigo-slide pre.slidev-code .line-number,
+.codigo-slide pre.slidev-code .line-numbers {
+    color: #cbd5e1 !important;
+    opacity: 1 !important;
+}
+
+/* Scrollbar */
+.codigo-slide pre::-webkit-scrollbar,
+.codigo-slide pre.slidev-code::-webkit-scrollbar,
+.codigo-slide .slidev-code::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.codigo-slide pre::-webkit-scrollbar-track,
+.codigo-slide pre.slidev-code::-webkit-scrollbar-track,
+.codigo-slide .slidev-code::-webkit-scrollbar-track {
+    background: #1e293b;
+    border-radius: 999px;
+}
+
+.codigo-slide pre::-webkit-scrollbar-thumb,
+.codigo-slide pre.slidev-code::-webkit-scrollbar-thumb,
+.codigo-slide .slidev-code::-webkit-scrollbar-thumb {
+    background: var(--uni-amarillo);
+    border-radius: 999px;
+    border: 2px solid #1e293b;
+}
+
+.codigo-slide pre::-webkit-scrollbar-thumb:hover,
+.codigo-slide pre.slidev-code::-webkit-scrollbar-thumb:hover,
+.codigo-slide .slidev-code::-webkit-scrollbar-thumb:hover {
+    background: #ffcc33;
+}

package/template/theme/uniminuto/styles/index.ts

@@ -0,0 +1,11 @@
+import '@fontsource/merriweather-sans/400.css'
+import '@fontsource/merriweather-sans/700.css'
+import '@fontsource/merriweather-sans/800.css'
+
+import '@fontsource/atkinson-hyperlegible/400.css'
+import '@fontsource/atkinson-hyperlegible/700.css'
+
+import '@fontsource/opendyslexic/400.css'
+import '@fontsource/opendyslexic/700.css'
+
+import './base.css'