fix: css naming

taga3s · Aug 7, 2024 · 30dc9c1 · 30dc9c1
1 parent 8b51a0c
commit 30dc9c1
Show file tree

Hide file tree

Showing 22 changed files with 102 additions and 97 deletions.
diff --git a/app/components/Footer.css.ts b/app/components/Footer.css.ts
@@ -1,11 +1,11 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const footerLayout = css`
   margin-top: 80px;
 `;
 
-const Content = css`
+const footerContent = css`
   padding: 20px 0;
 `;
 
-export { Layout, Content };
+export { footerLayout, footerContent };
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,9 +1,9 @@
-import { Content, Layout } from "./Footer.css";
+import { footerContent, footerLayout } from "./Footer.css";
 
 const Footer = () => {
   return (
-    <footer class={Layout}>
-      <div class={Content}>
+    <footer class={footerLayout}>
+      <div class={footerContent}>
         <small>&copy; 2024 taga3s</small>
       </div>
     </footer>

diff --git a/app/components/Header.css.ts b/app/components/Header.css.ts
@@ -1,14 +1,14 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const headerContent = css`
   padding: 32px 20px;
   display: flex;
   justify-content: end;
 `;
 
-const Links = css`
+const headerNav = css`
   display: flex;
   gap: 24px;
 `;
 
-export { Layout, Links };
+export { headerContent, headerNav };
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -1,19 +1,15 @@
-import { Layout, Links } from "./Header.css";
+import { headerContent, headerNav } from "./Header.css";
 
 const Header = () => {
   return (
-    <header class={Layout}>
-      <ul class={Links}>
-        <li>
+    <header>
+      <div class={headerContent}>
+        <nav class={headerNav}>
           <a href="/">about me</a>
-        </li>
-        <li>
           <a href="/history">history</a>
-        </li>
-        <li>
           <a href="/works">works</a>
-        </li>
-      </ul>
+        </nav>
+      </div>
     </header>
   );
 };

diff --git a/app/components/layout/Section.css.ts → app/components/Section.css.ts b/app/components/layout/Section.css.ts → app/components/Section.css.ts
@@ -1,10 +1,8 @@
 import { css } from "hono/css";
 
-const Layout = css``;
-
-const Header = css`
+const sectionHeader = css`
   font-size: 24px;
   font-weight: bold;
 `;
 
-export { Layout, Header };
+export { sectionHeader };
diff --git a/app/components/layout/Section.tsx → app/components/Section.tsx b/app/components/layout/Section.tsx → app/components/Section.tsx
@@ -1,5 +1,5 @@
 import type { FC, JSX } from "hono/jsx";
-import { Header, Layout } from "./Section.css";
+import { sectionHeader } from "./Section.css";
 
 type Props = {
   title: string;
@@ -10,8 +10,8 @@ const Section: FC<Props> = (props) => {
   const { title, children } = props;
 
   return (
-    <section class={Layout}>
-      <h2 class={Header}>{title}</h2>
+    <section>
+      <h2 class={sectionHeader}>{title}</h2>
       {children}
     </section>
   );

diff --git a/app/components/history/HistoryEducationalBackground.css.ts b/app/components/history/HistoryEducationalBackground.css.ts
@@ -1,15 +1,15 @@
 import { css } from "hono/css";
 
-const list = css`
+const educationalBackgroundList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const listItem = css`
+const educationalBackgroundListItem = css`
   display: flex;
   gap: 16px;
 `;
 
-export { list, listItem };
+export { educationalBackgroundList, educationalBackgroundListItem };
diff --git a/app/components/history/HistoryEducationalBackground.tsx b/app/components/history/HistoryEducationalBackground.tsx
@@ -1,11 +1,11 @@
-import { Section } from "../layout/Section";
-import { list, listItem } from "./HistoryEducationalBackground.css";
+import { Section } from "../Section";
+import { educationalBackgroundList, educationalBackgroundListItem } from "./HistoryEducationalBackground.css";
 
 const HistoryEducationalBackground = () => {
   return (
     <Section title="Educational background">
-      <ul class={list}>
-        <li class={listItem}>
+      <ul class={educationalBackgroundList}>
+        <li class={educationalBackgroundListItem}>
           <span>2022年4月 - 現在</span>
           <span>早稲田大学法学部在学中</span>
         </li>

diff --git a/app/components/history/HistoryPresenter.css.ts b/app/components/history/HistoryPresenter.css.ts
@@ -1,9 +1,9 @@
 import { css } from "hono/css";
 
-const layout = css`
+const presenterLayout = css`
   display: flex;
   flex-direction: column;
   gap: 48px;
 `;
 
-export { layout };
+export { presenterLayout };
diff --git a/app/components/history/HistoryPresenter.tsx b/app/components/history/HistoryPresenter.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { WorkExperience } from "../../api/workExperience";
 import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
-import { layout } from "./HistoryPresenter.css";
+import { presenterLayout } from "./HistoryPresenter.css";
 import { HistoryWorkExperience } from "./HistoryWorkExperience";
 
 type Props = {
@@ -12,7 +12,7 @@ const HistoryPresenter: FC<Props> = (props) => {
   const { workExperience } = props;
 
   return (
-    <div class={layout}>
+    <div class={presenterLayout}>
       <HistoryWorkExperience workExperience={workExperience} />
       <HistoryEducationalBackground />
     </div>

diff --git a/app/components/history/HistoryWorkExperience.css.ts b/app/components/history/HistoryWorkExperience.css.ts
@@ -1,17 +1,17 @@
 import { css } from "hono/css";
 
-const list = css`
+const workExperienceList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const description = css`
+const workExperienceDescription = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 8px;
 `;
 
-export { list, description };
+export { workExperienceList, workExperienceDescription };
diff --git a/app/components/history/HistoryWorkExperience.tsx b/app/components/history/HistoryWorkExperience.tsx
@@ -1,8 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { WorkExperience } from "../../api/workExperience";
-import { Section } from "../layout/Section";
-import { list } from "./HistoryEducationalBackground.css";
-import { description } from "./HistoryWorkExperience.css";
+import { Section } from "../Section";
+import { workExperienceDescription, workExperienceList } from "./HistoryWorkExperience.css";
 
 type Props = {
   workExperience: WorkExperience[];
@@ -13,7 +12,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
 
   return (
     <Section title="Work experience">
-      <ul class={list}>
+      <ul class={workExperienceList}>
         {workExperience
           .toSorted((a, b) => a.order - b.order)
           .map((item) => (
@@ -22,7 +21,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
                 <summary>
                   {item.span}: {item.company}
                 </summary>
-                <p class={description}>
+                <p class={workExperienceDescription}>
                   <span>{item.description}</span>
                   <span>使用技術: {item.techStack}</span>
                 </p>

diff --git a/app/components/profile/ProfileLinks.css.ts b/app/components/profile/ProfileLinks.css.ts
@@ -1,6 +1,6 @@
 import { css } from "hono/css";
 
-const LinkCard_Container = css`
+const linkCardContainer = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
@@ -11,30 +11,30 @@ const LinkCard_Container = css`
   }
 `;
 
-const LinkCard = css`
+const linkCard = css`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   border-radius: 8px;
 `;
 
-const GitHub = css`
-  ${LinkCard}
+const github = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(129,92,200,1) 0%, rgba(46,47,62,0.9137780112044818) 0%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%, rgba(3,1,9,0.4515931372549019) 100%);
 `;
 
-const Qiita = css`
-  ${LinkCard}
+const qiita = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(92,200,121,1) 0%, rgba(25,230,34,0.4515931372549019) 100%, rgba(106,217,191,0.9249824929971989) 100%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%);
 `;
 
-const Cosense = css`
-  ${LinkCard}
+const cosense = css`
+  ${linkCard}
   background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(208,108,7,1) 0%, rgba(194,156,24,1) 0%, rgba(187,180,32,1) 40%, rgba(0,212,255,1) 100%);
 `;
 
-export { LinkCard_Container, LinkCard, GitHub, Qiita, Cosense };
+export { linkCardContainer, linkCard, github, qiita, cosense };
diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx
@@ -1,32 +1,32 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
-import { Section } from "../layout/Section";
-import { Cosense, GitHub, LinkCard_Container, Qiita } from "./ProfileLinks.css";
+import { Section } from "../Section";
+import { cosense, github, linkCardContainer, qiita } from "./ProfileLinks.css";
 
 const links = [
   {
     title: "GitHub",
     url: "https://github.com/taga3s",
-    style: GitHub,
+    style: github,
     icon: <GitHubIcon />,
   },
   {
     title: "Cosense",
     url: "https://scrapbox.io/t33s-dev/",
-    style: Cosense,
+    style: cosense,
     icon: <CosenseIcon />,
   },
   {
     title: "Qiita",
     url: "https://qiita.com/t33s_dev",
-    style: Qiita,
+    style: qiita,
     icon: <QiitaIcon />,
   },
 ];
 
 const ProfileLinks = () => {
   return (
     <Section title="Links">
-      <div class={LinkCard_Container}>
+      <div class={linkCardContainer}>
         {links.map((link) => (
           <a href={link.url} class={link.style} key={link.title}>
             <div>{link.icon}</div>

diff --git a/app/components/profile/ProfileMain.css.ts b/app/components/profile/ProfileMain.css.ts
@@ -1,18 +1,18 @@
 import { css } from "hono/css";
 
-const Main = css`
+const main = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-const Main_Box = css`
+const mainBox = css`
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
 
-const Main_Image = css`
+const mainImage = css`
   width: 100px;
   height: 100px;
   border-radius: 12px;
@@ -23,24 +23,24 @@ const Main_Image = css`
   }
 `;
 
-const Main_Name = css`
+const mainName = css`
   font-size: 28px;
   font-weight: bold;
 `;
 
-const Main_Belonging = css`
+const mainBelonging = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 16px;
 `;
 
-const Introduction = css`
+const mainIntroduction = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
   font-size: 16px;
 `;
 
-export { Main, Main_Box, Main_Image, Main_Name, Main_Belonging, Introduction };
+export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction };
diff --git a/app/components/profile/ProfileMain.tsx b/app/components/profile/ProfileMain.tsx
@@ -1,20 +1,20 @@
-import { Main, Main_Belonging, Main_Box, Main_Image, Main_Name, Introduction } from "./ProfileMain.css";
+import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css";
 
 const ProfileMain = () => {
   return (
     <section>
-      <div class={Main}>
-        <div class={Main_Box}>
-          <span class={Main_Name}>Seiya Tagami / taga3s</span>
-          <ul class={Main_Belonging}>
+      <div class={main}>
+        <div class={mainBox}>
+          <span class={mainName}>Seiya Tagami / taga3s</span>
+          <ul class={mainBelonging}>
             <li>Web Developer (working as an intern)</li>
           </ul>
         </div>
         <div>
-          <img class={Main_Image} src="https://github.com/taga3s.png" alt="me" />
+          <img class={mainImage} src="https://github.com/taga3s.png" alt="me" />
         </div>
       </div>
-      <ul class={Introduction}>
+      <ul class={mainIntroduction}>
         <li>🛠️ 趣味やインターンでコードを書いています。</li>
         <li>🐳 Web、法律、ラーメンと...</li>
         <li>🤖 アニメ/漫画やゲームが好きです。</li>