fix layout in chrome
This commit is contained in:
parent
a26b816e28
commit
89d9a825e4
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue