ajustement home filters

This commit is contained in:
camille 2026-06-23 10:16:28 +02:00
parent ac04d64460
commit b440902b45
6 changed files with 36 additions and 37 deletions

View file

@ -9,8 +9,9 @@
}
.bottom-tab--invert {
background-color: #000;
color: #fff;
background-color: var(--color-beige);
color: #000;
border: var(--border);
}
.bottom-tab:not(.bottom-tab--invert) {

View file

@ -102,32 +102,6 @@ display: none;
}
}
.filters {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
gap: 0.7rem;
bottom: calc(-2.5rem);
button {
transform: translateY(0rem);
transition: background-color 0.2s var(--curve),
transform 0.3s var(--curve);
&:hover {
transform: translateY(0.5rem) !important;
}
&.active {
transform: translateY(0rem);
background-color: #000;
color: #fff;
outline: 2px solid var(--color-beige);
}
}
}
.header-menu {
not * {
font-weight: 600;

View file

@ -15,7 +15,6 @@
button {
font-family: var(--font-sans);
font-size: var(--font-size-L);
font-weight: 600;
&.active {
text-decoration: underline;
@ -45,7 +44,8 @@
font-weight: 500;
button {
font-size: 2rem;
font-size: inherit;
font-family: var(--font-serif);
}
}

View file

@ -1,8 +1,32 @@
[data-template="events"] {
.filters {
position: relative;
width: 100%;
display: flex;
justify-content: center;
gap: 0.7rem;
bottom: calc(-2.5rem);
button {
transform: translateY(0rem);
transition: background-color 0.2s var(--curve),
transform 0.3s var(--curve);
padding: 0.5rem 0.9rem;
border-radius: var(--border-radius);
&.active {
transform: translateY(0rem);
background-color: #000;
color: #fff;
outline: 2px solid var(--color-beige);
}
}
}
main {
.events-grid {
box-sizing: border-box;
padding: 0 2rem;
padding: 2rem;
padding-top: 9rem;
width: 100%;
display: grid;
@ -11,6 +35,7 @@
gap: 2rem;
.event-card {
h2 {
box-sizing: border-box;

View file

@ -28,11 +28,5 @@
</nav>
</div>
<?php if ($page->intendedTemplate() == 'events'): ?>
<div class="filters">
<button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
<button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors compagnie</button>
</div>
<?php endif ?>
</header>
<main>

View file

@ -1,6 +1,11 @@
<?php snippet('head') ?>
<?php snippet('header') ?>
<div class="filters">
<button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
<button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors compagnie</button>
</div>
<ul class="events-grid">
<?php foreach ($page->children() as $event): ?>
<li class="event-card" data-company="<?= $event->isFromCompany() ?>">