From 31b0f41197eadc68ffe5da1dac799e1e8ea6505c Mon Sep 17 00:00:00 2001
From: Jonni Liljamo <jonni@liljamo.com>
Date: Tue, 22 Aug 2023 20:13:04 +0300
Subject: [PATCH] feat: eye candy profile name button to settings

---
 static/styles.css                   | 119 ++++++++++++++++++++++++++++
 tailwind.config.js                  |  69 ++++++++++++++--
 template/templates/common/base.tmpl |  11 ++-
 3 files changed, 193 insertions(+), 6 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index df7fbac..8789b75 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -534,10 +534,30 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .flex {
   display: flex;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -625,6 +645,14 @@ video {
   background-position: 0% 0%;
 }
 
+.fill-yellow-200 {
+  fill: #fef08a;
+}
+
+.stroke-yellow-400 {
+  stroke: #facc15;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -661,6 +689,10 @@ video {
   color: transparent;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -694,3 +726,90 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+
+.group:hover .group-hover\:visible {
+  visibility: visible;
+}
+
+@keyframes starmove {
+  0% {
+    transform: translateX(-25%) translateY(-250%);
+  }
+
+  10% {
+    transform: translateX(-80%) translateY(-162.5%);
+  }
+
+  30% {
+    transform: translateX(-110%) translateY(-125%);
+  }
+
+  50% {
+    transform: translateX(-80%) translateY(-50%);
+  }
+
+  60% {
+    transform: translateX(-25%) translateY(0);
+  }
+
+  75% {
+    transform: translateX(-10%) translateY(25%);
+  }
+
+  90% {
+    transform: translateX(-15%) translateY(50%);
+  }
+
+  100% {
+    transform: translateX(-10%) translateY(75%);
+  }
+}
+
+.group:hover .group-hover\:animate-starmove {
+  animation: starmove 750ms linear;
+}
+
+@keyframes starspin {
+  0% {
+    transform: rotate(0deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotate(90deg);
+    opacity: 1;
+  }
+
+  50% {
+    transform: rotate(180deg);
+    opacity: 1;
+  }
+
+  75% {
+    transform: rotate(270deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    opacity: 0;
+  }
+}
+
+.group:hover .group-hover\:animate-starspin {
+  animation: starspin 750ms linear;
+}
+
+@keyframes wiggle {
+  0%, 100% {
+    transform: rotate(-2deg);
+  }
+
+  50% {
+    transform: rotate(2deg);
+  }
+}
+
+.group:hover .group-hover\:animate-wiggle {
+  animation: wiggle 200ms ease-in-out;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index da247e2..159145d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./template/templates/**/*.tmpl"],
-  theme: {
-    extend: {
+	content: ["./template/templates/**/*.tmpl"],
+	theme: {
+		extend: {
 			backgroundSize: {
 				"size-200": "200% 200%",
 			},
@@ -10,8 +10,67 @@ module.exports = {
 				"pos-0": "0% 0%",
 				"pos-100": "100% 100%",
 			},
+			keyframes: {
+				wiggle: {
+					'0%, 100%': { transform: 'rotate(-2deg)' },
+					'50%': { transform: 'rotate(2deg)' },
+				},
+				starspin: {
+					'0%': {
+						transform: 'rotate(0deg)',
+						opacity: '0',
+					},
+					'25%': {
+						transform: 'rotate(90deg)',
+						opacity: '1',
+					},
+					'50%': {
+						transform: 'rotate(180deg)',
+						opacity: '1',
+					},
+					'75%': {
+						transform: 'rotate(270deg)',
+						opacity: '1',
+					},
+					'100%': {
+						transform: 'rotate(360deg)',
+						opacity: '0',
+					},
+				},
+				starmove: {
+					'0%': {
+						transform: 'translateX(-25%) translateY(-250%)',
+					},
+					'10%': {
+						transform: 'translateX(-80%) translateY(-162.5%)',
+					},
+					'30%': {
+						transform: 'translateX(-110%) translateY(-125%)',
+					},
+					'50%': {
+						transform: 'translateX(-80%) translateY(-50%)',
+					},
+					'60%': {
+						transform: 'translateX(-25%) translateY(0)'
+					},
+					'75%': {
+						transform: 'translateX(-10%) translateY(25%)'
+					},
+					'90%': {
+						transform: 'translateX(-15%) translateY(50%)'
+					},
+					'100%': {
+						transform: 'translateX(-10%) translateY(75%)'
+					},
+				},
+			},
+			animation: {
+				wiggle: 'wiggle 200ms ease-in-out',
+				starspin: 'starspin 750ms linear',
+				starmove: 'starmove 750ms linear',
+			},
 		},
-  },
-  plugins: [],
+	},
+	plugins: [],
 }
 
diff --git a/template/templates/common/base.tmpl b/template/templates/common/base.tmpl
index 5098c63..e6acf2a 100644
--- a/template/templates/common/base.tmpl
+++ b/template/templates/common/base.tmpl
@@ -27,7 +27,16 @@
 					{{ if eq .notauthed true }}
 						Not logged in
 					{{ else if ne .profile nil }}
-					  Logged in as {{ .profile.name }}
+						<div class="group">
+							<div class="group-hover:animate-wiggle">
+								<a class="bold animate-starshoot1 hover:underline" href="/settings">{{ .profile.name }}</a>
+							</div>
+							<div class="absolute group-hover:animate-starmove">
+								<svg class="z-50 invisible opacity-0 h-4 w-4 fill-yellow-200 stroke-yellow-400 group-hover:visible group-hover:animate-starspin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M6.03954 7.77203C3.57986 8.32856 2.35002 8.60682 2.05742 9.54773C1.76482 10.4886 2.60325 11.4691 4.2801 13.4299L4.71392 13.9372C5.19043 14.4944 5.42868 14.773 5.53586 15.1177C5.64305 15.4624 5.60703 15.8341 5.53498 16.5776L5.4694 17.2544C5.21588 19.8706 5.08912 21.1787 5.85515 21.7602C6.62118 22.3417 7.77268 21.8115 10.0757 20.7512L10.6715 20.4768C11.3259 20.1755 11.6531 20.0248 12 20.0248C12.3469 20.0248 12.6741 20.1755 13.3285 20.4768L13.9243 20.7512C16.2273 21.8115 17.3788 22.3417 18.1449 21.7602C18.9109 21.1787 18.7841 19.8706 18.5306 17.2544M19.7199 13.4299C21.3968 11.4691 22.2352 10.4886 21.9426 9.54773C21.65 8.60682 20.4201 8.32856 17.9605 7.77203L17.3241 7.62805C16.6251 7.4699 16.2757 7.39083 15.9951 7.17781C15.7144 6.96479 15.5345 6.64193 15.1745 5.99623L14.8468 5.40837C13.5802 3.13612 12.9469 2 12 2C11.0531 2 10.4198 3.13613 9.15316 5.40838" stroke-width="1.5" stroke-linecap="round" />
+								</svg>
+							</div>
+						</div>
 						<a class="self-end text-sm hover:underline" href="/auth/logout">Logout</a>
 					{{ end }}
 				</div>
-- 
2.44.1