@crtobiasdelsud/portal-ui 1.1.3 → 1.1.4
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crtobiasdelsud/portal-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.js",
|
|
@@ -69,6 +69,11 @@
|
|
|
69
69
|
// inline (color + peso) DENTRO de la misma caja, así no se ve corte entre
|
|
70
70
|
// las dos partes del texto.
|
|
71
71
|
.headline {
|
|
72
|
+
// INLINE a propósito: box-decoration-break: clone solo parte el fondo por
|
|
73
|
+
// renglón en cajas inline. En un h2 block-level el background es UN rectángulo
|
|
74
|
+
// macizo que cubre todas las líneas (el "bloque horrible"). Inline + clone hace
|
|
75
|
+
// que cada renglón sea su propia caja blanca ajustada al texto (efecto resaltador).
|
|
76
|
+
display: inline;
|
|
72
77
|
-webkit-box-decoration-break: clone;
|
|
73
78
|
box-decoration-break: clone;
|
|
74
79
|
background: #fff;
|
|
@@ -77,7 +82,11 @@
|
|
|
77
82
|
color: var(--text-color, #252523);
|
|
78
83
|
font-size: 20px;
|
|
79
84
|
font-weight: 800;
|
|
80
|
-
|
|
85
|
+
// Cada renglón es una caja blanca clonada (box-decoration-break). El hueco
|
|
86
|
+
// entre renglones es line-height − altura_de_fuente − 2·padding(3px). Con 1.55
|
|
87
|
+
// ese hueco caía a ~2px y las cajas se tocaban según el título; 1.9 garantiza
|
|
88
|
+
// ~9px parejo. Tablet/desktop ya tienen aire suficiente con 1.7.
|
|
89
|
+
line-height: 1.9;
|
|
81
90
|
|
|
82
91
|
@include respond(tablet) {
|
|
83
92
|
font-size: 30px;
|
|
@@ -127,15 +136,21 @@
|
|
|
127
136
|
// ── Hero importante ──────────────────────────────────────────────────────
|
|
128
137
|
.important {
|
|
129
138
|
.mediaBox {
|
|
139
|
+
// aspect 16/9 (NO 16/7): con object-fit cover, una caja más ancha que la
|
|
140
|
+
// imagen (16:9) recorta arriba/abajo y corta la cabeza del sujeto. 16/9 iguala
|
|
141
|
+
// el ratio típico de la foto → no recorta en vertical y la imagen "ocupa más".
|
|
130
142
|
@include respond(tablet) {
|
|
131
|
-
aspect-ratio: 16 /
|
|
143
|
+
aspect-ratio: 16 / 9;
|
|
132
144
|
}
|
|
133
|
-
// Desktop:
|
|
134
|
-
//
|
|
135
|
-
//
|
|
145
|
+
// Desktop: el hero importante va a todo el ancho (banner), sin un hermano
|
|
146
|
+
// flex que defina el alto de la fila → el `height: 100%` heredado del base
|
|
147
|
+
// colapsa a 0 y la imagen (AspectImage en modo `fill`, absolute) desaparece.
|
|
148
|
+
// Le damos alto propio derivado del ancho con aspect-ratio 16/9; el tope alto
|
|
149
|
+
// (760px) sólo recorta en pantallas muy anchas para no desbordar la pantalla.
|
|
136
150
|
@include respond(desktop) {
|
|
137
|
-
|
|
138
|
-
|
|
151
|
+
height: auto;
|
|
152
|
+
aspect-ratio: 16 / 9;
|
|
153
|
+
max-height: 760px;
|
|
139
154
|
}
|
|
140
155
|
}
|
|
141
156
|
|
|
@@ -82,19 +82,12 @@
|
|
|
82
82
|
// uppercase. El tamaño chico la hace funcionar como "etiqueta de sección".
|
|
83
83
|
.volanta {
|
|
84
84
|
color: var(--primary-color, #4bac48);
|
|
85
|
-
font-size
|
|
85
|
+
// Mismo tamaño que el título (como en V2): antes tenía font-size propio chico
|
|
86
|
+
// (14/18/20) y quedaba diminuta al lado del headline de 32px. Hereda del h2.
|
|
87
|
+
font-size: inherit;
|
|
86
88
|
font-weight: 700;
|
|
87
89
|
text-transform: uppercase;
|
|
88
90
|
letter-spacing: 0.04em;
|
|
89
|
-
white-space: nowrap;
|
|
90
|
-
|
|
91
|
-
@include respond(tablet) {
|
|
92
|
-
font-size: 18px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
@include respond(desktop) {
|
|
96
|
-
font-size: 20px;
|
|
97
|
-
}
|
|
98
91
|
}
|
|
99
92
|
|
|
100
93
|
.headline {
|
|
@@ -147,15 +140,21 @@
|
|
|
147
140
|
// ── Hero importante ──────────────────────────────────────────────────────
|
|
148
141
|
.important {
|
|
149
142
|
.mediaBox {
|
|
143
|
+
// aspect 16/9 (NO 16/7): con object-fit cover, una caja más ancha que la
|
|
144
|
+
// imagen (16:9) recorta arriba/abajo y corta la cabeza del sujeto. 16/9 iguala
|
|
145
|
+
// el ratio típico de la foto → no recorta en vertical y la imagen "ocupa más".
|
|
150
146
|
@include respond(tablet) {
|
|
151
|
-
aspect-ratio: 16 /
|
|
147
|
+
aspect-ratio: 16 / 9;
|
|
152
148
|
}
|
|
153
|
-
// Desktop:
|
|
154
|
-
//
|
|
155
|
-
//
|
|
149
|
+
// Desktop: el hero importante va a todo el ancho (banner), sin un hermano
|
|
150
|
+
// flex que defina el alto de la fila → el `height: 100%` heredado del base
|
|
151
|
+
// colapsa a 0 y la imagen (AspectImage en modo `fill`, absolute) desaparece.
|
|
152
|
+
// Le damos alto propio derivado del ancho con aspect-ratio 16/9; el tope alto
|
|
153
|
+
// (760px) sólo recorta en pantallas muy anchas para no desbordar la pantalla.
|
|
156
154
|
@include respond(desktop) {
|
|
157
|
-
|
|
158
|
-
|
|
155
|
+
height: auto;
|
|
156
|
+
aspect-ratio: 16 / 9;
|
|
157
|
+
max-height: 760px;
|
|
159
158
|
}
|
|
160
159
|
}
|
|
161
160
|
|