azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(UI/STYLE): Added heart buttons.

Browse Source 
Need to work on the search piece, its not amazing right now.
This commit is contained in:
Hayden Hargreaves 2025-06-23 20:18:58 -07:00
parent d0eae65722
commit ac00a321d5
4 changed files with 384 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
doc/TechnicalSpecification.md
View File

@ -38,9 +38,9 @@ well as view lists of recently made recipes, recently viewed and trending recipe
##### UI Requirements ##### UI Requirements
- [ ] Welcome Banner - [x] Welcome Banner
- [ ] Video display with large text overhead - [x] Video display with large text overhead
- [ ] Sub text below the video with a "Call to Action" - [x] Sub text below the video with a "Call to Action"
- [ ] Interactive banner that can be hidden with a "Got it!" or "X" - [ ] Interactive banner that can be hidden with a "Got it!" or "X"
- [ ] Message & Pills Banner - [ ] Message & Pills Banner
@ -56,22 +56,22 @@ well as view lists of recently made recipes, recently viewed and trending recipe
- [ ] **Filter by difficulty** - *1 to 5 stars* - [ ] **Filter by difficulty** - *1 to 5 stars*
- [ ] **Filter by serving size** - *1 to 16* - [ ] **Filter by serving size** - *1 to 16*
- [ ] Recipe of The Week - [x] Recipe of The Week
- [ ] **Single recipe display** of the best performing recipe, with spotlight effect - [x] **Single recipe display** of the best performing recipe, with spotlight effect
- [ ] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description - [x] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description
- [ ] **Make now** button to allow easy access to meal directions - [x] **Make now** button to allow easy access to meal directions
- [ ] Recently Viewed List - [x] Recently Viewed List
- [ ] Scrolling list of the most recent 5-10 recipes viewed - [x] Scrolling list of the most recent 5-10 recipes viewed
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe - [x] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
- [ ] Make Again List - [x] Make Again List
- [ ] Scrolling list of the most recent 5-10 recipes made - [x] Scrolling list of the most recent 5-10 recipes made
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe - [x] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
- [ ] Create Recipe CTA (call-to-action) - [x] Create Recipe CTA (call-to-action)
- [ ] **Large CTA banner** with text prompting users to create a recipe - [x] **Large CTA banner** with text prompting users to create a recipe
- [ ] **Button** to take the user to the create page - [x] **Button** to take the user to the create page
'*': Not sure yet, still under consideration '*': Not sure yet, still under consideration

178
internal/templates/pages/home.templ
View File

@ -3,15 +3,13 @@ package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components" import "github.com/haydenhargreaves/Potion/internal/templates/components"
templ introSection() { templ introSection() {
<section class="w-full h-fit mb-16"> <section class="w-full h-fit mb-16">
<div class="relative"> <div class="relative">
<video class="" autoplay loop muted playsinline> <video class="" autoplay loop muted playsinline>
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4"/> <source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4" />
</video> </video>
<h1 <h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-white text-3xl w-4/5 font-bold z-10">
text-white text-3xl w-4/5 font-bold z-10"
>
Discover Your Next Favorite Meal Discover Your Next Favorite Meal
</h1> </h1>
</div> </div>
@ -21,49 +19,36 @@ templ introSection() {
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
browse our trending dishes for fresh ideas. browse our trending dishes for fresh ideas.
</p> </p>
</section> </section>
} }
templ pillButton(name string) { templ pillButton(name string) {
<button <button
class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200" class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200">
>
{ name } { name }
</button> </button>
} }
templ bannerText(content string) { templ bannerText(content string) {
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white"> <h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
{ content } { content }
</h2> </h2>
} }
templ searchBar() { templ searchBar() {
<div class="relative w-full max-w-xl"> <div class="relative w-full max-w-xl">
<input <input type="text" placeholder="Search recipes, ingredients..."
type="text" class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
placeholder="Search recipes, ingredients..." <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<svg d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg> </svg>
</div> </div>
} }
templ searchSection() { templ searchSection() {
<section class="w-full flex flex-col items-center justify-center my-8 py-4"> <section class="w-full flex flex-col items-center justify-center my-8 py-4">
@bannerText("Craving Something Specific?") @bannerText("Craving Something Specific?")
<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4"> <div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
@searchBar() @searchBar()
@ -80,11 +65,27 @@ templ searchSection() {
Search Recipes Search Recipes
</button> </button>
</div> </div>
</section> </section>
} }
templ highlightSection() { templ largeLikeButton(liked bool) {
<section class="w-full flex flex-col items-center justify-center my-8 py-4"> <button class="hover:cursor-pointer">
<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
if liked {
<path
d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
fill="currentColor"></path>
} else {
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
}
</svg>
</button>
}
templ highlightSection(liked bool) {
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@bannerText("Recipe of the Week!") @bannerText("Recipe of the Week!")
<p class="leading-relaxed p-4 my-8"> <p class="leading-relaxed p-4 my-8">
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
@ -95,17 +96,15 @@ templ highlightSection() {
</p> </p>
<div class="flex items-center justify-center w-full"> <div class="flex items-center justify-center w-full">
<div <div
class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4" class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
> <img class="size-80 md:size-64 rounded-sm" src="" />
<img class="size-80 md:size-64 rounded-sm" src=""/>
<div class="mt-8"> <div class="mt-8">
<h2 class="font-semibold">Avocado Toast</h2> <h2 class="font-semibold">Avocado Toast</h2>
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis"> <p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
Hayden Hargreaves Hayden Hargreaves
</p> </p>
<p <p
class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2" class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2">
>
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
make the BEST avocado toast with this recipe, plus fun variations. make the BEST avocado toast with this recipe, plus fun variations.
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
@ -113,25 +112,42 @@ templ highlightSection() {
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
make the BEST avocado toast with this recipe, plus fun variations. make the BEST avocado toast with this recipe, plus fun variations.
</p> </p>
<div class="flex items-center justify-between">
<p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2"> <p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
Breakfast - 15 min Breakfast - 15 min
</p> </p>
@likeButton(liked)
</div>
<button <button
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200" class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
>
Make Now! Make Now!
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
} }
templ smallRecipeIcon(name, meal, author string) { templ likeButton(liked bool) {
<div <button class="hover:cursor-pointer">
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0" <svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
> if liked {
<img class="size-32 md:size-32 rounded-sm" src=""/> <path
d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
fill="currentColor"></path>
} else {
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
}
</svg>
</button>
}
templ smallRecipeIcon(name, meal, author string, liked bool) {
<div
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
<img class="size-32 md:size-32 rounded-sm" src="" />
<div class="w-full mt-8"> <div class="w-full mt-8">
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis"> <h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
{ name } { name }
@ -139,46 +155,49 @@ templ smallRecipeIcon(name, meal, author string) {
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis"> <p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
{ author } { author }
</p> </p>
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">{ meal }</p> <div class="flex items-end justify-between">
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
{ meal }
</p>
@likeButton(liked)
</div>
<button <button
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200" class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
>
Make Now! Make Now!
</button> </button>
</div> </div>
</div> </div>
} }
templ listsSection() { templ listsSection() {
<section class="w-full flex flex-col items-center justify-center my-8 py-4"> <section class="w-full flex flex-col items-center justify-center my-8 py-4">
@bannerText("Take Another Look.") @bannerText("Take Another Look.")
<div class="w-full"> <div class="w-full">
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3> <h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4"> <div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves") @smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves") @smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves") @smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves") @smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves") @smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves") @smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div> </div>
<h3 class="text-lg mt-8 mx-4">Make again</h3> <h3 class="text-lg mt-8 mx-4">Make again</h3>
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4"> <div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves") @smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves") @smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves") @smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves") @smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves") @smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves") @smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
</div> </div>
</div> </div>
</section> </section>
} }
templ ctaSection() { templ ctaSection() {
<section <section
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center" class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
>
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4"> <h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
Unleash Your Inner Chef! Unleash Your Inner Chef!
</h2> </h2>
@ -186,28 +205,25 @@ templ ctaSection() {
Have a unique recipe idea? Want to share your culinary masterpiece with the world? Have a unique recipe idea? Want to share your culinary masterpiece with the world?
It's time to bring your creations to life! It's time to bring your creations to life!
</p> </p>
<a <a href="/v1/web/create" class="flex items-center justify-center
href="/v1/web/create"
class="flex items-center justify-center
bg-gradient-to-r from-blue-400 to-blue-600 text-white bg-gradient-to-r from-blue-400 to-blue-600 text-white
px-12 py-5 rounded-full shadow-sm hover:shadow-md px-12 py-5 rounded-full shadow-sm hover:shadow-md
transition-all duration-300 ease-in-out shadow-blue-700 transition-all duration-300 ease-in-out shadow-blue-700
text-lg md:text-2xl font-bold uppercase tracking-wide" text-lg md:text-2xl font-bold uppercase tracking-wide">
>
Create Your Recipe! Create Your Recipe!
</a> </a>
</section> </section>
} }
templ HomePage() { templ HomePage() {
@components.Navbar("home") @components.Navbar("home")
<div class="w-full h-fit flex justify-center"> <div class="w-full h-fit flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white"> <div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
@introSection() @introSection()
@searchSection() @searchSection()
@highlightSection() @highlightSection(false)
@listsSection() @listsSection()
@ctaSection() @ctaSection()
</div> </div>
</div> </div>
} }

212
internal/templates/pages/home_templ.go
View File

@ -67,7 +67,7 @@ func pillButton(name string) templ.Component {
var templ_7745c5c3_Var3 string var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 31, Col: 8} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 28, Col: 8}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -109,7 +109,7 @@ func bannerText(content string) templ.Component {
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(content) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(content)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 37, Col: 11} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 34, Col: 11}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -229,7 +229,7 @@ func searchSection() templ.Component {
}) })
} }
func highlightSection() templ.Component { func largeLikeButton(liked bool) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@ -250,15 +250,22 @@ func highlightSection() templ.Component {
templ_7745c5c3_Var8 = templ.NopComponent templ_7745c5c3_Var8 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<button class=\"hover:cursor-pointer\"><svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer) if liked {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\"><div class=\"w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4\"><img class=\"size-80 md:size-64 rounded-sm\" src=\"\"><div class=\"mt-8\"><h2 class=\"font-semibold\">Avocado Toast</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">Hayden Hargreaves</p><p class=\"text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2\">Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations. Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations. Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations.</p><p class=\"text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2\">Breakfast - 15 min</p><button class=\"w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200\">Make Now!</button></div></div></div></section>") } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</svg></button>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -266,7 +273,7 @@ func highlightSection() templ.Component {
}) })
} }
func smallRecipeIcon(name, meal, author string) templ.Component { func highlightSection(liked bool) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@ -287,46 +294,143 @@ func smallRecipeIcon(name, meal, author string) templ.Component {
templ_7745c5c3_Var9 = templ.NopComponent templ_7745c5c3_Var9 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-32 md:size-32 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var10 string templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 137, Col: 10}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\"><div class=\"w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4\"><img class=\"size-80 md:size-64 rounded-sm\" src=\"\"><div class=\"mt-8\"><h2 class=\"font-semibold\">Avocado Toast</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">Hayden Hargreaves</p><p class=\"text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2\">Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations. Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations. Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to make the BEST avocado toast with this recipe, plus fun variations.</p><div class=\"flex items-center justify-between\"><p class=\"text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2\">Breakfast - 15 min</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var11 string templ_7745c5c3_Err = likeButton(liked).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(author)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 140, Col: 12}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</p><p class=\"text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><button class=\"w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200\">Make Now!</button></div></div></div></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
func likeButton(liked bool) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var10 := templ.GetChildren(ctx)
if templ_7745c5c3_Var10 == nil {
templ_7745c5c3_Var10 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<button class=\"hover:cursor-pointer\"><svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if liked {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</svg></button>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
func smallRecipeIcon(name, meal, author string, liked bool) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
if templ_7745c5c3_Var11 == nil {
templ_7745c5c3_Var11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-32 md:size-32 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var12 string var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(meal) templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 142, Col: 72} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 153, Col: 12}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</p><button class=\"w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200\">Make Now!</button></div></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(author)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 156, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</p><div class=\"flex items-end justify-between\"><p class=\"text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(meal)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 160, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</p>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = likeButton(liked).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><button class=\"w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200\">Make Now!</button></div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -350,12 +454,12 @@ func listsSection() templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var13 := templ.GetChildren(ctx) templ_7745c5c3_Var15 := templ.GetChildren(ctx)
if templ_7745c5c3_Var13 == nil { if templ_7745c5c3_Var15 == nil {
templ_7745c5c3_Var13 = templ.NopComponent templ_7745c5c3_Var15 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -363,63 +467,63 @@ func listsSection() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div></div></section>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</div></div></section>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -443,12 +547,12 @@ func ctaSection() templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var14 := templ.GetChildren(ctx) templ_7745c5c3_Var16 := templ.GetChildren(ctx)
if templ_7745c5c3_Var14 == nil { if templ_7745c5c3_Var16 == nil {
templ_7745c5c3_Var14 = templ.NopComponent templ_7745c5c3_Var16 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"/v1/web/create\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"/v1/web/create\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -472,16 +576,16 @@ func HomePage() templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var15 := templ.GetChildren(ctx) templ_7745c5c3_Var17 := templ.GetChildren(ctx)
if templ_7745c5c3_Var15 == nil { if templ_7745c5c3_Var17 == nil {
templ_7745c5c3_Var15 = templ.NopComponent templ_7745c5c3_Var17 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = components.Navbar("home").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = components.Navbar("home").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"w-full h-fit flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"w-full h-fit flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -493,7 +597,7 @@ func HomePage() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = highlightSection().Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = highlightSection(false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -505,7 +609,7 @@ func HomePage() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

271
web/static/css/tailwind.css
View File

@ -248,9 +248,6 @@
.mx-4 { .mx-4 {
margin-inline: calc(var(--spacing) * 4); margin-inline: calc(var(--spacing) * 4);
} }
.mx-8 {
margin-inline: calc(var(--spacing) * 8);
}
.my-2 { .my-2 {
margin-block: calc(var(--spacing) * 2); margin-block: calc(var(--spacing) * 2);
} }
@ -260,9 +257,6 @@
.my-8 { .my-8 {
margin-block: calc(var(--spacing) * 8); margin-block: calc(var(--spacing) * 8);
} }
.my-16 {
margin-block: calc(var(--spacing) * 16);
}
.mt-2 { .mt-2 {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
} }
@ -278,12 +272,6 @@
.mt-16 { .mt-16 {
margin-top: calc(var(--spacing) * 16); margin-top: calc(var(--spacing) * 16);
} }
.mr-3 {
margin-right: calc(var(--spacing) * 3);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-6 { .mb-6 {
margin-bottom: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 6);
} }
@ -318,42 +306,10 @@
width: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5);
} }
.size-6 {
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
.size-9 {
width: calc(var(--spacing) * 9);
height: calc(var(--spacing) * 9);
}
.size-24 {
width: calc(var(--spacing) * 24);
height: calc(var(--spacing) * 24);
}
.size-28 {
width: calc(var(--spacing) * 28);
height: calc(var(--spacing) * 28);
}
.size-32 { .size-32 {
width: calc(var(--spacing) * 32); width: calc(var(--spacing) * 32);
height: calc(var(--spacing) * 32); height: calc(var(--spacing) * 32);
} }
.size-64 {
width: calc(var(--spacing) * 64);
height: calc(var(--spacing) * 64);
}
.size-72 {
width: calc(var(--spacing) * 72);
height: calc(var(--spacing) * 72);
}
.size-80 { .size-80 {
width: calc(var(--spacing) * 80); width: calc(var(--spacing) * 80);
height: calc(var(--spacing) * 80); height: calc(var(--spacing) * 80);
@ -364,11 +320,8 @@
.h-5 { .h-5 {
height: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5);
} }
.h-7 { .h-6 {
height: calc(var(--spacing) * 7); height: calc(var(--spacing) * 6);
}
.h-96 {
height: calc(var(--spacing) * 96);
} }
.h-auto { .h-auto {
height: auto; height: auto;
@ -382,21 +335,6 @@
.h-screen { .h-screen {
height: 100vh; height: 100vh;
} }
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/4 {
width: calc(1/4 * 100%);
}
.w-1\/5 {
width: calc(1/5 * 100%);
}
.w-2 {
width: calc(var(--spacing) * 2);
}
.w-2\/5 {
width: calc(2/5 * 100%);
}
.w-3 { .w-3 {
width: calc(var(--spacing) * 3); width: calc(var(--spacing) * 3);
} }
@ -412,30 +350,18 @@
.w-5 { .w-5 {
width: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5);
} }
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-9 { .w-9 {
width: calc(var(--spacing) * 9); width: calc(var(--spacing) * 9);
} }
.w-9\/10 { .w-9\/10 {
width: calc(9/10 * 100%); width: calc(9/10 * 100%);
} }
.w-24 {
width: calc(var(--spacing) * 24);
}
.w-32 { .w-32 {
width: calc(var(--spacing) * 32); width: calc(var(--spacing) * 32);
} }
.w-40 {
width: calc(var(--spacing) * 40);
}
.w-44 { .w-44 {
width: calc(var(--spacing) * 44); width: calc(var(--spacing) * 44);
} }
.w-48 {
width: calc(var(--spacing) * 48);
}
.w-fit { .w-fit {
width: fit-content; width: fit-content;
} }
@ -473,9 +399,6 @@
--tw-translate-y: calc(calc(1/2 * 100%) * -1); --tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y); translate: var(--tw-translate-x) var(--tw-translate-y);
} }
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -485,9 +408,6 @@
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap { .flex-wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -500,6 +420,9 @@
.items-center { .items-center {
align-items: center; align-items: center;
} }
.items-end {
align-items: flex-end;
}
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
@ -521,24 +444,12 @@
.gap-x-4 { .gap-x-4 {
column-gap: calc(var(--spacing) * 4); column-gap: calc(var(--spacing) * 4);
} }
.gap-y-4 {
row-gap: calc(var(--spacing) * 4);
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
.overflow-x-auto { .overflow-x-auto {
overflow-x: auto; overflow-x: auto;
} }
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.rounded-full { .rounded-full {
border-radius: calc(infinity * 1px); border-radius: calc(infinity * 1px);
} }
@ -580,9 +491,6 @@
.border-gray-300 { .border-gray-300 {
border-color: var(--color-gray-300); border-color: var(--color-gray-300);
} }
.border-red-500 {
border-color: var(--color-red-500);
}
.border-white { .border-white {
border-color: var(--color-white); border-color: var(--color-white);
} }
@ -598,9 +506,6 @@
.bg-gray-200 { .bg-gray-200 {
background-color: var(--color-gray-200); background-color: var(--color-gray-200);
} }
.bg-red-500 {
background-color: var(--color-red-500);
}
.bg-white { .bg-white {
background-color: var(--color-white); background-color: var(--color-white);
} }
@ -612,10 +517,6 @@
--tw-gradient-position: to right in oklab; --tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops)); background-image: linear-gradient(var(--tw-gradient-stops));
} }
.from-blue-50 {
--tw-gradient-from: var(--color-blue-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-100 { .from-blue-100 {
--tw-gradient-from: var(--color-blue-100); --tw-gradient-from: var(--color-blue-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -624,18 +525,6 @@
--tw-gradient-from: var(--color-blue-400); --tw-gradient-from: var(--color-blue-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.from-blue-500 {
--tw-gradient-from: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-100 {
--tw-gradient-to: var(--color-blue-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-200 {
--tw-gradient-to: var(--color-blue-200);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-600 { .to-blue-600 {
--tw-gradient-to: var(--color-blue-600); --tw-gradient-to: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -644,13 +533,6 @@
--tw-gradient-to: var(--color-purple-100); --tw-gradient-to: var(--color-purple-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
} }
.to-purple-600 {
--tw-gradient-to: var(--color-purple-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-2 { .p-2 {
padding: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 2);
} }
@ -762,6 +644,9 @@
.whitespace-nowrap { .whitespace-nowrap {
white-space: nowrap; white-space: nowrap;
} }
.text-black {
color: var(--color-black);
}
.text-blue-500 { .text-blue-500 {
color: var(--color-blue-500); color: var(--color-blue-500);
} }
@ -777,6 +662,9 @@
.text-gray-800 { .text-gray-800 {
color: var(--color-gray-800); color: var(--color-gray-800);
} }
.text-red-500 {
color: var(--color-red-500);
}
.text-white { .text-white {
color: var(--color-white); color: var(--color-white);
} }
@ -790,10 +678,6 @@
--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05)); --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md { .shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@ -802,65 +686,24 @@
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-black {
--tw-shadow-color: #000;
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-100 {
--tw-shadow-color: oklch(93.2% 0.032 255.585);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-100) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-300 { .shadow-blue-300 {
--tw-shadow-color: oklch(80.9% 0.105 251.813); --tw-shadow-color: oklch(80.9% 0.105 251.813);
@supports (color: color-mix(in lab, red, red)) { @supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-300) var(--tw-shadow-alpha), transparent); --tw-shadow-color: color-mix(in oklab, var(--color-blue-300) var(--tw-shadow-alpha), transparent);
} }
} }
.shadow-blue-500 {
--tw-shadow-color: oklch(62.3% 0.214 259.815);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-500) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-600 {
--tw-shadow-color: oklch(54.6% 0.245 262.881);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-600) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-700 { .shadow-blue-700 {
--tw-shadow-color: oklch(48.8% 0.243 264.376); --tw-shadow-color: oklch(48.8% 0.243 264.376);
@supports (color: color-mix(in lab, red, red)) { @supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-700) var(--tw-shadow-alpha), transparent); --tw-shadow-color: color-mix(in oklab, var(--color-blue-700) var(--tw-shadow-alpha), transparent);
} }
} }
.shadow-blue-800 {
--tw-shadow-color: oklch(42.4% 0.199 265.638);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-blue-800) var(--tw-shadow-alpha), transparent);
}
}
.shadow-gray-300 { .shadow-gray-300 {
--tw-shadow-color: oklch(87.2% 0.01 258.338); --tw-shadow-color: oklch(87.2% 0.01 258.338);
@supports (color: color-mix(in lab, red, red)) { @supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent); --tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent);
} }
} }
.ring-transparent {
--tw-ring-color: transparent;
}
.outline { .outline {
outline-style: var(--tw-outline-style); outline-style: var(--tw-outline-style);
outline-width: 1px; outline-width: 1px;
@ -896,19 +739,13 @@
.\[-webkit-box-orient\:vertical\] { .\[-webkit-box-orient\:vertical\] {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.\[-webkit-line-clamp\:1\] {
-webkit-line-clamp: 1;
}
.\[-webkit-line-clamp\:4\] { .\[-webkit-line-clamp\:4\] {
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
} }
.hover\:scale-105 { .hover\:cursor-pointer {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
--tw-scale-x: 105%; cursor: pointer;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
} }
} }
} }
@ -955,14 +792,6 @@
} }
} }
} }
.hover\:shadow-lg {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.hover\:shadow-md { .hover\:shadow-md {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@ -979,14 +808,6 @@
} }
} }
} }
.hover\:shadow-xl {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.hover\:shadow-blue-300 { .hover\:shadow-blue-300 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@ -997,13 +818,6 @@
} }
} }
} }
.hover\:ring-blue-300 {
&:hover {
@media (hover: hover) {
--tw-ring-color: var(--color-blue-300);
}
}
}
.hover\:ring-blue-700 { .hover\:ring-blue-700 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@ -1083,12 +897,6 @@
display: none; display: none;
} }
} }
.md\:size-8 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
}
.md\:size-32 { .md\:size-32 {
@media (width >= 48rem) { @media (width >= 48rem) {
width: calc(var(--spacing) * 32); width: calc(var(--spacing) * 32);
@ -1106,11 +914,6 @@
width: calc(1/2 * 100%); width: calc(1/2 * 100%);
} }
} }
.md\:w-1\/4 {
@media (width >= 48rem) {
width: calc(1/4 * 100%);
}
}
.md\:w-2\/3 { .md\:w-2\/3 {
@media (width >= 48rem) { @media (width >= 48rem) {
width: calc(2/3 * 100%); width: calc(2/3 * 100%);
@ -1126,11 +929,6 @@
width: calc(var(--spacing) * 48); width: calc(var(--spacing) * 48);
} }
} }
.md\:w-full {
@media (width >= 48rem) {
width: 100%;
}
}
.md\:px-44 { .md\:px-44 {
@media (width >= 48rem) { @media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 44); padding-inline: calc(var(--spacing) * 44);
@ -1190,26 +988,6 @@
inherits: false; inherits: false;
initial-value: 0; initial-value: 0;
} }
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-border-style { @property --tw-border-style {
syntax: "*"; syntax: "*";
inherits: false; inherits: false;
@ -1400,32 +1178,12 @@
syntax: "*"; syntax: "*";
inherits: false; inherits: false;
} }
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@layer properties { @layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop { *, ::before, ::after, ::backdrop {
--tw-translate-x: 0; --tw-translate-x: 0;
--tw-translate-y: 0; --tw-translate-y: 0;
--tw-translate-z: 0; --tw-translate-z: 0;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid; --tw-border-style: solid;
--tw-gradient-position: initial; --tw-gradient-position: initial;
--tw-gradient-from: #0000; --tw-gradient-from: #0000;
@ -1469,9 +1227,6 @@
--tw-drop-shadow-size: initial; --tw-drop-shadow-size: initial;
--tw-duration: initial; --tw-duration: initial;
--tw-ease: initial; --tw-ease: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
} }
} }
} }