feat: create timeline continuity line and re-layout with grid

src/assets/timeline/joint-start.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-115.97 -188.99)">
+		<path d="m122.35 188.99c0 4.3726 11.131 3.333 11.131 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
+	</g>
+</svg>

src/assets/timeline/joint-stop.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-115.97 -188.99)">
+		<path d="m133.54 188.99c0 4.3726-10.693 3.333-10.693 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
+	</g>
+</svg>

src/assets/timeline/joint.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-115.97 -188.99)">
+		<path d="m122.35 188.99c0 4.3726 11.131 3.333 11.131 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
+	</g>
+</svg>

src/assets/timeline/line.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1mm" height="4.2333mm" version="1.1" viewBox="0 0 1 4.2333" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-124.76,-160.47)">
+		<path d="m125.26 160.47v4.2333" fill="none" stroke="#2e2e32"/>
+	</g>
+</svg>

src/components/Timeline.vue

@@ -4,40 +4,68 @@
 		<div id='search-header' ref='header'>
 		</div>
 
+		<div class="col1"></div>
+		<div class="col2"></div>
+		<div class="col3"></div>
+		<div class="col4"></div>
+		<div class="col5"></div>
+
 		<template class='project' v-for='(proj) of projects'>
+			<div :key="'spacer-'+proj.name" class='spacer' />
+
 			<!-- id is used for navigation -->
 			<div :key="'start-'+proj.name" class='start' :id='"project-" + proj.name.replaceAll(" ", "_")'>
 				{{ proj.started_at | short_date }}
 			</div>
 
-			<img :key="'name-icon-'+proj.name" class='name-icon' src='../assets/timeline/project.svg'/>
+			<div :key="'name-icon-'+proj.name" class='name-icon'>
+				<img src='../assets/timeline/project.svg' />
+			</div>
 			<div :key="'name-'+proj.name" class='name'>
 				Created <b>{{ proj.name }}</b> <span>{{ proj.started_at | date_diff }} ago</span>
 			</div>
 
-			<img :key="'skill-icon-'+proj.name" class='skill-icon' src='../assets/timeline/skills.svg' />
+			<div :key="'col1-'+proj.name" class="col1"></div>
+			<div :key="'col2-'+proj.name" class="col2"></div>
+			<div :key="'col3-'+proj.name" class="col3"></div>
+			<div :key="'col4-'+proj.name" class="col4"></div>
+			<div :key="'col5-'+proj.name" class="col5"></div>
+
+			<div :key="'joint-start-'+proj.name" class='joint-start' />
+
+			<div :key="'skill-icon-'+proj.name" class='skill-icon'>
+				<img src='../assets/timeline/skills.svg' />
+			</div>
 			<div :key="'skillset-'+proj.name" class='skillset'>
 				<SkillCard v-for='(id) of proj.skills' :key='"timeline-" + proj.name + "-" + id' :id='id' :active='id == skill' @pick='$emit("pick", id)'/>
 			</div>
 
-			<img :key="'desc-icon-'+proj.name" class='desc-icon' src='../assets/timeline/info.svg' />
+			<div :key="'desc-icon-'+proj.name" class='desc-icon'>
+				<img src='../assets/timeline/info.svg' />
+			</div>
 			<div :key="'desc-'+proj.name" class='desc' v-html='proj.info'></div>
 
 			<template v-if='proj.source != null'>
-				<img :key="'src-icon-'+proj.name" class='src-icon' src='../assets/timeline/src.svg' />
+				<div :key="'src-icon-'+proj.name" class='src-icon'>
+					<img src='../assets/timeline/src.svg' />
+				</div>
 				<div :key="'src-'+proj.name" class='src' >
 					Hosted at <a :href='proj.source.link'>{{ proj.source.name }}</a> <span>({{ proj.commits }} commits)</span>
 				</div>
 			</template>
 
 			<template v-if='proj.doc != null'>
-				<img :key="'doc-icon-'+proj.name" class='doc-icon' src='../assets/timeline/doc.svg' />
+				<div :key="'doc-icon-'+proj.name" class='doc-icon'>
+					<img src='../assets/timeline/doc.svg' />
+				</div>
 				<div :key="'doc-'+proj.name" class='doc'>
 					Documentation at <a :href='proj.doc.link'>{{ proj.doc.name }}</a>
 				</div>
 			</template>
 
-			<img :key="'end-icon-'+proj.name" class='end-icon' src='../assets/timeline/activity.svg' />
+			<div :key="'end-icon-'+proj.name" class='end-icon'>
+				<img src='../assets/timeline/activity.svg' />
+			</div>
 			<div :key="'end-'+proj.name" class='end'>
 				<template v-if='proj.stopped_at != null'>
 					Project stopped in {{ proj.stopped_at | short_date }} <span>{{ proj.stopped_at | date_diff }} ago</span>
@@ -46,6 +74,8 @@
 					Project still active
 				</template>
 			</div>
+
+			<div :key="'joint-stop-'+proj.name" class='joint-stop' />
 		</template>
 
 	</div>
@@ -162,10 +192,11 @@
 <style scoped lang="scss">
 	@import '../global';
 
-	$icon-width: 2.3rem;
+	$icon-size: 2.7rem;
 	$space-width: 1rem;
 	$bg-color: #202228;
 	$header-height: 6rem;
+	$joint-height: 2rem;
 
 	#search-header {
 		display: block;
@@ -207,102 +238,140 @@
 			width: 100vw;
 			// min-height: 100vh;
 
-		grid-template-columns: auto $icon-width $icon-width $space-width auto;
+		grid-template-columns: auto $icon-size $icon-size $space-width auto;
-		grid-gap: .5em;
+		grid-gap: 0;
 
+		color: #fff;
 		font-size: 1.6rem;
 		font-weight: 400;
-		color: #fff;
+
 		background: $bg-color;
 
 		padding: 0 5rem;
 
 		padding-top: #{$header-height + 2rem};
 
-		.start { grid-column: 1 / 2; }
+		// /**DEBUG**/.col1{ grid-column: 1; height: 1rem; background: red; }
+		// /**DEBUG**/.col2{ grid-column: 2; height: 1rem; background: blue; }
+		// /**DEBUG**/.col3{ grid-column: 3; height: 1rem; background: yellow; }
+		// /**DEBUG**/.col4{ grid-column: 4; height: 1rem; background: green; }
+		// /**DEBUG**/.col5{ grid-column: 5; height: 1rem; background: orange; }
+
+		// line 1
+		.spacer { grid-column: 2; };
+
+		// line 2
+		.start  { grid-column: 1;     }
+
+		.name-icon { grid-column: 2; }
 		.name      { grid-column: 3 / 6; }
-		.skillset, .desc, .src, .doc, .end {
-			grid-column: 5 / 6;
-		}
-		.name-icon { grid-column: 2 / 3; }
-		.skill-icon, .desc-icon, .src-icon, .doc-icon, .end-icon {
-			grid-column: 3 / 4;
-		}
 
-		.skill-icon, .desc-icon, .src-icon, .doc-icon, .end-icon {
+		// line 3 (line junction)
+		.joint-start { grid-column: 2 / 4; }
+
+		// line 4
+		.skill-icon { grid-column: 3; }
+		.skillset   { grid-column: 5; margin-bottom: 2rem; }
+
+		// line 5
+		.desc-icon { grid-column: 3; }
+		.desc      { grid-column: 5; margin-bottom: 2rem; }
+
+		// line 6
+		.src-icon { grid-column: 3; }
+		.src      { grid-column: 5; margin-bottom: 2rem; }
+
+		// line 7
+		.doc-icon { grid-column: 3; }
+		.doc      { grid-column: 5; margin-bottom: 2rem; }
+
+		// line 8
+		.end-icon { grid-column: 3; }
+		.end      { grid-column: 5; }
+
+		// line 9 (junction stop)
+		.joint-stop { grid-column: 2 / 4; }
+
+
+		.skill-icon, .name-icon, .desc-icon, .src-icon, .doc-icon, .end-icon, .src-icon, .doc-icon, .end-icon {
+			justify-self: center;
+
+			display: flex;
 			position: relative;
 
-			width:  #{$icon-width + .1rem};
+			width: $icon-size;
-			height: #{$icon-width + .1rem};
-			margin-top: .1rem;
 
-			background: $bg-color;
-		}
-		.src-icon, .doc-icon, .end-icon {
-			position: relative;
 
-			width:  #{$icon-width + .1rem};
+			background: url('../assets/timeline/line.svg');
-			height: #{$icon-width + .1rem};
+			background-repeat: repeat-y;
-			margin-top: .1rem;
+			background-position: center;
+			background-size: .2rem auto;
+
+			flex-flow: row nowrap;
+			justify-content: center;
+			align-items: flex-start;
+
+			img {
+				width:  #{$icon-size - 2*.1rem};
+				height: #{$icon-size - 2*.1rem};
+
+				padding: .1rem;
 
 				background: $bg-color;
 			}
 
+		}
+
+
+		// line 1
+		.spacer {
+			height: 5rem;
+
+			background: url('../assets/timeline/line.svg');
+			background-repeat: repeat-y;
+			background-position: center;
+			background-size: .2rem auto;
+		}
+
+		// line 2
 		.start {
+			align-self: center;
+			justify-self: end;
+
 			font-size: .8em;
 			color: #535359;
-			padding-top: .3em;
 
-			justify-self: flex-end;
+			margin-right: 1rem;
 		}
-
-		.name-icon {
-			position: relative;
-
-			width:  #{$icon-width + .2rem};
-			height: #{$icon-width + .2rem};
-
-			padding-top: -.2rem;
-
-			background: $bg-color;
-		}
-		.name, .end {
-			color: #999999;
-
-			b {
-				color: #745cfc;
-				font-weight: 500;
-			}
-
-			span {
-				position: relative;
-
-				font-size: .8em;
-				color: #4d4d4d;
-
-				margin-left: .5em;
-
-				&:before {
-					content: '';
-
-					display: inline-block;
-					position: relative;
-						margin-bottom: .15em;
-						margin-right: .5em;
-						width: .3em;
-						height: .3em;
-
-					background: #606060;
-
-					border-radius: 50% / 50%;
-				}
-			}
-		}
-
 		.name {
-			margin-bottom: 1em;
+			align-self: center;
+
+			margin-left: 1rem;
+
+			color: #999999;
 		}
 
+		// line 3
+		.joint-start {
+			height: $joint-height;
+
+			background: url('../assets/timeline/joint-start.svg');
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: auto;
+		}
+
+		.joint-stop {
+			height: $joint-height;
+			background: red;
+
+			background: url('../assets/timeline/joint-stop.svg');
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: auto;
+		}
+
+
 		.skillset {
 			display: flex;
 
@@ -361,17 +430,37 @@
 			}
 		}
 
-		.src, .doc {
+		.src, .doc, .end {
 			color: #999999;
+		}
+
+		b {
+			color: #745cfc;
+			font-weight: 500;
+		}
 
 		span {
-				margin-left: .5em;
+			position: relative;
-				color: #4d4d4d;
-			}
-		}
 
-		.end {
+			font-size: .8em;
-			margin-bottom: 2em;
+			color: #4d4d4d;
+
+			margin-left: .5em;
+
+			&:before {
+				content: '';
+
+				display: inline-block;
+				position: relative;
+					margin-bottom: .15em;
+					margin-right: .5em;
+					width: .3em;
+					height: .3em;
+
+				background: #606060;
+
+				border-radius: 50% / 50%;
+			}
 		}
 
 	}