From d6439e36d76823029f16d329dd89a2516efaaca8 Mon Sep 17 00:00:00 2001
From: Cyper <cyperita@gmail.com>
Date: Fri, 22 Aug 2025 23:20:15 -0400
Subject: [PATCH] feat: Finished initial individual post layout

---
 public/css/posts.css                    | 19 ++++++++++++
 public/js/navbar.js                     | 38 +++++++++++++++++++++++
 src/_includes/components/scripts.liquid |  3 +-
 src/_includes/layout.liquid             | 41 -------------------------
 src/_includes/post-layout.liquid        | 30 ++++++++++++++++++
 src/about.liquid                        |  2 +-
 src/post/post.json                      |  2 +-
 7 files changed, 91 insertions(+), 44 deletions(-)
 create mode 100644 public/js/navbar.js
 create mode 100644 src/_includes/post-layout.liquid

diff --git a/public/css/posts.css b/public/css/posts.css
index 9764e42..78fcbbe 100644
--- a/public/css/posts.css
+++ b/public/css/posts.css
@@ -2,6 +2,25 @@
   margin-bottom: 2rem;
 }
 
+.post-layout {
+  display: flex;
+  flex-direction: column;
+}
+.post-layout main {
+  flex: 1;
+}
+.post-layout main .thumbnail {
+  width: 100%;
+  height: 375px;
+  object-fit: contain;
+  object-position: center;
+}
+.post-layout main > div {
+  background-color: rgba(255, 255, 255, .71);
+  padding: 2rem;
+  height: 100%;
+}
+
 .posts {
   display: grid;
   grid-template-columns: 1fr;
diff --git a/public/js/navbar.js b/public/js/navbar.js
new file mode 100644
index 0000000..35ce236
--- /dev/null
+++ b/public/js/navbar.js
@@ -0,0 +1,38 @@
+const mobileNav = document.getElementById('mobile-nav');
+
+function toggleMobileNav() {
+  if (mobileNav.classList.contains('show')) {
+    removeBackdrop()
+  } else {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'mobile-nav-backdrop';
+    document.body.appendChild(backdrop);
+    backdrop.addEventListener('click', () => {
+      mobileNav.classList.remove('show');
+      removeBackdrop();
+    });
+    setTimeout(() => backdrop.classList.add('show'), 10);
+  }
+  mobileNav.classList.toggle('show');
+}
+
+function removeBackdrop() {
+  const backdrop = document.querySelector('.mobile-nav-backdrop');
+  if (backdrop) {
+    backdrop.classList.remove('show');
+    setTimeout(() => {
+      backdrop.remove();
+    }, 250);
+  }
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    if (mobileNav.classList.contains('show')) {
+      mobileNav.classList.remove('show');
+      removeBackdrop();
+    }
+  }
+});
+document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
+document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
\ No newline at end of file
diff --git a/src/_includes/components/scripts.liquid b/src/_includes/components/scripts.liquid
index 3f98e63..f8f91e6 100644
--- a/src/_includes/components/scripts.liquid
+++ b/src/_includes/components/scripts.liquid
@@ -1,2 +1,3 @@
 <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
\ No newline at end of file
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="/js/navbar.js"></script>
\ No newline at end of file
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
index d5b2ca1..d8c2fbe 100644
--- a/src/_includes/layout.liquid
+++ b/src/_includes/layout.liquid
@@ -23,46 +23,5 @@
   </footer>
 
   {% include "components/scripts.liquid" %}
-  <script>
-    // TODO: move to script file
-    const mobileNav = document.getElementById('mobile-nav');
-    
-    function toggleMobileNav() {
-      if (mobileNav.classList.contains('show')) {
-        removeBackdrop()
-      } else {
-        const backdrop = document.createElement('div');
-        backdrop.className = 'mobile-nav-backdrop';
-        document.body.appendChild(backdrop);
-        backdrop.addEventListener('click', () => {
-          mobileNav.classList.remove('show');
-          removeBackdrop();
-        });
-        setTimeout(() => backdrop.classList.add('show'), 10);
-      }
-      mobileNav.classList.toggle('show');
-    }
-
-    function removeBackdrop() {
-      const backdrop = document.querySelector('.mobile-nav-backdrop');
-      if (backdrop) {
-        backdrop.classList.remove('show');
-        setTimeout(() => {
-          backdrop.remove();
-        }, 250);
-      }
-    }
-
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape') {
-        if (mobileNav.classList.contains('show')) {
-          mobileNav.classList.remove('show');
-          removeBackdrop();
-        }
-      }
-    });
-    document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
-    document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
-  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/_includes/post-layout.liquid b/src/_includes/post-layout.liquid
new file mode 100644
index 0000000..0c2d1e3
--- /dev/null
+++ b/src/_includes/post-layout.liquid
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  
+  {% include "components/meta-tags.liquid" %}
+  {% include "components/headers.liquid" %}
+
+  <link rel="stylesheet" href="/css/posts.css">
+
+  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
+</head>
+<body class="post-layout">
+  <header>
+    {% include "components/navbars.liquid" %}
+  </header>
+  <main>
+    <div class="container">
+      <h1>{{ title }}</h1>
+      <p class="timestamp">{{ date | date: "%B %-d, %Y" }}</p>
+      <img class="thumbnail" src="{{ thumbnail }}">
+      {{ content }}
+    </div>
+  </main>
+  <footer>
+    {% include "components/footer.liquid" %}
+  </footer>
+
+  {% include "components/scripts.liquid" %}
+</body>
+</html>
\ No newline at end of file
diff --git a/src/about.liquid b/src/about.liquid
index 3945642..2f8ef6e 100644
--- a/src/about.liquid
+++ b/src/about.liquid
@@ -31,7 +31,7 @@ css: about.css
         help even one person or introduce a new perspective to someone, then this blog has served its purpose and I can be happy.
       </p>
       <p>
-        While this blog isn't my "safe space" per se, it is a place where I will express my unfiltered thoughts and opinions. I encourage everyone else to do the same, and to please be respectful of others' opinions while doing so.
+        This blog is a place where I will express my unfiltered thoughts and opinions. I encourage everyone else to do the same, and to please be respectful of others' opinions while doing so.
       </p>
     </div>
   </div>
diff --git a/src/post/post.json b/src/post/post.json
index c218dfe..a043ebd 100644
--- a/src/post/post.json
+++ b/src/post/post.json
@@ -1,4 +1,4 @@
 {
-  "layout": "layout.liquid",
+  "layout": "post-layout.liquid",
   "tags": "posts"
 }
\ No newline at end of file