Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust main layout order and width

This commit is contained in:
Helen Chong 2024-04-13 16:52:07 +08:00
parent c798748550
commit f3880aa31e
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/assets/css/main.css
View File

@ -259,7 +259,7 @@ article:not(.divided-article),
} }
article, .content-container { article, .content-container {
order: 1; order: 2;
} }
.sidebar--sticky { .sidebar--sticky {
@ -275,7 +275,7 @@ article, .content-container {
} }
.left-sidebar { .left-sidebar {
order: 2; order: 1;
} }
.right-sidebar { .right-sidebar {
@ -290,11 +290,21 @@ article, .content-container {
/* Tablet main content layout */ /* Tablet main content layout */
@media only screen and (min-width: 43.75rem) { @media only screen and (min-width: 43.75rem) {
main { main {
width: 43.75rem;
}
}
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
main {
width: 60rem;
display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
} }
aside { aside {
width: 10rem; width: 12rem;
} }
article, .content-container { article, .content-container {
@ -311,23 +321,13 @@ article, .content-container {
} }
} }
/* Desktop main content layout */ @media only screen and (min-width: 80rem) {
@media only screen and (min-width: 60rem) {
main { main {
width: 60rem; width: 75rem;
display: flex;
flex-direction: row;
justify-content: center;
} }
aside { aside {
width: 12rem; width: 15rem;
}
}
@media only screen and (min-width: 65rem) {
main {
width: 65rem;
} }
} }