add styles

nek0meshi · Apr 30, 2023 · f93e279 · f93e279
1 parent bb7dc9d
commit f93e279
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/frontend/components/ArticleContent.module.scss b/frontend/components/ArticleContent.module.scss
@@ -0,0 +1,11 @@
+.ArticleContent {
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  h3 {
+    font-size: 1.2em;
+  }
+}
diff --git a/frontend/components/ArticleContent.tsx b/frontend/components/ArticleContent.tsx
@@ -1,4 +1,5 @@
 import dayjs from '@/lib/dayjs'
+import styles from './ArticleContent.module.scss'
 
 type Props = {
   content: string
@@ -8,7 +9,7 @@ type Props = {
 
 const ArticleContent = ({ content, title, date }: Props) => {
   return (
-    <article>
+    <article className={styles.ArticleContent}>
       <small>{date.format('YYYY-MM-DD')}</small>
       <h1>{title}</h1>
       <div dangerouslySetInnerHTML={{ __html: content }} />

diff --git a/frontend/pages/posts/[slug].module.scss b/frontend/pages/posts/[slug].module.scss
@@ -0,0 +1,15 @@
+$mobile-max-width: 768px;
+$tablet-max-width: 1024px;
+
+.AppContainer {
+  width: $tablet-max-width;
+  margin: 0 auto;
+  padding: 0 15px;
+
+  @media (max-width: $tablet-max-width) {
+    width: $mobile-max-width;
+  }
+  @media (max-width: $mobile-max-width) {
+    width: 100%;
+  }
+}
diff --git a/frontend/pages/posts/[slug].tsx b/frontend/pages/posts/[slug].tsx
@@ -1,6 +1,7 @@
 import ArticleContent from '@/components/ArticleContent'
 import dayjs from '@/lib/dayjs'
 import * as postService from '@/services/post-service'
+import styles from './[slug].module.scss'
 
 export async function getStaticPaths() {
   return {
@@ -35,9 +36,9 @@ type Props = {
 
 const Slug = ({ content, title, date }: Props) => {
   return (
-    <>
+    <div className={styles.AppContainer}>
       <ArticleContent content={content} date={dayjs(date)} title={title} />
-    </>
+    </div>
   )
 }