💄 fix timeline waypoint not being centered on first and last item

page/style.css

@@ -348,6 +348,8 @@ a.box:hover {
 .timeline {
 	display: flex;
 	flex-direction: column;
+	
+	margin: -1rem 0;
 }
 
 .timeline > .item,
@@ -368,10 +370,10 @@ a.box:hover {
 	flex-direction: column;
 	justify-content: center;
 }
-.timeline > .item:not(:first-child) > .connector::before,
-.timeline > .wrapper:not(:first-child) > .item > .connector::before,
-.timeline > .item:not(:last-child) > .connector::after,
-.timeline > .wrapper:not(:last-child) > .item > .connector::after {
+.timeline:not(.no-line) > .item:not(:first-child) > .connector::before,
+.timeline:not(.no-line) > .wrapper:not(:first-child) > .item > .connector::before,
+.timeline:not(.no-line) > .item:not(:last-child) > .connector::after,
+.timeline:not(.no-line) > .wrapper:not(:last-child) > .item > .connector::after {
 	content: "";
 	position: absolute;
 	left: calc(50% - 0.25rem);
@@ -382,25 +384,25 @@ a.box:hover {
 	background-color: var(--color-bg-light);
 	z-index: 0;
 }
-.timeline > .item > .connector::before,
-.timeline > .wrapper > .item > .connector::before {
+.timeline:not(.no-line) > .item > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item > .connector::before {
 	top: 0;
 }
-.timeline > .item.done > .connector::before,
-.timeline > .wrapper > .item.done > .connector::before {
+.timeline:not(.no-line) > .item.done > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item.done > .connector::before {
 	background-color: var(--theme);
 }
-.timeline > .item.next > .connector::before,
-.timeline > .wrapper > .item.next > .connector::before {
+.timeline:not(.no-line) > .item.next > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item.next > .connector::before {
 	background-color: var(--theme);
 }
-.timeline > .item > .connector::after,
-.timeline > .wrapper > .item > .connector::after {
+.timeline:not(.no-line) > .item > .connector::after,
+.timeline:not(.no-line) > .wrapper > .item > .connector::after {
 	top: 50%;
 	z-index: 1 !important;
 }
-.timeline > .item.done > .connector::after,
-.timeline > .wrapper > .item.done > .connector::after {
+.timeline:not(.no-line) > .item.done > .connector::after,
+.timeline:not(.no-line) > .wrapper > .item.done > .connector::after {
 	background-color: var(--theme);
 }
 
@@ -433,14 +435,6 @@ a.box:hover {
 	
 	text-align: left;
 }
-.timeline > .item:first-child > .box,
-.timeline > .wrapper:first-child > .item > .box {
-	margin: 0 0 1rem 0;
-}
-.timeline > .item:last-child > .box,
-.timeline > .wrapper:last-child > .item > .box {
-	margin: 1rem 0 0 0;
-}
 
 @media only screen and (max-width: 1000px) {
 	.timeline > .item,
@@ -454,8 +448,8 @@ a.box:hover {
 		align-self: center;
 	}
 	
-	.timeline > .item:not(:last-child)::after,
-	.timeline > .wrapper:not(:last-child) > .item::after {
+	.timeline:not(.no-line) > .item:not(:last-child)::after,
+	.timeline:not(.no-line) > .wrapper:not(:last-child) > .item::after {
 		content: "";
 		position: absolute;
 		left: calc(50% - 0.25rem);
@@ -494,16 +488,16 @@ a.box:hover {
 		align-items: center;
 		text-align: center;
 	}
-	.timeline > .item > .box,
-	.timeline > .wrapper > .item > .box {
+	.timeline:not(.no-line) > .item > .box,
+	.timeline:not(.no-line) > .wrapper > .item > .box {
 		outline: 0.125rem solid var(--color-bg-light);
 	}
-	.timeline > .item.done > .box,
-	.timeline > .wrapper > .item.done > .box {
+	.timeline:not(.no-line) > .item.done > .box,
+	.timeline:not(.no-line) > .wrapper > .item.done > .box {
 		outline: 0.125rem solid var(--theme);
 	}
-	.timeline > .item.next > .box,
-	.timeline > .wrapper > .item.next > .box {
+	.timeline:not(.no-line) > .item.next > .box,
+	.timeline:not(.no-line) > .wrapper > .item.next > .box {
 		outline: 0.125rem solid var(--color-gray-dark);
 	}
 }