/villagepump/綾坂こと - Scrapbox Reader

generated at 11/22/2024, 11:23:07 AM
綾坂こと
#member
画像がAyaExpTechに紐づいています
Gyazoにすべき？
GitHubにおいてる画像をjsDelivrで参照してるつもりだったのでそっちに変えました

@綾坂こと

2024/10/01 Update
名義 : 綾坂こと(読み : あやさかこと)
漢字表記 : 綾坂琴翔
別名義 : AyagawaP
年齢 : 18歳
誕生日 : 2006/02/23
性別 : 男 (身体･自認ともに)
Pronouns : he - his - him (ey - eir - emでもOK)
職業 : 大学生
2024年度は学部1年生
学歴 : 公立小学 → 公立中学 → N高(正確にはS高) → 武蔵野美術大学 CI学科
血液型 : 未検査 (親の血液型から、A型かO型のいずれか)
各種アカウント : https://axtech.dev/special/profile/を参照
cf.
あ、わたしそれについて詳しいです！#6693e93673e5220000bb861a
雑に要約 : プログラミング, 数学, 音ゲー, 雑学, ホロライブあたりが趣味･得意分野に入ります
infobox? なにそれ
おーーすげー
よろしくお願いします
あとは未来の自分が書いてくれるだろ、がんばえ〜
なんで未来の自分に託した？？
草
使ってるフォント …… M PLUS 1p, Ubuntu, M PLUS 1 Code(, HackGen, Noto Sans JP, Zen Kurenaido)

こんにちは！suto3.icon
/customizeにもいらっしゃった方ですね
/customize/FlowLauncher のプラグインで Scrapbox のページを素早く検索を作っていらっしゃいました
(FlowLauncher使っていないのであまり深く見れてはいませんが……)
それは別人ですかね、私はAyasaka
それはそれとして、それ面白そう……
あれ？違いましたか。ごめんなさい！
漢字表記も1文字しかあってなかったほんとごめんなさい
逆に英語表記は1文字しか違わない
infoboxの使い方が意図と違っているように見えます
特にinfoboxの記法を使わず、自然な文で各項目について記載しておくとinfoboxの機能がいい感じに読み取ってくれるはずです。
今のようにinfoboxの記法を使うと、綾坂こと と書かれたページから情報を抽出するという動作をします（伝わっているだろうか？）
今このページに出ているinfoboxはmemberページによるものです
なるほど……？仮説を立てます
 table:infobox で表示項目を指定すると、そのページがタグ付けされたすべてのページで自動的に生成される？
生成内容をなにか指定したい場合は2列目に指示が書ける？
確かに説明むずい
（伝わっているだろうか？）の気持ちがとてもよくわかる
shokai.iconさんのdemoの動画見てもらうのが一番分かりやすいだろうか
消えていた（し、打ち消したらさんが回ってしまった）
shokai.icon
せっかくなのでたくさん回してみた
ほう？！
ほんとだ、わざわざ指定とかしなくていいんだ
script.jsの有無だけ制御したいな……
script.jsの有無 : なし

style.css
フォント読み込み
style.css/* ==== 'M PLUS 1p' - 通常フォント ==== */
/* ==== 'Ubuntu' - 英字デザインフォント ==== */
/* ==== 'M PLUS 1 Code' - 等幅フォント ==== */
/* ==== 'Zen Kurenaido' - 手書きフォント ==== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Kurenaido&display=swap');
/* ==== 'Font Awesome 6 Free' - アイコンフォント ==== */
@import url('https://use.fontawesome.com/releases/v6.5.2/css/all.css');
フォントを変更
style.css* {
    font-family: 'M PLUS 1p';
}
.fontawesome {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
code, code * {
    font-family: 'M PLUS 1 Code', monospace;
    font-weight: 400;
}
.line span:not(.deco-\.)>span>a.link:is([href$=".pdf"],[href^="https://github.com"],[href^="https://raw.githubusercontent.com"],[href^="https://gist.github.com"],[href^="https://ja.wikipedia.org"],[href^="https://en.wikipedia.org"],[href^="https://www.amazon.co.jp"],[href^="https://amazon.co.jp"],[href^="https://twitter.com"],):before {
            font-family: 'Font Awesome 6 Brands';
            font-weight: 400;
}
箇条書きの点を控えめに
style.css.app .line .indent-mark .dot {
    height: .1em;
    width: .4em;
    border-radius: 20%;
    background-color: #8b8bb1;

    &::before {
        display: none;
    }
}

.app:not(.presentation) .line .indent-mark .dot {
    top: auto;
    bottom: 0;
}

.app:not(.presentation) .line.number-list .indent-mark .dot {
    background-color: #8b8bb180;
}
リンクの見た目を変える
style.css.page a.page-link:not(:has(>img.icon)) {
    display: inline-block;
    position: relative;
    text-decoration: none;

    &::before {
        content: '';
        position: absolute;
        left: 0%;
        bottom: 7.5%;
        width: 100%;
        height: 2px;
        background-color: oklch(55% .2 270 / .4);
        transition: height 0.2s, background-color 0.2s;
        pointer-events: none;
    }

    &:hover::before {
        height: calc(100% - 6px);
        background-color: oklch(55% .2 270 / .2);
    }

    &.big-page-link {
        &::before {
            background-color: oklch(55% .2 315 / .4);
        }

        &:hover::before {
            background-color: oklch(55% .2 315 / .2);
        }
    }
    
    &.empty-page-link {
        &::before {
            background-color: oklch(55% .2 0 / .4);
        }

        &:hover::before {
            background-color: oklch(55% .2 0 / .2);
        }
    }
}

.line a.big-page-link {
    font-weight: inherit;
}
久々に見てみたら、知らない機能がいくつか使われてた
oklch()とかできたんだ
oklch() - CSS: カスケーディングスタイルシート | MDN
Oklch色空間とかあるんだ
知らないうちに対応している色空間がめっちゃ増えてる
oklch、かなり使いやすいのでおすすめ
表が含まれるページで横スクロールを有効化する(自作)
style.css.page:has(.table-block-row) {
    overflow-y: hidden;
    overflow-x: scroll;
}
.page:has(.table-block-row)::-webkit-scrollbar {
    display: none;
}
 [/icons/hr.icon] ,  [/icons/---.icon] を横幅いっぱいに表示する(自作)
style.cssa:has(img.icon:is([title="hr"], [title="---"])) {
    position: relative;
    width: 100%;
}
a:has(img.icon:is([title="hr"], [title="---"]))::before {
    display: none;
}
img.icon:is([title="hr"], [title="---"])  {
    width: 100%;
    object-fit: cover;
}
BudouXを適用して改行位置を自然にする
style.css.lines {
    word-break: auto-phrase;
}
1文字ずつspanで囲まれてても意味あるのかな？
されてない気がする()
曇りガラス記法(これ)をぼかしから塗りつぶしに変える
cf. currentcolor
style.css.line:not(.cursor-line) .deco-\~:not(:hover) {
    filter: inherit;
}
.line:not(.cursor-line) .deco-\~ {
    background-color: currentcolor;
    &:not(:hover) * {
        color: inherit;
    }
    &:hover {
        background-color: revert;
    }
}
引用行が連続するときに2行目以降を消す
style.css.line.quote-line+.line.quote-line .dot {
    opacity: 0;
}