updates stule header

damianodamiani · Jun 3, 2024 · 3dad937 · 3dad937
1 parent ffea598
commit 3dad937
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 31 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,22 +1,17 @@
----
-layout: default
----
-<div class="splash">
-    <div class="splash-content">
-        <img src="{{ '/assets/images/logo.png' | relative_url }}" alt="Project Logo">
-        <h1>ChinaComX</h1>
-        <p>Exploring beyond the Silk Road</p>
-        <a href="#posts" class="scroll-down">&#8595;</a>
-    </div>
-</div>
-<section id="posts" class="content">
-    <div class="container">
-        <h2>Latest Posts</h2>
-        {% for post in site.posts %}
-            <article>
-                <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
-                <p>{{ post.excerpt }}</p>
-            </article>
-        {% endfor %}
-    </div>
-</section>
+<!DOCTYPE html>
+<html lang="en" class="home">
+<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/style.css' | relative_url }}">
+</head>
+<body class="home">
+    {% include header.html %}
+    <main>
+        {{ content }}
+    </main>
+    {% include footer.html %}
+    <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+</body>
+</html>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -13,12 +13,15 @@ header {
     width: 100%;
     top: 0;
     left: 0;
-    display: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 1000;
     transition: top 0.3s;
 }
 
+header.hide {
+    display: none;
+}
+
 header.show {
     display: block;
 }
@@ -80,7 +83,7 @@ header nav ul li a {
 }
 
 .content {
-    padding: 2em 0;
+    padding: 4em 0 2em;
 }
 
 footer {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,10 +1,16 @@
 document.addEventListener("DOMContentLoaded", function() {
     const header = document.getElementById("header");
-    window.addEventListener("scroll", function() {
-        if (window.scrollY > 0) {
-            header.classList.add("show");
-        } else {
-            header.classList.remove("show");
-        }
-    });
+    if (document.body.classList.contains('home')) {
+        window.addEventListener("scroll", function() {
+            if (window.scrollY > 0) {
+                header.classList.remove("hide");
+                header.classList.add("show");
+            } else {
+                header.classList.remove("show");
+                header.classList.add("hide");
+            }
+        });
+    } else {
+        header.classList.add("show");
+    }
 });
diff --git a/index.html b/index.html
@@ -2,3 +2,22 @@
 layout: home
 title: Home
 ---
+<div class="splash">
+    <div class="splash-content">
+        <img src="{{ '/assets/images/logo.png' | relative_url }}" alt="Project Logo">
+        <h1>ChinaComX</h1>
+        <p>Comics Culture in the People's Republic of China</p>
+        <a href="#posts" class="scroll-down">&#8595;</a>
+    </div>
+</div>
+<section id="posts" class="content">
+    <div class="container">
+        <h2>Latest Posts</h2>
+        {% for post in site.posts %}
+            <article>
+                <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
+                <p>{{ post.excerpt }}</p>
+            </article>
+        {% endfor %}
+    </div>
+</section>