feat: update css styles

app/components/history/HistoryWorkExperience.css.ts

@@ -3,15 +3,15 @@ import { css } from "hono/css";
 const workExperienceList = css`
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
   margin-top: 32px;
 `;
 
 const workExperienceDescription = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 0;
 `;
 
 export { workExperienceList, workExperienceDescription };

app/components/works/WorksList.css.ts

@@ -0,0 +1,7 @@
+import { css } from "hono/css";
+
+const worksListContainer = css`
+  margin-top: 20px;
+`;
+
+export { worksListContainer };

app/components/works/WorksList.tsx

@@ -0,0 +1,12 @@
+import { Section } from "../Section";
+import { worksListContainer } from "./WorksList.css";
+
+const WorksList = () => {
+  return (
+    <Section title="Works">
+      <div class={worksListContainer}>随時掲載予定...</div>
+    </Section>
+  );
+};
+
+export { WorksList };

app/components/works/WorksPresenter.css.ts

@@ -0,0 +1,9 @@
+import { css } from "hono/css";
+
+const presenterLayout = css`
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+`;
+
+export { presenterLayout };

app/components/works/WorksPresenter.tsx

@@ -0,0 +1,12 @@
+import { WorksList } from "./WorksList";
+import { presenterLayout } from "./WorksPresenter.css";
+
+const WorksPresenter = () => {
+  return (
+    <div class={presenterLayout}>
+      <WorksList />
+    </div>
+  );
+};
+
+export { WorksPresenter };

app/routes/works.tsx

@@ -1,5 +1,6 @@
 import { createRoute } from "honox/factory";
+import { WorksPresenter } from "../components/works/WorksPresenter";
 
 export default createRoute(async (c) => {
-  return c.render(<div>随時掲載...</div>);
+  return c.render(<WorksPresenter />);
 });