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

mobile layout work

Browse source
This commit is contained in:
bronku 2026-06-09 19:02:42 +02:00
parent 9ff9e59a8c
commit 94bc964e34
11 changed files with 348 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

175
css/layout.css
View file

@ -16,18 +16,31 @@ body > nav {
width: 20rem;
}
@media (max-width: 1024px) {
& img {
width: 14rem;
}
}
@media (max-width: 768px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
gap: 0.5rem;
& img {
width: 12rem;
}
& > .btn {
grid-column: 2;
grid-row: 1;
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
}
& > :last-child {
justify-self: end
justify-self: end;
}
& > div {
@ -35,93 +48,99 @@ body > nav {
align-items: center;
gap: 2rem;
@media (max-width: 1024px) {
gap: 1rem;
& > a {
font-size: 1rem;
}
}
@media (max-width: 768px) {
display: flex;
align-items: center;
justify-content: center;
grid-row: 2;
grid-column: 1/ span 2;
}
grid-column: 1 / span 2;
gap: 0.75rem;
flex-wrap: wrap;
& > a {
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
color: var(--on-background);
& > a {
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
color: var(--on-background);
&[href] {
font-weight: 200;
transition: color 0.2s;
&[href] {
font-weight: 200;
transition: color 0.2s;
&:hover {
color: var(--primary);
&:hover {
color: var(--primary);
}
}
@media (max-width: 768px) {
font-size: 0.875rem;
white-space: nowrap;
}
}
/* The main selected link doesn't have a href attribute, so we can use that for styles */
&:not([href]) {
padding-bottom: 8px;
color: var(--primary);
border-bottom: 2px solid var(--primary);
}
}
}
}
footer {
display: grid;
grid-template-columns: 3fr 2fr 2fr;
gap: 1rem;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
& > :first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
& p {
font-size: 0.875rem;
}
& > :last-child {
font-size: 0.75rem;
font-weight: lighter;
}
}
& > :nth-child(2) a {
align-items: flex-start;
flex-direction: column;
}
& a {
font-size: 0.875rem;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-start;
margin: 1rem 0;
text-decoration: none;
color: var(--on-background);
& > div {
display: flex;
align-items: center;
justify-content: center;
}
}
& h4 {
color: var(--primary);
}
& svg {
margin-right: 0.5rem;
}
}
}
footer {
display: grid;
grid-template-columns: 3fr 2fr 2fr;
gap: 1rem;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
& > :first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
& p {
font-size: 0.875rem;
}
& > :last-child {
font-size: 0.75rem;
font-weight: lighter;
}
}
& > :nth-child(2) a {
align-items: flex-start;
flex-direction: column;
}
& a {
font-size: 0.875rem;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-start;
margin: 1rem 0;
text-decoration: none;
color: var(--on-background);
& > div {
display: flex;
align-items: center;
justify-content: center;
}
}
& h4 {
color: var(--primary);
}
& svg {
margin-right: 0.5rem;
}
}