ページリストのデザイン
タイトルデザイン【kame】
code:style.css
/*bottom: 43px;*/
}
background-color: transparent;
border-bottom: 2px solid #fff; }
font-family: 'jost';
font-style: italic;
font-weight: 500;
/*font-size: 5.3em;*/
padding: 13px 18px 0px 24px;
letter-spacing: 8px;
display: inline;
background-image: linear-gradient(to right, #646262 50%, #000 50%); }
/* color: var(--exist-color); */
}
タイトルデザイン【ピン止め】
code:style.css
.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 a .icon img{display:none;}
.grid li.pin a .description{display:none;}
タイトルデザイン【一般】
code:style.css
.grid li.pin a .title{
color: transparent;
-webkit-background-clip: text;
/* background-image: linear-gradient(to right,#000 50%,#8c8b8b 50%); */
background-image: linear-gradient(to right, var(--non-exist-color) 50%, #4d4d4d 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;
}
body{ /* カードの下部影 */
--card-box-shadow:none;
--card-box-hover-shadow:none;
}
タイトルデザイン【未読】
code:style.css
.grid li.page-list-item.unread a{
}
.grid li.page-list-item.unread a:hover{
outline: 3px solid var(--non-exist-color);
}
タイトルデザイン【画面サイズ中】
code:style.css
@media (767 <= width < 992px){
.page-list .grid li.pin{
padding: 0 7px;
margin: 0 0 1.1em 0;
}
object-position: 0 -140px;
}
}
タイトルデザイン【画面サイズ小】
code:non-used-style.css
@media (width < 767px){
.page-list .grid li.pin{
width: 50%;
height: 120px;
}
.page-list .grid li.pin:nth-of-type(2){height: 120px;}
font-size: 4.4em;
}
background-position: -75px -15px;
background-size: 75%;
}
}
code:not-used.css
@media (max-width: 450px){ /* スマホでのみ表示(左上のKamonが消えるため) */
.navbar .navbar-brand::before{
content: "🐢";
}
}
タイトルデザイン【その他】
code:style.css
.brand-icon{display: none;}
.navbar{
box-shadow:none;
}
.page{box-shadow:none;}
code:not-used.css
.grid li.page-list-item a .icon img {
display: block;
width: 100%;
margin: 0 auto;
border-radius: 5px;
}
/* 基本スタイル */
.grid li.page-list-item a .title {
display: inline-block; /* インラインブロック表示に設定 */
padding: 5px 10px; /* パディング */
background: linear-gradient(to right, gray, gray); /* 初期背景色は灰色 */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: #FCFCF5; /* WebKitブラウザでテキストを透明に */ background-size: 0% 100%; /* 初期状態では背景グラデーションを見えなくする */
background-repeat: no-repeat;
transition: background-size 0.5s ease-in-out; /* アニメーション設定 */
text-align: center; /* テキストを中央揃え */
font-size: 14px;
}
/* ホバー時のスタイル */
.page-list-item.grid-style-item:hover a .title {
background-image: linear-gradient(to right, gray, black); /* ホバー時に灰色から緑色へ変化 */
background-size: 100% 100%; /* グラデーションを全体に広げる */
}
.grid li.page-list-item a .header {
width: 100%;
text-overflow: ellipsis;
border-top: var(--card-title-bg, #f2f2f3) solid 4px; padding: 10px 12px;
text-align: center;
}
.grid li.page-list-item a .content {
height: calc(100% - 5px);
display: flex;
flex-direction: column;
overflow: hidden;
}