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 {
display: grid;
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 {
@ -61,18 +64,15 @@ li.note-item {
}
.index-content {
grid-row: 1 / 2;
grid-column: 1 / span 6;
grid-area: content;
}
.index-social {
grid-row: 2 / 3;
grid-column: 9 / span 2;
grid-area: social;
}
.index-blog {
grid-row: 2 / 3;
grid-column: 5 / span 4;
grid-area: blog;
}
.index-banners {
@ -81,8 +81,7 @@ li.note-item {
}
.index-recent {
grid-row: 1 / 2;
grid-column: 7 / span 4;
grid-area: recent;
}
.index-bookmarks {
@ -90,30 +89,10 @@ li.note-item {
grid-column: 6 / span 5;
}
@media only screen and (max-width: 700px) {
.box {
grid-column: 1 / 6;
}
.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;
@media only screen and (max-width: 500px) {
.index-wrapper {
display: flex;
flex-flow: row wrap;
}
}

View File

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