jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-24 23:20:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adjust avatar layout using container queries

Browse Source
This commit is contained in:
Tim
2025-07-17 16:10:10 +08:00
parent 36b53aa1a8
commit a57fc91e93
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
open-isle-cli/src/views/HomePageView.vue
View File

@@ -331,6 +331,9 @@ export default {
flex-direction: column;
align-items: center;
overflow-y: auto;
/* enable container queries */
container-type: inline-size;
container-name: home-page;
/* width variables shared between header and article rows */
--main-width: 60%;
--avatars-width: 20%;
@@ -529,7 +532,24 @@ export default {
opacity: 0.7;
}
@container home-page (min-width: 900px) {
@container home-page (max-width: 900px) {
.home-page {
--main-width: 65%;
--avatars-width: 15%;
}
.article-member-avatar-item:nth-child(n+4) {
display: none;
}
}
@container home-page (max-width: 768px) {
.home-page {
--main-width: 70%;
--avatars-width: 10%;
}
.article-member-avatar-item:nth-child(n+2) {
display: none;
}
}
</style>