Logseqの Cardyをコルクボード風にする

Logseqのカスタマイズ

前回の壁紙のあと「ドキュメントモード」が気になりました。Cardyで表示するとき「もう一つのモード」を作れるんじゃないか。でも、それはどういうモードだろう。

コルクボード風

思いついたのがScrapboxでした。カードを横三列に並べてみる。もちろん書き込めますが、カードの範囲を越えてしまうと見えなくなります。閲覧のための形式です。

下記cssをcustom.cssに追記してください。

.doc-mode .ls-block {
  font-size: 14px;
  width: 278px;
  height: 200px;
  float: left;
  margin-left: 3px;
  overflow: scroll;
}

.block-children .ls-block {
  width: auto;
  height: auto;
}

.references {
  clear: both;
}

使い方

下段の右から二つ目。書類ボタンをタップすると表示形式が切り替わります。編集はCardy形式で、閲覧はコルクボード形式に変えるという使い方ですね。

ドラッグ&ドロップも一応できます。Kanban風の動かし方ができるので、子ブロックを入れ替えたりできる。左右に移動するブロックは思考を立体的にします。

現在のcustom.css

ここまでのカスタマイズで下記のようになっています。

.ls-block {
  font-family: Hiragino Maru Gothic ProN;
  font-size: 16px;
  caret-color: red;
  background: lavender;
  border-radius: 5px;
  margin-bottom: 3px !important;
}

.dark-theme .ls-block {
  background: darkslategray;
}

h1, h2, h3, h4 {
  font-size: 16px !important;
}

#main-content-container{
  background-image: url('https://images.unsplash.com/photo-1519682577862-22b62b24e493?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80');
  background-size: cover;
}

.asset-container img {
  max-width:200px !important;
}

.doc-mode .ls-block {
  font-size: 14px;
  width: 278px;
  height: 200px;
  float: left;
  margin-left: 3px;
  overflow: scroll;
}

.block-children .ls-block {
  width: auto;
  height: auto;
}

.references {
  clear: both;
}

https://wineroses.github.io/css/Logseq-Cardy.css