Skip to content

Commit 896010f

Browse files
1cgonza1cgonza
authored
Merge pull request #57 from enflujo/cariños-diseño-5
💖 Cariños en el estilo de la maloca
2 parents bd523a6 + 0dcbdc1 commit 896010f

File tree

7 files changed

+234
-60
lines changed

7 files changed

+234
-60
lines changed

‎src/componentes/Menus.astro

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
9999
@import '@/scss/_constantes.scss';
100100

101101
$menuRayaAncho: 30px;
102+
$menuRayaAnchoCelular: 25px;
102103
$menuRayaAlto: 2px;
103104
$menuRayaRadio: 2px;
104105
$menuRayaEspacio: 8px;
@@ -131,8 +132,8 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
131132
position: fixed;
132133
right: 0;
133134
top: 0;
134-
width: var(--anchoMarco);
135-
height: var(--anchoMarco);
135+
width: 45px;
136+
height: 45px;
136137
display: flex;
137138
justify-content: center;
138139
align-items: center;
@@ -141,7 +142,7 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
141142
}
142143

143144
.menuRaya {
144-
width: $menuRayaAncho;
145+
width: $menuRayaAnchoCelular;
145146
height: $menuRayaAlto;
146147
background-color: $menuRayaColor;
147148
border-radius: $menuRayaRadio;
@@ -150,7 +151,7 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
150151
&::after {
151152
content: '';
152153
position: absolute;
153-
width: $menuRayaAncho;
154+
width: $menuRayaAnchoCelular;
154155
height: $menuRayaAlto;
155156
background-color: $menuRayaColor;
156157
border-radius: $menuRayaRadio;
@@ -278,10 +279,34 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
278279
@media (min-width: $minCelular) {
279280
.menuBtn {
280281
width: var(--anchoMarco);
282+
height: var(--anchoMarco);
281283
right: 0;
282284
top: 0;
283285
cursor: pointer;
284286
}
287+
.menuRaya {
288+
width: $menuRayaAncho;
289+
height: $menuRayaAlto;
290+
background-color: $menuRayaColor;
291+
border-radius: $menuRayaRadio;
292+
transition: all 0.2s ease-in-out;
293+
&::before,
294+
&::after {
295+
content: '';
296+
position: absolute;
297+
width: $menuRayaAncho;
298+
height: $menuRayaAlto;
299+
background-color: $menuRayaColor;
300+
border-radius: $menuRayaRadio;
301+
transition: all 0.5s ease-in-out;
302+
}
303+
&::before {
304+
transform: translate(0, -$menuRayaEspacio);
305+
}
306+
&::after {
307+
transform: translate(0, $menuRayaEspacio);
308+
}
309+
}
285310

286311
.navegacion {
287312
font-weight: $fuentePrincipalBold;
@@ -336,6 +361,10 @@ const rutaActual = Astro.url.pathname.slice(1).split('/');
336361
#menuContenido {
337362
width: 45vw;
338363
}
364+
#menuBtn {
365+
width: var(--anchoMarco);
366+
height: var(--anchoMarco);
367+
}
339368
}
340369
}
341370
// Pantallas grandes

‎src/componentes/svg/Logo.astro

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const { clase } = Astro.props;
2222
&.menuSuperior {
2323
fill: #fff;
2424
background-color: var(--colorPrincipal);
25-
width: var(--anchoMarco);
26-
height: var(--anchoMarco);
25+
width: 40px;
26+
height: 40px;
2727
padding: 8px;
2828
}
2929

@@ -34,6 +34,14 @@ const { clase } = Astro.props;
3434

3535
@media (min-width: $minCelular) {
3636
.enflujoLogo {
37+
&.menuSuperior {
38+
fill: #fff;
39+
background-color: var(--colorPrincipal);
40+
width: var(--anchoMarco);
41+
height: var(--anchoMarco);
42+
padding: 8px;
43+
}
44+
3745
&.inicio {
3846
fill: var(--colorPrincipal);
3947
width: 80px;

‎src/pages/index.astro

Lines changed: 173 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,20 @@ const { general } = await obtenerDatos<{ general: MetadatosGenerales }>(General)
2828

2929
<Plantilla descripcion={general.descripcion} imagen={general.imagen}>
3030
<main id="inicio">
31-
<div id="lado1" class="lado">
32-
<Logo clase="inicio" />
33-
<div class="titulos">
34-
<h1 class="titulo">{general.nombre}</h1>
35-
<p class="subtitulo">{general.subtitulo}</p>
36-
</div>
31+
<div id="muchachita">
32+
<img src="https://muchachita.enflujo.com/" alt="Video en vivo del laboratorio EnFlujo" />
3733
</div>
3834

39-
<div class="contenido">{general.contenido}</div>
35+
<div id="contenedorTextoInicio">
36+
<div id="lado1" class="lado">
37+
<Logo clase="inicio" />
38+
<div class="titulos">
39+
<h1 class="titulo">{general.nombre}</h1>
40+
<p class="subtitulo">{general.subtitulo}</p>
41+
</div>
42+
</div>
4043

41-
<div id="muchachita">
42-
<img src="https://muchachita.enflujo.com/" alt="Video en vivo del laboratorio EnFlujo" />
44+
<div class="contenido">{general.contenido}</div>
4345
</div>
4446
</main>
4547
</Plantilla>
@@ -49,12 +51,12 @@ const { general } = await obtenerDatos<{ general: MetadatosGenerales }>(General)
4951

5052
#muchachita {
5153
position: absolute;
52-
top: var(--anchoMarco);
53-
width: calc(100% - (var(--anchoMarco) * 2) - 4px);
54+
top: 40px;
55+
width: calc(100% - (80px) - 3px);
5456
height: calc(100vh - (var(--anchoMarco) * 2) - 4px);
5557
overflow: hidden;
5658
z-index: 1;
57-
opacity: 0.5;
59+
opacity: 1;
5860
pointer-events: none;
5961

6062
img {
@@ -84,73 +86,195 @@ const { general } = await obtenerDatos<{ general: MetadatosGenerales }>(General)
8486
align-items: center;
8587
}
8688

87-
.titulo {
88-
font-size: 10vw;
89-
margin-top: -0.44em;
90-
color: var(--colorPrincipal);
91-
border-bottom: 3px solid;
92-
letter-spacing: -3px;
93-
padding-top: 3px;
94-
}
89+
.titulos {
90+
width: 100%;
91+
text-align: center;
92+
margin-top: calc(80vw - 80px);
93+
94+
.titulo {
95+
font-size: 12.5vw;
96+
color: var(--colorPrincipal);
97+
border-bottom: 2px solid;
98+
max-width: 80%;
99+
margin: auto;
100+
letter-spacing: 0px;
101+
padding-top: 3px;
102+
padding-bottom: 10px;
103+
}
95104

96-
.subtitulo {
97-
font-size: 0.9em;
98-
font-weight: $fuentePrincipalBold;
99-
color: var(--colorPrincipal);
105+
.subtitulo {
106+
font-size: 0.9em;
107+
font-weight: 600;
108+
color: var(--colorPrincipal);
109+
}
100110
}
101111

102112
.contenido {
103-
padding: 2em 1em 5em;
113+
padding: 1.5em 1.8em 5em;
114+
font-size: 0.95em;
104115
}
105116

106117
#ante {
107118
font-weight: bold;
108119
}
109120

110-
.titulos {
111-
width: 100%;
112-
text-align: center;
113-
}
114-
115121
// Teléfonos horizontal
116122
@media (min-width: $minCelular) {
117-
.contenido {
118-
padding: calc(var(--anchoMarco) + 2em) 100px 0 calc(var(--anchoMarco) + 5em);
119-
}
123+
#muchachita {
124+
position: absolute;
125+
top: var(--anchoMarco);
126+
width: 49vw;
127+
height: 77vh;
128+
overflow: hidden;
129+
z-index: 1;
130+
opacity: 0.5;
120131

121-
#lado1 {
122-
padding: calc(var(--anchoMarco) + 2em) 0 0 calc(var(--anchoMarco) + 2em);
132+
img {
133+
width: 100%;
134+
height: auto;
135+
}
123136
}
124137

125-
.titulos {
126-
width: auto;
127-
text-align: left;
128-
}
138+
#contenedorTextoInicio {
139+
display: flex;
140+
flex-direction: row;
141+
justify-content: center;
142+
padding-bottom: 6vh;
129143

130-
.titulo {
131-
font-size: 3.5em;
144+
#lado1 {
145+
padding: calc(var(--anchoMarco) + 2em) 0 0 calc(var(--anchoMarco) + 2em);
146+
display: flex;
147+
justify-content: center;
148+
align-items: flex-start;
149+
}
150+
151+
.titulos {
152+
width: auto;
153+
text-align: left;
154+
margin-top: 0;
155+
.titulo {
156+
font-size: 2.5em;
157+
margin-top: -0.44em;
158+
color: var(--colorPrincipal);
159+
border-bottom: 3px solid;
160+
letter-spacing: -3px;
161+
padding-top: 3px;
162+
max-width: 100%;
163+
}
164+
.subtitulo {
165+
font-size: 0.9em;
166+
font-weight: $fuentePrincipalBold;
167+
color: var(--colorPrincipal);
168+
}
169+
}
132170
}
133171
}
134-
135172
// Pantallas medianas (Tablets)
136173
@media (min-width: $minTablet) {
137-
.enflujoLogo {
138-
width: 151px;
139-
margin-top: 4em;
140-
// position: absolute;
174+
#muchachita {
175+
img {
176+
width: 100%;
177+
height: auto;
178+
}
141179
}
142180

143-
.nombrePortada {
144-
align-items: flex-start;
145-
margin-left: 30px;
181+
#contenedorTextoInicio {
182+
#lado1 {
183+
padding: calc(var(--anchoMarco) + 2em) 0 0 calc(var(--anchoMarco) + 1em);
184+
display: flex;
185+
justify-content: center;
186+
align-items: flex-start;
187+
}
188+
189+
.titulos {
190+
.titulo {
191+
font-size: 2.8em;
192+
margin-top: -0.44em;
193+
color: var(--colorPrincipal);
194+
border-bottom: 3px solid;
195+
letter-spacing: -3px;
196+
padding-top: 3px;
197+
max-width: 100%;
198+
}
199+
.subtitulo {
200+
font-size: 0.7em;
201+
font-weight: $fuentePrincipalBold;
202+
color: var(--colorPrincipal);
203+
}
204+
}
205+
.enflujoLogo {
206+
width: 151px;
207+
margin-top: 4em;
208+
}
209+
210+
.nombrePortada {
211+
align-items: flex-start;
212+
margin-left: 30px;
213+
}
214+
215+
.contenido {
216+
padding: calc(var(--anchoMarco) - 10px) 30px 30px 11vw;
217+
height: 71vh;
218+
overflow: scroll;
219+
}
146220
}
147221
}
148222

149223
// Dispositivos grandes y pantallas medianas
150224
@media (min-width: $minPantalla) {
225+
#contenedorTextoInicio {
226+
justify-content: left;
227+
228+
.titulos {
229+
width: auto;
230+
text-align: left;
231+
margin-top: 0;
232+
.titulo {
233+
font-size: 3.5em;
234+
margin-top: -0.44em;
235+
color: var(--colorPrincipal);
236+
border-bottom: 3px solid;
237+
letter-spacing: -3px;
238+
padding-top: 3px;
239+
max-width: 100%;
240+
}
241+
.subtitulo {
242+
font-size: 0.9em;
243+
font-weight: $fuentePrincipalBold;
244+
color: var(--colorPrincipal);
245+
}
246+
}
247+
#lado1 {
248+
justify-content: left;
249+
padding: calc(var(--anchoMarco) + 2em) 0 0 calc(var(--anchoMarco) + 3em);
250+
display: flex;
251+
align-items: flex-start;
252+
}
253+
.contenido {
254+
padding: calc(var(--anchoMarco) + 2em) 3vw 0 calc(var(--anchoMarco) + 5em);
255+
overflow: auto;
256+
}
257+
}
258+
#muchachita {
259+
position: absolute;
260+
top: var(--anchoMarco);
261+
width: calc(100% - (var(--anchoMarco) * 2) - 4px);
262+
height: calc(100vh - (var(--anchoMarco) * 2) - 2px);
263+
z-index: 1;
264+
265+
img {
266+
width: 100%;
267+
height: auto;
268+
}
269+
}
151270
}
152271

153272
// Pantallas grandes
154273
@media (min-width: $minPantallaGrande) {
274+
.contenido {
275+
padding: calc(var(--anchoMarco) + 2em) 100px 0 calc(var(--anchoMarco) + 5em);
276+
margin-right: 10vw;
277+
max-width: 800px;
278+
}
155279
}
156280
</style>

‎src/pages/proyectos/index.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ if (!pagina) return Astro.redirect('/404');
8787
position: fixed;
8888
top: var(--anchoMarco);
8989
left: var(--anchoMarco);
90-
z-index: -1;
90+
z-index: 1;
9191
opacity: 0.2;
9292
pointer-events: none;
9393
width: calc(100% - (var(--anchoMarco) * 2) - 4px);

0 commit comments

Comments
 (0)