ピン止めのカードをいい感じにするUserCSS
code:style.css
/*.page-list .grid li.pin{
/* width: 20%;
/* height: 150px;
/* padding: 0 10px;
/*}
/*.page-list .grid li.pin:first-of-type{
/* width: 80%;
/* height: 200px;
/*}
/*.page-list .grid li.pin:nth-of-type(2){
/* height: 200px;
/*}
/*.page-list .grid li.pin:nth-of-type(7){
/* margin-bottom: 7em;
}/*
.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;
}
.grid li.pin a .content {
background-position: center;
background-size: 100%;
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;
}
/* --- タイトルデザイン --- */
.grid li.page-list-item a .header.pinned{
position: absolute;
bottom: 25px;
right: 0;
padding:0;
width: auto;
display:block;
z-index: 2;
}
.grid li.pin:first-of-type a .header.pinned{
bottom: 43px;
}
.grid li.pin a .title{
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right,#f55600 50%,#606060 50%);
background-size: 200% 100%;
background-position-x: 100%;
padding: 0 5px 0 7px;
width:auto;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pin a:hover .title{
background-position-x: 0;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.grid li.pin:first-of-type a .header.pinned{
background-color: transparent;
}
.grid li.pin:first-of-type a .title{
font-family:'jost';
font-style: italic;
font-weight: 0;
/*font-size: 0.4em;*/
padding: 13px 18px 0px 24px;
letter-spacing: 8px;
display: inline;
background-image: linear-gradient(to right,#f55600 50%,#E6E6E6 50%);
}
.grid li.pin a .icon img{display:none;}
.grid li.pin a .description{display:none;}