sort

public/css/timeline.css

@@ -0,0 +1,91 @@
+/* Basic Layout */
+#timeline-content {
+  position: relative;
+  margin: 2rem 0;
+  padding-left: 120px;
+}
+
+#timeline-content ul.timeline {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+#timeline-content ul.timeline::before {
+  content: '';
+  position: absolute;
+  left: -30px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--accent-color);
+}
+
+/* Event List Item */
+#timeline-content li.event {
+  position: relative;
+  margin-bottom: 3rem;
+}
+
+/* Event Circle */
+#timeline-content li.event::before {
+  content: '';
+  position: absolute;
+  left: -39px;
+  top: 5px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  border: 2px solid white;
+  z-index: 1;
+}
+
+/* From + To Label — styled exactly like old date label */
+#timeline-content li.event::after {
+  content: attr(data-from) "\A" attr(data-to);
+  white-space: pre; /* ensures newline works */
+  position: absolute;
+  left: -160px;
+  width: 100px;
+  text-align: right;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 0.9rem;
+  line-height: 1.3;
+  top: 0;
+}
+
+/* Event Heading */
+#timeline-content li.event h3 {
+  margin: 0 0 0.5rem 0;
+  display: inline-block;
+}
+
+/* Event Description */
+#timeline-content li.event p {
+  margin: 0;
+}
+
+/* Timeline Icon */
+#timeline-content .timeline-icon {
+  margin-right: 0.5rem;
+  color: var(--accent-color);
+  font-size: 1.2rem;
+  vertical-align: middle;
+}
+
+/* Hover Effects */
+#timeline-content li.event:hover::before {
+  background: var(--accent-color-dark);
+}
+
+#timeline-content li.event:hover {
+  background-color: var(--accent-color-alpha);
+}
+
+/* From + To Label Hover Effect */
+#timeline-content li.event:hover::after {
+  color: var(--fg-color);
+}