2 files changed, 42 insertions(+), 8 deletions(-)

M static/styles.css
M template/templates/settings.tmpl

@@ 632,15 632,30 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-slate-800 {
+  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-blue-400 {
   --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.via-zinc-600 {
+  --tw-gradient-to: rgb(82 82 91 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #52525b var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .to-rose-500 {
   --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
 }
 
+.to-amber-500 {
+  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
+}
+
 .bg-size-200 {
   background-size: 200% 200%;
 }


@@ 674,18 689,10 @@ video {
   padding: 1rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pr-4 {
   padding-right: 1rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;


@@ 705,6 712,10 @@ video {
   font-weight: 700;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));


@@ 749,6 760,22 @@ video {
   transition-duration: 500ms;
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.hover\:animate-bounce:hover {
+  animation: bounce 1s infinite;
+}
+
 .hover\:bg-slate-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));

@@ 1,4 1,11 @@
 {{ define "content" }}
+<p class="bg-size-200 bg-pos-0 hover:bg-pos-100
+	bg-gradient-to-br from-slate-800 via-zinc-600 to-amber-500
+	bg-clip-text text-lg font-bold text-transparent
+	transition-all duration-500"
+>
+	Settings
+</p>
 <form class="flex flex-col" action="/api/settings/user/display_name" method="POST">
 	<p class="text-sm" for="display_name">Display Name</p>
 	<div class="flex gap-2">