ノマへの扉旧デザイン
旧デザイン↓
色
🔧はnomadoor.iconが追加した変数です
code:---.css
:root{
--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-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; /* 🔧アイコン_ロングシャドウ */ }
ホーム
ピン
code:---.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;
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);}
サムネのデザイン
code:---.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;
}
ロングシャドウ
code:---.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));
}
関連ページ
デザイン
code:style.css
.grid li.relation-label a {border-radius: 5px;}