studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

events > mise en place css intercalaires sur filtres
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-23 16:39:56 +02:00
parent aa3bee11fa
commit ba2878e8f2
7 changed files with 61 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/src/_generic.scss
View file

@ -1,4 +1,4 @@
.bottom-tab {
.label-tab {
font-size: 1rem;
width: fit-content;
padding: 1.5rem 0.9rem 0.5rem 0.9rem;
@ -8,13 +8,13 @@
font-family: "SancySlab", serif;
}
.bottom-tab--invert {
.label-tab--active {
background-color: var(--color-beige);
color: #000;
border: var(--border);
}
.bottom-tab:not(.bottom-tab--invert) {
.label-tab:not(.label-tab--active) {
background-color: #000;
color: #fff;
}

3
assets/css/src/_variables.scss
View file

@ -5,7 +5,8 @@
--glow-green: var(--color-green) 0px 0px 30px;
--radius: 1.1rem;
--border: 2px solid #000;
--border-width: 2px;
--border: var(--border-width) solid #000;
--border-radius: 10px;
--space-body: 1rem;

38
assets/css/src/pages/_events.scss
View file

@ -3,22 +3,31 @@
position: relative;
width: 100%;
display: flex;
justify-content: center;
gap: 0.7rem;
bottom: calc(-2.5rem);
padding-top: 2rem;
button {
transform: translateY(0rem);
transition: background-color 0.2s var(--curve),
transition:
background-color 0.2s var(--curve),
transform 0.3s var(--curve);
padding: 0.5rem 0.9rem;
border-radius: var(--border-radius);
padding: 2rem;
position: relative;
bottom: 0;
margin: 0 calc(-1 * var(--border-width) / 2);
border-radius: var(--border-radius) var(--border-radius) 0 0;
border-bottom: 0;
font-size: var(--font-size-L);
&:first-child {
margin-left: 0;
}
&.active {
transform: translateY(0rem);
background-color: #000;
color: #fff;
outline: 2px solid var(--color-beige);
bottom: calc(-1 * var(--border-width));
margin-top: calc(-1 * var(--border-width));
padding-top: calc(2rem - var(--border-width));
}
}
}
@ -26,14 +35,17 @@
main {
.events-grid {
box-sizing: border-box;
padding: 0 2rem;
padding: 2rem;
padding-top: 9rem;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
column-gap: 2rem;
row-gap: 4rem;
gap: 2rem;
background-color: var(--color-beige);
border-radius: var(--border-radius);
border-top-left-radius: 0;
border: var(--border);
.event-card {
h2 {

42
assets/css/style.css
View file

@ -94,7 +94,8 @@ a {
--color-grey: #a1a1bb;
--glow-green: var(--color-green) 0px 0px 30px;
--radius: 1.1rem;
--border: 2px solid #000;
--border-width: 2px;
--border: var(--border-width) solid #000;
--border-radius: 10px;
--space-body: 1rem;
--curve: cubic-bezier(0.65, 0, 0.35, 1);
@ -153,7 +154,7 @@ summary {
cursor: pointer;
}
.bottom-tab {
.label-tab {
font-size: 1rem;
width: -moz-fit-content;
width: fit-content;
@ -163,13 +164,13 @@ summary {
font-family: "SancySlab", serif;
}
.bottom-tab--invert {
.label-tab--active {
background-color: var(--color-beige);
color: #000;
border: var(--border);
}
.bottom-tab:not(.bottom-tab--invert) {
.label-tab:not(.label-tab--active) {
background-color: #000;
color: #fff;
}
@ -415,33 +416,40 @@ summary {
position: relative;
width: 100%;
display: flex;
justify-content: center;
gap: 0.7rem;
bottom: -2.5rem;
padding-top: 2rem;
}
[data-template=events] .filters 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);
padding: 2rem;
position: relative;
bottom: 0;
margin: 0 calc(-1 * var(--border-width) / 2);
border-radius: var(--border-radius) var(--border-radius) 0 0;
border-bottom: 0;
font-size: var(--font-size-L);
}
[data-template=events] .filters button:first-child {
margin-left: 0;
}
[data-template=events] .filters button.active {
transform: translateY(0rem);
background-color: #000;
color: #fff;
outline: 2px solid var(--color-beige);
bottom: calc(-1 * var(--border-width));
margin-top: calc(-1 * var(--border-width));
padding-top: calc(2rem - var(--border-width));
}
[data-template=events] main .events-grid {
box-sizing: border-box;
padding: 0 2rem;
padding: 2rem;
padding-top: 9rem;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-end;
-moz-column-gap: 2rem;
column-gap: 2rem;
row-gap: 4rem;
gap: 2rem;
background-color: var(--color-beige);
border-radius: var(--border-radius);
border-top-left-radius: 0;
border: var(--border);
}
[data-template=events] main .events-grid .event-card h2 {
box-sizing: border-box;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

8
site/templates/events.php
View file

@ -1,11 +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>
<div class="filters">
<button class="filter label-tab label-tab--active active" data-target="inside-company" title="filtrer">tous les spectacles</button>
<button class="filter label-tab label-tab--active" data-target="outside-company" title="filtrer">en ce moment</button>
</div>
<ul class="events-grid">
<?php foreach ($page->children() as $event): ?>
<li class="event-card" data-company="<?= $event->isFromCompany() ?>">

2
site/templates/home.php
View file

@ -4,7 +4,7 @@
<li><a href="#">La compagnie</a></li>
<li><a href="<?= page('spectacles')->url() ?>">Les spectacles</a></li>
<li><a href="<?= page('agenda')->url() ?>">Agenda</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Infos</a></li>
</ul>
</nav>
<p class="mention">compagnie Lesort Hecq — <a href="#">mentions légales</a></p>