MODIFY Styles
This commit is contained in:
@ -32,6 +32,7 @@ class StarterSite extends Site {
|
||||
add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
|
||||
add_filter('timber/context', [$this, 'add_global_context']); // variables globales
|
||||
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();
|
||||
}
|
||||
@ -554,6 +555,24 @@ class StarterSite extends Site {
|
||||
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
|
||||
public function add_global_context($context) {
|
||||
|
||||
|
||||
212
style.css
212
style.css
@ -9,6 +9,8 @@
|
||||
--rojo-cnt-dark: #9d1b1d;
|
||||
--rojo-cnt-light: #d6453f;
|
||||
--reset: #7b7b7b;
|
||||
--white:#fff;
|
||||
--black:#000000ff;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -19,12 +21,17 @@
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* PORTADA -> ENLACES */
|
||||
.margin-50 {
|
||||
margin: 50px 0 !important;
|
||||
}
|
||||
|
||||
/* Botón primario */
|
||||
.btn-primary-cnt {
|
||||
border-radius: 75px !important;
|
||||
background-color: var(--rojo-cnt);
|
||||
border: 2px solid var(--rojo-cnt);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -35,10 +42,11 @@
|
||||
|
||||
/* Botón primario - hover */
|
||||
.btn-primary-cnt:hover {
|
||||
background-color: var(--rojo-cnt-dark);
|
||||
border-color: var(--rojo-cnt-dark);
|
||||
color: var(--black);
|
||||
background-color: white;
|
||||
border-color: var(--black);
|
||||
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 */
|
||||
@ -56,7 +64,7 @@ button[type="reset"] {
|
||||
border-radius: 10px !important;
|
||||
background-color: var(--rojo-cnt-light);
|
||||
border: 2px solid var(--rojo-cnt-light);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -67,10 +75,11 @@ button[type="reset"] {
|
||||
|
||||
/* Botón secundario - hover */
|
||||
.btn-secondary-cnt:hover {
|
||||
background-color: var(--rojo-cnt-light);
|
||||
border-color: var(--rojo-cnt-light);
|
||||
color: var(--black);
|
||||
background-color: var(--white);
|
||||
border-color: var(--black);
|
||||
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 */
|
||||
@ -89,10 +98,31 @@ button[type="reset"] {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: var(--rojo-cnt) !important;
|
||||
color: white !important;
|
||||
color: var(--white) !important;
|
||||
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 */
|
||||
.text-sindikatua {
|
||||
font-family: 'Yaro', Arial, sans-serif;
|
||||
@ -127,7 +157,7 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
bottom: 0;
|
||||
height: 25%;
|
||||
@ -137,7 +167,7 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
bottom: 0;
|
||||
height: 30%;
|
||||
@ -146,21 +176,26 @@ button[type="reset"] {
|
||||
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) {
|
||||
.opinion-article .card-img-overlay {
|
||||
.page-portada .opinion-article .card-img-overlay {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 990px) {
|
||||
.opinion-article .card-img-overlay {
|
||||
.page-portada .opinion-article .card-img-overlay {
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts .card-title,
|
||||
.opinion-article .card-title {
|
||||
color: white;
|
||||
.page-portada .recent-posts .card-title,
|
||||
.page-portada .opinion-article .card-title {
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
@ -172,53 +207,51 @@ button[type="reset"] {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recent-posts .card-title a,
|
||||
.opinion-article .card-title a {
|
||||
color: white;
|
||||
.page-portada .recent-posts .card-title a,
|
||||
.page-portada .opinion-article .card-title a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.recent-posts .card-title a:hover {
|
||||
.page-portada .recent-posts .card-title a:hover {
|
||||
color: var(--rojo-cnt);
|
||||
}
|
||||
|
||||
.recent-posts .card.secondary-article .card-title {
|
||||
.page-portada .recent-posts .card.secondary-article .card-title {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.recent-posts .card-img-overlay {
|
||||
.page-portada .recent-posts .card-img-overlay {
|
||||
height: 18%;
|
||||
}
|
||||
|
||||
.recent-posts .card-title {
|
||||
.page-portada .recent-posts .card-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.recent-posts .media-mb {
|
||||
.page-portada .recent-posts .media-mb {
|
||||
margin-bottom: 1rem; /* o el valor que necesites */
|
||||
}
|
||||
}
|
||||
|
||||
/* PORTADA -> Titles */
|
||||
.sp-module-title::after{
|
||||
background: var(--rojo-cnt);
|
||||
content: "";
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
width: 150px;
|
||||
/* PORTADA -> ENLACES */
|
||||
.btn-hover .btn-image-only {
|
||||
overflow: hidden;
|
||||
border-radius: 0.375rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.sp-module-title::before{
|
||||
background: var(--rojo-cnt);
|
||||
content: "";
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
width: 150px;
|
||||
.btn-hover .btn-image-only img {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-hover:hover .btn-image-only {
|
||||
box-shadow: 0 0 15px var(--rojo-cnt);
|
||||
}
|
||||
|
||||
.btn-hover:hover .btn-image-only img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* PORTADA -> SECTION VIDEO */
|
||||
@ -246,14 +279,14 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
.btn-outline-white {
|
||||
color: white;
|
||||
border-color: white;
|
||||
color: var(--white);
|
||||
border-color: var(--white);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-white:hover {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
background-color: var(--white);
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.svg-hover-white:hover {
|
||||
@ -271,6 +304,10 @@ button[type="reset"] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.servicios .card .card-body .card-title {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.enlaces button:not(.collapsed) {
|
||||
background-color: var(--rojo-cnt);
|
||||
color: #fff;
|
||||
@ -346,7 +383,7 @@ button[type="reset"] {
|
||||
border-radius: 25px !important;
|
||||
background-color: var(--rojo-cnt);
|
||||
border: 2px solid var(--rojo-cnt);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 15px 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@ -419,3 +456,86 @@ button[type="reset"] {
|
||||
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;
|
||||
}
|
||||
@ -48,7 +48,7 @@
|
||||
{% endif %}
|
||||
<div class="wrapper">
|
||||
{% block content %}
|
||||
Sorry, no content
|
||||
Lo siento, no hay contenido.
|
||||
{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
<section class="py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
|
||||
@ -154,4 +153,3 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -48,12 +48,12 @@
|
||||
|
||||
{# Sección Logos #}
|
||||
{% 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>
|
||||
|
||||
<div class="row g-3">
|
||||
{% 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">
|
||||
<img src="{{ boton.imagen.sizes.medium }}"
|
||||
alt="{{ boton.imagen.alt }}"
|
||||
@ -66,9 +66,11 @@
|
||||
{% endif %}
|
||||
|
||||
{# Sección vídeos #}
|
||||
<section class="py-4 margin-50">
|
||||
{% include 'partials/section-videos.twig' %}
|
||||
</section>
|
||||
|
||||
{# Sección Campañas / conlfictos #}
|
||||
{# Sección Campañas / conflictos #}
|
||||
<section class="recent-posts py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
@ -96,7 +98,7 @@
|
||||
|
||||
{% if posts_campana %}
|
||||
<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] %}
|
||||
<div class="card main-article">
|
||||
@ -115,8 +117,6 @@
|
||||
<h2>no hay artículos</h2>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user