create-openclass-uniminuto 1.4.0

package/template/theme/uniminuto/layouts/slide-04-imagen-derecha.vue

@@ -0,0 +1,110 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="slide-layout">
+    <img
+      class="slide-bg"
+      src="/fondos/slide-04-imagen-derecha.png"
+      alt="Fondo diapositiva imagen derecha"
+    />
+
+    <div class="image-wrap">
+      <slot name="image" />
+    </div>
+
+    <div class="title-wrap">
+      <AutoFitText tag="h1" class="title" :min="18" :max="36" line-height="1.05">
+        <slot name="title">Agrega un título</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
+        <slot name="content" />
+      </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;
+}
+
+.image-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 51.2%;
+  top: 15%;
+  width: 40%;
+  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;
+}
+
+.title-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 0%;
+  top: 20.5%;
+  width: 51.2%;
+  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;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 6%;
+  top: 32%;
+  width: 41%;
+  height: 50%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.content-fit :deep(*) { color: #233763 !important; }
+.content-fit :deep(p) { margin: 0 0 0.75rem 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; }
+</style>

package/template/theme/uniminuto/layouts/slide-05-titulo-superior-texto-derecha.vue

@@ -0,0 +1,104 @@
+<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="image-wrap">
+      <slot name="image" />
+    </div>
+
+    <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="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
+        <slot name="content" />
+      </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;
+}
+
+.image-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 6.2%;
+  top: 15%;
+  width: 41.3%;
+  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;
+}
+
+.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;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 18%;
+  width: 42%;
+  height: 57%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.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.55rem; }
+</style>

package/template/theme/uniminuto/layouts/slide-06-titulo-superior-texto-izquierda.vue

@@ -0,0 +1,109 @@
+<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 diapositiva título superior y texto izquierda"
+    />
+
+    <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="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
+        <slot name="content" />
+      </AutoFitText>
+    </div>
+
+    <div class="image-wrap">
+      <slot name="image" />
+    </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;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 6%;
+  top: 18%;
+  width: 41%;
+  height: 57%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.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.55rem; }
+.content-fit :deep(li::marker) { color: #233763 !important; }
+
+.image-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 51.2%;
+  top: 18.8%;
+  width: 41.3%;
+  height: 67.8%;
+  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;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-07-multimedia-con-titulo.vue

@@ -0,0 +1,87 @@
+<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 diapositiva multimedia con título"
+    />
+
+    <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="media-wrap">
+      <slot name="media" />
+    </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;
+}
+
+.media-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 18.2%;
+  top: 18.8%;
+  width: 63.6%;
+  height: 67.8%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: transparent;
+}
+
+.media-wrap :deep(img),
+.media-wrap :deep(video),
+.media-wrap :deep(iframe) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 0;
+  display: block;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-08-titulo-texto.vue

@@ -0,0 +1,78 @@
+<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="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="16" :max="32" line-height="1.35">
+        <slot name="content" />
+      </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;
+}
+
+.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;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 6%;
+  top: 17%;
+  width: 84%;
+  height: 68%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.content-fit :deep(*) { color: #233763 !important; }
+.content-fit :deep(p) { margin: 0 0 1rem 0; }
+.content-fit :deep(ul) { list-style-type: disc !important; padding-left: 1.6rem; }
+.content-fit :deep(li) { display: list-item !important; margin-bottom: 0.55rem; }
+.content-fit :deep(pre) { font-size: 0.62em; line-height: 1.25; }
+</style>

package/template/theme/uniminuto/layouts/slide-09-objetivos.vue

@@ -0,0 +1,77 @@
+<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="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="16" :max="34" line-height="1.35">
+        <slot name="content" />
+      </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;
+}
+
+.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;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 8%;
+  top: 19%;
+  width: 78%;
+  height: 65%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.content-fit :deep(*) { color: #233763 !important; }
+.content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 2rem; }
+.content-fit :deep(li) { display: list-item !important; margin-bottom: 1rem; }
+.content-fit :deep(li::marker) { color: #233763 !important; font-size: 0.9em; }
+</style>

package/template/theme/uniminuto/layouts/slide-10-titulo-dos-columnas.vue

@@ -0,0 +1,89 @@
+<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="left-wrap">
+      <AutoFitText tag="div" class="column-fit" :min="14" :max="28" line-height="1.35">
+        <slot name="left" />
+      </AutoFitText>
+    </div>
+
+    <div class="right-wrap">
+      <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;
+}
+
+.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;
+}
+
+.left-wrap,
+.right-wrap {
+  position: absolute;
+  z-index: 2;
+  top: 17%;
+  height: 68%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.left-wrap { left: 11%; width: 36%; }
+.right-wrap { left: 52%; width: 36%; }
+
+.column-fit :deep(*) { color: #233763 !important; }
+.column-fit :deep(h1),
+.column-fit :deep(h2),
+.column-fit :deep(h3) { margin: 0 0 0.6rem 0; font-weight: 800; color: #233763 !important; }
+.column-fit :deep(p) { margin: 0 0 0.8rem 0; }
+.column-fit :deep(ul) { list-style-type: disc !important; margin: 0; 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>