Improved chapter timeline rendering.

components/scenes/chapters.vue

@@ -5,15 +5,22 @@
 	>
 		<ul class="timeline-items nolist">
 			<li
-				v-for="chapter in timeline"
+				v-for="(chapter, index) in timeline"
 				:key="`chapter-${chapter.id}`"
-				:style="{ left: `${(chapter.time / duration) * 100}%` }"
+				:style="{
+					left: `${(chapter.time / duration) * 100}%`,
+					bottom: `${(index % 3) * 1.5}rem`,
+				}"
 				:title="formatDuration(chapter.time)"
 				class="timeline-item"
-			><a
-				:href="`/tag/${chapter.tags[0].slug}`"
-				class="link"
-			>{{ chapter.tags[0]?.name || '&nbsp;' }}</a></li>
+			>
+				<a
+					:href="`/tag/${chapter.tags[0].slug}`"
+					class="link"
+				>{{ chapter.tags[0]?.name || '&nbsp;' }}</a>
+
+				<span class="timeline-timestamp">{{ formatDuration(chapter.time) }}</span>
+			</li>
 		</ul>
 	</div>
 
@@ -89,6 +96,8 @@ const props = defineProps({
 	},
 });
 
+console.log(props.chapters);
+
 const lastChapter = props.chapters.at(-1);
 const duration = lastChapter.time + lastChapter.duration;
 
@@ -196,10 +205,15 @@ const timeline = computed(() => {
 	}
 }
 
+.timeline {
+	overflow: hidden;
+	padding-right: 5rem; /* ensure last tag is cleared */
+}
+
 .timeline-items {
 	position: relative;
 	height: 5rem;
-	border-bottom: solid 1px var(--shadow-weak);
+	border-bottom: solid 1px var(--shadow-weak-30);
 }
 
 .timeline-item {
@@ -207,30 +221,32 @@ const timeline = computed(() => {
 	bottom: -.25rem;
 	padding: .1rem .5rem;
 	border-radius: .6rem;
-	color: var(--primary);
 	background: var(--background);
-	transform: rotate(-60deg);
-	transform-origin: 0 50%;
-	box-shadow: 0 0 3px var(--shadow-weak);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
 	font-size: .8rem;
-	font-weight: bold;
 
 	.link {
-		color: inherit;
+		color: var(--primary);
+		font-weight: bold;
 	}
 
 	&:before {
 		content: '';
 		display: inline-block;
-		width: 1rem;
-		height: 2px;
+		width: 1px;
+		height: 5rem;
 		position: absolute;
-		left: calc(-1rem + 1px);
+		left: 0;
 		margin: .3rem .5rem 0 0;
-		background: var(--primary);
+		border-left: dashed 1px var(--shadow-weak-30);
 	}
 }
 
+.timeline-timestamp {
+	color: var(--glass);
+	margin-left: .25rem;
+}
+
 @media(--small-30) {
 	.chapters {
 		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

pages/scene/+Page.vue

@@ -168,12 +168,6 @@
 					</div>
 				</div>
 
-				<Chapters
-					v-if="scene.chapters.length > 0"
-					:chapters="scene.chapters"
-					class="section"
-				/>
-
 				<div
 					v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
 					class="section details"
@@ -243,6 +237,12 @@
 					</div>
 				</div>
 
+				<Chapters
+					v-if="scene.chapters.length > 0"
+					:chapters="scene.chapters"
+					class="section"
+				/>
+
 				<div
 					v-if="scene.description"
 					class="section"