From 1cd0f76a1a54c00ffac7329486f58fdaa7dfef35 Mon Sep 17 00:00:00 2001 From: Hayden Hargreaves Date: Wed, 18 Jun 2025 21:51:52 -0700 Subject: [PATCH] (UI/STYLE): Initial implementation of recipe of the week. --- internal/templates/pages/home.templ | 48 ++++- internal/templates/pages/home_templ.go | 117 ++++++++++-- web/static/css/tailwind.css | 247 ++++++------------------- 3 files changed, 207 insertions(+), 205 deletions(-) diff --git a/internal/templates/pages/home.templ b/internal/templates/pages/home.templ index 05d29b5..f5ad0c8 100644 --- a/internal/templates/pages/home.templ +++ b/internal/templates/pages/home.templ @@ -32,6 +32,12 @@ templ pillButton(name string) { } +templ bannerText(content string) { +

+ { content } +

+} + templ searchBar() {
-

- Craving Something Specific? -

+ @bannerText("Craving Something Specific?")
@searchBar()
@@ -79,12 +83,50 @@ templ searchSection() { } +templ highlightSection() { +
+ @bannerText("Recipe of the Week!") +

+ 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! +

+
+
+ +
+

Avocado Toast

+

+ 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. +

+

+ Breakfast - 15 min +

+ +
+
+
+
+} + templ HomePage() { @components.Navbar("home")
@introSection() @searchSection() + @highlightSection()
} diff --git a/internal/templates/pages/home_templ.go b/internal/templates/pages/home_templ.go index aa75b49..9085d44 100644 --- a/internal/templates/pages/home_templ.go +++ b/internal/templates/pages/home_templ.go @@ -81,7 +81,7 @@ func pillButton(name string) templ.Component { }) } -func searchBar() templ.Component { +func bannerText(content string) 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 { @@ -102,7 +102,49 @@ func searchBar() templ.Component { templ_7745c5c3_Var4 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var5 string + templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(content) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 37, Col: 11} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func searchBar() 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_Var6 := templ.GetChildren(ctx) + if templ_7745c5c3_Var6 == nil { + templ_7745c5c3_Var6 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -126,12 +168,20 @@ func searchSection() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var5 := templ.GetChildren(ctx) - if templ_7745c5c3_Var5 == nil { - templ_7745c5c3_Var5 = templ.NopComponent + templ_7745c5c3_Var7 := templ.GetChildren(ctx) + if templ_7745c5c3_Var7 == nil { + templ_7745c5c3_Var7 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

Craving Something Specific?

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = bannerText("Craving Something Specific?").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -139,7 +189,7 @@ func searchSection() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -171,7 +221,44 @@ func searchSection() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func highlightSection() 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_Var8 := templ.GetChildren(ctx) + if templ_7745c5c3_Var8 == nil { + templ_7745c5c3_Var8 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "

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!

Avocado Toast

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.

Breakfast - 15 min

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -195,16 +282,16 @@ func HomePage() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var6 := templ.GetChildren(ctx) - if templ_7745c5c3_Var6 == nil { - templ_7745c5c3_Var6 = templ.NopComponent + templ_7745c5c3_Var9 := templ.GetChildren(ctx) + if templ_7745c5c3_Var9 == nil { + templ_7745c5c3_Var9 = templ.NopComponent } ctx = templ.ClearChildren(ctx) templ_7745c5c3_Err = components.Navbar("home").Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -216,7 +303,11 @@ func HomePage() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "
") + templ_7745c5c3_Err = highlightSection().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index 085f3fa..5213175 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -14,6 +14,7 @@ --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); @@ -31,6 +32,8 @@ --spacing: 0.25rem; --container-xl: 36rem; --container-2xl: 42rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; @@ -45,6 +48,8 @@ --font-weight-semibold: 600; --font-weight-bold: 700; --leading-relaxed: 1.625; + --radius-xs: 0.125rem; + --radius-sm: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --default-font-family: var(--font-sans); @@ -215,18 +220,6 @@ .top-\[100\%\] { top: 100%; } - .top-\[calc\(50\%\+40px\)\] { - top: calc(50% + 40px); - } - .right-2 { - right: calc(var(--spacing) * 2); - } - .right-3 { - right: calc(var(--spacing) * 3); - } - .right-4 { - right: calc(var(--spacing) * 4); - } .left-0 { left: calc(var(--spacing) * 0); } @@ -242,12 +235,12 @@ .z-10 { z-index: 10; } - .z-20 { - z-index: 20; - } .mx-2 { margin-inline: calc(var(--spacing) * 2); } + .my-2 { + margin-block: calc(var(--spacing) * 2); + } .my-4 { margin-block: calc(var(--spacing) * 4); } @@ -266,26 +259,11 @@ .mt-8 { margin-top: calc(var(--spacing) * 8); } - .mr-2 { - margin-right: calc(var(--spacing) * 2); - } - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); - } - .mb-3 { - margin-bottom: calc(var(--spacing) * 3); - } - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); - } - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } .mb-16 { margin-bottom: calc(var(--spacing) * 16); } - .ml-1 { - margin-left: calc(var(--spacing) * 1); + .\[display\:-webkit-box\] { + display: -webkit-box; } .block { display: block; @@ -309,18 +287,16 @@ width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } + .size-64 { + width: calc(var(--spacing) * 64); + height: calc(var(--spacing) * 64); + } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } - .h-6 { - height: calc(var(--spacing) * 6); - } - .h-\[200vh\] { - height: 200vh; - } .h-auto { height: auto; } @@ -333,17 +309,11 @@ .h-screen { height: 100vh; } - .min-h-\[100px\] { - min-height: 100px; - } - .min-h-\[300px\] { - min-height: 300px; - } .w-2 { width: calc(var(--spacing) * 2); } - .w-2\/3 { - width: calc(2/3 * 100%); + .w-2\/5 { + width: calc(2/5 * 100%); } .w-3 { width: calc(var(--spacing) * 3); @@ -360,18 +330,15 @@ .w-5 { width: calc(var(--spacing) * 5); } - .w-6 { - width: calc(var(--spacing) * 6); - } .w-32 { width: calc(var(--spacing) * 32); } + .w-fit { + width: fit-content; + } .w-full { width: 100%; } - .max-w-2xl { - max-width: var(--container-2xl); - } .max-w-xl { max-width: var(--container-xl); } @@ -421,30 +388,30 @@ .justify-center { justify-content: center; } - .gap-2 { - gap: calc(var(--spacing) * 2); - } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } - .gap-6 { - gap: calc(var(--spacing) * 6); - } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } + .overflow-hidden { + overflow: hidden; + } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } + .rounded-sm { + border-radius: var(--radius-sm); + } .rounded-xl { border-radius: var(--radius-xl); } @@ -452,14 +419,6 @@ border-style: var(--tw-border-style); border-width: 1px; } - .border-2 { - border-style: var(--tw-border-style); - border-width: 2px; - } - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; @@ -476,9 +435,6 @@ border-left-style: var(--tw-border-style); border-left-width: 1px; } - .border-blue-300 { - border-color: var(--color-blue-300); - } .border-blue-500 { border-color: var(--color-blue-500); } @@ -488,15 +444,9 @@ .border-gray-300 { border-color: var(--color-gray-300); } - .border-purple-400 { - border-color: var(--color-purple-400); - } .border-white { border-color: var(--color-white); } - .bg-blue-100 { - background-color: var(--color-blue-100); - } .bg-blue-500 { background-color: var(--color-blue-500); } @@ -509,8 +459,11 @@ .bg-gray-200 { background-color: var(--color-gray-200); } - .bg-gray-500 { - background-color: var(--color-gray-500); + .bg-gray-300 { + background-color: var(--color-gray-300); + } + .bg-red-500 { + background-color: var(--color-red-500); } .bg-white { background-color: var(--color-white); @@ -542,9 +495,6 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } - .px-5 { - padding-inline: calc(var(--spacing) * 5); - } .px-6 { padding-inline: calc(var(--spacing) * 6); } @@ -569,36 +519,12 @@ .py-6 { padding-block: calc(var(--spacing) * 6); } - .py-16 { - padding-block: calc(var(--spacing) * 16); - } - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } .pr-4 { padding-right: calc(var(--spacing) * 4); } - .pr-6 { - padding-right: calc(var(--spacing) * 6); - } - .pr-10 { - padding-right: calc(var(--spacing) * 10); - } - .pr-12 { - padding-right: calc(var(--spacing) * 12); - } - .pl-2 { - padding-left: calc(var(--spacing) * 2); - } - .pl-8 { - padding-left: calc(var(--spacing) * 8); - } .pl-10 { padding-left: calc(var(--spacing) * 10); } - .pl-12 { - padding-left: calc(var(--spacing) * 12); - } .text-center { text-align: center; } @@ -610,10 +536,6 @@ font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); @@ -622,6 +544,10 @@ font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @@ -644,9 +570,6 @@ .text-gray-400 { color: var(--color-gray-400); } - .text-gray-500 { - color: var(--color-gray-500); - } .text-gray-600 { color: var(--color-gray-600); } @@ -656,12 +579,6 @@ .text-gray-800 { color: var(--color-gray-800); } - .text-purple-500 { - color: var(--color-purple-500); - } - .text-red-500 { - color: var(--color-red-500); - } .text-white { color: var(--color-white); } @@ -672,10 +589,6 @@ --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); } - .shadow-inner { - --tw-shadow: inset 0 2px 4px 0 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); - } .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)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -684,9 +597,11 @@ --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); } - .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); + .shadow-blue-300 { + --tw-shadow-color: oklch(80.9% 0.105 251.813); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, var(--color-blue-300) var(--tw-shadow-alpha), transparent); + } } .shadow-gray-300 { --tw-shadow-color: oklch(87.2% 0.01 258.338); @@ -713,6 +628,12 @@ -webkit-user-select: none; user-select: none; } + .\[-webkit-box-orient\:vertical\] { + -webkit-box-orient: vertical; + } + .\[-webkit-line-clamp\:4\] { + -webkit-line-clamp: 4; + } .hover\:border-blue-400 { &:hover { @media (hover: hover) { @@ -741,13 +662,6 @@ } } } - .hover\:bg-gray-300 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-300); - } - } - } .hover\:text-blue-400 { &:hover { @media (hover: hover) { @@ -755,6 +669,14 @@ } } } + .hover\:shadow { + &:hover { + @media (hover: hover) { + --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); + } + } + } .hover\:shadow-sm { &:hover { @media (hover: hover) { @@ -773,14 +695,11 @@ } } } - .focus\:border-blue-500 { - &:focus { - border-color: var(--color-blue-500); - } - } - .focus\:border-purple-600 { - &:focus { - border-color: var(--color-purple-600); + .hover\:ring-blue-700 { + &:hover { + @media (hover: hover) { + --tw-ring-color: var(--color-blue-700); + } } } .focus\:bg-gray-50 { @@ -794,21 +713,11 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } - .focus\:ring-blue-200 { - &:focus { - --tw-ring-color: var(--color-blue-200); - } - } .focus\:ring-blue-500 { &:focus { --tw-ring-color: var(--color-blue-500); } } - .focus\:ring-purple-200 { - &:focus { - --tw-ring-color: var(--color-purple-200); - } - } .focus\:outline-hidden { &:focus { --tw-outline-style: none; @@ -850,11 +759,6 @@ position: fixed; } } - .md\:top-\[calc\(50\%\+60px\)\] { - @media (width >= 48rem) { - top: calc(50% + 60px); - } - } .md\:mx-0 { @media (width >= 48rem) { margin-inline: calc(var(--spacing) * 0); @@ -875,41 +779,11 @@ width: calc(1/2 * 100%); } } - .md\:w-1\/3 { - @media (width >= 48rem) { - width: calc(1/3 * 100%); - } - } .md\:w-2\/3 { @media (width >= 48rem) { width: calc(2/3 * 100%); } } - .md\:flex-row { - @media (width >= 48rem) { - flex-direction: row; - } - } - .md\:items-center { - @media (width >= 48rem) { - align-items: center; - } - } - .md\:justify-start { - @media (width >= 48rem) { - justify-content: flex-start; - } - } - .md\:gap-2 { - @media (width >= 48rem) { - gap: calc(var(--spacing) * 2); - } - } - .md\:px-0 { - @media (width >= 48rem) { - padding-inline: calc(var(--spacing) * 0); - } - } .md\:px-44 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 44); @@ -931,11 +805,6 @@ display: flex; } } - .lg\:w-1\/2 { - @media (width >= 64rem) { - width: calc(1/2 * 100%); - } - } .lg\:w-2\/7 { @media (width >= 64rem) { width: calc(2/7 * 100%);