Initial commit

themes/default/assets/css/timeline.css

@@ -0,0 +1,93 @@
+.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: #eee;
+    background: #2b2b2b;
+    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: #bceeff;
+    background: #2d3a3f;
+    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: #ccc;
+    background: #333;
+    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: #ddd;
+    font-weight: 500;
+    display: block;
+}
+
+.timeline .day>.list a:hover {
+    color: #2da8f4;
+    text-decoration: underline;
+}