bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile nav

Browse source
This commit is contained in:
bronkuu 2026-04-28 10:35:59 +02:00
parent e240ea01e9
commit 189802f82b
1 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

29
style.css
View file

@ -14,7 +14,6 @@ nav {
backdrop-filter: blur(var(--backdrop-blur)); backdrop-filter: blur(var(--backdrop-blur));
background-color: color-mix(in srgb, var(--surface), transparent 20%); background-color: color-mix(in srgb, var(--surface), transparent 20%);
padding: 1rem; padding: 1rem;
height: var(--nav-height);
} }
nav > div { nav > div {
@ -24,17 +23,40 @@ nav > div {
/* content inside */ /* content inside */
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr;
align-items: center; align-items: center;
@media (max-width: 768px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}
& :last-child { & :last-child {
justify-self: end justify-self: end
} }
& > .btn {
@media (max-width: 768px) {
grid-column: 2;
grid-row: 1;
}
}
& > div { & > div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
@media (max-width: 768px) {
grid-row: 2;
grid-column: 1/ span 2;
display: flex;
justify-content: center;
align-items: center;
}
& > a { & > a {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--on-background); color: var(--on-background);
@ -56,6 +78,7 @@ nav > div {
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
} }
} }
} }
} }
@ -63,10 +86,6 @@ nav > div {
.hero { .hero {
max-width: var(--max-content-width); max-width: var(--max-content-width);
height: 800px; height: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& > div { & > div {
display: grid; display: grid;