グリッドとリストアイテム
#UserCSS
ページリストのグリッドアイテム
code:style.css
.grid li.pin a{
width: 100%;
outline: none;
background-color: transparent;
}
.grid li.page-list-item a .pin{
display:none;
}
.grid li.pin a .content{
height: 100%;
flex-direction: row-reverse;
background-color: #ebe9e8;
}
.page-list .grid li {
margin: 0 0 1.4em 0;
box-shadow: none;
}
.page-list .grid li{
margin: 0 0 1.4em 0;
box-shadow: none;
}
.related-page-list {
padding: 0 3px;
}
.grid li.page-list-item a{
border-radius: 5px ;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.grid li.page-list-item a:hover{
border-radius: 5px;
}
/* --- アウトライン --- */
.grid li.page-list-item:not(.pin) a{outline: 3px solid #efefef;}
.grid li.page-list-item:not(.pin) a:hover{outline: 3px solid var(--non-exist-color);}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img{
width: auto;
max-height: 360px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item a .hover{background: transparent;}
data-hover-visible .grid li.page-list-item.pin a:hover .hover {
opacity: 0;
}
背景画像の埋め込み
code:style.css
.grid li.pindata-page-title="kame":first-of-type a .content{
/* background-image: url(https://scrapbox.io/files/65a281ba6e27c5002599dde5.png); */
/* background-image: url(https://scrapbox.io/files/65a281cdafa1fd0023d93700.png); */
background-image: url(https://scrapbox.io/files/65a286d0244f550024cb5218.png);
background-position: 20px 40px;
background-size: 60%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pindata-page-title="kame":first-of-type a:hover .content{
background-size: 91%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.grid li.pin a .content{
background-position: center;
background-size: 60%;
/* background-color: #fafafa; */
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pin a:hover .content{
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}