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

Finished layout for mobile

Browse Source
This commit is contained in:
Cyper
2025-07-19 02:20:30 -04:00
parent 705dca45b5
commit 6f56318376
2 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/css/style.css
View File

@ -70,9 +70,22 @@ nav {
align-items: center;
justify-content: space-between;
}
nav > div:first-child {
margin-left: 1.25rem;
}
nav > div:last-child {
margin-right: 1rem;
}
nav > * {
width: 33.33%;
}
nav .hamburger {
border: none;
background-color: transparent;
}
nav .hamburger ion-icon {
margin-top: 0.15rem;
}
.nav-logo > img {
width: 64px;
height: 64px;
@ -112,6 +125,12 @@ nav > * {
.nav-hyperlinks ion-icon {
font-size: 28px;
}
.nav-hyperlinks li:not([data-mobile]) {
display: none;
}
.nav-hyperlinks li[data-mobile] {
display: list-item;
}
.nav-hyperlinks a span {
display: inline-block;
@ -210,7 +229,7 @@ footer ul li:last-child {
flex-grow: 1;
}
.footer-links > :last-child {
margin-left: rem;
margin-left: 2rem;
}
/* -xs */
@ -230,6 +249,16 @@ footer ul li:last-child {
.container {
max-width: 960px;
}
nav > div:first-child,
nav > div:last-child {
margin: 0;
}
.nav-hyperlinks li[data-mobile] {
display: none;
}
.nav-hyperlinks li:not([data-mobile]) {
display: list-item;
}
.flex-adaptive {
flex-direction: row;
}

7
src/_includes/layout.html
View File

@ -18,7 +18,7 @@
</head>
<body>
<header>
<nav class="container h-100">
<nav class="container h-100" aria-label="Main nav">
<div class="nav-logo">
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
</div>
@ -27,6 +27,11 @@
</div>
<div class="nav-hyperlinks">
<ul>
<li data-mobile>
<button class="hamburger" aria-label="Toggle menu">
<ion-icon name="menu-sharp"></ion-icon>
</button>
</li>
<li>
<a href="/">
<ion-icon name="home-sharp"></ion-icon>