create-openclass-uniminuto 1.4.1 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/bin/create-openclass-uniminuto.mjs +81 -1
  2. package/package.json +3 -3
  3. package/template/README.md +326 -329
  4. package/template/package-lock.json +11568 -11576
  5. package/template/package.json +63 -65
  6. package/template/public/imagenes/avion.png +0 -0
  7. package/template/public/imagenes/favicon.png +0 -0
  8. package/template/scripts/generar-desde-config.mjs +348 -632
  9. package/template/theme/uniminuto/components/AutoFitText.vue +7 -2
  10. package/template/theme/uniminuto/components/TitleRibbon.vue +222 -0
  11. package/template/theme/uniminuto/layouts/README.md +99 -0
  12. package/template/theme/uniminuto/layouts/slide-02-titulo.vue +29 -47
  13. package/template/theme/uniminuto/layouts/slide-03-imagen-izquierda.vue +43 -69
  14. package/template/theme/uniminuto/layouts/slide-04-imagen-derecha.vue +49 -75
  15. package/template/theme/uniminuto/layouts/slide-05-titulo-superior-texto-derecha.vue +34 -66
  16. package/template/theme/uniminuto/layouts/slide-06-titulo-superior-texto-izquierda.vue +28 -78
  17. package/template/theme/uniminuto/layouts/slide-07-multimedia-con-titulo.vue +10 -66
  18. package/template/theme/uniminuto/layouts/slide-08-titulo-texto.vue +24 -53
  19. package/template/theme/uniminuto/layouts/slide-09-objetivos.vue +26 -53
  20. package/template/theme/uniminuto/layouts/slide-10-titulo-dos-columnas.vue +27 -59
  21. package/template/theme/uniminuto/layouts/slide-11-dos-titulos-dos-columnas.vue +32 -65
  22. package/template/theme/uniminuto/layouts/slide-codigo.vue +16 -113
  23. package/template/theme/uniminuto/styles/base.css +214 -109
  24. package/template/public/fondos/slide-02-titulo.png +0 -0
  25. package/template/public/fondos/slide-03-imagen-izquierda.png +0 -0
  26. package/template/public/fondos/slide-04-imagen-derecha.png +0 -0
package/template/theme/uniminuto/layouts/slide-04-imagen-derecha.vue CHANGED
@@ -1,110 +1,84 @@
1
1
  <script setup>
2
2
  import AutoFitText from '../components/AutoFitText.vue'
3
+ import TitleRibbon from '../components/TitleRibbon.vue'
3
4
  </script>
4
5
 
5
6
  <template>
6
7
  <div class="slide-layout">
7
- <img
8
- class="slide-bg"
9
- src="/fondos/slide-04-imagen-derecha.png"
10
- alt="Fondo diapositiva imagen derecha"
11
- />
12
-
13
- <div class="image-wrap">
14
- <slot name="image" />
15
- </div>
8
+ <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
16
9
 
17
10
  <div class="title-wrap">
18
- <AutoFitText tag="h1" class="title" :min="18" :max="36" line-height="1.05">
11
+ <TitleRibbon align="center" :show-plane="false" :min="21" :max="38" line-height="1.2">
19
12
  <slot name="title">Agrega un título</slot>
20
- </AutoFitText>
13
+ </TitleRibbon>
21
14
  </div>
22
15
 
23
16
  <div class="content-wrap">
24
- <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
17
+ <AutoFitText tag="div" class="content-fit" :min="15" :max="30" line-height="1.26">
25
18
  <slot name="content" />
26
19
  </AutoFitText>
27
20
  </div>
21
+
22
+ <div class="image-wrap uni-image-slot">
23
+ <slot name="image" />
24
+ </div>
28
25
  </div>
29
26
  </template>
30
27
 
31
28
  <style scoped>
32
- .slide-layout {
33
- position: relative;
34
- width: 100%;
35
- height: 100%;
36
- overflow: hidden;
37
- background: #ffffff;
38
- }
29
+ .slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
30
+ .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
39
31
 
40
- .slide-bg {
32
+ .title-wrap {
41
33
  position: absolute;
42
- inset: 0;
43
- width: 100%;
44
- height: 100%;
45
- object-fit: cover;
46
- z-index: 1;
34
+ z-index: 3;
35
+ left: 0;
36
+ top: 16%;
37
+ width: 52.8%;
38
+ min-height: 9.2%;
39
+ --ribbon-min-height: clamp(60px, 7.8vh, 92px);
40
+ --ribbon-padding-x: 2.2rem;
47
41
  }
48
42
 
49
- .image-wrap {
43
+ .content-wrap {
50
44
  position: absolute;
51
45
  z-index: 2;
52
- left: 51.2%;
53
- top: 15%;
54
- width: 40%;
55
- height: 78%;
56
- display: flex;
57
- align-items: center;
58
- justify-content: center;
59
- overflow: hidden;
60
- }
61
-
62
- .image-wrap :deep(img),
63
- .image-wrap :deep(video),
64
- .image-wrap :deep(iframe) {
65
- width: 100%;
66
- height: 100%;
67
- object-fit: cover;
68
- border: 0;
69
- display: block;
46
+ left: 6.2%;
47
+ top: 31.0%;
48
+ width: 40.6%;
49
+ height: 55.2%;
50
+ color: #233763 !important;
51
+ font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
70
52
  }
71
53
 
72
- .title-wrap {
54
+ .image-wrap {
73
55
  position: absolute;
74
56
  z-index: 2;
75
- left: 0%;
76
- top: 20.5%;
77
- width: 51.2%;
78
- height: 6.8%;
79
- display: flex;
80
- align-items: center;
81
- justify-content: center;
82
- text-align: center;
83
- padding: 0 1rem;
84
- box-sizing: border-box;
57
+ left: 60%;
58
+ top: 16%;
59
+ width: 39.2%;
60
+ height: 75%;
85
61
  }
86
62
 
87
- .title {
88
- margin: 0 !important;
89
- color: #ffffff !important;
90
- font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
91
- font-weight: 800;
92
- }
93
-
94
- .content-wrap {
95
- position: absolute;
96
- z-index: 2;
97
- left: 6%;
98
- top: 32%;
99
- width: 41%;
100
- height: 50%;
101
- color: #233763 !important;
102
- font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
103
- }
63
+ .image-wrap :deep(p) { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; }
64
+ .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; }
104
65
 
105
66
  .content-fit :deep(*) { color: #233763 !important; }
106
67
  .content-fit :deep(p) { margin: 0 0 0.75rem 0; }
107
- .content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 1.6rem; }
108
- .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.5rem; }
109
- .content-fit :deep(li::marker) { color: #233763 !important; }
68
+ .content-fit :deep(strong) { font-weight: 900; }
69
+ .content-fit :deep(ul),
70
+ .content-fit :deep(ol) {
71
+ list-style-position: outside !important;
72
+ margin: 0 0 0.75rem 0;
73
+ padding-left: 1.65rem;
74
+ }
75
+ .content-fit :deep(ul) { list-style-type: disc !important; }
76
+ .content-fit :deep(ol) { list-style-type: decimal !important; }
77
+ .content-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
78
+ .content-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
79
+ .content-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
80
+ .content-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
81
+ .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
82
+ .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
83
+ .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
110
84
  </style>
package/template/theme/uniminuto/layouts/slide-05-titulo-superior-texto-derecha.vue CHANGED
@@ -6,18 +6,18 @@ import AutoFitText from '../components/AutoFitText.vue'
6
6
  <div class="slide-layout">
7
7
  <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
8
8
 
9
- <div class="image-wrap">
9
+ <div class="image-wrap uni-image-slot">
10
10
  <slot name="image" />
11
11
  </div>
12
12
 
13
13
  <div class="title-wrap">
14
- <AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
14
+ <AutoFitText tag="h1" class="title" :min="28" :max="60" line-height="1.04">
15
15
  <slot name="title">Agrega un título</slot>
16
16
  </AutoFitText>
17
17
  </div>
18
18
 
19
19
  <div class="content-wrap">
20
- <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
20
+ <AutoFitText tag="div" class="content-fit" :min="16" :max="34" line-height="1.28">
21
21
  <slot name="content" />
22
22
  </AutoFitText>
23
23
  </div>
@@ -25,80 +25,48 @@ import AutoFitText from '../components/AutoFitText.vue'
25
25
  </template>
26
26
 
27
27
  <style scoped>
28
- .slide-layout {
29
- position: relative;
30
- width: 100%;
31
- height: 100%;
32
- overflow: hidden;
33
- background: #ffffff;
34
- }
35
-
36
- .slide-bg {
37
- position: absolute;
38
- inset: 0;
39
- width: 100%;
40
- height: 100%;
41
- object-fit: cover;
42
- z-index: 1;
43
- }
44
-
45
- .image-wrap {
46
- position: absolute;
47
- z-index: 2;
48
- left: 6.2%;
49
- top: 15%;
50
- width: 41.3%;
51
- height: 78%;
52
- display: flex;
53
- align-items: center;
54
- justify-content: center;
55
- overflow: hidden;
56
- }
57
-
58
- .image-wrap :deep(img),
59
- .image-wrap :deep(video),
60
- .image-wrap :deep(iframe) {
61
- width: 100%;
62
- height: 100%;
63
- object-fit: cover;
64
- border: 0;
65
- display: block;
66
- }
28
+ .slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
29
+ .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
67
30
 
68
31
  .title-wrap {
69
32
  position: absolute;
70
33
  z-index: 2;
71
- left: 3.2%;
72
- top: 2%;
73
- width: 49%;
74
- height: 8%;
34
+ left: 3.6%;
35
+ top: 1%;
36
+ width: 55%;
37
+ height: 10.2%;
75
38
  display: flex;
76
39
  align-items: center;
77
40
  justify-content: flex-start;
78
- padding-left: 0.5rem;
41
+ padding-left: 0.75rem;
79
42
  box-sizing: border-box;
80
43
  }
81
44
 
82
- .title {
83
- margin: 0 !important;
84
- color: #ffffff !important;
85
- font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
86
- font-weight: 800;
87
- }
45
+ .title { margin: 0 !important; color: #ffffff !important; font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; }
88
46
 
89
- .content-wrap {
90
- position: absolute;
91
- z-index: 2;
92
- left: 50%;
93
- top: 18%;
94
- width: 42%;
95
- height: 57%;
96
- color: #233763 !important;
97
- font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
98
- }
47
+ .image-wrap { position: absolute; z-index: 2; left: 10%; top: 16.2%; width: 40%; height: 75%; }
48
+ .content-wrap { position: absolute; z-index: 2; left: 50.2%; top: 17.0%; width: 43%; height: 67.5%; color: #233763 !important; font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif); }
49
+
50
+ .image-wrap :deep(p) { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; }
51
+ .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; }
99
52
 
100
53
  .content-fit :deep(*) { color: #233763 !important; }
101
- .content-fit :deep(p) { margin: 0 0 0.7rem 0; }
102
- .content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 1.6rem; }
103
- .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.55rem; }
54
+ .content-fit :deep(p) { margin: 0 0 0.75rem 0; }
55
+ .content-fit :deep(strong) { font-weight: 900; }
56
+ .content-fit :deep(ul),
57
+ .content-fit :deep(ol) {
58
+ list-style-position: outside !important;
59
+ margin: 0 0 0.75rem 0;
60
+ padding-left: 1.65rem;
61
+ }
62
+ .content-fit :deep(ul) { list-style-type: disc !important; }
63
+ .content-fit :deep(ol) { list-style-type: decimal !important; }
64
+ .content-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
65
+ .content-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
66
+ .content-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
67
+ .content-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
68
+ .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
69
+ .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
70
+ .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
71
+
104
72
  </style>
package/template/theme/uniminuto/layouts/slide-06-titulo-superior-texto-izquierda.vue CHANGED
@@ -4,106 +4,56 @@ import AutoFitText from '../components/AutoFitText.vue'
4
4
 
5
5
  <template>
6
6
  <div class="slide-layout">
7
- <img
8
- class="slide-bg"
9
- src="/fondos/slide-05-template.png"
10
- alt="Fondo diapositiva título superior y texto izquierda"
11
- />
7
+ <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
12
8
 
13
9
  <div class="title-wrap">
14
- <AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
10
+ <AutoFitText tag="h1" class="title" :min="28" :max="60" line-height="1.04">
15
11
  <slot name="title">Agrega un título</slot>
16
12
  </AutoFitText>
17
13
  </div>
18
14
 
19
15
  <div class="content-wrap">
20
- <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.32">
16
+ <AutoFitText tag="div" class="content-fit" :min="16" :max="34" line-height="1.28">
21
17
  <slot name="content" />
22
18
  </AutoFitText>
23
19
  </div>
24
20
 
25
- <div class="image-wrap">
21
+ <div class="image-wrap uni-image-slot">
26
22
  <slot name="image" />
27
23
  </div>
28
24
  </div>
29
25
  </template>
30
26
 
31
27
  <style scoped>
32
- .slide-layout {
33
- position: relative;
34
- width: 100%;
35
- height: 100%;
36
- overflow: hidden;
37
- background: #ffffff;
38
- }
39
-
40
- .slide-bg {
41
- position: absolute;
42
- inset: 0;
43
- width: 100%;
44
- height: 100%;
45
- object-fit: cover;
46
- z-index: 1;
47
- }
28
+ .slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
29
+ .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
48
30
 
49
- .title-wrap {
50
- position: absolute;
51
- z-index: 2;
52
- left: 3.2%;
53
- top: 2%;
54
- width: 49%;
55
- height: 8%;
56
- display: flex;
57
- align-items: center;
58
- justify-content: flex-start;
59
- padding-left: 0.5rem;
60
- box-sizing: border-box;
61
- }
31
+ .title-wrap { position: absolute; z-index: 2; left: 3.4%; top: 1%; width: 59.2%; height: 11.4%; display: flex; align-items: center; justify-content: flex-start; padding-left: 0.75rem; box-sizing: border-box; }
32
+ .title { margin: 0 !important; color: #ffffff !important; font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; }
62
33
 
63
- .title {
64
- margin: 0 !important;
65
- color: #ffffff !important;
66
- font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
67
- font-weight: 800;
68
- }
34
+ .content-wrap { position: absolute; z-index: 2; left: 6%; top: 17.0%; width: 42.5%; height: 67.5%; color: #233763 !important; font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif); }
35
+ .image-wrap { position: absolute; z-index: 2; left: 60%; top: 15%; width: 40%; height: 75%; }
69
36
 
70
- .content-wrap {
71
- position: absolute;
72
- z-index: 2;
73
- left: 6%;
74
- top: 18%;
75
- width: 41%;
76
- height: 57%;
77
- color: #233763 !important;
78
- font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
79
- }
37
+ .image-wrap :deep(p) { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; }
38
+ .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; }
80
39
 
81
40
  .content-fit :deep(*) { color: #233763 !important; }
82
- .content-fit :deep(p) { margin: 0 0 0.7rem 0; }
83
- .content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 1.6rem; }
84
- .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.55rem; }
85
- .content-fit :deep(li::marker) { color: #233763 !important; }
86
-
87
- .image-wrap {
88
- position: absolute;
89
- z-index: 2;
90
- left: 51.2%;
91
- top: 18.8%;
92
- width: 41.3%;
93
- height: 67.8%;
94
- display: flex;
95
- align-items: center;
96
- justify-content: center;
97
- overflow: hidden;
41
+ .content-fit :deep(p) { margin: 0 0 0.75rem 0; }
42
+ .content-fit :deep(strong) { font-weight: 900; }
43
+ .content-fit :deep(ul),
44
+ .content-fit :deep(ol) {
45
+ list-style-position: outside !important;
46
+ margin: 0 0 0.75rem 0;
47
+ padding-left: 1.65rem;
98
48
  }
49
+ .content-fit :deep(ul) { list-style-type: disc !important; }
50
+ .content-fit :deep(ol) { list-style-type: decimal !important; }
51
+ .content-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
52
+ .content-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
53
+ .content-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
54
+ .content-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
55
+ .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
56
+ .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
57
+ .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
99
58
 
100
- .image-wrap :deep(img),
101
- .image-wrap :deep(video),
102
- .image-wrap :deep(iframe) {
103
- width: 100%;
104
- height: 100%;
105
- object-fit: cover;
106
- border: 0;
107
- display: block;
108
- }
109
59
  </style>
package/template/theme/uniminuto/layouts/slide-07-multimedia-con-titulo.vue CHANGED
@@ -4,84 +4,28 @@ import AutoFitText from '../components/AutoFitText.vue'
4
4
 
5
5
  <template>
6
6
  <div class="slide-layout">
7
- <img
8
- class="slide-bg"
9
- src="/fondos/slide-05-template.png"
10
- alt="Fondo diapositiva multimedia con título"
11
- />
7
+ <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
12
8
 
13
9
  <div class="title-wrap">
14
- <AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
10
+ <AutoFitText tag="h1" class="title" :min="30" :max="60" line-height="1.04">
15
11
  <slot name="title">Agrega un título</slot>
16
12
  </AutoFitText>
17
13
  </div>
18
14
 
19
- <div class="media-wrap">
15
+ <div class="media-wrap uni-media-slot">
20
16
  <slot name="media" />
21
17
  </div>
22
18
  </div>
23
19
  </template>
24
20
 
25
21
  <style scoped>
26
- .slide-layout {
27
- position: relative;
28
- width: 100%;
29
- height: 100%;
30
- overflow: hidden;
31
- background: #ffffff;
32
- }
22
+ .slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
23
+ .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
33
24
 
34
- .slide-bg {
35
- position: absolute;
36
- inset: 0;
37
- width: 100%;
38
- height: 100%;
39
- object-fit: cover;
40
- z-index: 1;
41
- }
25
+ .title-wrap { position: absolute; z-index: 2; left: 3.4%; top: 1.2%; width: 59.2%; height: 11.4%; display: flex; align-items: center; justify-content: flex-start; padding-left: 0.75rem; box-sizing: border-box; }
26
+ .title { margin: 0 !important; color: #ffffff !important; font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; }
42
27
 
43
- .title-wrap {
44
- position: absolute;
45
- z-index: 2;
46
- left: 3.2%;
47
- top: 2%;
48
- width: 49%;
49
- height: 8%;
50
- display: flex;
51
- align-items: center;
52
- justify-content: flex-start;
53
- padding-left: 0.5rem;
54
- box-sizing: border-box;
55
- }
56
-
57
- .title {
58
- margin: 0 !important;
59
- color: #ffffff !important;
60
- font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
61
- font-weight: 800;
62
- }
63
-
64
- .media-wrap {
65
- position: absolute;
66
- z-index: 2;
67
- left: 18.2%;
68
- top: 18.8%;
69
- width: 63.6%;
70
- height: 67.8%;
71
- display: flex;
72
- align-items: center;
73
- justify-content: center;
74
- overflow: hidden;
75
- background: transparent;
76
- }
77
-
78
- .media-wrap :deep(img),
79
- .media-wrap :deep(video),
80
- .media-wrap :deep(iframe) {
81
- width: 100%;
82
- height: 100%;
83
- object-fit: cover;
84
- border: 0;
85
- display: block;
86
- }
28
+ .media-wrap { position: absolute; z-index: 2; left: 10%; top: 16.5%; width: 80%; height: 74%; overflow: hidden; background: transparent; }
29
+ .media-wrap :deep(p) { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
30
+ .media-wrap :deep(img), .media-wrap :deep(video), .media-wrap :deep(iframe) { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border: 0; }
87
31
  </style>
package/template/theme/uniminuto/layouts/slide-08-titulo-texto.vue CHANGED
@@ -7,13 +7,13 @@ import AutoFitText from '../components/AutoFitText.vue'
7
7
  <img class="slide-bg" src="/fondos/slide-05-template.png" alt="Fondo institucional" />
8
8
 
9
9
  <div class="title-wrap">
10
- <AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
10
+ <AutoFitText tag="h1" class="title" :min="30" :max="60" line-height="1.04">
11
11
  <slot name="title">Agrega un título</slot>
12
12
  </AutoFitText>
13
13
  </div>
14
14
 
15
15
  <div class="content-wrap">
16
- <AutoFitText tag="div" class="content-fit" :min="16" :max="32" line-height="1.35">
16
+ <AutoFitText tag="div" class="content-fit" :min="17" :max="38" line-height="1.30">
17
17
  <slot name="content" />
18
18
  </AutoFitText>
19
19
  </div>
@@ -21,58 +21,29 @@ import AutoFitText from '../components/AutoFitText.vue'
21
21
  </template>
22
22
 
23
23
  <style scoped>
24
- .slide-layout {
25
- position: relative;
26
- width: 100%;
27
- height: 100%;
28
- overflow: hidden;
29
- background: #ffffff;
30
- }
31
-
32
- .slide-bg {
33
- position: absolute;
34
- inset: 0;
35
- width: 100%;
36
- height: 100%;
37
- object-fit: cover;
38
- z-index: 1;
39
- }
40
-
41
- .title-wrap {
42
- position: absolute;
43
- z-index: 2;
44
- left: 3.2%;
45
- top: 2%;
46
- width: 49%;
47
- height: 8%;
48
- display: flex;
49
- align-items: center;
50
- justify-content: flex-start;
51
- padding-left: 0.5rem;
52
- box-sizing: border-box;
53
- }
24
+ .slide-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
25
+ .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
26
+ .title-wrap { position: absolute; z-index: 2; left: 3.4%; top: 1.2%; width: 59.2%; height: 11.4%; display: flex; align-items: center; justify-content: flex-start; padding-left: 0.75rem; box-sizing: border-box; }
27
+ .title { margin: 0 !important; color: #ffffff !important; font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; }
28
+ .content-wrap { position: absolute; z-index: 2; left: 6.3%; top: 16.5%; width: 86.5%; height: 69%; color: #233763 !important; font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif); }
54
29
 
55
- .title {
56
- margin: 0 !important;
57
- color: #ffffff !important;
58
- font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
59
- font-weight: 800;
60
- }
61
-
62
- .content-wrap {
63
- position: absolute;
64
- z-index: 2;
65
- left: 6%;
66
- top: 17%;
67
- width: 84%;
68
- height: 68%;
69
- color: #233763 !important;
70
- font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
30
+ .content-fit :deep(*) { color: #233763 !important; }
31
+ .content-fit :deep(p) { margin: 0 0 0.75rem 0; }
32
+ .content-fit :deep(strong) { font-weight: 900; }
33
+ .content-fit :deep(ul),
34
+ .content-fit :deep(ol) {
35
+ list-style-position: outside !important;
36
+ margin: 0 0 0.75rem 0;
37
+ padding-left: 2.5rem;
71
38
  }
39
+ .content-fit :deep(ul) { list-style-type: disc !important; }
40
+ .content-fit :deep(ol) { list-style-type: decimal !important; }
41
+ .content-fit :deep(ol[type='a']) { list-style-type: lower-alpha !important; }
42
+ .content-fit :deep(ol[type='A']) { list-style-type: upper-alpha !important; }
43
+ .content-fit :deep(ol[type='i']) { list-style-type: lower-roman !important; }
44
+ .content-fit :deep(ol[type='I']) { list-style-type: upper-roman !important; }
45
+ .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.46rem; padding-left: 0.15rem; }
46
+ .content-fit :deep(li::marker) { color: #233763 !important; font-weight: 900; }
47
+ .content-fit :deep(pre) { font-size: 0.58em; line-height: 1.22; }
72
48
 
73
- .content-fit :deep(*) { color: #233763 !important; }
74
- .content-fit :deep(p) { margin: 0 0 1rem 0; }
75
- .content-fit :deep(ul) { list-style-type: disc !important; padding-left: 1.6rem; }
76
- .content-fit :deep(li) { display: list-item !important; margin-bottom: 0.55rem; }
77
- .content-fit :deep(pre) { font-size: 0.62em; line-height: 1.25; }
78
49
  </style>