mirror of
https://github.com/Lil-Carpi/LDM-ASIR.git
synced 2025-12-06 00:03:48 +00:00
Cambios realizados: Borrado el primer '.content' por duplicacion, al igual que '.sectionTitle. Solucionado un error visual con las tarjetas de videojuegos (Linea horizontal que aparecia a los ~400px. Solucionado error que hacia que la navbar saliera de la pagina en ventanas menores a ~380px). '
This commit is contained in:
@@ -13,27 +13,11 @@ body
|
||||
background: linear-gradient(135deg, #0f172a, #1e293b);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 12rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sectionTitle
|
||||
{
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
color: #00c3ff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 15px rgba(0, 195, 255, 0.6);
|
||||
}
|
||||
|
||||
|
||||
/*=======NAVBAR======*/
|
||||
.navbar
|
||||
@@ -42,7 +26,7 @@ body
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
/*width: calc(100% - 2rem);*/
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
z-index: 100;
|
||||
@@ -64,7 +48,7 @@ body
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
margin-right: 1rem
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
@@ -102,15 +86,15 @@ body
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
@media (max-width: 767px){
|
||||
.hamburger-label { display: block; }
|
||||
|
||||
.navbarLinks
|
||||
{
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 6rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -137,10 +121,8 @@ body
|
||||
/*======Footer======*/
|
||||
.footer
|
||||
{
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
padding: 1rem;
|
||||
padding-top: 3rem;
|
||||
color: white;
|
||||
z-index: 50;
|
||||
border-radius: 20px;
|
||||
@@ -318,7 +300,7 @@ body
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: #1e239b;
|
||||
background: linear-gradient(to bottom, #1e293b, #0f172a);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -384,7 +366,7 @@ body
|
||||
{
|
||||
color: #cd7f32;
|
||||
border-color: #cd7f32;
|
||||
box-shadow: rgba(205, 127, 50, 0.4);
|
||||
box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
|
||||
}
|
||||
|
||||
.card-content h3
|
||||
@@ -517,6 +499,7 @@ body
|
||||
transition: all 0.5s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-neon:hover
|
||||
@@ -533,4 +516,53 @@ body
|
||||
}
|
||||
.rank-card {height: auto;}
|
||||
.card-img { height: 250px;}
|
||||
.card-content { height: auto; flex: 1;}
|
||||
}
|
||||
|
||||
/*Nueva media query para la navbar.
|
||||
Tenia el siguiente problema:
|
||||
- A partir de ~400px de ancho, esta comenzaba a irse a la derecha,
|
||||
ocultando el desplegador de menu y moviendo la navbar fuera
|
||||
de la pantalla.
|
||||
|
||||
Ocurria por el section-title y el highlight-neon, que hacia que
|
||||
la barra no pudiera achicarse mas debido a que este estaba limitando
|
||||
el movimiento por no bajar y separar las palabras como debia.
|
||||
|
||||
Es decir:
|
||||
Antes:
|
||||
Quedaba "Top 3" arriba
|
||||
Y quedaba "vendes Setmanals" abajo, sin romperse y ponerse
|
||||
uno encima de otro o haciendose mas pequeño.
|
||||
|
||||
Lo siguiente soluciona el problema:
|
||||
*/
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.section-title {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.highlight-neon {
|
||||
display:block;
|
||||
margin-left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.navbar{
|
||||
width: auto;
|
||||
padding: 0.8rem 0.8rem;
|
||||
/*width: calc(100% - 1rem); */
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
.logoContainer a {
|
||||
font-size: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.logoContainer a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<html lang="ca">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -82,6 +82,9 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
|
||||
Reference in New Issue
Block a user