initial commit

This commit is contained in:
Timothée Goguely 2026-05-16 17:55:37 +02:00
commit 5559563a81
41 changed files with 1295 additions and 0 deletions

116
agenda/evenement.html Normal file

File diff suppressed because one or more lines are too long

50
assets/css/00.reset.css Normal file
View file

@ -0,0 +1,50 @@
/* RESET */
/*
base on Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
@charset "utf-8";
*, *::before, *::after {
box-sizing: border-box;
}
*:not(dialog) {
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
font-size: inherit;
font-weight: inherit;
}

31
assets/css/01.fonts.css Normal file
View file

@ -0,0 +1,31 @@
/* FONTS */
/* Apercu */
@font-face {
font-family: "Apercu";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/Apercu-Regular.woff") format("woff");
}
@font-face {
font-family: "Apercu";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/Apercu-Medium.woff") format("woff");
}
@font-face {
font-family: "Apercu";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/Apercu-Bold.woff") format("woff");
}
@font-face {
font-family: "Apercu";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("../fonts/Apercu-BoldItalic.woff") format("woff");
}

File diff suppressed because one or more lines are too long

161
assets/css/03.global.css Normal file
View file

@ -0,0 +1,161 @@
/* GLOBAL */
html {
scrollbar-color: currentColor transparent;
scroll-behavior: smooth;
}
body {
font-family: var(--font-base);
font-size: var(--text-size-base);
line-height: var(--leading);
background: var(--color-global-bg);
color: var(--color-global-text);
accent-color: var(--color-black);
}
header,
section,
article,
footer {
position: relative;
}
main {
display: flex;
flex-direction: column;
}
/* Headings */
h1 {
font-size: var(--text-size-heading-1);
}
h2 {
font-size: var(--text-size-heading-2);
}
h3 {
font-size: var(--text-size-heading-3);
}
h1,
h2,
h3 {
font-family: var(--font-display);
letter-spacing: var(--kerning-tight);
line-height: var(--leading-fine);
}
h4,
h5,
h6 {
font-size: var(--text-size-heading-4);
}
/* Links */
a {
color: currentColor;
text-decoration: none;
}
/* Lists */
ul:is([role="list"], [class]) {
padding: 0;
list-style: none;
}
dl {
font-size: var(--text-size-meta);
}
dt {
font-weight: 700;
}
dd {
margin-top: 0 !important;
margin-bottom: 1em;
}
/* Sections */
section header {
border-block: var(--border);
padding-block: var(--space-gutter);
display: flex;
justify-content: space-between;
align-items: baseline;
}
section header a {
font-size: var(--text-size-meta);
}
/* Details / Summary */
details {
position: relative;
cursor: pointer;
}
details > * {
padding: calc(var(--space-gutter)/2) var(--space-gutter);
font-size: var(--text-size-meta);
}
summary {
user-select: none;
}
summary::-webkit-details-marker,
summary::marker {
display: none;
content: "";
}
summary:after {
content: "";
display: inline-flex;
width: 1em;
height: 1em;
background-image: var(--icon-x);
background-size: contain;
position: absolute;
top: calc(var(--space-gutter)/1.5);
right: calc(var(--space-gutter)/1.5);
transform: rotate(45deg);
transform-origin: center;
transition: transform 0.1s ease-out;
}
details[open] summary:after {
transform: rotate(0);
}
/* Images */
img {
object-fit: cover;
aspect-ratio: var(--aspect-ratio, auto);
}
/* Address */
address {
font-style: normal;
}
/* Selection */
::selection {
background: var(--color-dark);
color: var(--color-light);
}
/* Focus */
:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}

View file

@ -0,0 +1,54 @@
/* COMPOSITIONS */
/* Wrapper */
.wrapper {
margin-inline: auto;
max-width: var(--size-wrapper-max-width, 100vw);
padding-inline: 0;
position: relative;
}
/* Grid */
.grid {
display: grid;
grid-template-columns: repeat(
var(--grid-placement, auto-fill),
minmax(var(--grid-min-item-size, 16rem), 1fr)
);
gap: var(--gap, var(--space-gutter));
}
@media (min-width: 60rem) {
.column > *:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
.column > section:first-of-type {
padding-top: 0;
margin-top: 0;
}
.column > section:first-of-type header {
padding-top: 0;
border-top: none;
}
}
/* Flow */
.flow > * + * {
margin-top: var(--space-flow, 1em);
}
/* Cluster */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--gap, var(--space-gutter));
justify-content: var(--cluster-horizontal-alignment, flex-start);
align-items: var(--cluster-vertical-alignment, center);
}

251
assets/css/05.blocks.css Normal file
View file

@ -0,0 +1,251 @@
/* BLOCKS */
/* Region */
.region {
margin-inline: var(--space-regions);
padding-block: var(--space-regions);
}
/* Buttons */
.button {
--button-border-color: var(--color-light);
appearance: none;
display: inline-flex;
gap: var(--button-gap, var(--space-gutter));
padding: var(--button-padding, 0.25em);
background: var(--button-bg, var(--color-global-bg));
color: var(--button-text, var(--color-global-text));
line-height: var(--button-leading, var(--leading-fine));
border: var(--button-border-width, 0) solid var(--button-border-color, var(--border-color));
border-radius: var(--button-radius, 0);
text-decoration: none;
text-transform: var(--button-text-transform, uppercase);
font-weight: var(--button-font-weight, 500);
letter-spacing: var(--button-kerning, var(--kerning-loose));
cursor: pointer;
}
.button:hover {
background: var(--button-hover-bg, var(--color-light));
color: var(--button-hover-text, var(--color-dark));
}
/* Tags */
.tags {
--gap: 0;
}
.tag {
display: inline-flex;
gap: var(--tag-gap, var(--space-gutter));
padding: var(--tag-padding, .25em .75em);
background: var(--tag-bg, var(--color-global-bg));
color: var(--tag-text, var(--color-global-text));
line-height: var(--tag-leading, var(--leading-fine));
border-radius: var(--tag-radius, var(--border-radius)) !important;
border: var(--tag-border-width, var(--border-width)) solid var(--tag-border-color, var(--border-color));
text-decoration: none;
text-transform: var(--tag-text-transform, uppercase);
font-size: var(--size-step--2);
font-weight: var(--tag-font-weight, 500);
letter-spacing: var(--tag-kerning, var(--kerning-loose));
margin-right: -0.333em;
user-select: none;
}
a.tag {
cursor: pointer;
}
a.tag:hover {
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));
}
.tag[data-variant="rect"] {
--tag-radius: 0;
}
.tag[data-variant="ellipse"] {
--tag-radius: 100%;
}
/* Card */
.card {
display: flex;
flex-direction: column;
gap: var(--card-gap, var(--space-gutter));
padding: var(--card-padding, var(--space-gutter) 0);
background: var(--card-bg, var(--color-global-bg));
color: var(--card-text, var(--color-global-text));
border-bottom: var(--card-border-width, var(--border-width)) solid var(--card-border-color, var(--border-color));
border-radius: var(--card-radius, 0);
h3 {
font-size: var(--text-size-heading-3);
font-weight: 500;
text-transform: uppercase;
}
.cover {
box-shadow: 0 0 0 hsl(0deg, 0%, 75%);
transition: all 0.1s ease-out;
}
}
/*
.card:hover .cover {
box-shadow: 6px 6px 8px hsl(0deg, 0%, 75%);
}
*/
.card[data-variant="evenement"] {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr auto auto;
align-items: baseline;
padding-top: 0;
time {
grid-column: 1 / 1;
grid-row: 1 / 1;
font-size: var(--text-size-heading-3);
font-weight: 500;
white-space: pre;
}
.tags {
grid-column: 2 / -1;
}
.cover {
grid-column: 1 / -1;
img {
--aspect-ratio: 1200/675;
}
}
}
.card[data-variant="diplome"] {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
h3 {
grid-column: 1 / 1;
grid-row: 1 / 1;
}
.tags {
grid-column: 1 / 1;
grid-row: 2 / -1;
align-self: flex-start;
}
.cover {
grid-column: 2 / -1;
grid-row: 1 / -1;
img {
--aspect-ratio: 1/1;
}
}
}
/* Breadcrumb */
.breadcrumb {
font-size: var(--text-size-meta);
margin-bottom: var(--space-md);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
.breadcrumb li:not(:last-child)::after {
content: '/';
margin-inline: .5ch;
}
.breadcrumb a:not([aria-current="page"]) {
text-decoration: underline;
}
.breadcrumb a[aria-current="page"] {
color: var(--color-black);
}
/* Prose */
.prose > * {
max-width: var(--prose-max-width);
}
.prose > :not(.sr-only, [hidden]) + * {
margin-top: 1em;
}
.prose a {
color: currentColor;
text-decoration: underline var(--border-width) solid;
}
.prose a:hover {
text-decoration-color: currentColor;
}
/* Header */
.site-header {
display: grid;
grid-template-columns: 320px 1fr auto;
gap: var(--space-gutter);
align-items: flex-start;
padding-top: calc(var(--space-gutter) * 2.5);
border-bottom: var(--border);
margin-bottom: var(--space-regions);
}
#logo {
grid-column: 1 / 1;
max-width: 256px;
margin-top: -0.875em;
}
#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: var(--leading-flat);
font-weight: 500;
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] {
text-decoration: underline;
text-decoration-thickness: var(--border-width);
}
/* Footer */
.site-footer {
--gap: 0;
margin-top: calc(-1 * var(--border-width));
font-size: var(--size-step--2);
font-weight: 500;
}
.site-footer > * {
border-top: var(--border);
}
.site-footer nav {
text-transform: uppercase;
}

View file

@ -0,0 +1,42 @@
/* UTILITES */
[hidden], .hidden {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.link-full::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.border {
border: var(--border);
}
.box-shadow {
box-shadow: 0 var(--box-shadow-thickness) 0 var(--color-global-text);
border-radius: var(--border-radius);
transform: translateY(0);
transition: all .1s ease-out;
}
.box-shadow:hover {
--translateY: 3px;
--box-shadow-thickness: 3px;
transform: translateY(var(--translateY));
}
.box-shadow:active {
--translateY: 6px;
--box-shadow-thickness: 0;
transform: translateY(var(--translateY));
}

197
assets/css/07.templates.css Normal file
View file

@ -0,0 +1,197 @@
/* TEMPLATES */
/* Home */
[data-template="home"] {
@media (min-width: 60rem) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
main > .column:first-of-type {
border-right: var(--border);
}
}
#actualites {
padding-block: 0;
}
#actualites header:not(.sr-only) + .actualites {
padding-top: var(--space-gutter);
padding-bottom: var(--box-shadow-thickness);
}
.actualites {
align-items: flex-start;
}
.stickers a {
position: absolute;
font-size: clamp(var(--text-size-heading-4), 3vw, var(--text-size-heading-2));
}
.stickers #art {
top: 7rem;
left: 20vw;
transform: rotate(15deg) translateX(-50%);
}
.stickers #design {
top: 8rem;
left: 30vw;
transform: rotate(-10deg) translateX(-50%);
}
#galerie-diplomes {
padding-bottom: 0;
}
#ressources {
padding-top: 0;
header {
border-top: 0;
}
}
.ressources {
--space-flow: var(--space-gutter);
padding-block: var(--space-gutter);
text-transform: uppercase;
font-weight: 500;
font-size: var(--text-size-heading-4);
}
.ressources a {
display: flex;
justify-content: space-between;
}
.ressources a::after {
content: "";
border: var(--border);
border-radius: 50%;
display: inline-flex;
width: 1.25em;
height: 1.25em;
margin-left: auto;
box-shadow: 0 var(--box-shadow-thickness) 0 var(--color-global-text);
background-color: var(--color-light);
background-image: var(--icon-arrow-right);
background-repeat: no-repeat;
background-position: center;
background-size: 1em;
transform: translateY(.125em);
transition: all 0.1s ease-out;
}
.ressources a:hover::after {
--translateY: 3px;
--box-shadow-thickness: 3px;
transform: translateY(calc(.125em + var(--translateY)));
}
.ressources a:active::after {
--translateY: 6px;
--box-shadow-thickness: 0;
transform: translateY(calc(.125em + var(--translateY)));
}
}
/* Événement */
[data-template="evenement"] {
article {
display: flex;
flex-direction: column;
@media (min-width: 60rem) {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1lh auto auto auto 1fr;
align-items: baseline;
}
& > * {
margin: 0 var(--space-regions) var(--space-regions);
}
.cover {
grid-row: 1 / span 3;
align-self: flex-start;
padding-bottom: var(--space-regions);
border-bottom: var(--border);
}
.breadcrumb {
grid-column: 2 / -1;
grid-row: 1 / span 1;
}
h1 {
align-self: flex-start;
grid-column: 2 / -1;
grid-row: 2 / span 1;
text-transform: uppercase;
font-weight: 500;
transform: translateX(-0.05em);
}
.tags {
padding-bottom: var(--space-regions);
border-bottom: var(--border);
@media (min-width: 60rem) {
align-self: flex-end;
grid-column: 2 / -1;
grid-row: 3 / span 1;
}
}
time {
align-self: stretch;
grid-column: 1 / 1;
border-bottom: var(--border);
font-size: var(--text-size-heading-3);
font-weight: 500;
line-height: var(--leading-short);
}
.meta {
border-bottom: var(--border);
@media (min-width: 60rem) {
align-self: flex-start;
grid-column: 1 / 1;
}
}
.chapo {
position: relative;
grid-column: 2 / -1;
grid-row: 4 / span 1;
border-bottom: var(--border);
font-size: var(--text-size-heading-3);
font-weight: 500;
line-height: var(--leading-short);
padding-bottom: var(--space-regions);
}
.content {
position: relative;
grid-column: 2 / -1;
padding-bottom: calc(var(--space-regions) * 2);
margin-bottom: 0;
}
@media (min-width: 40rem) {
.chapo::before,
.content::before {
content: '';
position: absolute;
top: 0;
left: calc(-1 * var(--space-gutter));
bottom: var(--space-gutter);
border-left: var(--border);
padding-left: var(--space-gutter);
}
}
}
}

8
assets/css/index.css Normal file
View file

@ -0,0 +1,8 @@
@import "00.reset.css";
@import "01.fonts.css";
@import "02.variables.css";
@import "03.global.css";
@import "04.compositions.css";
@import "05.blocks.css";
@import "06.utilities.css";
@import "07.templates.css";

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 663 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 844 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 512 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 688 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 577 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 882 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 653 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 683 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 KiB

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2 12.001 2Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 536 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M12 9C10.3436 9 9 10.3431 9 12C9 13.6573 10.3441 15 12 15C13.6583 15 15 13.6569 15 12C15 10.3427 13.6579 9 12 9ZM12 7C14.7614 7 17 9.2371 17 12C17 14.7605 14.7639 17 12 17C9.24051 17 7 14.7629 7 12C7 9.23953 9.23808 7 12 7ZM18.501 6.74915C18.501 7.43926 17.9402 8 17.251 8C16.5609 8 16 7.4384 16 6.74915C16 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4 9.46105 4 12C4 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20 14.5389 20 12C20 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12 4ZM12 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22 9.28333 22 12C22 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2 14.7167 2 12C2 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12 2Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/>
</svg>

After

Width:  |  Height:  |  Size: 510 B

3
assets/media/icons/x.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 830 KiB

281
index.html Normal file

File diff suppressed because one or more lines are too long