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