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

7
src/_includes/layout.html
View File

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