feat: Responsive web

paulcjy · Jun 30, 2024 · 3f2c78d · 3f2c78d
1 parent 567fd63
commit 3f2c78d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -9,6 +9,7 @@
     padding-bottom: 0rem;
     text-align: center;
     counter-reset: cnt;
+    @apply lg:text-left;
   }
 
   h2 {
@@ -17,6 +18,7 @@
     margin-bottom: 0.15rem;
     font-weight: 600;
     font-size: small;
+    @apply lg:text-left sm:text-left;
   }
 
   li {
@@ -34,7 +36,10 @@
     margin-left: -0.6rem;
     width: 0.9rem;
     text-align: right;
+    @apply lg:ml-4 sm:ml-4;
   }
+
+  @apply lg:leading-7 lg:ml-8 sm:leading-7 sm:ml-8;
 }
 
 /* :root {

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,10 +4,10 @@ export default function Home() {
   return (
     <div className="h-screen">
       <div className="h-[7vh] text-center align-middle">
-        <p>주내힘교회 청소년부</p>
-        <p>2024 여름수련회 성경읽기</p>
+        <p className="sm:inline sm:text-2xl">주내힘교회 청소년부</p>
+        <p className="sm:inline sm:text-2xl sm:p-2">2024 여름수련회 성경읽기</p>
       </div>
-      <div className="h-[6vh] text-2xl text-center align-middle">7월</div>
+      <div className="h-[6vh] text-2xl sm:text-4xl text-center align-middle">7월</div>
       <Calendar />
     </div>
   )

diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -16,7 +16,7 @@ export const Calendar = () => {
       <div className="table-header-group h-[4vh]">
         <div className="table-row">
           {header.map((day, i) => (
-            <div key={i} className={`w-[15vw] table-cell border text-center font-bold align-middle ${setDayColor(i)}`}>{day}</div>
+            <div key={i} className={`w-[15vw] table-cell border text-center font-bold align-middle sm:text-xl ${setDayColor(i)}`}>{day}</div>
           ))}
         </div>
       </div>
@@ -27,10 +27,10 @@ export const Calendar = () => {
               <Link key={i} href={day ? `/${day}` : '#'} className="table-cell border">
                 {day ?
                   <div>
-                    <div className={`p-1.5 font-bold ${setDayColor(i)}`}>{day}</div>
-                    <div className="p-1 text-[0.7rem]">
-                      <p>출애굽기</p>
-                      <p>{exodus[day]}장</p>
+                    <div className={`p-1.5 sm:p-2 font-bold sm:text-xl ${setDayColor(i)}`}>{day}</div>
+                    <div className="p-1 sm:p-2 text-[0.7rem] sm:text-lg">
+                      <p className="lg:inline">출애굽기</p>
+                      <p className="lg:inline lg:pl-1">{exodus[day]}장</p>
                     </div>
                   </div> :
                   null}