(UI): Created a 404 not found page!
This loads whenever a page that does not exist is loaded. I would also like to add some "coming soon" dialog to the few pages that don't exist yet. Before deploying to the server.
This commit is contained in:
Hayden Hargreaves
parent
1b41478143
commit
5540daf6b6
@ -128,3 +128,10 @@ func SearchPage(ctx *gin.Context) {
|
||||
|
||||
ctx.HTML(http.StatusOK, "", layouts.AppLayout(title, page))
|
||||
}
|
||||
|
||||
func NotFoundPage(ctx *gin.Context) {
|
||||
title := "Potion - Not Found"
|
||||
page := pages.NotFoundPage()
|
||||
|
||||
ctx.HTML(http.StatusOK, "", layouts.AppLayout(title, page))
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
|
||||
"github.com/a-h/templ/examples/integration-gin/gintemplrenderer"
|
||||
"github.com/gin-contrib/cors"
|
||||
@ -166,6 +167,7 @@ func (s *Server) Setup() *Server {
|
||||
router_web.GET("/list", handlers.ListPage)
|
||||
router_web.GET("/recipe/:id", handlers.RecipePage)
|
||||
router_web.GET("/search", handlers.SearchPage)
|
||||
router_web.GET("/404", handlers.NotFoundPage)
|
||||
|
||||
// WEB state endpoints
|
||||
router_state.POST("/tags", handlers.NewTag)
|
||||
@ -180,5 +182,23 @@ func (s *Server) Setup() *Server {
|
||||
router_api.POST("/recipe", handlers.CreateRecipe)
|
||||
router_api.POST("/recipe/search", handlers.SearchRecipes)
|
||||
|
||||
// Catch un-routed URLS
|
||||
s.Router.NoRoute(func(ctx *gin.Context) {
|
||||
path := ctx.Request.URL.Path
|
||||
|
||||
// TODO: Use constants for errors?
|
||||
if strings.HasPrefix(path, domain.VERSION+domain.API) {
|
||||
ctx.JSON(http.StatusNotFound, gin.H{
|
||||
"status": 404,
|
||||
"error": "API_NOT_FOUND",
|
||||
"message": "The request endpoint does not exist.",
|
||||
"path": path,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
ctx.Redirect(http.StatusSeeOther, domain.WEB_NOT_FOUND)
|
||||
})
|
||||
|
||||
return s
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ const WEB_PROFIlE = VERSION + WEB + "/profile"
|
||||
const WEB_LIST = VERSION + WEB + "/list"
|
||||
const WEB_RECIPE = VERSION + WEB + "/recipe/%d"
|
||||
const WEB_SEARCH = VERSION + WEB + "/search"
|
||||
const WEB_NOT_FOUND = VERSION + WEB + "/404"
|
||||
|
||||
// API prefixed routes
|
||||
const API_AUTH_LOGIN = VERSION + API + "/auth/login"
|
||||
|
||||
32
internal/templates/pages/notFound.templ
Normal file
32
internal/templates/pages/notFound.templ
Normal file
@ -0,0 +1,32 @@
|
||||
package templates
|
||||
|
||||
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
||||
import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
||||
|
||||
templ NotFoundPage() {
|
||||
@components.Navbar("")
|
||||
<div class="w-full h-screen flex justify-center">
|
||||
<div
|
||||
class="mx-2 md:mx-0 w-full md:w-1/2 flex items-center justify-center h-full border-l border-r border-gray-300 bg-white"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center gap-y-4">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg
|
||||
class="h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50"></div>
|
||||
</div>
|
||||
<h1 class="text-gray-500 text-6xl md:text-8xl font-sans">404</h1>
|
||||
<p class="text-sm md:text-base text-gray-700">This page could not be found!</p>
|
||||
<a class="underline text-sm md:text-base text-blue-700" href={ domain.WEB_HOME }>Back Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
56
internal/templates/pages/notFound_templ.go
Normal file
56
internal/templates/pages/notFound_templ.go
Normal file
@ -0,0 +1,56 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.865
|
||||
package templates
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
||||
import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
||||
|
||||
func NotFoundPage() 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_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = components.Navbar("").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 flex items-center justify-center h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center gap-y-4\"><div class=\"flex flex-col items-center justify-center\"><svg class=\"h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" fill=\"currentColor\"><path d=\"M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z\"></path></svg><div class=\"bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50\"></div></div><h1 class=\"text-gray-500 text-6xl md:text-8xl font-sans\">404</h1><p class=\"text-sm md:text-base text-gray-700\">This page could not be found!</p><a class=\"underline text-sm md:text-base text-blue-700\" href=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 templ.SafeURL = domain.WEB_HOME
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\">Back Home</a></div></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@ -9,8 +9,6 @@
|
||||
monospace;
|
||||
--color-red-100: oklch(93.6% 0.032 17.717);
|
||||
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||
--color-green-100: oklch(96.2% 0.044 156.743);
|
||||
--color-green-600: oklch(62.7% 0.194 149.214);
|
||||
--color-blue-50: oklch(97% 0.014 254.604);
|
||||
--color-blue-100: oklch(93.2% 0.032 255.585);
|
||||
--color-blue-200: oklch(88.2% 0.059 254.128);
|
||||
@ -19,6 +17,7 @@
|
||||
--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-blue-800: oklch(42.4% 0.199 265.638);
|
||||
--color-purple-100: oklch(94.6% 0.033 307.174);
|
||||
--color-purple-200: oklch(90.2% 0.063 306.703);
|
||||
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||
@ -50,6 +49,12 @@
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--text-8xl: 6rem;
|
||||
--text-8xl--line-height: 1;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
@ -62,6 +67,7 @@
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
@ -234,6 +240,9 @@
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.top-1 {
|
||||
top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
@ -243,6 +252,9 @@
|
||||
.left-0 {
|
||||
left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.left-1 {
|
||||
left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.left-1\/2 {
|
||||
left: calc(1/2 * 100%);
|
||||
}
|
||||
@ -264,9 +276,6 @@
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.my-0 {
|
||||
margin-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
.my-1 {
|
||||
margin-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
@ -279,6 +288,21 @@
|
||||
.my-8 {
|
||||
margin-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.-mt-1 {
|
||||
margin-top: calc(var(--spacing) * -1);
|
||||
}
|
||||
.-mt-2 {
|
||||
margin-top: calc(var(--spacing) * -2);
|
||||
}
|
||||
.-mt-3 {
|
||||
margin-top: calc(var(--spacing) * -3);
|
||||
}
|
||||
.-mt-4 {
|
||||
margin-top: calc(var(--spacing) * -4);
|
||||
}
|
||||
.-mt-8 {
|
||||
margin-top: calc(var(--spacing) * -8);
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -356,6 +380,14 @@
|
||||
width: calc(var(--spacing) * 10);
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.size-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.size-16 {
|
||||
width: calc(var(--spacing) * 16);
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
.size-32 {
|
||||
width: calc(var(--spacing) * 32);
|
||||
height: calc(var(--spacing) * 32);
|
||||
@ -383,6 +415,18 @@
|
||||
.h-8 {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-20 {
|
||||
height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.h-24 {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
.h-32 {
|
||||
height: calc(var(--spacing) * 32);
|
||||
}
|
||||
.h-48 {
|
||||
height: calc(var(--spacing) * 48);
|
||||
}
|
||||
.h-96 {
|
||||
height: calc(var(--spacing) * 96);
|
||||
}
|
||||
@ -401,12 +445,27 @@
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
.w-1\/2 {
|
||||
width: calc(1/2 * 100%);
|
||||
}
|
||||
.w-1\/3 {
|
||||
width: calc(1/3 * 100%);
|
||||
}
|
||||
.w-1\/4 {
|
||||
width: calc(1/4 * 100%);
|
||||
}
|
||||
.w-2 {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.w-2\/3 {
|
||||
width: calc(2/3 * 100%);
|
||||
}
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-3\/4 {
|
||||
width: calc(3/4 * 100%);
|
||||
}
|
||||
@ -419,6 +478,9 @@
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-9 {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
.w-9\/10 {
|
||||
width: calc(9/10 * 100%);
|
||||
}
|
||||
@ -437,23 +499,72 @@
|
||||
.max-w-2xl {
|
||||
max-width: var(--container-2xl);
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-x-1 {
|
||||
--tw-translate-x: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1 {
|
||||
--tw-translate-y: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.scale-x-150 {
|
||||
--tw-scale-x: 150%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.scale-y-50 {
|
||||
--tw-scale-y: 50%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.scale-y-150 {
|
||||
--tw-scale-y: 150%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.rotate-12 {
|
||||
rotate: 12deg;
|
||||
}
|
||||
.rotate-45 {
|
||||
rotate: 45deg;
|
||||
}
|
||||
.skew-x-3 {
|
||||
--tw-skew-x: skewX(3deg);
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.skew-y-3 {
|
||||
--tw-skew-y: skewY(3deg);
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.animate-bounce {
|
||||
animation: var(--animate-bounce);
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
@ -493,6 +604,9 @@
|
||||
.gap-1 {
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
@ -517,6 +631,9 @@
|
||||
.gap-y-3 {
|
||||
row-gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-y-4 {
|
||||
row-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -595,6 +712,9 @@
|
||||
.bg-\[\#f8f8f8\] {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.bg-black {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
.bg-blue-50 {
|
||||
background-color: var(--color-blue-50);
|
||||
}
|
||||
@ -720,6 +840,12 @@
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.font-sans {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
@ -728,6 +854,18 @@
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
.text-5xl {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
.text-6xl {
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
.text-8xl {
|
||||
font-size: var(--text-8xl);
|
||||
line-height: var(--tw-leading, var(--text-8xl--line-height));
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
@ -794,6 +932,9 @@
|
||||
.text-blue-700 {
|
||||
color: var(--color-blue-700);
|
||||
}
|
||||
.text-blue-800 {
|
||||
color: var(--color-blue-800);
|
||||
}
|
||||
.text-gray-300 {
|
||||
color: var(--color-gray-300);
|
||||
}
|
||||
@ -821,6 +962,12 @@
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.opacity-50 {
|
||||
opacity: 50%;
|
||||
}
|
||||
.shadow {
|
||||
--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);
|
||||
@ -865,6 +1012,10 @@
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.blur {
|
||||
--tw-blur: blur(8px);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
@ -873,6 +1024,10 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.duration-100 {
|
||||
--tw-duration: 100ms;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
.duration-150 {
|
||||
--tw-duration: 150ms;
|
||||
transition-duration: 150ms;
|
||||
@ -885,6 +1040,14 @@
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.duration-500 {
|
||||
--tw-duration: 500ms;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
.duration-1000 {
|
||||
--tw-duration: 1000ms;
|
||||
transition-duration: 1000ms;
|
||||
}
|
||||
.ease-in-out {
|
||||
--tw-ease: var(--ease-in-out);
|
||||
transition-timing-function: var(--ease-in-out);
|
||||
@ -1097,6 +1260,11 @@
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
.motion-safe\:animate-bounce {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: var(--animate-bounce);
|
||||
}
|
||||
}
|
||||
.sm\:w-3\/4 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(3/4 * 100%);
|
||||
@ -1132,9 +1300,9 @@
|
||||
margin-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.md\:my-2 {
|
||||
.md\:-mt-2 {
|
||||
@media (width >= 48rem) {
|
||||
margin-block: calc(var(--spacing) * 2);
|
||||
margin-top: calc(var(--spacing) * -2);
|
||||
}
|
||||
}
|
||||
.md\:flex {
|
||||
@ -1147,6 +1315,12 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.md\:size-12 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 12);
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:size-32 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 32);
|
||||
@ -1165,6 +1339,11 @@
|
||||
height: calc(var(--spacing) * 64);
|
||||
}
|
||||
}
|
||||
.md\:h-24 {
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
}
|
||||
.md\:w-1\/2 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(1/2 * 100%);
|
||||
@ -1252,11 +1431,6 @@
|
||||
padding-block: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:pt-2 {
|
||||
@media (width >= 48rem) {
|
||||
padding-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.md\:pt-14 {
|
||||
@media (width >= 48rem) {
|
||||
padding-top: calc(var(--spacing) * 14);
|
||||
@ -1285,6 +1459,12 @@
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:text-8xl {
|
||||
@media (width >= 48rem) {
|
||||
font-size: var(--text-8xl);
|
||||
line-height: var(--tw-leading, var(--text-8xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:text-base {
|
||||
@media (width >= 48rem) {
|
||||
font-size: var(--text-base);
|
||||
@ -1329,6 +1509,41 @@
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
@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 {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@ -1519,12 +1734,30 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@layer properties {
|
||||
@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 {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-translate-z: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--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-gradient-position: initial;
|
||||
--tw-gradient-from: #0000;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user