Update layout design

dotnetdev-kr · Jan 18, 2025 · 974fdc6 · 974fdc6
1 parent 24e79aa
commit 974fdc6
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 19 deletions.
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -4,48 +4,93 @@
 /* 공통 스타일 */
 body {
   font-family: 'Noto Sans', sans-serif;
-  background-color: #FAFAFA;
+  background-color: #F8F9FA; /* 부드러운 배경색 */
   color: #333;
   margin: 0;
   padding: 0;
+  line-height: 1.6;
 }
 
-.container {
+.wrapper {
   max-width: 800px;
   margin: 40px auto;
   padding: 20px;
   background-color: #FFFFFF;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
-header {
+/* 헤더 스타일 */
+.site-header {
   text-align: center;
   margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #E0E0E0;
 }
 
-header h1 {
+.site-title {
   font-size: 2.5rem;
   color: #0D47A1;
+  margin: 0;
+}
+
+.site-subtitle {
+  font-size: 1.2rem;
+  color: #555;
+  margin-top: 10px;
 }
 
-header p {
-  font-size: 1.1rem;
-  margin: 10px 0;
+/* 메인 콘텐츠 */
+.site-content {
+  margin-top: 20px;
 }
 
-a {
+.site-content h1, .site-content h2 {
   color: #0D47A1;
+  margin-bottom: 20px;
+}
+
+.site-content a {
+  color: #1E88E5;
   text-decoration: none;
+  border-bottom: 2px solid #1E88E5;
+  transition: color 0.3s, border-color 0.3s;
 }
 
-a:hover {
-  text-decoration: underline;
+.site-content a:hover {
+  color: #1565C0;
+  border-color: #1565C0;
 }
 
-footer {
+/* 푸터 스타일 */
+.site-footer {
   text-align: center;
-  margin-top: 30px;
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #E0E0E0;
   font-size: 0.9rem;
   color: #777;
 }
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 10px 0 0 0;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.footer-links li {
+  display: inline;
+}
+
+.footer-links a {
+  color: #0D47A1;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
diff --git a/docs/layout.html b/docs/layout.html
@@ -5,17 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }}</title>
   <link rel="stylesheet" href="./assets/css/style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap">
 </head>
 <body>
-  <div class="container">
-    <header>
-      <h1>{{ page.title }}</h1>
+  <div class="wrapper">
+    <!-- 헤더 -->
+    <header class="site-header">
+      <h1 class="site-title">{{ page.title }}</h1>
+      <p class="site-subtitle">컨퍼런스에 대한 모든 정보를 확인하세요.</p>
     </header>
-    <main>
+
+    <!-- 메인 콘텐츠 -->
+    <main class="site-content">
       {{ content }}
     </main>
-    <footer>
+
+    <!-- 푸터 -->
+    <footer class="site-footer">
       <p>© 2025 컨퍼런스 이름. All rights reserved.</p>
+      <ul class="footer-links">
+        <li><a href="./index.md">홈</a></li>
+        <li><a href="./agenda.md">프로그램</a></li>
+        <li><a href="./speakers.md">연사 소개</a></li>
+        <li><a href="./register.md">등록</a></li>
+      </ul>
     </footer>
   </div>
 </body>