Nexos/cnt-sindikatua
3
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add media queries img portada

Browse Source
This commit is contained in:
Gustavo
2026-03-03 09:33:33 +00:00
parent c750a4f969
commit 955acc93f7
1 changed files with 107 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
style.css
View File

@@ -5,13 +5,13 @@
*/ */
:root { :root {
--rojo-cnt: #dc2d30; --rojo-cnt: #dc2d30;
--rojo-cnt-dark: #9d1b1d; --rojo-cnt-dark: #9d1b1d;
--rojo-cnt-light: #d6453f; --rojo-cnt-light: #d6453f;
--bs-subtle: #f8d7da; --bs-subtle: #f8d7da;
--reset: #7b7b7b; --reset: #7b7b7b;
--white:#fff; --white: #fff;
--black:#000000ff; --black: #000000ff;
} }
@font-face { @font-face {
@@ -23,7 +23,7 @@
} }
body { body {
min-height: 100vh; min-height: 100vh;
} }
/* PORTADA -> ENLACES */ /* PORTADA -> ENLACES */
@@ -96,7 +96,7 @@ button[type="reset"] {
/* Botón Disabled */ /* Botón Disabled */
.btn-disabled-cnt { .btn-disabled-cnt {
border-radius: 10px !important; border-radius: 10px !important;
border:2px solid var(--bs-subtle); border: 2px solid var(--bs-subtle);
color: var(--white); color: var(--white);
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
@@ -108,8 +108,8 @@ button[type="reset"] {
/* reducir tamaño botones */ /* reducir tamaño botones */
.btn-xs { .btn-xs {
padding: 0.60rem 0.9rem; padding: 0.60rem 0.9rem;
font-size: 0.7rem; font-size: 0.7rem;
} }
/* Quitar el focus/active de todos los elementos del menú */ /* Quitar el focus/active de todos los elementos del menú */
@@ -127,24 +127,24 @@ button[type="reset"] {
} }
/* PORTADA -> Titles */ /* PORTADA -> Titles */
.sp-module-title::after{ .sp-module-title::after {
background: var(--rojo-cnt); background: var(--rojo-cnt);
content: ""; content: "";
height: 3px; height: 3px;
left: 0; left: 0;
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
width: 150px; width: 150px;
} }
.sp-module-title::before{ .sp-module-title::before {
background: var(--black); background: var(--black);
content: ""; content: "";
height: 3px; height: 3px;
left: 0; left: 0;
position: absolute; position: absolute;
bottom: -12px; bottom: -12px;
width: 150px; width: 150px;
} }
/* HEADER sindikatua */ /* HEADER sindikatua */
@@ -163,7 +163,7 @@ button[type="reset"] {
/* menu-burger */ /* menu-burger */
.menu-burger .offcanvas { .menu-burger .offcanvas {
background: linear-gradient(135deg,rgba(204,29,26,0.9),#cc1d1a); background: linear-gradient(135deg, rgba(204, 29, 26, 0.9), #cc1d1a);
} }
.menu-burger .dropdown:hover .dropdown-menu { .menu-burger .dropdown:hover .dropdown-menu {
@@ -183,7 +183,8 @@ button[type="reset"] {
/* PORTADA -> CARDS recent posts 'noticias' */ /* PORTADA -> CARDS recent posts 'noticias' */
.page-portada .recent-posts .card-img-overlay { .page-portada .recent-posts .card-img-overlay {
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */ top: auto !important;
/* Anula el top: 0 por defecto de Bootstrap */
bottom: 0; bottom: 0;
height: 30%; height: 30%;
background: rgba(128, 128, 128, 0.8); background: rgba(128, 128, 128, 0.8);
@@ -193,14 +194,39 @@ button[type="reset"] {
/* PORTADA -> imagen noticia principal */ /* PORTADA -> imagen noticia principal */
.page-portada .recent-posts .img-noticias { .page-portada .recent-posts .img-noticias {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
}
@media (width > 1401px) {
.page-portada .recent-posts .img-noticias {
max-height: 500px;
}
}
@media (min-width: 1201px) and (max-width: 1400px) {
.page-portada .recent-posts .img-noticias {
max-height: 400px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.page-portada .recent-posts .img-noticias {
max-height: 350px;
}
}
@media (min-width: 769px) and (max-width: 991px) {
.page-portada .recent-posts .img-noticias {
max-height: 250px;
}
} }
/* PORTADA -> CARDS OPINION */ /* PORTADA -> CARDS OPINION */
.page-portada .opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */ top: auto !important;
/* Anula el top: 0 por defecto de Bootstrap */
bottom: 0; bottom: 0;
height: auto; height: auto;
background: rgba(128, 128, 128, 0.8); background: rgba(128, 128, 128, 0.8);
@@ -209,7 +235,7 @@ button[type="reset"] {
} }
.page-portada .opinion-article .card-img-overlay:hover, .page-portada .opinion-article .card-img-overlay:hover,
.page-portada .recent-posts .card-img-overlay:hover { .page-portada .recent-posts .card-img-overlay:hover {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
} }
@@ -225,14 +251,15 @@ button[type="reset"] {
} }
} }
.page-portada .recent-posts .card-title, .page-portada .recent-posts .card-title,
.page-portada .opinion-article .card-title { .page-portada .opinion-article .card-title {
color: var(--white); color: var(--white);
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; /* Número de líneas */ -webkit-line-clamp: 2;
/* Número de líneas */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -240,10 +267,11 @@ button[type="reset"] {
} }
.page-portada .opinion-article .card-title { .page-portada .opinion-article .card-title {
-webkit-line-clamp: 1; /* Número de líneas */ -webkit-line-clamp: 1;
/* Número de líneas */
} }
.page-portada .recent-posts .card-title a, .page-portada .recent-posts .card-title a,
.page-portada .opinion-article .card-title a { .page-portada .opinion-article .card-title a {
color: var(--white); color: var(--white);
text-decoration: none; text-decoration: none;
@@ -262,13 +290,14 @@ button[type="reset"] {
.page-portada .recent-posts .card-img-overlay { .page-portada .recent-posts .card-img-overlay {
height: 18%; height: 18%;
} }
.page-portada .recent-posts .card-title { .page-portada .recent-posts .card-title {
font-size: 0.9rem; font-size: 0.9rem;
} }
.page-portada .recent-posts .media-mb { .page-portada .recent-posts .media-mb {
margin-bottom: 0.5rem; margin-bottom: 1.7rem !important;
} }
} }
/* PORTADA -> ENLACES */ /* PORTADA -> ENLACES */
@@ -293,14 +322,14 @@ button[type="reset"] {
/* PORTADA -> SECTION VIDEO */ /* PORTADA -> SECTION VIDEO */
.video-iframe { .video-iframe {
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
} }
/* PORTADA -> SECTION CAMPAÑA */ /* PORTADA -> SECTION CAMPAÑA */
.section-campana-conflictos .card-img-fixed { .section-campana-conflictos .card-img-fixed {
min-height: 300px; min-height: 300px;
max-height: 300px; max-height: 300px;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
} }
@@ -321,7 +350,7 @@ button[type="reset"] {
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
} }
.hover-title-text:hover { .hover-title-text:hover {
@@ -377,8 +406,8 @@ button[type="reset"] {
.enlaces button:focus, .enlaces button:focus,
.enlaces button:active { .enlaces button:active {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
.section-footer { .section-footer {
@@ -403,7 +432,8 @@ button[type="reset"] {
/* Formulario centrado */ /* Formulario centrado */
.formulario-contacto .wpcf7-form { .formulario-contacto .wpcf7-form {
width: 100%; width: 100%;
max-width: 500px; /* Ajusta según necesites */ max-width: 500px;
/* Ajusta según necesites */
margin: 0 auto; margin: 0 auto;
} }
@@ -415,7 +445,8 @@ button[type="reset"] {
.formulario-contacto input[type="number"], .formulario-contacto input[type="number"],
.formulario-contacto textarea, .formulario-contacto textarea,
.formulario-contacto select { .formulario-contacto select {
border-radius: 25px !important; /* Bordes redondos */ border-radius: 25px !important;
/* Bordes redondos */
border: 2px solid #e9ecef !important; border: 2px solid #e9ecef !important;
padding: 12px 20px !important; padding: 12px 20px !important;
font-size: 16px; font-size: 16px;
@@ -517,11 +548,11 @@ button[type="reset"] {
.formulario-contacto { .formulario-contacto {
padding: 15px; padding: 15px;
} }
.formulario-contacto .wpcf7-form { .formulario-contacto .wpcf7-form {
max-width: 100%; max-width: 100%;
} }
.formulario-contacto input[type="submit"] { .formulario-contacto input[type="submit"] {
font-size: 16px; font-size: 16px;
padding: 12px 25px; padding: 12px 25px;
@@ -532,34 +563,37 @@ button[type="reset"] {
* Animación en hover. * Animación en hover.
*/ */
.link-underline-animate { .link-underline-animate {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.link-underline-animate::after { .link-underline-animate::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background-color: var(--rojo-cnt); /* color del subrayado */ background-color: var(--rojo-cnt);
transition: all 0.3s ease; /* color del subrayado */
transform: translateX(-50%); transition: all 0.3s ease;
transform: translateX(-50%);
} }
.link-underline-animate:hover { .link-underline-animate:hover {
color: var(--rojo-cnt) !important; /* color del texto al hacer hover */ color: var(--rojo-cnt) !important;
/* color del texto al hacer hover */
} }
.link-underline-animate:hover::after { .link-underline-animate:hover::after {
width: 100%; width: 100%;
} }
/* SEARCH PAGE */ /* SEARCH PAGE */
.offcanvas-body { .offcanvas-body {
height: 18vh!important; /* altura del 18% del viewport */ height: 18vh !important;
/* altura del 18% del viewport */
} }
/* PAGINACIÓN */ /* PAGINACIÓN */
@@ -570,7 +604,8 @@ button[type="reset"] {
.pagination-block .page-item { .pagination-block .page-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* Resetear margin por defecto */ margin: 0;
/* Resetear margin por defecto */
} }
/* Estilos específicos para números de página */ /* Estilos específicos para números de página */
@@ -585,7 +620,8 @@ button[type="reset"] {
} }
.current-page { .current-page {
border-radius: 75px !important; /* Mismo border-radius que activos */ border-radius: 75px !important;
/* Mismo border-radius que activos */
} }
.btn-pagination-position { .btn-pagination-position {
@@ -612,4 +648,5 @@ button[type="reset"] {
a.btn-page-hover:hover { a.btn-page-hover:hover {
border: 2px solid var(--black) !important; border: 2px solid var(--black) !important;
} }
/* END PAGINACIÓN */
/* END PAGINACIÓN */