From cdb6708a57e7bc827590462a1829eec8faeca7b4 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Wed, 5 Oct 2022 16:51:10 +0200
Subject: [PATCH] feat: moving header smoother style

---
 src/components/SkillPicker.vue |  6 ++++--
 src/components/Timeline.vue    | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index 3c2ae7d..6974d65 100644
--- a/src/components/SkillPicker.vue
+++ b/src/components/SkillPicker.vue
@@ -223,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;
 		}
 	}
 
@@ -247,7 +249,7 @@
 
 		.skill-card {
 			margin: .3em 0;
-			width: 12em;
+			width: 13.4em;
 		}
 	}
 
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index ea5c2ec..0e61dd4 100644
--- a/src/components/Timeline.vue
+++ b/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%);
 		}
 	}