wibu/kegiatanku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pembaruan tanggal

Browse Source
This commit is contained in:
bipproduction
2025-12-16 16:29:43 +08:00
parent f73f84c839
commit ce1672a451
11 changed files with 830 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
public/README.md Normal file
View File

@@ -0,0 +1,138 @@
# Bun React Template Starter
This template is a starting point for building modern full-stack web applications using Bun, React, ElysiaJS, and Prisma. This project is designed to provide a fast, efficient, and structured development experience with a cutting-edge technology stack.
## Key Features
- **Super-Fast Runtime**: Built on top of [Bun](https://bun.sh/), a high-performance JavaScript runtime.
- **End-to-End Typesafe Backend**: Utilizes [ElysiaJS](https://elysiajs.com/) for a type-safe API from the backend to the frontend.
- **Automatic API Documentation**: Comes with [Elysia Swagger](https://elysiajs.com/plugins/swagger) to automatically generate interactive API documentation.
- **Modern Frontend**: A feature-rich and customizable user interface using [React](https://react.dev/) and [Mantine UI](https://mantine.dev/).
- **Easy Database Access**: Integrated with [Prisma](https://www.prisma.io/) as an ORM for intuitive and secure database interactions.
- **Clear Project Structure**: Logical file and folder organization to facilitate easy navigation and development.
## Tech Stack
- **Runtime**: Bun
- **Backend**:
- **Framework**: ElysiaJS
- **ElysiaJS Modules**:
- `@elysiajs/cors`: Manages Cross-Origin Resource Sharing policies.
- `@elysiajs/jwt`: JSON Web Token-based authentication.
- `@elysiajs/swagger`: Creates API documentation (Swagger/OpenAPI).
- `@elysiajs/eden`: A typesafe RPC-like client to connect the frontend with the Elysia API.
- **Frontend**:
- **Library**: React
- **UI Framework**: Mantine
- **Routing**: React Router
- **Data Fetching**: SWR
- **Database**:
- **ORM**: Prisma
- **Supported Databases**: PostgreSQL (default), MySQL, SQLite, etc.
- **Language**: TypeScript
## Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/your-username/bun-react-template-starter.git
cd bun-react-template-starter
```
### 2. Install Dependencies
Ensure you have [Bun](https://bun.sh/docs/installation) installed. Then, run the following command:
```bash
bun install
```
### 3. Configure Environment Variables
Copy the `.env.example` file to `.env` and customize the values.
```bash
cp .env.example .env
```
Fill in your `.env` file similar to the example below:
```
DATABASE_URL="postgresql://user:password@host:port/database?schema=public"
JWT_SECRET=a_super_long_and_secure_secret
BUN_PUBLIC_BASE_URL=http://localhost:3000
PORT=3000
```
After that, create TypeScript type declarations for your environment variables with the provided script:
```bash
bun run generate:env
```
This command will generate a `types/env.d.ts` file based on your `.env`.
### 4. Database Preparation
Make sure your PostgreSQL database server is running. Then, apply the Prisma schema to your database:
```bash
bunx prisma db push
```
You can also seed the database with initial data using the following script:
```bash
bun run seed
```
### 5. Running the Development Server
```bash
bun run dev
```
The application will be running at `http://localhost:3000`. The server supports hot-reloading, so changes in the code will be reflected instantly without needing a manual restart.
### 6. Accessing API Documentation (Swagger)
Once the server is running, you can access the automatically generated API documentation at:
`http://localhost:3000/swagger`
## Available Scripts
- `bun run dev`: Runs the development server with hot-reloading.
- `bun run build`: Builds the frontend application for production into the `dist` directory.
- `bun run start`: Runs the application in production mode.
- `bun run seed`: Executes the database seeding script located in `prisma/seed.ts`.
- `bun run generate:route`: A utility to create new route files in the backend.
- `bun run generate:env`: Generates a type definition file (`.d.ts`) from the variables in `.env`.
## Project Structure
```
/
├── bin/ # Utility scripts (generators)
├── prisma/ # Database schema, migrations, and seed
├── src/ # Main source code
│ ├── App.tsx # Root application component
│ ├── clientRoutes.ts # Route definitions for the frontend
│ ├── frontend.tsx # Entry point for client-side rendering (React)
│ ├── index.css # Global CSS file
│ ├── index.html # Main HTML template
│ ├── index.tsx # Main entry point for the app (server and client)
│ ├── components/ # Reusable React components
│ ├── lib/ # Shared libraries/helpers (e.g., apiFetch)
│ ├── pages/ # React page components
│ └── server/ # Backend code (ElysiaJS)
│ ├── lib/ # Server-specific libraries (e.g., prisma client)
│ ├── middlewares/ # Middleware for the API
│ └── routes/ # API route files
└── types/ # TypeScript type definitions
```
## Contributing
Contributions are highly welcome! Please feel free to create a pull request to add features, fix bugs, or improve the documentation.

205
public/unocss.css Normal file
View File

@@ -0,0 +1,205 @@
/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: shortcuts */
.container{width:100%;}
@media (min-width: 640px){
.container{max-width:640px;}
}
@media (min-width: 768px){
.container{max-width:768px;}
}
@media (min-width: 1024px){
.container{max-width:1024px;}
}
@media (min-width: 1280px){
.container{max-width:1280px;}
}
@media (min-width: 1536px){
.container{max-width:1536px;}
}
/* layer: default */
.visible{visibility:visible;}
.sticky{position:sticky;}
.static{position:static;}
.top-0{top:0;}
.z-50{z-index:50;}
[order~="\32 "]{order:2;}
[order~="\33 "]{order:3;}
[order~="\34 "]{order:4;}
.grid{display:grid;}
.grid-cols-2,
[cols~="\32 "]{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-7,
[cols~="\37 "]{grid-template-columns:repeat(7,minmax(0,1fr));}
[cols~="\34 "]{grid-template-columns:repeat(4,minmax(0,1fr));}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mt-10{margin-top:2.5rem;}
.mt-2{margin-top:0.5rem;}
.mt-3{margin-top:0.75rem;}
.mt-4{margin-top:1rem;}
.mt-7{margin-top:1.75rem;}
[mb~="lg"]{margin-bottom:1.125rem;}
[mb~="sm"]{margin-bottom:0.875rem;}
[mt~="sm"]{margin-top:0.875rem;}
.inline-block{display:inline-block;}
.hidden{display:none;}
[size~="\31 6"]{width:4rem;height:4rem;}
[size~="\31 rem"]{width:1rem;height:1rem;}
[size~="\32 2"]{width:5.5rem;height:5.5rem;}
[size~="\32 rem"]{width:2rem;height:2rem;}
[size~="\34 20"]{width:105rem;height:105rem;}
[size~="\36 rem"]{width:6rem;height:6rem;}
[size~="lg"]{width:32rem;height:32rem;}
[size~="md"]{width:28rem;height:28rem;}
[size~="sm"]{width:24rem;height:24rem;}
[size~="xl"]{width:36rem;height:36rem;}
[size~="xs"]{width:20rem;height:20rem;}
.h-11{height:2.75rem;}
.h1{height:0.25rem;}
.h2{height:0.5rem;}
.h3{height:0.75rem;}
.max-w-\[1200px\]{max-width:1200px;}
.max-w-2xl{max-width:42rem;}
.max-w-xl{max-width:36rem;}
.min-h-screen{min-height:100vh;}
.w-11{width:2.75rem;}
[h~="\31 00\%"]{height:100%;}
[w~="\31 00"]{width:25rem;}
[w~="\31 00\%"]{width:100%;}
[w~="\32 00"]{width:50rem;}
.flex{display:flex;}
.grow,
[grow=""]{flex-grow:1;}
.flex-wrap{flex-wrap:wrap;}
.hover\:-translate-y-2:hover{--un-translate-y:-0.5rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.place-items-center{place-items:center;}
.items-center{align-items:center;}
[justify~="end"]{justify-content:flex-end;}
[justify~="center"]{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:0.25rem;}
.gap-2,
[gap~="\32 "]{gap:0.5rem;}
.gap-3,
[gap~="xs"]{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5,
[gap~="xl"]{gap:1.25rem;}
.gap-8{gap:2rem;}
[gap~="\30 "]{gap:0;}
[gap~="\32 0"]{gap:5rem;}
[gap~="\36 "]{gap:1.5rem;}
[gap~="\37 0"]{gap:17.5rem;}
[gap~="lg"]{gap:1.125rem;}
[gap~="sm"]{gap:0.875rem;}
.overflow-x-hidden{overflow-x:hidden;}
.b,
.border{border-width:1px;}
.border-b{border-bottom-width:1px;}
.border-t{border-top-width:1px;}
.border-red-500\/20{border-color:rgb(239 68 68 / 0.2);}
.border-white\/10{border-color:rgb(255 255 255 / 0.1);}
.border-white\/15{border-color:rgb(255 255 255 / 0.15);}
.rounded-2xl{border-radius:1rem;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.5rem;}
.rounded-xl{border-radius:0.75rem;}
.bg-\[linear-gradient\(180deg\,rgba\(7\,10\,20\,0\.6\)\,rgba\(7\,10\,20\,0\.35\)\)\]{background-image:linear-gradient(180deg,rgba(7,10,20,0.6),rgba(7,10,20,0.35));}
.bg-\[radial-gradient\(1000px_400px_at_90\%_90\%\,rgba\(79\,70\,229\,0\.10\)\,transparent_8\%\)\]{background-image:radial-gradient(1000px 400px at 90% 90%,rgba(79,70,229,0.10),transparent 8%);}
.bg-\[radial-gradient\(1200px_600px_at_10\%_10\%\,rgba\(124\,58\,237\,0\.12\)\,transparent_8\%\)\]{background-image:radial-gradient(1200px 600px at 10% 10%,rgba(124,58,237,0.12),transparent 8%);}
.bg-cyan-600{--un-bg-opacity:1;background-color:rgb(8 145 178 / var(--un-bg-opacity)) /* #0891b2 */;}
.bg-red-900\/30{background-color:rgb(127 29 29 / 0.3) /* #7f1d1d */;}
.bg-white\/5{background-color:rgb(255 255 255 / 0.05) /* #fff */;}
[bg~="gray"]{--un-bg-opacity:1;background-color:rgb(156 163 175 / var(--un-bg-opacity)) /* #9ca3af */;}
.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}
.from-\[\#071024\]{--un-gradient-from-position:0%;--un-gradient-from:rgb(7 16 36 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(7 16 36 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-indigo-600{--un-gradient-from-position:0%;--un-gradient-from:rgb(79 70 229 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(79 70 229 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-white\/5{--un-gradient-from-position:0%;--un-gradient-from:rgb(255 255 255 / 0.05) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.via-\[\#071229\]{--un-gradient-via-position:50%;--un-gradient-to:rgb(7 18 41 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(7 18 41 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);}
.to-\[\#08162f\]{--un-gradient-to-position:100%;--un-gradient-to:rgb(8 22 47 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-black\/25{--un-gradient-to-position:100%;--un-gradient-to:rgb(0 0 0 / 0.25) var(--un-gradient-to-position);}
.to-violet-600{--un-gradient-to-position:100%;--un-gradient-to:rgb(124 58 237 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-white\/0{--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);}
.bg-gradient-to-b{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
.bg-gradient-to-br{--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
.bg-gradient-to-r{--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
[stroke~="\31 \.3"]{stroke-width:1.3px;}
.p-3{padding:0.75rem;}
.p-5{padding:1.25rem;}
[p~="sm"]{padding:0.875rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-4,
[px=""]{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
[px~="sm"]{padding-left:0.875rem;padding-right:0.875rem;}
[py~="\38 0"]{padding-top:20rem;padding-bottom:20rem;}
[py~="lg"]{padding-top:1.125rem;padding-bottom:1.125rem;}
.pb-20{padding-bottom:5rem;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-\[12px\]{font-size:12px;}
.text-\[13px\]{font-size:13px;}
.text-\[14px\]{font-size:14px;}
.text-\[15px\]{font-size:15px;}
.text-\[16px\]{font-size:16px;}
.text-\[18px\]{font-size:18px;}
.text-\[22px\]{font-size:22px;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-indigo-100{--un-text-opacity:1;color:rgb(224 231 255 / var(--un-text-opacity)) /* #e0e7ff */;}
.text-red-200{--un-text-opacity:1;color:rgb(254 202 202 / var(--un-text-opacity)) /* #fecaca */;}
.text-slate-200{--un-text-opacity:1;color:rgb(226 232 240 / var(--un-text-opacity)) /* #e2e8f0 */;}
.text-slate-400{--un-text-opacity:1;color:rgb(148 163 184 / var(--un-text-opacity)) /* #94a3b8 */;}
.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
[c~="blue"],
[color~="blue"]{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}
[c~="dark"]{--un-text-opacity:1;color:rgb(34 34 34 / var(--un-text-opacity)) /* #222222 */;}
[c~="red"],
[color~="red"]{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}
[color~="cyan"]{--un-text-opacity:1;color:rgb(34 211 238 / var(--un-text-opacity)) /* #22d3ee */;}
[color~="gray"]{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}
[color~="green"]{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity)) /* #4ade80 */;}
[color~="orange"]{--un-text-opacity:1;color:rgb(251 146 60 / var(--un-text-opacity)) /* #fb923c */;}
.font-bold,
[fw~="\37 00"]{font-weight:700;}
.font-extrabold{font-weight:800;}
.font-semibold,
[fw~="\36 00"]{font-weight:600;}
[fw~="\35 00"]{font-weight:500;}
.leading-tight{line-height:1.25;}
.capitalize{text-transform:capitalize;}
.opacity-70{opacity:0.7;}
.opacity-75{opacity:0.75;}
.opacity-80{opacity:0.8;}
.opacity-85{opacity:0.85;}
.opacity-90{opacity:0.9;}
.opacity-95{opacity:0.95;}
.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
[shadow~="md"]{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
[shadow~="sm"]{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.hover\:shadow-2xl:hover{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.outline{outline-style:solid;}
.backdrop-blur-md{--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
@media (min-width: 768px){
.md\:grid-cols-\[1fr_420px\]{grid-template-columns:1fr 420px;}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:flex{display:flex;}
.md\:text-5xl{font-size:3rem;line-height:1;}
}