From e83e8253f1f78726526185335da59b7a388e944a Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Wed, 11 Mar 2026 02:01:04 +0000 Subject: [PATCH 1/3] Use hono/css to style layout --- src/utils/jsx/layout.tsx | 44 ++++++++++++++++++++++++++++++++++++---- src/utils/theme.ts | 9 ++++++++ 2 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 src/utils/theme.ts diff --git a/src/utils/jsx/layout.tsx b/src/utils/jsx/layout.tsx index 357de4b..4492572 100644 --- a/src/utils/jsx/layout.tsx +++ b/src/utils/jsx/layout.tsx @@ -1,5 +1,33 @@ +import { Style, css, cx } from 'hono/css'; import type { Child } from 'hono/jsx'; +import theme from '../theme.ts'; + +const styles = { + body: css` + display: flex; + flex-direction: column; + min-height: 100vh; + `, + background: css` + background: ${theme.background.body}; + color: ${theme.text.primary}; + `, + main: css` + flex: 1; + `, + container: css` + margin: 0 auto; + width: 100%; + max-width: ${theme.spacing(192)}; + padding: ${theme.spacing(2)}; + + @media screen and (max-width: ${theme.spacing(96)}) { + padding: ${theme.spacing(1)}; + } + `, +}; + /** * Standard cdnjs HTML layout. * @@ -7,16 +35,24 @@ import type { Child } from 'hono/jsx'; * @param props.children Content to be included in the body of the page. */ export default ({ children }: { children?: Child }) => ( - + + +