ajustement home filters
This commit is contained in:
parent
ac04d64460
commit
b440902b45
6 changed files with 36 additions and 37 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() ?>">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue