add agenda
This commit is contained in:
parent
acabd7d35c
commit
6f79540b30
12 changed files with 803 additions and 321 deletions
File diff suppressed because one or more lines are too long
375
agenda/index.html
Normal file
375
agenda/index.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -13,6 +13,15 @@
|
|||
--color-dark: hsl(0deg, 0%, 0%);
|
||||
--color-global-bg: var(--color-light);
|
||||
--color-global-text: var(--color-dark);
|
||||
--color-2025-2026: #645a5b;
|
||||
--color-2024-2025: #1f442d;
|
||||
--color-2023-2024: #3bb2af;
|
||||
--color-2022-2023: #f8c713;
|
||||
--color-2021-2022: #da1a63;
|
||||
--color-2020-2021: #241013;
|
||||
--color-2019-2020: #374854;
|
||||
--color-2018-2019: #2c5096;
|
||||
--color-2017-2018: #196469;
|
||||
|
||||
/* Fluid type scale */
|
||||
--size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ body {
|
|||
line-height: var(--leading);
|
||||
background: var(--color-global-bg);
|
||||
color: var(--color-global-text);
|
||||
accent-color: var(--color-black);
|
||||
accent-color: var(--color-dark);
|
||||
}
|
||||
|
||||
header,
|
||||
|
|
@ -23,6 +23,7 @@ footer {
|
|||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-inline: var(--space-gutter);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -141,6 +142,19 @@ details[open] summary:after {
|
|||
}
|
||||
|
||||
|
||||
/* Form */
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-bottom: var(--space-gutter);
|
||||
}
|
||||
legend {
|
||||
padding: 0;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
|
||||
/* Images */
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -56,10 +56,11 @@
|
|||
margin-right: -0.333em;
|
||||
user-select: none;
|
||||
}
|
||||
a.tag {
|
||||
:is(a, label).tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
a.tag:hover {
|
||||
:is(a, label).tag:hover,
|
||||
input:checked + label.tag {
|
||||
background: var(--tag-hover-bg, var(--color-dark));
|
||||
color: var(--tag-hover-text, var(--color-light));
|
||||
border-color: var(--tag-hover-border, var(--color-dark));
|
||||
|
|
@ -284,3 +285,44 @@ a.tag:hover {
|
|||
max-width: 40ch;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
}
|
||||
.socials li {
|
||||
padding: 0!important;
|
||||
margin: 0!important;
|
||||
}
|
||||
|
||||
.newsletter form input {
|
||||
border: var(--border);
|
||||
font-family: var(--font-base);
|
||||
font-weight: normal;
|
||||
background-color: var(--color-global-bg);
|
||||
color: var(--color-global-text);
|
||||
padding: 4px 1ch;
|
||||
margin-right: -7px;
|
||||
}
|
||||
.newsletter form input::placeholder {
|
||||
font-family: var(--font-base);
|
||||
}
|
||||
.newsletter button {
|
||||
border-radius: var(--border-radius);
|
||||
border: var(--border);
|
||||
background-color: var(--color-global-bg);
|
||||
/* background-color: black;
|
||||
color: var(--color-global-bg); */
|
||||
text-transform: uppercase;
|
||||
padding: 4px 1ch;
|
||||
position: relative;
|
||||
}
|
||||
.newsletter button:hover {
|
||||
background-color: var(--color-global-text);
|
||||
color: var(--color-global-bg);
|
||||
cursor: pointer;
|
||||
border-color: var(--color-global-text);
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
width: 80px;
|
||||
}
|
||||
|
|
@ -40,49 +40,3 @@
|
|||
--box-shadow-thickness: 0;
|
||||
transform: translateY(var(--translateY));
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: flex;
|
||||
}
|
||||
.socials li{
|
||||
padding: 0!important;
|
||||
margin: 0!important;
|
||||
}
|
||||
|
||||
|
||||
.newsletter form input{
|
||||
border: var(--border);
|
||||
font-family: var(--font-base);
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
padding: 4px 1ch;
|
||||
margin-right: -7px;
|
||||
|
||||
}
|
||||
|
||||
.newsletter form input::placeholder {
|
||||
font-family: var(--font-base);
|
||||
}
|
||||
|
||||
.newsletter button{
|
||||
border-radius: var(--border-radius);
|
||||
border: var(--border);
|
||||
background-color: white;
|
||||
/* background-color: black;
|
||||
color: white; */
|
||||
text-transform: uppercase;
|
||||
padding: 4px 1ch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.newsletter button:hover{
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
|
||||
.logo-name{
|
||||
width: 80px;
|
||||
}
|
||||
|
|
@ -4,10 +4,6 @@
|
|||
|
||||
[data-template="home"] {
|
||||
|
||||
main {
|
||||
padding-inline: var(--space-gutter);
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
main {
|
||||
display: grid;
|
||||
|
|
@ -115,14 +111,37 @@
|
|||
transform: translateY(calc(.125em + var(--translateY)));
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Agenda */
|
||||
|
||||
[data-template="agenda"] {
|
||||
|
||||
#evenements {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#filters {
|
||||
gap: var(--space-gutter);
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: var(--space-gutter);
|
||||
}
|
||||
#filters fieldset {
|
||||
--gap: .25em .5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Événement */
|
||||
|
||||
[data-template="evenement"] {
|
||||
|
||||
main {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2,199 +2,195 @@
|
|||
/* Header */
|
||||
@media screen and (min-width: 768px){
|
||||
|
||||
.header-top-phone{
|
||||
display: none; }
|
||||
.header-top-phone,
|
||||
#menu-toggle_phone,
|
||||
.menu-back,
|
||||
.title-submenu {
|
||||
display: none
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: calc(var(--header-height) + var(--space-gutter));
|
||||
transition: margin-top ease .3s;
|
||||
}
|
||||
.wrapper.header-is-closed{
|
||||
--header-height: var(--header-closed);
|
||||
}
|
||||
|
||||
#menu-toggle_phone{ display: none; }
|
||||
.wrapper {
|
||||
margin-top: calc(var(--header-height) + var(--space-gutter));
|
||||
transition: margin-top ease .3s;
|
||||
}
|
||||
.wrapper.header-is-closed{
|
||||
--header-height: var(--header-closed);
|
||||
}
|
||||
|
||||
|
||||
.site-header{
|
||||
width: calc(100vw - var(--space-regions)*2);
|
||||
height: var(--header-deploy);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: var(--space-regions);
|
||||
background-color: white;
|
||||
z-index: var(--header-index);
|
||||
transition: height ease .3s;
|
||||
}
|
||||
.site-header {
|
||||
width: calc(100vw - var(--space-regions)*2);
|
||||
height: var(--header-deploy);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: var(--space-regions);
|
||||
background-color: var(--color-global-bg);
|
||||
z-index: var(--header-index);
|
||||
transition: height ease .3s;
|
||||
}
|
||||
|
||||
|
||||
.site-header.is-closed{
|
||||
height: var(--header-closed);
|
||||
}
|
||||
.site-header.is-closed {
|
||||
height: var(--header-closed);
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
/* Header */
|
||||
|
||||
.site-header {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr auto;
|
||||
grid-template-rows: minmax(var(--header-closed), auto);
|
||||
align-items: flex-start;
|
||||
border-bottom: var(--border);
|
||||
margin-bottom: var(--space-regions);
|
||||
overflow: hidden;
|
||||
.site-header {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr auto;
|
||||
grid-template-rows: minmax(var(--header-closed), auto);
|
||||
align-items: flex-start;
|
||||
border-bottom: var(--border);
|
||||
margin-bottom: var(--space-regions);
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#logo {
|
||||
grid-column: 1 / 1;
|
||||
max-width: 256px;
|
||||
/* margin-top: -0.875em; */
|
||||
}
|
||||
#logo {
|
||||
grid-column: 1 / 1;
|
||||
max-width: 256px;
|
||||
/* margin-top: -0.875em; */
|
||||
}
|
||||
|
||||
|
||||
#logo .logo-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo .logo-name{
|
||||
display: none;
|
||||
}
|
||||
#menu-toggle {
|
||||
--button-hover-bg: var(--color-light);
|
||||
--button-hover-text: var(--color-dark);
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
--button-hover-bg: var(--color-light);
|
||||
--button-hover-text: var(--color-dark);
|
||||
}
|
||||
|
||||
#menu {
|
||||
grid-column: 1 / -1;
|
||||
font-size: var(--text-size-heading-1);
|
||||
line-height: 1.1;
|
||||
font-weight: regular;
|
||||
max-width: 25ch;
|
||||
margin-left: auto;
|
||||
}
|
||||
#menu ul {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#menu ul > li:not(:last-child) a::after {
|
||||
content: ",";
|
||||
margin-right: .2em;
|
||||
}
|
||||
#menu {
|
||||
grid-column: 1 / -1;
|
||||
font-size: var(--text-size-heading-1);
|
||||
line-height: 1.1;
|
||||
font-weight: regular;
|
||||
max-width: 25ch;
|
||||
margin-left: auto;
|
||||
}
|
||||
#menu ul {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#menu ul > li:not(:last-child) a::after {
|
||||
content: ",";
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
|
||||
#menu a:hover,
|
||||
#menu a[aria-current] {
|
||||
#menu a:hover,
|
||||
#menu a[aria-current] {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
}
|
||||
|
||||
#menu .selected a{
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
}
|
||||
text-decoration-thickness: var(--border-width);
|
||||
}
|
||||
|
||||
#menu .selected a{
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: var(--border-width);
|
||||
}
|
||||
|
||||
#direct-links{
|
||||
font-size: var(--text-size-meta);
|
||||
justify-content: flex-end;
|
||||
margin-right: calc(var(--space-gutter)*4);
|
||||
padding-top: 1px;
|
||||
}
|
||||
#direct-links{
|
||||
font-size: var(--text-size-meta);
|
||||
justify-content: flex-end;
|
||||
margin-right: calc(var(--space-gutter)*4);
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
|
||||
/* HEADER closed */
|
||||
/* HEADER closed */
|
||||
|
||||
.stickers a,
|
||||
#direct-links{
|
||||
transition: opacity ease .3s;
|
||||
}
|
||||
.stickers a,
|
||||
#direct-links{
|
||||
transition: opacity ease .3s;
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
transition: transform ease .3s;
|
||||
}
|
||||
#menu-toggle{
|
||||
transition: transform ease .3s;
|
||||
}
|
||||
|
||||
|
||||
.site-header.is-closed #menu-toggle{
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
.site-header.is-closed #menu-toggle{
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
|
||||
.site-header.is-closed #direct-links{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.site-header.is-closed #direct-links{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-header.is-closed #logo .logo-complet{
|
||||
display: none;
|
||||
}
|
||||
.site-header.is-closed #logo .logo-complet{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-header.is-closed #logo .logo-name{
|
||||
display: block;
|
||||
}
|
||||
.site-header.is-closed #logo .logo-name{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Submenu */
|
||||
|
||||
/* Submenu */
|
||||
.submenu{
|
||||
max-height: 0vh;
|
||||
transition: max-height ease-in .5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submenu{
|
||||
max-height: 0vh;
|
||||
transition: max-height ease-in .5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submenu .inner{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: var(--space-gutter);
|
||||
margin-inline: var(--space-regions);
|
||||
border-bottom: var(--border);
|
||||
margin-bottom: var(--space-regions);
|
||||
padding-top: calc(var(--space-regions)*1);
|
||||
padding-bottom: calc(var(--space-regions)*3);
|
||||
}
|
||||
|
||||
.submenu .inner{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: var(--space-gutter);
|
||||
margin-inline: var(--space-regions);
|
||||
border-bottom: var(--border);
|
||||
margin-bottom: var(--space-regions);
|
||||
padding-top: calc(var(--space-regions)*1);
|
||||
padding-bottom: calc(var(--space-regions)*3);
|
||||
|
||||
.submenu ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
}
|
||||
.submenu ul li{
|
||||
padding-top: 1em;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
.submenu ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.submenu ul li{
|
||||
padding-top: 1em;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
.submenu-level-1{
|
||||
/* text-transform: uppercase; */
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.submenu a{
|
||||
text-decoration: underline 1px transparent;
|
||||
position: relative;
|
||||
}
|
||||
.submenu a:hover{
|
||||
text-decoration-color: black;
|
||||
}
|
||||
|
||||
.submenu a:hover::after{
|
||||
content: "→";
|
||||
position: absolute;
|
||||
right: -2ch;
|
||||
top: 2px;
|
||||
font-weight: normal;
|
||||
/* opacity: 0.5; */
|
||||
}
|
||||
.submenu .submenu-level-1 a:hover::after{
|
||||
top: -1px;
|
||||
}
|
||||
.submenu-level-1{
|
||||
/* text-transform: uppercase; */
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.submenu a{
|
||||
text-decoration: underline 1px transparent;
|
||||
position: relative;
|
||||
}
|
||||
.submenu a:hover{
|
||||
text-decoration-color: black;
|
||||
}
|
||||
|
||||
.submenu a:hover::after{
|
||||
content: "→";
|
||||
position: absolute;
|
||||
right: -2ch;
|
||||
top: 2px;
|
||||
font-weight: normal;
|
||||
/* opacity: 0.5; */
|
||||
}
|
||||
.submenu .submenu-level-1 a:hover::after{
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -102,3 +102,16 @@ document.querySelectorAll('.stickers a').forEach(sticker => {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// FILTER ------------------------------------------------------------
|
||||
|
||||
function updateFilter(target) {
|
||||
if (target.name === "years") {
|
||||
document.documentElement.style = `--color: var(--color-${target.value})`
|
||||
}
|
||||
}
|
||||
|
||||
if (filters) {
|
||||
filters.reset();
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
179
index.html
179
index.html
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue