create-openclass-uniminuto 1.4.2 → 1.6.1

package/template/theme/uniminuto/components/AutoFitText.vue

@@ -9,9 +9,9 @@
       lineHeight: lineHeight
     }"
   >
-    <span ref="contentEl" class="auto-fit-text__content">
+    <div ref="contentEl" class="auto-fit-text__content">
       <slot />
-    </span>
+    </div>
   </component>
 </template>
 
@@ -150,6 +150,11 @@ watch(
   line-height: inherit;
   letter-spacing: inherit;
   text-align: inherit;
+  box-sizing: border-box;
+}
+
+.auto-fit-text__content :deep(*) {
+  box-sizing: border-box;
 }
 
 .auto-fit-text--debug {

package/template/theme/uniminuto/components/TitleRibbon.vue

@@ -0,0 +1,222 @@
+<template>
+  <div
+    class="title-ribbon"
+    :class="[
+      `title-ribbon--${side}`,
+      {
+        'title-ribbon--with-plane': resolvedShowPlane,
+        'title-ribbon--shadow': shadow,
+      },
+    ]"
+    :style="cssVars"
+  >
+    <img
+      v-if="resolvedShowPlane"
+      class="title-ribbon__plane"
+      :src="planeSrc"
+      alt=""
+      aria-hidden="true"
+    />
+
+    <div class="title-ribbon__bar">
+      <div class="title-ribbon__text">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  side: {
+    type: String,
+    default: "center",
+  },
+
+  showPlane: {
+    type: Boolean,
+    default: false,
+  },
+
+  withPlane: {
+    type: Boolean,
+    default: false,
+  },
+
+  planeSrc: {
+    type: String,
+    default: "/imagenes/avion.png",
+  },
+
+  width: {
+    type: String,
+    default: "100%",
+  },
+
+  minHeight: {
+    type: String,
+    default: "2.95rem",
+  },
+
+  paddingX: {
+    type: String,
+    default: "2rem",
+  },
+
+  paddingY: {
+    type: String,
+    default: "0.26rem",
+  },
+
+  fontSize: {
+    type: String,
+    default: "clamp(1.18rem, 1.72vw, 1.92rem)",
+  },
+
+  planeSize: {
+    type: String,
+    default: "7.4rem",
+  },
+
+  planeOffsetX: {
+    type: String,
+    default: "-42%",
+  },
+
+  planeOffsetY: {
+    type: String,
+    default: "0%",
+  },
+
+  ribbonColor: {
+    type: String,
+    default: "#243764",
+  },
+
+  textColor: {
+    type: String,
+    default: "#ffffff",
+  },
+
+  shadow: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const resolvedShowPlane = computed(() => props.showPlane || props.withPlane);
+
+const cssVars = computed(() => ({
+  "--title-ribbon-width": props.width,
+  "--title-ribbon-min-height": props.minHeight,
+  "--title-ribbon-padding-x": props.paddingX,
+  "--title-ribbon-padding-y": props.paddingY,
+  "--title-ribbon-font-size": props.fontSize,
+  "--title-ribbon-color": props.ribbonColor,
+  "--title-ribbon-text-color": props.textColor,
+  "--title-ribbon-plane-size": props.planeSize,
+  "--title-ribbon-plane-offset-x": props.planeOffsetX,
+  "--title-ribbon-plane-offset-y": props.planeOffsetY,
+}));
+</script>
+
+<style scoped>
+.title-ribbon {
+  position: relative;
+  width: var(--title-ribbon-width);
+  min-height: var(--title-ribbon-min-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  z-index: 5;
+
+  /* ajuste fino */
+  margin-top: -0.18rem;
+  margin-bottom: 0.55rem;
+}
+
+.title-ribbon--left {
+  justify-content: flex-start;
+}
+
+.title-ribbon--center {
+  justify-content: center;
+}
+
+.title-ribbon--right {
+  justify-content: flex-end;
+}
+
+.title-ribbon__bar {
+  position: relative;
+  width: 100%;
+  min-height: var(--title-ribbon-min-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--title-ribbon-padding-y) var(--title-ribbon-padding-x);
+  background: var(--title-ribbon-color);
+  color: var(--title-ribbon-text-color);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.title-ribbon--shadow .title-ribbon__bar {
+  box-shadow: 0 0.55rem 1rem rgba(16, 30, 64, 0.09);
+}
+
+.title-ribbon__text {
+  width: 100%;
+  max-width: none;
+  display: block;
+  color: var(--title-ribbon-text-color);
+  font-family: "Merriweather Sans", "Arial", sans-serif;
+  font-size: var(--title-ribbon-font-size);
+  font-weight: 900;
+  line-height: 1.08;
+  letter-spacing: -0.018em;
+  text-align: center;
+  text-wrap: balance;
+  overflow-wrap: normal;
+  word-break: normal;
+  hyphens: none;
+  text-shadow: 0 0.055em 0 rgba(0, 0, 0, 0.12);
+}
+
+.title-ribbon__text :deep(*) {
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+}
+
+.title-ribbon__plane {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: var(--title-ribbon-plane-size);
+  height: auto;
+  transform:
+    translateX(var(--title-ribbon-plane-offset-x))
+    translateY(calc(-50% + var(--title-ribbon-plane-offset-y)));
+  z-index: 3;
+  pointer-events: none;
+  user-select: none;
+  filter: drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.14));
+}
+
+@media print {
+  .title-ribbon--shadow .title-ribbon__bar {
+    box-shadow: none;
+  }
+
+  .title-ribbon__plane {
+    filter: none;
+  }
+}
+</style>

package/template/theme/uniminuto/layouts/README.md

@@ -0,0 +1,99 @@
+# Layouts Open Class UNIMINUTO
+
+## Principio de diseño
+
+Los fondos institucionales se usan como base limpia. Los títulos, franjas azules, avión y cajas de contenido se construyen por código para que puedan crecer y adaptarse al contenido.
+
+## Recursos obligatorios
+
+```text
+public/fondos/slide-01-portada.png
+public/fondos/slide-05-template.png
+public/fondos/slide-06-cierre.png
+public/imagenes/avion.png
+public/imagenes/favicon.png
+public/favicon.png
+```
+
+`public/favicon.png` es el favicon del navegador.  
+`public/imagenes/favicon.png` es una imagen institucional que puedes usar dentro de las diapositivas.
+
+## slide-02-titulo
+
+Uso recomendado:
+
+```md
+---
+layout: slide-02-titulo
+---
+
+::title::
+Extracción de características estadísticas y frecuenciales
+```
+
+Este layout usa franja azul dinámica y avión pequeño. El título aprovecha todo el ancho de la franja con padding lateral.
+
+## Layouts con imagen y texto
+
+```md
+---
+layout: slide-03-imagen-izquierda
+---
+
+::title::
+¿Qué puede “ver” una máquina?
+
+::image::
+<img src="/imagenes/favicon.png" alt="Imagen de apoyo" />
+
+::content::
+Texto de la diapositiva.
+```
+
+En `slide-03-imagen-izquierda` y `slide-04-imagen-derecha`, la imagen se ajusta con `object-fit: contain`, por lo que funciona bien con imágenes 3:4.
+
+## Listas
+
+Listas no ordenadas:
+
+```md
+- Primer punto
+- Segundo punto
+- Tercer punto
+```
+
+Listas numeradas:
+
+```md
+1. Primer paso
+2. Segundo paso
+3. Tercer paso
+```
+
+Listas por letras:
+
+```html
+<ol type="a">
+  <li>Primera opción</li>
+  <li>Segunda opción</li>
+</ol>
+```
+
+Listas romanas:
+
+```html
+<ol type="i">
+  <li>Primer criterio</li>
+  <li>Segundo criterio</li>
+</ol>
+```
+
+## Actualizar tema en cursos existentes
+
+Cuando exista una nueva versión publicada del generador:
+
+```bash
+npm create openclass-uniminuto@latest . -- --update-theme
+```
+
+Esto actualiza layouts, componentes, estilos y recursos visuales sin tocar el contenido académico en `semanas/`.

package/template/theme/uniminuto/layouts/slide-02-titulo.vue

@@ -1,63 +1,45 @@
 <script setup>
-import AutoFitText from '../components/AutoFitText.vue'
+import TitleRibbon from '../components/TitleRibbon.vue'
 </script>
 
 <template>
-  <div class="slide-02-layout">
-    <img
-      class="slide-bg"
-      src="/fondos/slide-02-titulo.png"
-      alt="Fondo diapositiva título"
-    />
-
-    <div class="titulo-wrap">
-      <AutoFitText
-        tag="h1"
-        class="titulo"
-        :min="20"
-        :max="42"
-        line-height="1.05"
-      >
-        <slot name="title">Título de la presentación</slot>
-      </AutoFitText>
-    </div>
-  </div>
+  <section class="slide-02-title">
+    <TitleRibbon
+      class="slide-02-title__ribbon"
+      align="center"
+      :show-plane="true"
+      width="76%"
+      min-height="clamp(72px, 9vh, 104px)"
+      padding-x="clamp(2.2rem, 4.2vw, 5.2rem)"
+      padding-y="0.6rem"
+      plane-size="clamp(14rem, 9vw, 11rem)"
+      plane-offset-x="-7rem"
+      plane-offset-y="-8%"
+      :min="30"
+      :max="42"
+      line-height="1.25"
+    >
+      <slot name="title">Título de la sesión</slot>
+    </TitleRibbon>
+  </section>
 </template>
 
 <style scoped>
-.slide-02-layout {
+.slide-02-title {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #ffffff;
-}
-
-.slide-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  background-image: url('/fondos/slide-05-template.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-.titulo-wrap {
+.slide-02-title__ribbon {
   position: absolute;
-  z-index: 2;
-  left: 33%;
-  top: 52%;
-  width: 43%;
-  height: 7%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.titulo {
-  margin: 0 !important;
-  color: #ffffff !important;
-  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
-  font-weight: 800;
+  left: 51%;
+  top: 50.5%;
+  transform: translate(-50%, -50%);
 }
 </style>

package/template/theme/uniminuto/layouts/slide-03-imagen-izquierda.vue

@@ -1,27 +1,24 @@
 <script setup>
 import AutoFitText from '../components/AutoFitText.vue'
+import TitleRibbon from '../components/TitleRibbon.vue'
 </script>
 
 <template>
   <div class="slide-layout">
-    <img
-      class="slide-bg"
-      src="/fondos/slide-03-imagen-izquierda.png"
-      alt="Fondo diapositiva imagen izquierda"
-    />
+    <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
 
-    <div class="image-wrap">
+    <div class="image-wrap uni-image-slot">
       <slot name="image" />
     </div>
 
     <div class="title-wrap">
-      <AutoFitText tag="h1" class="title" :min="18" :max="34" line-height="1.05">
+      <TitleRibbon align="center" :show-plane="false" :min="25" :max="38" line-height="1.2">
         <slot name="title">Agrega un título</slot>
-      </AutoFitText>
+      </TitleRibbon>
     </div>
 
     <div class="content-wrap">
-      <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.25">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="30" line-height="1.26">
         <slot name="content" />
       </AutoFitText>
     </div>
@@ -29,82 +26,59 @@ import AutoFitText from '../components/AutoFitText.vue'
 </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;
-}
+.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; }
 
 .image-wrap {
   position: absolute;
   z-index: 2;
-  left: 5.5%;
-  top: 15%;
-  width: 39%;
-  height: 78%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.image-wrap :deep(img),
-.image-wrap :deep(video),
-.image-wrap :deep(iframe) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border: 0;
-  display: block;
+  left: 8%;
+  top: 16.3%;
+  width: 39.2%;
+  height: 75%;
 }
 
 .title-wrap {
   position: absolute;
-  z-index: 2;
-  left: 49.5%;
-  top: 19.5%;
-  width: 48%;
-  height: 6.8%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 0 1rem;
-  box-sizing: border-box;
-}
-
-.title {
-  margin: 0 !important;
-  color: #ffffff !important;
-  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
-  font-weight: 800;
+  z-index: 3;
+  left: 45.8%;
+  top: 16.0%;
+  width: 54.2%;
+  min-height: 9.2%;
+  --ribbon-min-height: clamp(60px, 7.8vh, 92px);
+  --ribbon-padding-x: 2.2rem;
 }
 
 .content-wrap {
   position: absolute;
   z-index: 2;
-  left: 50.5%;
-  top: 30%;
-  width: 39%;
-  height: 48%;
+  left: 49.3%;
+  top: 31.0%;
+  width: 43.8%;
+  height: 55.2%;
   color: #233763 !important;
   font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
 }
 
+.image-wrap :deep(p) { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; }
+.image-wrap :deep(img), .image-wrap :deep(video), .image-wrap :deep(iframe) { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border: 0; }
+
 .content-fit :deep(*) { color: #233763 !important; }
-.content-fit :deep(p) { margin: 0 0 0.7rem 0; }
-.content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 1.6rem; }
-.content-fit :deep(li) { display: list-item !important; margin-bottom: 0.5rem; }
-.content-fit :deep(li::marker) { color: #233763 !important; font-size: 1em; }
+.content-fit :deep(p) { margin: 0 0 0.75rem 0; }
+.content-fit :deep(strong) { font-weight: 900; }
+.content-fit :deep(ul),
+.content-fit :deep(ol) {
+  list-style-position: outside !important;
+  margin: 0 0 0.75rem 0;
+  padding-left: 1.65rem;
+}
+.content-fit :deep(ul) { list-style-type: disc !important; }
+.content-fit :deep(ol) { list-style-type: decimal !important; }
+.content-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
+.content-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
+.content-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
+.content-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
+.content-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
+.content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
+.content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
 </style>