agnes/cheesy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 📱 improve mobile styling

Browse source
This commit is contained in:
m5ka 2024-03-25 14:24:20 +00:00
parent e012e32731
commit bb0202dd4c
1 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
moku/static/css/moku.css
View file

@ -27,7 +27,7 @@ body {
line-height: 1.4; line-height: 1.4;
max-width: 768px; max-width: 768px;
margin-inline: auto; margin-inline: auto;
padding: 4rem 1.2rem 2.4rem 1.2rem; padding: 2.4rem 1.2rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} }
@ -83,7 +83,6 @@ a:hover, button.logout:hover {
.profile h2 { .profile h2 {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: bold; font-weight: bold;
margin-block-end: .6rem;
color: var(--orange); color: var(--orange);
} }
@ -241,9 +240,6 @@ form button[type=submit]:not(.logout) {
header { header {
display: grid; display: grid;
grid-template-columns: auto 1fr;
column-gap: 2.4rem;
align-items: center;
margin-block-end: 2.4rem; margin-block-end: 2.4rem;
} }
@ -255,15 +251,12 @@ header h1 {
header nav ul { header nav ul {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
column-gap: 1.2rem; column-gap: 1.2rem;
} }
.grid-content { .grid-content {
display: grid; display: grid;
grid-template-columns: 214px 1fr; row-gap: 1.2rem;
column-gap: 2.4rem;
align-items: flex-start;
} }
.grid-content main { .grid-content main {
@ -323,3 +316,26 @@ header nav ul {
padding-inline-start: 3.4rem; padding-inline-start: 3.4rem;
border-left: 2px solid var(--tangerine); border-left: 2px solid var(--tangerine);
} }
@media(min-width: 768px) {
body {
padding: 4rem 1.2rem 2.4rem 1.2rem;
}
header {
grid-template-columns: auto 1fr;
column-gap: 2.4rem;
align-items: center;
}
header nav ul {
justify-content: flex-end;
}
.grid-content {
grid-template-columns: 214px 1fr;
column-gap: 2.4rem;
row-gap: 0;
align-items: flex-start;
}
}