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

CSS > agenda > par mois
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source
This commit is contained in:
camille 2026-06-24 14:04:37 +02:00
parent 8318160bb6
commit 2cb641e4a8
5 changed files with 91 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
--border: var(--border-width) solid #000;
--space-body: 1rem;
--main-block-width: 60rem;
--main-block-width: 80rem;
--curve: cubic-bezier(0.65, 0, 0.35, 1);
@ -17,7 +17,7 @@
--font-serif: "SancySlab", serif;
--font-size-S: 1rem;
--letter-space-large: 0.1em;
--font-size-M: 1.6rem;
--font-size-M: 1.8rem;
--font-size-L: 3rem;
--font-size-XL: 8rem;
--line-height-M: calc(var(--font-size-M) * 1.2);

59
assets/css/src/pages/_agenda.scss
View file

@ -3,6 +3,9 @@
background-color: transparent;
.dates-container {
[data-view="events"] {
ul {
li {
@ -11,11 +14,6 @@
}
}
box-sizing: border-box;
background-color: var(--color-beige);
border: var(--border);
border-radius: var(--radius);
.month-switcher {
box-sizing: border-box;
width: 100%;
@ -25,7 +23,11 @@
font-size: var(--font-size-L);
border-bottom: var(--border);
border: var(--border);
padding-bottom: 2rem;
border-radius: var(--radius);
background-color: var(--color-beige);
.month-label {
margin: 2rem;
@ -42,26 +44,53 @@
margin: 4rem auto;
.event {
margin: 2rem 0;
margin: -6.3rem 0;
padding-bottom: 8rem;
border: var(--border);
border-radius: var(--radius);
background-color: var(--color-beige);
&:not(:last-child) {
border-bottom: var(--border);
padding-bottom: 2rem;
}
h4 {
font-size: var(--font-size-L);
font-size: var(--font-size-XL);
line-height: var(--line-height-XL);
font-weight: normal;
padding: 4rem;
margin: auto;
box-sizing: border-box;
width: var(--main-block-width);
max-width: 100%;
}
.date {
margin: 1rem 0;
font-size: var(--font-size-M);
.dates{
display: grid;
grid-template-columns: repeat(2, 1fr);
a {
text-decoration: underline;
.date {
margin: 2rem;
margin-bottom: 4rem ;
font-size: var(--font-size-L);
.date-range{
font-size: var(--font-size-XL);
line-height: var(--line-height-XL);
margin-bottom: var(--line-height-M);
}
.date-place{
text-wrap: balance;
}
a {
text-decoration: underline;
}
}
}
}
}
}

60
assets/css/style.css
View file

@ -128,13 +128,13 @@ main {
--border-width: 2px;
--border: var(--border-width) solid #000;
--space-body: 1rem;
--main-block-width: 60rem;
--main-block-width: 80rem;
--curve: cubic-bezier(0.65, 0, 0.35, 1);
--font-sans-serif: "Bartok", sans-serif;
--font-serif: "SancySlab", serif;
--font-size-S: 1rem;
--letter-space-large: 0.1em;
--font-size-M: 1.6rem;
--font-size-M: 1.8rem;
--font-size-L: 3rem;
--font-size-XL: 8rem;
--line-height-M: calc(var(--font-size-M) * 1.2);
@ -696,25 +696,22 @@ main {
[data-template=agenda] main {
background-color: transparent;
}
[data-template=agenda] main .month-label {
margin: 2rem;
}
[data-template=agenda] main .dates-container [data-view=events] ul li {
padding-bottom: 2rem;
}
[data-template=agenda] main .dates-container {
box-sizing: border-box;
background-color: var(--color-beige);
border: var(--border);
border-radius: var(--radius);
}
[data-template=agenda] main .dates-container .month-switcher {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: center;
font-size: var(--font-size-L);
border-bottom: var(--border);
border: var(--border);
padding-bottom: 2rem;
border-radius: var(--radius);
background-color: var(--color-beige);
}
[data-template=agenda] main .dates-container .month-switcher .month-label {
margin: 2rem;
}
[data-template=agenda] main .dates-container .month-switcher button {
font-size: inherit;
@ -725,21 +722,40 @@ main {
margin: 4rem auto;
}
[data-template=agenda] main .dates-container .month .event {
margin: 2rem 0;
}
[data-template=agenda] main .dates-container .month .event:not(:last-child) {
border-bottom: var(--border);
padding-bottom: 2rem;
margin: -6.3rem 0;
padding-bottom: 8rem;
border: var(--border);
border-radius: var(--radius);
background-color: var(--color-beige);
}
[data-template=agenda] main .dates-container .month .event h4 {
font-size: var(--font-size-L);
font-size: var(--font-size-XL);
line-height: var(--line-height-XL);
font-weight: normal;
padding: 4rem;
margin: auto;
box-sizing: border-box;
width: var(--main-block-width);
max-width: 100%;
}
[data-template=agenda] main .dates-container .month .event .date {
margin: 1rem 0;
font-size: var(--font-size-M);
[data-template=agenda] main .dates-container .month .event .dates {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
[data-template=agenda] main .dates-container .month .event .date a {
[data-template=agenda] main .dates-container .month .event .dates .date {
margin: 2rem;
margin-bottom: 4rem;
font-size: var(--font-size-L);
}
[data-template=agenda] main .dates-container .month .event .dates .date .date-range {
font-size: var(--font-size-XL);
line-height: var(--line-height-XL);
margin-bottom: var(--line-height-M);
}
[data-template=agenda] main .dates-container .month .event .dates .date .date-place {
text-wrap: balance;
}
[data-template=agenda] main .dates-container .month .event .dates .date a {
text-decoration: underline;
}

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

File diff suppressed because one or more lines are too long

12
site/controllers/agenda.php
View file

@ -2,9 +2,9 @@
return function ($site) {
$frenchMonths = [
1 => 'janvier', 2 => 'février', 3 => 'mars', 4 => 'avril',
5 => 'mai', 6 => 'juin', 7 => 'juillet', 8 => 'août',
9 => 'septembre', 10 => 'octobre', 11 => 'novembre', 12 => 'décembre',
1 => 'janv.', 2 => 'févr.', 3 => 'mars', 4 => 'avr.',
5 => 'mai', 6 => 'juin', 7 => 'juill.', 8 => 'août',
9 => 'sept.', 10 => 'oct.', 11 => 'nov.', 12 => 'déc.',
];
$frenchDays = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
@ -21,14 +21,14 @@ return function ($site) {
$diffDays = (int) round(($toTs - $fromTs) / 86400);
if ($diffDays === 1 && $fromMonth === $toMonth) {
return $fromDay . ' et ' . $toDay . ' ' . $frenchMonths[$fromMonth];
return $fromDay . ' — ' . $toDay . '<br>' . $frenchMonths[$fromMonth];
}
if ($fromMonth === $toMonth) {
return 'Du ' . $fromDay . ' au ' . $toDay . ' ' . $frenchMonths[$fromMonth];
return $fromDay . ' — ' . $toDay . '<br>' . $frenchMonths[$fromMonth];
}
return 'Du ' . $fromDay . ' ' . $frenchMonths[$fromMonth] . ' au ' . $toDay . ' ' . $frenchMonths[$toMonth];
return $fromDay . ' ' . $frenchMonths[$fromMonth] . ' — ' . $toDay . '<br>' . $frenchMonths[$toMonth];
};
$eventsByMonth = [];