Settings - ノマへの扉@Scrapbox

Settings

https://gyazo.com/4c8986d0572242fcef5601e401997aa1

code:style.css

/* @import "../破線で下線なリンクデザイン/style.css"; */

@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";

@import "../箇条書きの深さをリセットするUserCSS/style.css";

@import "../../work4ai/外部リンクをファビコンに置き換える記法/style.css";

フォント

code:style.css

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');

html, body, #editor, .grid li{font-family:'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳＰゴシック", "MS PGothic", "sans-serif";}

色

🔧はnomadoor.iconが追加した変数です

code:style.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;　/* 🔧アイコン_ロングシャドウ */

}

code:style.css

/* 関連ページラベルデザイン */

:root{

--relation-label-bg: #fefefe;

--relation-label-empty-bg: #fefefe;

--relation-label-links-bg: #fefefe;

--relation-label-text:#304ea2;

--relation-label-empty-text: #b10e0e;

--relation-label-links-text: #304ea2;

}

ホーム

ピンした頁を単独で上部に固定

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {clear: both}

ピン

code:style.css

.app{padding-top: 55px;}

.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);}

サムネのデザイン

code:style.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:style.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

.quick-launch{margin: 0;}

.quick-launch .project-home, .quick-launch .project-home .title{

font-size: 1.6em;

font-family: 'Zen Kaku Gothic New';

font-weight: 300;

}

.quick-launch .flex-box{

display: flex;

justify-content: space-between;

flex-wrap: wrap;

flex-direction: column;

align-items: center;

}

.quick-launch .left-box{

display: flex;

justify-content: space-around;

}

.quick-launch .right-box{

display: flex;

justify-content: space-around;

margin-bottom: 1em;

}

.dropdown-menu{

box-shadow: none;

border: none;

min-width: 270px;

}

.dropdown-menu-right{

left: 50%;

transform: translate(-50%, 0);

}

ページ

デザイン

code:style.css

.page{box-shadow:none;}

.line.line-title .text{

text-align: center;

font-weight: 500;

letter-spacing: 0.06em;

text-indent: 0.06em;

}

動画

code:style.css

.video-player video{

max-height: 360px;

}

画像中央揃え/角丸/シャドウ

code:style.css

.line img.image {

display : block;

position: relative;

margin : 0 auto 0.7em;

border-radius: 0.5em;

filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));

top: 1em;

}

画像を並べる[| [画像URL][画像URL][画像URL]…]

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| {

display: flex;

justify-content: center;

align-items: center ;

filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));

margin: -1em 0 -3em;

}

.line .deco-\| img.image {

object-fit: contain;

margin: 0;

filter: drop-shadow(0px 0px 0px ) !important;

top: 0;

}

/* 太字記法と組み合わせて列数を変える */

.line class^="level" .deco-\| { flex-wrap: wrap }

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }

.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }

/* .line .text .modal-image + span{

display: none;

} */