綾坂こと
画像がAyaExpTechに紐づいています
Gyazoにすべき?
漢字表記 : 綾坂琴翔
年齢 : 18歳
性別 : 男 (身体・自認ともに)
職業 : 大学生
2024年度は学部1年生
infobox? なにそれ
おーーすげー
よろしくお願いします
あとは未来の自分が書いてくれるだろ、がんばえ〜
なんで未来の自分に託した??
草
(FlowLauncher使っていないのであまり深く見れてはいませんが……)
それは別人ですかね、私はAyasa
ka
それはそれとして、それ面白そう……
あれ?違いましたか。ごめんなさい!
漢字表記も1文字しかあってなかったほんとごめんなさい
逆に英語表記は1文字しか違わない
infoboxの使い方が意図と違っているように見えます
特にinfoboxの記法を使わず、自然な文で各項目について記載しておくとinfoboxの機能がいい感じに読み取ってくれるはずです。
今のようにinfoboxの記法を使うと、
綾坂こと と書かれたページから情報を抽出するという動作をします(伝わっているだろうか?)
今このページに出ているinfoboxは
memberページによるものです
なるほど……?仮説を立てます
table:infobox
で表示項目を指定すると、そのページがタグ付けされたすべてのページで自動的に生成される?
生成内容をなにか指定したい場合は2列目に指示が書ける?
確かに説明むずい
(伝わっているだろうか?)の気持ちがとてもよくわかる
消えていた(し、打ち消したら
さんが回ってしまった)
せっかくなのでたくさん回してみた
ほう?!
ほんとだ、わざわざ指定とかしなくていいんだ
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、かなり使いやすいのでおすすめ
表が含まれるページで横スクロールを有効化する(自作)
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を適用して改行位置を自然にする
1文字ずつspanで囲まれてても意味あるのかな?
されてない気がする()
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;
}