ノマへの扉旧デザイン
>旧デザイン↓
色
🔧は
が追加した変数です
---.css:root{
--body-bg: #3A434C; /* 全体背景 */
--navbar-bg: #25292c; /* ヘッダー背景 */
--tool-text-color: #b7bdc5; /* タイトル */
--new-button-vertical-color: #f5b901; /* +ボタン */
--new-button-horizontal-color: #f5b901; /* +ボタン */
--new-button-bg: transparent; /* +ボタン背景 */
--new-button-hover-bg: #45494b; /* +ボタン背景ホバー */
--new-button-active-bg: #45494b; /* +ボタン背景クリック */
--card-bg: #F5B901; /* サムネ背景 */
--card-title-bg: #22272B; /* 🔧サムネヘッダー背景 */
--card-title-color: #e3e3e3; /* サムネタイトル */
--card-description-color: #22272b; /* description */
--card-header-bg-pinned: #f5b901; /* 🔧ピンヘッダー背景 */
--card-content-bg: #22272b; /* 🔧ピンコンテンツ背景 */
--card-title-color-pinned: #22272b; /* 🔧ピンタイトル */
--card-description-color-pinned: #858d93; /* 🔧ピンdescription */
--icon-shadow-pinned: #000000; /* 🔧ピンアイコン_ロングシャドウ */
--icon-shadow: #c0940e; /* 🔧アイコン_ロングシャドウ */
} ホーム
ピン
---.css .grid li.page-list-item a .pin{display:none;}
.page-list .grid li.pin{margin-bottom: 2.5em;}
.page-list .grid li.pin:after{
content: "...";
letter-spacing: 1em;
text-indent: 1em;
color: #a9a9a9;
font-size: 1em;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.3em;
}
.container .grid li.pin a .content{
flex-direction: column;
background: var(--card-content-bg);
}
.grid li.page-list-item a .header.pinned {background-color: var(--card-header-bg-pinned);}
.grid li.page-list-item a .header.pinned .title{color: var(--card-title-color-pinned);}
.container .grid li.pin a .description{color: var(--card-description-color-pinned);}
サムネのデザイン
---.css.grid li.page-list-item a{
border-radius: 5px;
}
.grid li.page-list-item a .content{
height: 100%;
flex-direction: column-reverse;
}
.grid li.page-list-item a .header{
background-color: var(--card-title-bg);
padding: 8px 10px;
border-top: none;
}
.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: 90px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
font-family: 'Zen Kaku Gothic New';
font-weight: 500;
letter-spacing: 0.05em;
text-indent: 0.05em;
} ロングシャドウ
---.css/* 影が飛び出るのでレイヤ―指定して被せる */
.grid li.page-list-item a .header{
z-index: 2;
}
.grid li.page-list-item a .icon img{
filter:
drop-shadow(1px 1px 0 var(--icon-shadow))
drop-shadow(2px 2px 0 var(--icon-shadow))
drop-shadow(4px 4px 0 var(--icon-shadow))
drop-shadow(8px 8px 0 var(--icon-shadow))
drop-shadow(16px 16px 0 var(--icon-shadow))
drop-shadow(32px 32px 0 var(--icon-shadow));
}
/* ピンされたページ */
.container .grid li.pin a .icon img{
filter:
drop-shadow(1px 1px 0 var(--icon-shadow-pinned))
drop-shadow(2px 2px 0 var(--icon-shadow-pinned))
drop-shadow(4px 4px 0 var(--icon-shadow-pinned))
drop-shadow(8px 8px 0 var(--icon-shadow-pinned))
drop-shadow(16px 16px 0 var(--icon-shadow-pinned))
drop-shadow(32px 32px 0 var(--icon-shadow-pinned));
}関連ページ
デザイン
style.css.grid li.relation-label a {border-radius: 5px;}