feat: moving header smoother style

public/styles.css

@@ -31,4 +31,20 @@ body {
 	overflow: hidden;
 	overflow-y: auto;
 
+}
+
+::-webkit-scrollbar {
+	display: block;
+	width: .3rem;
+	background-color: #202228;
+	overflow: hidden;
+}
+::-webkit-scrollbar-thumb {
+	border-radius: .3rem / .3rem;
+	background-color: #6d7076;
+
+	transition: background-color .1s ease-in-out;
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: #a9acb2;
 }

src/App.vue

@@ -73,24 +73,22 @@ export default class App extends Vue {
 		background: #fff;
 	}
 
-	a {
+	a, a:visited {
 		display: inline-block;
 		position: relative;
-		color: #fff;
+		color: #cbcbcb;
 
 		cursor: pointer;
 
-		&:visited {
+		transition: color .2s ease-in-out;
-			color: #fefefa;
-		}
 
 		&:after {
 			content: '';
 
 			display: block;
 			position: absolute;
-				margin-left: 5%;
+				margin-left: 0%;
-				width: 90%;
+				width: 100%;
 				height: .15rem;
 
 			background: #3333be;
@@ -100,9 +98,13 @@ export default class App extends Vue {
 			transform-style: preserve-3d;
 		}
 
-		&:hover:after {
+		&:hover{
-			margin-left: 0;
+			color: #fff;
-			width: 100%;
+
+			&:after {
+				margin-left: 5%;
+				width: 90%;
+			}
 		}
 	}
 </style>

src/components/SkillPicker.vue

@@ -171,10 +171,7 @@
 		}
 
 		protected browse(){
-			const el = document.querySelector('#timeline');
+			go(`search-header`, 0);
-			if( el != null ){
-				el.scrollIntoView();
-			}
 		}
 
 	}
@@ -226,12 +223,14 @@
 		align-items: flex-start;
 		justify-content: flex-start;
 
+		margin-right: 1em;
+
 		overflow: hidden;
 		overflow-y: visible;
 
 		.skill-card {
 			margin: .3em 0;
-			width: 12em;
+			width: 13.4em;
 		}
 	}
 
@@ -250,7 +249,7 @@
 
 		.skill-card {
 			margin: .3em 0;
-			width: 12em;
+			width: 13.4em;
 		}
 	}
 
@@ -365,7 +364,7 @@
 	// width > 1800px : center the container
 	@media screen and (min-width: 1800px) {
 		.container {
-			left: calc( 100vw/2 - 1800px/2 );
+			left: calc( 100vw/2 - 1800px/2 - #{$page-margin} );
 			max-width: 1800px;
 		}
 	}

src/components/Timeline.vue

@@ -176,12 +176,26 @@
 			height: $header-height;
 
 		background: #564ba4;
-		background: #fff;
 
 		z-index: 500;
 
+		transition: background .5s ease-in-out,
+					margin .2s ease-in-out,
+					left .2s ease-in-out,
+					width .2s ease-in-out,
+					border-radius .2s ease-in-out,
+					box-shadow .2s ease-in-out;
+
 		&.fixed {
 			position: fixed;
+				left: 1rem;
+				width: calc( 100% - #{1*2rem} );
+			margin-top: 1rem;
+
+			background: #fff;
+			border-radius: 1rem / 1rem;
+
+			box-shadow: 0 .5em .5em darken(#202228, 5%);
 		}
 	}