Top items UserCSS
code:style.css
/* position */
div.page-list .grid li.page-list-item.pin:nth-child(1),
div.page-list .grid li.page-list-item.pin:nth-child(2),
div.page-list .grid li.page-list-item.pin:nth-child(3),
div.page-list .grid li.page-list-item.pin:nth-child(4) {
position: absolute;
top: -115px;
}
div.page-list .grid li.page-list-item.pin:nth-child(1) {
left: 0;
}
div.page-list .grid li.page-list-item.pin:nth-child(2) {
left: 25vw;
}
div.page-list .grid li.page-list-item.pin:nth-child(3) {
right: 25vw;
}
div.page-list .grid li.page-list-item.pin:nth-child(4) {
right: 0;
}
@media (min-width: 960px) {
div.page-list .grid li.page-list-item.pin:nth-child(2) {
left: 248px;
}
div.page-list .grid li.page-list-item.pin:nth-child(3) {
right: 248px;
}
}
code:style.css
background: none;
width: 25vw;
height: 50px;
max-width: 270px;
margin-bottom: 30px;
padding-bottom: 5px;
box-sizing: content-box;
border-bottom: solid 1px #CCC; }
border: none;
}
.header {
display: flex;
justify-content: center;
align-items: center;
border: none;
margin: 0;
}
text-align: center;
}
display: none;
}
code:style.css
/* page-list-item hover animation */
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: gray;
height: 1px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
div.page-list .grid li.page-list-item ahref$="/Member" .title:hover:before, div.page-list .grid li.page-list-item ahref$="/Member" .title:focus:before, div.page-list .grid li.page-list-item ahref$="/Member" .title:active:before, left: 0;
right: 0;
}
code:style.css
@media (max-width: 580px) {
width: 25vw;
}
}