Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Finished initial individual post layout
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Cyper
2025-08-22 23:20:15 -04:00
parent abb4861389
commit d6439e36d7
7 changed files with 91 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/css/posts.css
View File

@ -2,6 +2,25 @@
margin-bottom: 2rem; 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 { .posts {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;

38
public/js/navbar.js Normal file
View File

@ -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);

3
src/_includes/components/scripts.liquid
View File

@ -1,2 +1,3 @@
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <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> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="/js/navbar.js"></script>

41
src/_includes/layout.liquid
View File

@ -23,46 +23,5 @@
</footer> </footer>
{% include "components/scripts.liquid" %} {% 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> </body>
</html> </html>

30
src/_includes/post-layout.liquid Normal file
View File

@ -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>

2
src/about.liquid
View File

@ -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. 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>
<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> </p>
</div> </div>
</div> </div>

2
src/post/post.json
View File

@ -1,4 +1,4 @@
{ {
"layout": "layout.liquid", "layout": "post-layout.liquid",
"tags": "posts" "tags": "posts"
} }