関連ページ一覧を横に移動させる

https://gyazo.com/180a4989c03130c800f42d310c012134

Import

code:css

20240422

壊れたので修正しました

-.icon

仮でとりあえず入れる

気に入ったらcssを自分好みに調整する

良さそうなので調整しましょう

ちょっと主張が強すぎるな

小さくなった&目立つ位置にきた分boldがうるさい

.description入れたいな

形変えつつ調整すれば画像の時でもdescriptionの時でもいい感じに見えるように出来そう

一緒にscrollされない方が良いかも？

基本一番見えてて欲しいのは1-hop linkなので

それより下観たければそっちもscroll、みたいな

でも2-hopが適当に目に入る良さもありそうなので試したい

1-hop linkと2-hop linkが見分けづらいな

もっとはっきり分かれてて欲しい

中心がずれてるのが気持ち悪い

これはpage-wrapperを分割すると右だけアイコンがあって不自然になるのか

表示場所、左右どっちが良い?

試しに右にずらしたらよかった

ドキュメント読む時、左側から読むので左に視線がいく

なので、左にある方が目立つ

現状目立ちすぎなので右に動かしてよかった

あと、言語化むずいけどバランスが良くなった

問題として、根本的な問題だけど、ハブ的ページが機能しなくなる

1-hopだけ右に置いて、2-hop以降は下に置く、とかできないかな

もしくは下と右の両方に表示とか

画像の上の文字の扱い

影にすればvariable使いつつ半透明にできることに気がついた

filterでdrop-shadow三つ重ねがけしていい感じになった

画像の出し方

heightを150%にしてはみ出すようにした

このくらいがちょうど良さそう

できる限り画像を大きく表示したいので、内容が伝わりづらくならない程度にはみ出させるのが正解っぽい気がする

なんかいらんcssが結構あるな

Scrapboxのデザインを保ったまま改めて自作したけど、なんかやっぱ元々の方がいい気がしてきた

descriptionも表示させたけど、それぞれの高さは最小限にしないと長くなりすぎてしまう

todo: code blockの時だけ行が改行されないの治す✅

code:style.css

.col-page {

max-width: 1200px;

}

Flexboxのrelated-page-listの幅を、画面幅に応じて一列と二列

code:style.css

@media (min-width: 768px) {

.related-page-list {

flex-basis: 140px !important;

}

.related-page-list-search input {

width: 120px !important;

}

}

@media (min-width: 1240px) {

.related-page-list {

flex-basis: 295px !important;

}

.toolbar {

width: 288px !important;

}

}

related-page-listのflex-shrinkを0にして、余白は全部drag-and-drop-enterに持っていってもらう

code:style.css

@media (min-width: 768px) {

.page-wrapper {

display: flex;

justify-content: space-around;

}

.drag-and-drop-enter {

order: 1;

margin-right: 20px;

flex-basis: 100% !important;

min-width: 0;

}

.related-page-list {

order: 2;

flex-shrink: 0;

margin-top: 0px;

background-color: var(--related-page-list-bg);

}

related-page-sort-menu

https://gyazo.com/c5c2dde819bd90d545a20d915ff1c0d5

トップページのはたまに使うけど、これは今まで一度も使ったことないので消し飛ばす

code:style.css

.related-page-sort-menu {

display: none;

}

code:style.css

.links-container {

gap: 10px !important;

}

gridにおけるカード間のgapを無くす

code:style.css

.related-page-list .grid {

gap: 0px !important;

}

リンクカードとページカード両方に効くcss

code:style.css

.related-page-list .grid li {

margin-bottom: 5px !important;

margin-right: 0px !important;

width: 140px;

height: 50px !important;

}

.related-page-list .grid .splitter {

height: 15px !important;

}

relation-label（リンクカード）

code:style.css

.related-page-list .relation-label .arrow {

display: none !important;

}

.related-page-list .relation-label a {

/* 関連リンク ラベル */

padding: 4px !important;

/* border-bottom: 2px solid var(--relation-label-bg); */

}

.related-page-list .relation-label .title{

font-size: 12px;

}

.related-page-list .relation-label .icon-lg{

display: none !important;

}

.page-list-item（ページカード）

code:style.css

.related-page-list .content {

/* カードサイズ変更 */

height: 100% !important;

}

.related-page-list .page-list-item .header {

border-top-width: 5px !important;

padding-top: 3px !important;

padding-bottom: 3px !important;

z-index: 1;

/* background-color: var(--translucent-card-bg)*/

}

.related-page-list .page-list-item .header .title {

font-size: 12px !important;

}

.related-page-list .page-list-item .description {

padding-top: 0px !important;

padding-bottom: 0px !important;

line-height: 1.4 !important;

z-index: 1;

}

.related-page-list .page-list-item .description .line {

font-size: 11px !important;

}

.related-page-list .page-list-item .description .line .inline-icon {

font-size: 9px !important;

}

.related-page-list .page-list-item .icon {

position: absolute;

width: 100%;

height: 100%;

z-index: 0;

opacity: 1;

padding: 5px !important;

}

.related-page-list .page-list-item .icon img {

width: 100% !important;

height: 150% !important;

width: auto !important;

margin-right: 0 !important;

object-fit: contain;

}

隠されてる部分を表示する時の・・・

code:style.css

.related-page-list .ellipsis {

height: 30px !important;

}

.related-page-list .ellipsis a {

padding: 2px !important;

}

.related-page-list .ellipsis .circle {

width: 30px !important;

height: 30px !important;

}

検索ボックス調整

code: style.css

.related-page-list-search {

display: flex;

width: 100%;

align-items: baseline;

}

code:style.css

}