94 lines
1.8 KiB
CSS
94 lines
1.8 KiB
CSS
.timeline {
|
|
display: grid;
|
|
grid-template-columns: 4rem 6rem 3rem 1fr;
|
|
row-gap: 0.5rem;
|
|
column-gap: 0.5rem;
|
|
max-width: 80ch;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Empêche les blocs internes de casser la grille */
|
|
.timeline .year,
|
|
.timeline .month,
|
|
.timeline .day,
|
|
.timeline .list {
|
|
display: contents;
|
|
}
|
|
|
|
.timeline .year>span {
|
|
grid-column: 1;
|
|
font-weight: bold;
|
|
color: var(--text-softest);
|
|
background: var(--surface-contrast);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 0.5rem;
|
|
position: sticky;
|
|
top: 3rem;
|
|
z-index: 3;
|
|
text-align: center;
|
|
align-self: start;
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
|
|
.timeline .month>span {
|
|
grid-column: 2;
|
|
font-style: italic;
|
|
color: var(--accent-blue-light);
|
|
background: var(--surface-accent);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 0.5rem;
|
|
position: sticky;
|
|
top: 3rem;
|
|
z-index: 2;
|
|
align-self: start;
|
|
height: auto;
|
|
max-height: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline .day>span {
|
|
grid-column: 3;
|
|
color: var(--text-light);
|
|
background: var(--surface-muted);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 0.5rem;
|
|
position: sticky;
|
|
top: 3rem;
|
|
z-index: 1;
|
|
align-self: start;
|
|
height: auto;
|
|
max-height: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Articles */
|
|
.timeline .day>.list {
|
|
grid-column: 4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
|
|
.timeline ul {
|
|
margin: 0 !important;
|
|
|
|
li {
|
|
margin: 0 !important;
|
|
padding: 0 0 0 1rem !important;
|
|
}
|
|
}
|
|
|
|
.timeline .day>.list a {
|
|
text-decoration: none;
|
|
color: var(--text-softer);
|
|
font-weight: 500;
|
|
display: block;
|
|
}
|
|
|
|
.timeline .day>.list a:hover {
|
|
color: var(--accent-blue-hover);
|
|
text-decoration: underline;
|
|
}
|