Remove site.baseurl for image and CSS paths

Hoya324 · Oct 26, 2024 · 8c43dc0 · 8c43dc0
1 parent da76ac5
commit 8c43dc0
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 34 deletions.
diff --git a/_config.yml b/_config.yml
@@ -18,4 +18,5 @@ collections_dir: _collections
 data_dir: _data
 layouts_dir: _layouts
 includes_dir: _includes
-
+include:
+  - assets
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,6 +1,49 @@
+body {
+    font-family: Arial, sans-serif;
+    color: #333;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: #f4f4f4;
+}
+
+.header-title {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.header-nav {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+}
+
+.header-nav a {
+    text-decoration: none;
+    color: #333;
+    font-size: 16px;
+}
+
+.header-nav a:hover {
+    color: #666;
+}
+
+h1 {
+    text-align: center;
+    font-size: 36px;
+    margin: 20px 0;
+}
+
 .gallery-container {
     display: flex;
-    align-items: flex-start;
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
@@ -11,43 +54,40 @@
     padding-right: 20px;
 }
 
-.gallery-sidebar h1 {
-    font-size: 24px;
+.gallery-sidebar h2 {
+    font-size: 32px;
     line-height: 1.5;
     font-weight: bold;
-    margin-bottom: 20px;
-}
-
-.gallery-sidebar p {
-    font-size: 14px;
-    color: #666;
 }
 
 .gallery-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    flex-wrap: wrap;
     gap: 10px;
+    justify-content: center;
     width: 80%;
 }
 
 .gallery-item {
+    flex: 1 1 calc(33.333% - 10px); /* 3개씩 균등 배치 */
+    box-sizing: border-box;
     text-align: center;
 }
 
 .gallery-item img {
     width: 100%;
     height: auto;
-    border-radius: 8px;
+    border-radius: 4px; /* 모서리 둥글기 조정 */
     object-fit: cover;
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease; /* 호버 효과 조정 */
 }
 
 .gallery-item img:hover {
-    transform: scale(1.05);
+    transform: scale(1.02); /* 호버 시 커지는 정도 감소 */
 }
 
 .gallery-item p {
-    font-size: 12px;
+    font-size: 14px;
     color: #555;
     margin-top: 5px;
 }
@@ -61,3 +101,12 @@
     background-color: #f9f9f9;
 }
 
+.gallery-footer a {
+    color: #999;
+    text-decoration: none;
+}
+
+.gallery-footer a:hover {
+    color: #333;
+}
+
diff --git a/default.html b/default.html
@@ -4,16 +4,30 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title | default: site.title }}</title>
+    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
 </head>
 <body>
     <header>
-        <h1>{{ site.title }}</h1>
+        <div class="header-container">
+            <h1 class="header-title">{{ site.title }}</h1>
+            <nav>
+                <ul class="header-nav">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/gallery">Gallery</a></li>
+                </ul>
+            </nav>
+        </div>
     </header>
+
     <main>
         {{ content }}
     </main>
-    <footer>
-        &copy; {{ site.title }} - <a href="{{ site.url }}">{{ site.url }}</a>
+
+    <footer class="gallery-footer">
+        <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>GitHub: <a href="https://github.com/Hoya324">https://github.com/Hoya324</a></p>
+        <p>Blog: <a href="https://hoya324.tistory.com/">https://hoya324.tistory.com/</a></p>
     </footer>
 </body>
 </html>

diff --git a/index.html b/index.html
@@ -2,21 +2,48 @@
 layout: default
 ---
 
-<h1>{{ site.title }}</h1>
-<p>{{ site.description }}</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page.title | default: site.title }}</title>
+    <link rel="stylesheet" href="/assets/css/styles.css">
+</head>
+<body>
+    <header>
+        <div class="header-container">
+            <h1 class="header-title">{{ site.title }}</h1>
+            <nav>
+                <ul class="header-nav">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/gallery">Gallery</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
 
-<div class="gallery-container">
-  {% for photo in site.data.photos %}
-    <div class="photo-item">
-      <img src="{{ photo.url }}" alt="{{ photo.alt }}">
-      <p>{{ photo.caption }}</p>
-    </div>
-  {% endfor %}
-</div>
+    <main>
+        <div class="gallery-container">
+            <aside class="gallery-sidebar">
+                <h2>Hoya</h2>
+            </aside>
+            <section class="gallery-grid">
+                {% for photo in site.data.photos %}
+                    <div class="gallery-item">
+                        <img src="{{ '/assets/images/gallery/' | append: photo.src }}" alt="{{ photo.alt }}">
+                    </div>
+                {% endfor %}
+            </section>
+        </div>
+    </main>
 
-<footer class="gallery-footer">
-  <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
-  <p>GitHub: <a href="https://github.com/Hoya324">https://github.com/Hoya324</a></p>
-  <p>Blog: <a href="https://hoya324.tistory.com/">https://hoya324.tistory.com/</a></p>
-</footer>
+    <footer class="gallery-footer">
+        <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>GitHub: <a href="https://github.com/Hoya324">https://github.com/Hoya324</a></p>
+        <p>Blog: <a href="https://hoya324.tistory.com/">https://hoya324.tistory.com/</a></p>
+    </footer>
+</body>
+</html>