diff --git a/apps/sandbox/.env b/apps/sandbox/.env deleted file mode 100644 index 2a743a5..0000000 --- a/apps/sandbox/.env +++ /dev/null @@ -1 +0,0 @@ -NODEJS_HELPERS=0 \ No newline at end of file diff --git a/apps/sandbox/api/Card.tsx b/apps/sandbox/api/Card.tsx index 661de5c..1c9e46c 100644 --- a/apps/sandbox/api/Card.tsx +++ b/apps/sandbox/api/Card.tsx @@ -1,54 +1,52 @@ -import { css } from "hono/css"; -import type { FC } from "hono/jsx"; - -const cardLayout = css` - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid transparent; - text-align: center; - &:hover { - border: 1px solid rgb(209 213 219); - background-color: rgb(243 244 246); - transition: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - } - @media (prefers-color-scheme: dark) { - &:hover { - background-color: rgba(38, 38, 38, 0.3); - border: 1px solid rgb(38 38 38); - } - } - @media screen and (min-width: 1024px) { - text-align: left; - } -`; - -const labelClass = css` - font-size: 24px; - font-weight: 600; - margin-bottom: 0.75rem; - @media (prefers-color-scheme: dark) { - color: white; - } -`; - -const valueClass = css` - font-size: 14px; - opacity: 0.5; - @media (prefers-color-scheme: dark) { - color: white; - } -`; - -export type Card = { label: string; value?: string | number }; - -const Card: FC = ({ label, value }: Card) => { - return ( -
-
{label}
-
{value}
-
- ); -}; - -export default Card; +import { css } from "hono/css"; +import type { FC } from "hono/jsx"; + +const cardLayout = css` + padding: 1rem; + border-radius: 0.5rem; + border: 1px solid transparent; + text-align: center; + &:hover { + border: 1px solid rgb(209 213 219); + background-color: rgb(243 244 246); + transition: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + @media (prefers-color-scheme: dark) { + &:hover { + background-color: rgba(38, 38, 38, 0.3); + border: 1px solid rgb(38 38 38); + } + } + @media screen and (min-width: 1024px) { + text-align: left; + } +`; + +const labelClass = css` + font-size: 24px; + font-weight: 600; + margin-bottom: 0.75rem; + @media (prefers-color-scheme: dark) { + color: white; + } +`; + +const valueClass = css` + font-size: 14px; + opacity: 0.5; + @media (prefers-color-scheme: dark) { + color: white; + } +`; + +export type Card = { label: string; value?: string | number }; + +export const Card: FC = ({ label, value }: Card) => { + return ( +
+
{label}
+
{value}
+
+ ); +}; diff --git a/apps/sandbox/api/Layout.tsx b/apps/sandbox/api/Layout.tsx index 5935ead..eb44487 100644 --- a/apps/sandbox/api/Layout.tsx +++ b/apps/sandbox/api/Layout.tsx @@ -1,54 +1,52 @@ -import { Style, css } from "hono/css"; -import type { FC, PropsWithChildren } from "hono/jsx"; - -const globalClasses = css` - font-family: "Inter", sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; - font-variation-settings: "slnt" 0; - background: linear-gradient(to bottom, transparent, rgb(255, 255, 255)) - rgb(214, 219, 220); - margin: 0; - @media (prefers-color-scheme: dark) { - background: linear-gradient(to bottom, transparent, rgb(0, 0, 0)) - rgb(0, 0, 0); - } -`; - -const mainClass = css` - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1024; - margin: 0 auto; - flex-direction: column; - height: 79vh; - padding: 3rem; - @media screen and (min-width: 1024px) { - padding: 6rem; - } -`; - -const Layout: FC = (props: PropsWithChildren) => { - return ( - - - - - - - -