BookStackのカスタムCSS

何故かターミナルが使えることで有名なカラフルボックスで、ごちゃごちゃするとインストールできることで有名なBookStackのカスタマイズコードです。
　全て自己責任でやってください。文句は受け付けません。導入方法も教えません。

そもそもBookStackって何？

wikiシステムです。

特徴として

• markdownとWYSIWYGで書ける
• クリップボードから画像を貼り付けられる
• デフォルトでログイン以外非公開
• 本棚と本とページというシステムで管理している
• 日本語対応（改行はmarkdownそのまま）
• 見た目がおしゃれ
• 共同編集システムが有る
• draw.ioみたいなのが使える
  　と、デフォルト機能が充実しています。

欠点は

• テーマシステム・拡張機能はない
  • 一応存在はするけど大々的にアピールはしてない。し、いじるとサイトふっとばしてしまったのでおすすめできない
    　てのがあります。でもデフォルト機能が充実してるから別に気にしないかな……

このコードでできること

1. 画像拡大ができるようになる。
2. 見た目がいい感じになる（私の感想です）
3. Gridシステムが使えるようになる（要Simple Grid）

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css?Ver=100" rel="stylesheet">
<script>
  window.onload = function() {
    for (image of document.querySelectorAll("main img")) {
    new Luminous(image, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}});
  }
  }
</script>
<link href="https://自鯖に設置した場所/simple-grid.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  *{
    font-family: 'Noto Sans JP', sans-serif;
  }
  body{
    font-size:15px;
    color: #333;
    font-weight:400;
  }
  h1{
    font-size: 2.6em;
    border-bottom: 3px solid;
    padding-bottom: 0.2em;
  }
  h2{
    font-size: 2em;
    border-top: 3px solid #eaeaea;
    padding-top: 0.4em;
  }
  h3{
    font-size: 1.8em;
  }
  h4{
    font-size: 1.5em;
  }
  h4:before{
    content:"　";
  }
  blockquote h4:before{
    content:"";
  }
  h1, h2, h3, h4, h5, h6{
    color: inherit;
  }
  h1, h2, h3{
    font-weight:500;
  }
  table{
    width:100%
  }
  .container{
    width:100%
  }
  th{
    text-align: center !important;
  }
  details{
    background-color: none !important;
    border:none !important;
    padding: 0px !important;
    padding-bottom: 2rem;
  }
  .page-content details>summary,.page-content details[open]>summary{
    background-color: inherit !important;
    border-bottom: 2px var(--color-primary-light) solid;
    margin-bottom: 1rem
  }
</style>

SimpleGridの注意点

SimpleGridくんは非常に優秀ですが見出しとかも変えちゃうので、min.cssじゃない方でGridSystem以外消したほうが使い勝手良いです。

謝辞

画像拡大スクリプトはGithubのissueを参考にしました。ありがとうございました。