From 085f4e7f74ff662c78702787daf3401efa3b01bc Mon Sep 17 00:00:00 2001
From: Jonni Liljamo <jonni@liljamo.com>
Date: Thu, 24 Aug 2023 13:43:53 +0300
Subject: [PATCH] feat: a title / heading in settings

---
 static/styles.css                | 43 ++++++++++++++++++++++++++------
 template/templates/settings.tmpl |  7 ++++++
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index e9c1815..b5e279c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -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));
diff --git a/template/templates/settings.tmpl b/template/templates/settings.tmpl
index 5909554..8dd422a 100644
--- a/template/templates/settings.tmpl
+++ b/template/templates/settings.tmpl
@@ -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">
-- 
2.44.1