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;