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 @@
-
\ No newline at end of file
+
+
\ 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 @@
{% include "components/scripts.liquid" %}
-