fix layout in chrome

This commit is contained in:
yequari 2024-10-03 09:51:21 -07:00
parent a26b816e28
commit 89d9a825e4
2 changed files with 14 additions and 34 deletions

View File

@ -46,7 +46,10 @@
.index-wrapper { .index-wrapper {
display: grid; display: grid;
grid-template-columns: repeat(10, 10% [col-start]); grid-template-columns: repeat(10, 10% [col-start]);
grid-template-rows: repeat(6, 33% [row-start]); grid-template-rows: 50% 50%;
grid-template-areas:
"content content content content content content recent recent recent recent"
"interests interests interests interests blog blog blog blog social social";
} }
.box { .box {
@ -61,18 +64,15 @@ li.note-item {
} }
.index-content { .index-content {
grid-row: 1 / 2; grid-area: content;
grid-column: 1 / span 6;
} }
.index-social { .index-social {
grid-row: 2 / 3; grid-area: social;
grid-column: 9 / span 2;
} }
.index-blog { .index-blog {
grid-row: 2 / 3; grid-area: blog;
grid-column: 5 / span 4;
} }
.index-banners { .index-banners {
@ -81,8 +81,7 @@ li.note-item {
} }
.index-recent { .index-recent {
grid-row: 1 / 2; grid-area: recent;
grid-column: 7 / span 4;
} }
.index-bookmarks { .index-bookmarks {
@ -90,30 +89,10 @@ li.note-item {
grid-column: 6 / span 5; grid-column: 6 / span 5;
} }
@media only screen and (max-width: 700px) { @media only screen and (max-width: 500px) {
.box { .index-wrapper {
grid-column: 1 / 6; display: flex;
} flex-flow: row wrap;
.index-content {
grid-row: 1 / 2;
}
.index-recent {
grid-row: 2 / 3;
}
.index-banners {
grid-row: 3 / 4;
}
.index-social {
grid-row: 4 / 5;
}
.index-blog {
grid-row: 5 / 6;
} }
} }

View File

@ -257,7 +257,8 @@ nav li {
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
} }
nav li:hover { nav li:hover,
nav li:active {
animation: 0.2s ease-in 1 forwards spotlight; animation: 0.2s ease-in 1 forwards spotlight;
outline: 1px solid rgba(255, 255, 255, 0.2); outline: 1px solid rgba(255, 255, 255, 0.2);
background-clip: border-box; background-clip: border-box;