add rotate animation on profile image

css/profile-image.css

@@ -29,3 +29,14 @@
   	justify-content: center;
   	align-items: center;
 }
+
+.rotateProfileAnim {
+	animation: rotate var(--transition-speed) 1;
+	animation-iteration-count: 1;
+	animation-play-state: paused;
+}
+
+@keyframes rotate {
+    from { -webkit-transform: rotate(0deg) } 
+    to { -webkit-transform: rotate(360deg) } 
+}

css/search-box.css

@@ -0,0 +1,36 @@
+#searchBox {
+	background: var(--base-bg);
+	color: var(--base-color);
+	text-align: center;
+	font-family: roboto-bold;
+
+	width: 30vw;
+	height: 48px;
+	border: none;
+	border-radius: 24px;
+	
+	padding-left: 10px;
+	padding-right: 10px;
+	margin: 0;
+	opacity: 0;
+	position: absolute;
+	backdrop-filter: blur(var(--blur-strength));
+	
+	left: 50%;
+	top: 60%;
+	
+	pointer-events: none;
+	
+	-ms-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	transition: opacity var(--transition-speed), 
+				top var(--transition-speed), 
+				visibility var(--transition-speed), 
+				pointer-events var(--transition-speed) ; 
+}
+
+#searchBox.show {
+	opacity: 1;
+	top: 100%;
+	pointer-events: initial;
+}

css/style.css

@@ -7,6 +7,7 @@
 @import url('dock-buttons.css');
 @import url('centered-box.css');
 @import url('profile-image.css');
+@import url('search-box.css');
 
 :root {
 	/* Colors */

index.html

@@ -58,5 +58,6 @@
 	<script src="js/clock.js"></script>
 	<script src="js/sites-list.js"></script>
 	<script src="js/dock-buttons.js"></script>
+	<script src="js/animate-profile-image.js"></script>
 </body>
 </html>

js/animate-profile-image.js

@@ -0,0 +1,36 @@
+var profileContainer = document.getElementById("profileImageContainer");
+
+let profileAnimRunning = false;
+
+// Don't run animation on startup
+profileContainer.style.webkitAnimationPlayState = "paused";
+
+// Rotate profile
+const rotateProfile = () => {
+    event.preventDefault;
+
+    // Remove anim class
+    profileContainer.classList.remove('rotateProfileAnim');
+
+    // Triggering reflow
+    void profileContainer.offsetWidth;
+
+    // Re-add animation class
+    profileContainer.classList.add('rotateProfileAnim');
+
+    profileContainer.style.webkitAnimationPlayState = "running";
+    profileAnimRunning = true;
+}
+
+// Re-enable animation after death
+profileContainer.addEventListener(
+    "animationend", 
+    (event) => {
+        profileAnimRunning = false;
+    }
+);
+
+// Animate/Show searchbox if profile container was clicked
+profileContainer.onclick = () => {
+	rotateProfile();
+};