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

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

Browse Source
This commit is contained in:
Cyper
2025-07-26 21:50:14 -04:00
parent 6c1af5a098
commit 4ee6c9519c
2 changed files with 158 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
public/css/style.css
View File

@ -65,25 +65,25 @@ footer {
height: 100%;
}
nav {
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav > div:first-child {
.nav > div:first-child {
margin-left: 1.25rem;
}
nav > div:last-child {
.nav > div:last-child {
margin-right: 1rem;
}
nav > * {
.nav > * {
width: 33.33%;
}
nav .hamburger {
.nav .hamburger {
border: none;
background-color: transparent;
}
nav .hamburger ion-icon {
.nav .hamburger ion-icon {
margin-top: 0.15rem;
}
.nav-logo > img {
@ -131,7 +131,6 @@ nav .hamburger ion-icon {
.nav-hyperlinks li[data-mobile] {
display: list-item;
}
.nav-hyperlinks a span {
display: inline-block;
overflow: hidden;
@ -140,11 +139,94 @@ nav .hamburger ion-icon {
transition: max-width 0.25s linear;
margin-left: 0.25rem;
}
.nav-hyperlinks a:hover span {
max-width: 100px;
}
.mobile-nav {
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
top: 0;
right: 0;
width: 400px;
border-left: var(--borders);
transform: translateX(100%);
transition: transform 0.25s ease-in-out;
z-index: 1000;
/* I want the background to be white with a tan overlay.
* TODO: see if there's a way to do this without linear-gradient so I can change the base "white" color for dark mode */
background-color: white;
background-image: linear-gradient(rgba(var(--tan), 0.12), rgba(var(--tan), 0.12));
background-blend-mode: multiply;
}
.mobile-nav.show {
transform: none;
}
.mobile-nav .hamburger {
border: none;
background-color: transparent;
}
.mobile-nav .hamburger ion-icon {
margin-top: 0.15rem;
font-size: 28px;
}
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(var(--tan), 1);
width: 100%;
padding: 1rem;
}
.mobile-nav-header h1 {
font-size: 1.5rem;
font-weight: 600;
}
.mobile-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav ul li {
border-bottom: var(--borders);
}
.mobile-nav ul li:first-child {
border-top: var(--borders);
}
.mobile-nav ul li:hover {
background-color: rgba(var(--lightblue), .52);
}
.mobile-nav ul li a {
text-decoration: none;
color: rgba(var(--black), .52);
display: flex;
align-items: center;
padding: 0.5rem;
}
.mobile-nav ul li span {
margin-left: 0.5rem;
}
.mobile-nav-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgb(var(--black));
opacity: 0;
z-index: 999;
transition: opacity 0.25s ease-in-out;
}
.mobile-nav-backdrop.show {
opacity: 0.5;
}
nav li[data-mobile] {
cursor: pointer;
}
.flex-adaptive {
display: flex;
flex-direction: column-reverse;

70
src/_includes/layout.html
View File

@ -44,7 +44,7 @@
</head>
<body>
<header>
<nav class="container h-100" aria-label="Main nav">
<nav class="container nav h-100" aria-label="Main nav">
<div class="nav-logo">
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
</div>
@ -79,6 +79,35 @@
</ul>
</div>
</nav>
<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
<div class="mobile-nav-header">
<h1>{{ metadata.title }}</h1>
<button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
<ion-icon name="close-sharp"></ion-icon>
</button>
</div>
<div class="mobile-nav-links">
<ul>
<li>
<a href="/">
<ion-icon name="home-sharp"></ion-icon>
<span>Home</span>
</a>
</li>
<li>
<a href="/posts">
<ion-icon name="newspaper-sharp"></ion-icon>
<span>Posts</span>
</a>
</li>
<li>
<a href="/about">
<ion-icon name="help-circle-sharp"></ion-icon>
<span>About</span>
</a>
</li>
</ul>
</div>
</header>
<main>
<div>
@ -176,7 +205,44 @@
<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>
document.getElementById('mobile-nav-btn').addEventListener('click', () => alert('Not yet implemented!'));
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>