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

MODIFY Styles

Browse Source
This commit is contained in:
gustavo
2025-08-13 08:59:42 +00:00
parent 23e613546a
commit 03e45ed783
5 changed files with 372 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/StarterSite.php
View File

@ -32,6 +32,7 @@ class StarterSite extends Site {
add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
add_filter('timber/context', [$this, 'add_global_context']); // variables globales add_filter('timber/context', [$this, 'add_global_context']); // variables globales
add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed
add_action('pre_get_posts', array($this, 'exclude_pages_from_search')); //exclude pages with ACF
parent::__construct(); parent::__construct();
} }
@ -554,6 +555,24 @@ class StarterSite extends Site {
return $afiliateFields; return $afiliateFields;
} }
public function exclude_pages_from_search($query) {
if (!is_admin() && $query->is_main_query() && $query->is_search()) {
$query->set('meta_query', array(
'relation' => 'OR',
array(
'key' => 'exclude_from_search',
'compare' => 'NOT EXISTS'
),
array(
'key' => 'exclude_from_search',
'value' => '1',
'compare' => '!='
)
));
}
}
//Global variables //Global variables
public function add_global_context($context) { public function add_global_context($context) {

212
style.css
View File

@ -9,6 +9,8 @@
--rojo-cnt-dark: #9d1b1d; --rojo-cnt-dark: #9d1b1d;
--rojo-cnt-light: #d6453f; --rojo-cnt-light: #d6453f;
--reset: #7b7b7b; --reset: #7b7b7b;
--white:#fff;
--black:#000000ff;
} }
@font-face { @font-face {
@ -19,12 +21,17 @@
font-display: swap; font-display: swap;
} }
/* PORTADA -> ENLACES */
.margin-50 {
margin: 50px 0 !important;
}
/* Botón primario */ /* Botón primario */
.btn-primary-cnt { .btn-primary-cnt {
border-radius: 75px !important; border-radius: 75px !important;
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
border: 2px solid var(--rojo-cnt); border: 2px solid var(--rojo-cnt);
color: white; color: var(--white);
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -35,10 +42,11 @@
/* Botón primario - hover */ /* Botón primario - hover */
.btn-primary-cnt:hover { .btn-primary-cnt:hover {
background-color: var(--rojo-cnt-dark); color: var(--black);
border-color: var(--rojo-cnt-dark); background-color: white;
border-color: var(--black);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
} }
/* Botón primario - active */ /* Botón primario - active */
@ -56,7 +64,7 @@ button[type="reset"] {
border-radius: 10px !important; border-radius: 10px !important;
background-color: var(--rojo-cnt-light); background-color: var(--rojo-cnt-light);
border: 2px solid var(--rojo-cnt-light); border: 2px solid var(--rojo-cnt-light);
color: white; color: var(--white);
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -67,10 +75,11 @@ button[type="reset"] {
/* Botón secundario - hover */ /* Botón secundario - hover */
.btn-secondary-cnt:hover { .btn-secondary-cnt:hover {
background-color: var(--rojo-cnt-light); color: var(--black);
border-color: var(--rojo-cnt-light); background-color: var(--white);
border-color: var(--black);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
} }
/* Botón secundario - active */ /* Botón secundario - active */
@ -89,10 +98,31 @@ button[type="reset"] {
outline: none !important; outline: none !important;
box-shadow: none !important; box-shadow: none !important;
background-color: var(--rojo-cnt) !important; background-color: var(--rojo-cnt) !important;
color: white !important; color: var(--white) !important;
opacity: 0.5; opacity: 0.5;
} }
/* PORTADA -> Titles */
.sp-module-title::after{
background: var(--rojo-cnt);
content: "";
height: 1px;
left: 0;
position: absolute;
bottom: -12px;
width: 150px;
}
.sp-module-title::before{
background: var(--rojo-cnt);
content: "";
height: 1px;
left: 0;
position: absolute;
bottom: -15px;
width: 150px;
}
/* HEADER sindikatua */ /* HEADER sindikatua */
.text-sindikatua { .text-sindikatua {
font-family: 'Yaro', Arial, sans-serif; font-family: 'Yaro', Arial, sans-serif;
@ -127,7 +157,7 @@ button[type="reset"] {
} }
/* PORTADA -> CARDS recent posts 'noticias' */ /* PORTADA -> CARDS recent posts 'noticias' */
.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: 25%; height: 25%;
@ -137,7 +167,7 @@ button[type="reset"] {
} }
/* PORTADA -> CARDS OPINION */ /* PORTADA -> CARDS OPINION */
.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: 30%; height: 30%;
@ -146,21 +176,26 @@ button[type="reset"] {
align-items: center; align-items: center;
} }
.page-portada .opinion-article .card-img-overlay:hover,
.page-portada .recent-posts .card-img-overlay:hover {
background: rgba(0, 0, 0, 0.8);
}
@media (991px <= width < 1400px) { @media (991px <= width < 1400px) {
.opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
height: 40%; height: 40%;
} }
} }
@media (width < 990px) { @media (width < 990px) {
.opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
height: 20%; height: 20%;
} }
} }
.recent-posts .card-title, .page-portada .recent-posts .card-title,
.opinion-article .card-title { .page-portada .opinion-article .card-title {
color: 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);
@ -172,53 +207,51 @@ button[type="reset"] {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.recent-posts .card-title a, .page-portada .recent-posts .card-title a,
.opinion-article .card-title a { .page-portada .opinion-article .card-title a {
color: white; color: var(--white);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.recent-posts .card-title a:hover { .page-portada .recent-posts .card-title a:hover {
color: var(--rojo-cnt); color: var(--rojo-cnt);
} }
.recent-posts .card.secondary-article .card-title { .page-portada .recent-posts .card.secondary-article .card-title {
font-size: medium; font-size: medium;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.recent-posts .card-img-overlay { .page-portada .recent-posts .card-img-overlay {
height: 18%; height: 18%;
} }
.recent-posts .card-title { .page-portada .recent-posts .card-title {
font-size: 0.9rem; font-size: 0.9rem;
} }
.recent-posts .media-mb { .page-portada .recent-posts .media-mb {
margin-bottom: 1rem; /* o el valor que necesites */ margin-bottom: 1rem; /* o el valor que necesites */
} }
} }
/* PORTADA -> Titles */ /* PORTADA -> ENLACES */
.sp-module-title::after{ .btn-hover .btn-image-only {
background: var(--rojo-cnt); overflow: hidden;
content: ""; border-radius: 0.375rem;
height: 1px; transition: box-shadow 0.3s ease;
left: 0;
position: absolute;
bottom: -12px;
width: 150px;
} }
.sp-module-title::before{ .btn-hover .btn-image-only img {
background: var(--rojo-cnt); transition: transform 0.3s ease;
content: ""; }
height: 1px;
left: 0; .btn-hover:hover .btn-image-only {
position: absolute; box-shadow: 0 0 15px var(--rojo-cnt);
bottom: -15px; }
width: 150px;
.btn-hover:hover .btn-image-only img {
transform: scale(1.08);
} }
/* PORTADA -> SECTION VIDEO */ /* PORTADA -> SECTION VIDEO */
@ -246,14 +279,14 @@ button[type="reset"] {
} }
.btn-outline-white { .btn-outline-white {
color: white; color: var(--white);
border-color: white; border-color: var(--white);
background-color: transparent; background-color: transparent;
} }
.btn-outline-white:hover { .btn-outline-white:hover {
background-color: white; background-color: var(--white);
border-color: white; border-color: var(--white);
} }
.svg-hover-white:hover { .svg-hover-white:hover {
@ -271,6 +304,10 @@ button[type="reset"] {
height: auto; height: auto;
} }
.servicios .card .card-body .card-title {
width: fit-content;
}
.enlaces button:not(.collapsed) { .enlaces button:not(.collapsed) {
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
color: #fff; color: #fff;
@ -346,7 +383,7 @@ button[type="reset"] {
border-radius: 25px !important; border-radius: 25px !important;
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
border: 2px solid var(--rojo-cnt); border: 2px solid var(--rojo-cnt);
color: white; color: var(--white);
padding: 15px 30px; padding: 15px 30px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@ -419,3 +456,86 @@ button[type="reset"] {
padding: 12px 25px; padding: 12px 25px;
} }
} }
/* Texto sección tease.twig */
.link-underline-animate {
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}
.link-underline-animate::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--rojo-cnt); /* color del subrayado */
transition: all 0.3s ease;
transform: translateX(-50%);
}
.link-underline-animate:hover {
color: var(--rojo-cnt) !important; /* color del texto al hacer hover */
}
.link-underline-animate:hover::after {
width: 100%;
}
/* search page */
.offcanvas-body {
height: 18vh!important; /* altura del 18% del viewport */
}
/* Resetear estilos de Bootstrap en la paginación */
.pagination-block .pagination {
margin-bottom: 0;
}
.pagination-block .page-item {
display: flex;
align-items: center;
margin: 0; /* Resetear margin por defecto */
}
/* Estilos específicos para números de página */
.page-number {
padding: 10px 15px !important;
min-width: 44px;
text-align: center;
border-color: var(--reset);
background-color: var(--reset);
border-radius: 10px;
color: var(--white);
}
.current-page {
border-radius: 75px !important; /* Mismo border-radius que activos */
}
.btn-pagination-position {
display: inline-flex;
align-items: end;
justify-content: center;
min-height: 44px;
}
.btn-no-hover {
transition: none !important;
pointer-events: none;
cursor: default !important;
}
.btn-page-hover:hover {
color: var(--black);
background-color: var(--white);
border-color: var(--black);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
a.btn-page-hover:hover {
border: 2px solid var(--black) !important;
}

2
views/layouts/base.twig
View File

@ -48,7 +48,7 @@
{% endif %} {% endif %}
<div class="wrapper"> <div class="wrapper">
{% block content %} {% block content %}
Sorry, no content Lo siento, no hay contenido.
{% endblock %} {% endblock %}
</div> </div>
</section> </section>

2
views/partials/section-videos.twig
View File

@ -1,4 +1,3 @@
<section class="py-4">
<div class="container"> <div class="container">
<div class="row align-items-stretch"> <div class="row align-items-stretch">
@ -154,4 +153,3 @@
</div> </div>
</div> </div>
</section>

12
views/templates/page-portada.twig
View File

@ -48,12 +48,12 @@
{# Sección Logos #} {# Sección Logos #}
{% if botones_imagen %} {% if botones_imagen %}
<section class="custom-buttons-section my-5"> <section class="custom-buttons-section margin-50">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">ENLACES</p> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">ENLACES</p>
<div class="row g-3"> <div class="row g-3">
{% for boton in botones_imagen %} {% for boton in botones_imagen %}
<div class="col-md-3 col-sm-6"> <div class="col-md-3 col-sm-6 btn-hover">
<a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer"> <a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
<img src="{{ boton.imagen.sizes.medium }}" <img src="{{ boton.imagen.sizes.medium }}"
alt="{{ boton.imagen.alt }}" alt="{{ boton.imagen.alt }}"
@ -66,9 +66,11 @@
{% endif %} {% endif %}
{# Sección vídeos #} {# Sección vídeos #}
<section class="py-4 margin-50">
{% include 'partials/section-videos.twig' %} {% include 'partials/section-videos.twig' %}
</section>
{# Sección Campañas / conlfictos #} {# Sección Campañas / conflictos #}
<section class="recent-posts py-4"> <section class="recent-posts py-4">
<div class="container"> <div class="container">
<div class="row align-items-stretch"> <div class="row align-items-stretch">
@ -96,7 +98,7 @@
{% if posts_campana %} {% if posts_campana %}
<div class="col-6"> <div class="col-6">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES</p> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES (WIP)</p>
{% set main_article = posts_campana[0] %} {% set main_article = posts_campana[0] %}
<div class="card main-article"> <div class="card main-article">
@ -115,8 +117,6 @@
<h2>no hay artículos</h2> <h2>no hay artículos</h2>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</section> </section>