settingsの置換を図るページ
2024-05-02
15:39:56 疲れちゃったので一旦ここまで
🍵
14:09:18
許可が取れたので、さんがやってくれた最適化を各ページに反映させる
変更理由も反映させる
反映したものには🚛をつける
15:03:46 箇条書きのバレットをFontAwesomeにするUserCSSの統合がむずい
コードが大幅に変わっているので、別ページにしたいところ
念の為、このページにあるコードや説明はそのままにしておく
#2024/02/24 00:59:28
現在有効なほぼすべてのCSSをsettingsから移行した
現在はこのページのstyle.cssをsettingsでimportしている
settingsのstyle.cssはこれだけ
css@import "../settingsの置換を図るページ/style.css";importを除く全てのコードを精査し、最適化、lint、formatを行った
なんとこのページのstyle.cssがHuman readableになった
human readabんん目leとは
言葉選び間違えてますねこれ
簡単に読める的なことを言いたかった
パフォーマンスが向上しているはず
バンドル(minify)後のサイズも元より小さくなるはず
21312 chars -> 19657 chars (約7.7%減)
navbar周りの〜は別途bundleして足した
未処理のものがあるので単純に比較はできない
lintしてあるのでgzip圧縮がうまく働けば更に小さくなっているはず
変更点をどこにもメモしてない 記述しました
間違い探しみたいなものだと思ってもらえれば…
例えば: のびのびドロップダウンが一行で済んでいる
しばらく様子見をします
問題がなければページタイトルを変えて入れ替える、とか？
そもそもこのページは何なのか
settingsがカオスなことになっていたので整理したくなった
ついでに全てのコードを精査し、最適化、lint、formatした
その際全てのコードが一つのページにまとまっている方が良いのでまとめた
そのままsettingsと置換することを想定していた
そのためこのページのstyle.cssを綺麗な状態に保つようにしている
結局いくつか@importで読み込むものが残ってしまった
速度を保証するために都度bundle（及びminify）してsettingsに貼り付けるようにした
この方法が良い感じたのでそのまま運用している
方針
DOM構造順に並べる
一旦import控えめにやってみる
なにが何してるのか結局よくわからないので
重くなったら止める
lintとformatをする
Stylelintをかけている
.stylelintrc.json{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order"
]
}formatは人力
インデントはtab
一行にできるときは一行にする
末尾に改行を入れる
最適化出来そうなものは最適化する
なるべく
app.css と同じセレクタを使う!importantを安易に使わない
とにかく統一！
すごくお疲れ様です🍵
動作報告
chrome for androidだとそこそこまあまあ精密に読む『ベーシック圏論 普遍性からの速習コース』の編集が重いです
PC未確認
単純に長すぎることが原因かも
アクティブユーザーの移り変わり。の読み込みがやたら重かった
仮説: iconが大量に存在するページで重い
多分hr.iconをCSSで描画するUserCSSが悪さしている
固定幅バージョンにすることで改善したかも
未処理
文字装飾記法
style.css.disable@import "../画像を並べて表示する記法/style.css";画像を並べて表示する記法、必要？
Streamで背景色や画像が途切れないようにする
なんのためのコード？
z-index周りの修正コードだった気がする
garbage collector
使われてるの？
使っていません。消して大丈夫です
諦めて一旦importするやつ
これは無理！
元のCSSの開発に少し携わった
折を見てなんとかいじります……
でもあれ以上の最適化はむずいと思う
style.css@import url("/api/code/villagepump/特定のリンクにアイコンをつけるUserCSSを自動生成したい/style.css");分からん
読み解くのには時間が必要そう
style.css@import url("/api/code/villagepump/リンクを出典アイコンにするUserCSS/style.css");むしろimportすべきもの
これはなぜ？
そのページにしか適用されないのであればここに移す理由がないからですね
1箇所で完結させたい
1箇所で完結させたいの意味が読み取れませんでした
すでにこのページと元のページとでCSSにズレが生じている
まあこれは元のページに変更を反映するのがはばかられるという理由でしたが
もうすぐ解決予定
てことは同じCSSの違うver.が同時に存在することを回避するのを「1箇所で完結させたい」と言っているわけではなさそう
また「複数ページに渡って適用されるCSSのみをrefactoringしたい」と推測しますが、その理由もわかりませんでした
(労力の問題はともかく)全部refactoringしてもいいと思う
そんなに深く考えてないです
というか自分でもなんでimportすべきだと思ったのかはっきりと覚えてない
創作の方は改変するのもナンセンスだな〜って思ったような気がする
腑に落ちる
ネタならすぐ外されるかもだし、まあいっかという感じ
結局bundleするならimportの負荷も考えないでいいし
なるほどです
style.css@import url("/api/code/villagepump/ドカベン記法/sample.css");
@import url("/api/code/villagepump/AIのべりすと創作：イドバタニシ/style.css");
html > body系
formatした
style.cssbody {
--A: var(--card-bg, #D8D8D8);
--B: var(--body-bg, #E0E0E0);
background:
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(var(--A) 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, var(--A) 8px, transparent 8px) -4px 0;
background-color: var(--B);
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
.app > .navbar系
style.css.disable.navbar::after {
position: absolute;
top: 40px;
content: "/* UserCSSメンテ中、動作重い人報告願う */";
}
app.css の作法に合わせたformatした
style.css.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
不要と思われる記述を削除した
formatした
style.css.brand-icon {
--logo-url: url("/api/pages/villagepump/brand-icon/icon");
width: 40px;
height: 40px;
background-color: white;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 4px solid transparent;
border-radius: 50%;
svg { display: none; }
}
2024/04/25#66299c505729c000000424d7のアップデートによるタニシの脱走に対応
統合済み
style.css.disabled.brand-icon {
background-image: var(--logo-url);
background-repeat: no-repeat;
}
.brand-icon svg {
display: none;
}
不要と思われる記述を削除した
lintとformatをした
style.css:root {
--furikake-high-bottom: 15px;
--furikake-high-left: -7px;
}
@keyframes brand-furikake {
0% {
margin: 0;
transform: rotate(0deg);
}
25% {
margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left);
transform: rotate(150deg);
}
30.0% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
36.7% { margin: 0 0 0 var(--furikake-low-left); }
43.3% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
50.0% { margin: 0 0 0 var(--furikake-low-left); }
85% { transform: rotate(150deg); }
100% {
margin: 0;
transform: rotate(0deg);
}
}
.navbar-brand .brand-icon {
animation-duration: 1.5s;
animation-timing-function: ease;
}
.navbar-brand:hover .brand-icon {
animation-name: brand-furikake;
}
app.css のセレクターに合わせたstyle.css.search-form .form-group .dropdown-menu {
width: 100%;
max-height: calc(100vh - 130px);
}
min-width:100%を指定しないと崩れてないです？(これが仕様なのがおかしいと言えばそう)
元々そうだからそうしてたんですが、のびのびドロップダウンを名乗るなら広げたほうが良さそうですね
🚛project homeの字体を変える
formatした
2024-04-17 11:41:09
.quick-launch .project-home .title { を .project-home .title { に変更style.css.project-home .title {
font-family: serif;
font-weight: 400;
}
brand iconの幅に合わせて余白を調整した
2024-04-17 11:41:50
.quick-launch .project-home::after { を .project-home::after { に変更2024-05-01 21:28:45
.navbar .row .project-home に変更（app.cssと合わせる）style.css.navbar .row .project-home::after {
display: block;
flex-shrink: 0;
height: 36px;
aspect-ratio: 4 / 3;
/* margin-left: 6px; */
margin-left: 10px;
content: "";
background-image: url("https://daiiz-apps.appspot.com/today/jp.svg");
background-repeat: no-repeat;
background-size: contain;
}
app.css のセレクターに合わせたstyle.css.dropdown-menu > li > a[href*="%E2%80%8B"] {
font-size: 12px;
line-height: 22px;
color: gray;
}
セレクターを
app.css に合わせた位置を調整した
2024-05-01 19:56:12 デザイン変更に対応
style.css.navbar .navbar-menu > li.stream-btn {
display: block !important;
> a { color: var(--navbar-icon-color, #fff); }
}
.app > .container > .page-list系
無効になっていた方を採用した
formatした
2024-04-23 10:43:02 ピン留めされたページを独立した段に表示するUserCSSをgrid対応にする変更を適用した
style.css.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
app.css のセレクターに合わせたformatした
style.css.grid li.page-list-item [data-page-title^="["][data-page-title*="]("][data-page-title$=")"] {
display: none;
}
app.css のセレクターに合わせたformatした
style.css.grid li.page-list-item a .title { -webkit-line-clamp: 2; }
.app > .row-flex > .col-page > … > .page > .editor系
formatした
style.css.editor, .grid li, .stream {
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands","AppIcons",sans-serif;
}
.app > .row-flex > .col-page > … > .page > .editor > … > .line系
style.css.line .indent-mark .dot { display: none; }
.indent-mark:not([style="width: 0em;"]):has(.dot)::after {
--size: var(--dot-size, 6px);
position: absolute;
top: calc(13px - var(--size) / 2);
right: calc(12px - var(--size) / 2);
display: inline-block;
width: var(--size);
font-family: "Font Awesome 5 Free";
font-size: var(--size);
font-style: normal;
font-weight: 900; /* Solid */
font-variant: normal;
line-height: 1;
color: var(--dot-color, var(--page-text-color, #555));
text-align: center;
/* content: "\f068"; /* minus:通常 */
/* content: "\f1b0"; /* paw:猫の日用 */
/* content: "\f005"; /* star:クリスマス用 */
/* content: "\f1fd"; /* birthday-cake */
content: "\f6be"; /* cat:猫 */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: auto;
}
.number-list .indent-mark:not([style="width: 0em;"]):has(.dot)::after {
content: "\f292"; /* hashtag:通常 */
/* content: "\f2dc"; /* snowflake:クリスマス用 */
}
.indent-mark[style="width: 1.5em;"] { --dot-size: 10px; }
.indent-mark[style="width: 3em;"] { --dot-size: 9px; }
.indent-mark[style="width: 4.5em;"] { --dot-size: 8px; }
.indent-mark[style="width: 6em;"] { --dot-size: 7px; }
.indent-mark { --dot-color: #edad0b; }
.indent-mark:is(
[style="width: 3em;"],
:has(.dot:nth-child(6n + 3))
) { --dot-color: #c7243a; }
.indent-mark:is(
[style="width: 4.5em;"],
:has(.dot:nth-child(6n + 4))
) { --dot-color: #932674; }
.indent-mark:is(
[style="width: 6em;"],
:has(.dot:nth-child(6n + 5))
) { --dot-color: #3261ab; }
.indent-mark:is(
[style="width: 7.5em;"],
:has(.dot:nth-child(6n + 6))
) { --dot-color: #009f8c; }
.indent-mark:is(
[style="width: 9em;"],
:has(.dot:nth-child(6n + 7))
) { --dot-color: #c9c9c9; }
数式行にも常にバレットを表示するUserCSS ↑で対応済み
そのまま
これ消えてません？
hello
.indent-mark と .formula-line style.css.disabled.line.formula-line .dot { display: block; }
記述を簡略化した
style.css.line[id^="L5fe4ac"]:not(
[id^="L5fe4ac00"],
[id^="L5fe4ac01"],
[id^="L5fe4ac02"],
[id^="L5fe4ac03"],
[id^="L5fe4ac04"]
),
.line[id^="L5fe4ad"],
.line[id^="L5fe4ae"],
.line[id^="L5fe4af"],
.line[id^="L5fe4b"],
.line[id^="L5fe4c"],
.line[id^="L5fe4d"],
.line[id^="L5fe4e"],
.line[id^="L5fe4f"],
.line[id^="L5fe5"]:not(
[id^="L5fe5f"]
),
.line[id^="L5fe5f"]:not(
[id^="L5fe5fd"],
[id^="L5fe5fe"],
[id^="L5fe5ff"]
),
.line[id^="L5fe5fd"]:not(
[id^="L5fe5fd8"],
[id^="L5fe5fd9"],
[id^="L5fe5fda"],
[id^="L5fe5fdb"],
[id^="L5fe5fdc"],
[id^="L5fe5fdd"],
[id^="L5fe5fde"],
[id^="L5fe5fdf"]
),
.line[id^="L5fe5fd80"],
.line[id^="L5fe5fd81"],
.line[id^="L5fe5fd82"],
.line[id^="L5fe5fd83"],
.line[id^="L5fe5fd84"] {
.indent-mark::after {
content: "\f005"; /* star */
}
}
lintとformatをした
style.css.mermaid-preview svg {
border: 2px solid #efefef;
border-radius: 5px;
}
記述をシンプルにした
style.css.video-player video { max-height: 360px; }
strong .video-player video { max-height: 600px; }
style.css.iframe-video-player:not(.floating) {
iframe {
width: 99%;
max-width: 640px;
height: auto;
max-height: 360px;
aspect-ratio: 16 / 9;
}
&:hover .control {
right: unset;
left: min(99% - 24px, 616px); /* calc(min(99%, 640px) - 24px) */
}
}
strong .iframe-video-player:not(.floating) {
iframe {
max-width: 99%;
max-height: none;
}
&:hover .control {
left: calc(99% - 24px);
}
}
文字装飾記法
!"#%&'()*+,-./<>_{|}~ (Unicodeコードポイント順)に並べる二重括弧: マーカー記法
:hover をネストしたlintとformatをした
style.css@keyframes marker { to { background-position-x: 400%; } }
.line strong:not([class]) {
background: linear-gradient(
transparent 60%,
rgb(171 255 79 / 60%) 60%,
rgb(171 255 79 / 60%) 100%
);
&:hover {
padding: 0.1em 0.2em;
background: linear-gradient(
to right,
transparent,
rgb(171 255 79 / 60%),
transparent 50%
)
0% center / 400% auto; /* グラデーション */
animation: marker 10s linear infinite;
animation-direction: reverse;
}
}
! : iconを振動させる記法animation-nameを変更した
formatした
style.css@keyframes icon-shaking {
16.66% { transform: translate(2px, -2px) rotate(-5deg); }
33.32% { transform: translate(2px, 1px) rotate(5deg); }
49.98% { transform: translate(0, 0) rotate(0); }
66.64% { transform: translate(-2px, -2px) rotate(5deg); }
83.30% { transform: translate(-2px, 3px) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0); }
}
.deco-\! img.icon { animation: 0.15s icon-shaking linear infinite; }
!- : icon回転振動合体記法animation-nameを変更した
formatした
style.css@keyframes icon-shaking-and-rotating {
16.66% { transform: translate(0.13em, -0.13em) rotate(180deg); }
33.32% { transform: translate(0.13em, 0.07em) rotate(360deg); }
49.98% { transform: translate(0, 0) rotate(540deg); }
66.64% { transform: translate(-0.13em, -0.13em) rotate(720deg); }
83.30% { transform: translate(-0.13em, 0.2em) rotate(900deg); }
100% { transform: translate(0, 0) rotate(1080deg); }
}
.deco-\!.deco-- img.icon { animation: 1.0s icon-shaking-and-rotating linear infinite; }
" : インライン引用記法 ::before をネストしたlintとformatをした
style.css.line:not(.cursor-line) .deco-\" {
padding: 0 0.4em;
font-size: 95%;
font-style: italic;
background-color: rgb(128 128 128 / 10%);
border-radius: 0.2em;
&::before {
position: relative;
top: -0.5em;
left: -0.2em;
font-family: "Font Awesome 5 Free";
font-size: 85%;
font-weight: 900;
color: #a0a0a0;
content: "\f10d";
}
}
# : 白黒記法不要と思われる記述を削除した
セレクターを
app.css に合わせ、最適化したformatした
style.css.line:not(.cursor-line) .deco-\#:not(:hover, :has(a.page-link)) { filter: grayscale(100%); }
# : ﾈｺと和解せよ記法セレクターを
app.css に合わせたlintとformatをした
style.css.line:not(.cursor-line) .deco-\#:has(a.page-link) {
padding: 0.1em;
color: white;
background: black;
border-color: black;
}
.line:not(.cursor-line) .deco-\# a.page-link { color: yellow; }
% : スプレッドシート的に使う記法lintとformatをした
style.css.deco-\% {
padding: 0.1em 0.2em;
color: #111;
background-color: #fdf;
}
& : 愚痴記法ネストした
hoverまたはカーソルを置くことで表示されるようにした
スマートフォンでも読めるようになった
formatした
style.css.line:not(.cursor-line) .deco-\&:not(:hover) {
color: transparent;
background-color: grey;
a.page-link { color: transparent; }
a.icon { visibility: hidden; }
img { filter: contrast(0); }
}
' : 中央揃え記法そのまま
style.css.line:not(.cursor-line) .deco-\':not(.deco-_) {
display: inline-block;
width: 100%;
text-align: center;
}
formatした
style.css.line:not(.cursor-line) {
.deco:has(.deco-\'.deco-_) {
display: flex;
align-items: center;
text-align: center;
&::before, &::after {
flex-grow: 1;
min-width: 30px;
content: "";
border-top: 1px solid #afafaf;
}
&::before { margin-right: 10px; }
&::after { margin-left: 10px; }
}
.deco:has(.deco-\'.deco-_.deco-\-) {
&::before, &::after { border-style: dashed none none; }
}
.deco :has(.deco-\'.deco-_) { text-decoration: none !important; }
}
() : はんこ記法セレクターを
app.css に合わせ、ネストしたlintとformatをした
style.css.line:not(.cursor-line) .deco-\(.deco-\):not(:has(.icon)) {
padding: 5px;
font-weight: 600;
line-height: 1;
color: #f40;
border: 0.05em solid #f40;
border-radius: 50%;
a.page-link { color: #f40; }
}
() : iconを丸くする記法formatした
style.css.deco-\(.deco-\) img.icon { border-radius: 50%; }
::before をネストしたlintとformatをした
style.css.line:not(.cursor-line) .deco-\, {
font-size: 0;
&::before {
font-size: 13px;
color: #f17c00;
content: "[ ]";
background-color: #fbebdd;
}
}
最適化した
formatした
style.css@keyframes icon-rotating { to { transform: rotate(360deg); } }
.deco-- img.icon { animation: 1.5s icon-rotating linear infinite; }
.level-1 [class*="deco-- deco-\*"] img.icon { animation-duration: 3s; }
.level-2 [class*="deco-- deco-\*"] img.icon { animation-duration: 1.5s; }
.level-3 [class*="deco-- deco-\*"] img.icon { animation-duration: 1s; }
.level-4 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.7s; }
.level-5 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.4s; }
.level-6 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.3s; }
.level-7 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.2s; }
.level-8 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.1s; }
.level-9 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.07s; }
.level-10 [class*="deco-- deco-\*"] img.icon { animation-duration: 0.05s; }
.line .image と完全に同一になるように変更したlintとformatをした
style.css.deco-\/ img.icon {
position: static;
display: inline-block;
max-width: 100%;
height: revert;
max-height: 300px;
margin: 3px 0;
vertical-align: bottom;
}
< : ルビ記法不要な装飾を削除した
セレクターを最適化した
lintとformatをした
style.css.line:not(.cursor-line) .deco-\<:not(.deco-\>) {
position: absolute;
top: -4px;
z-index: 101;
padding-left: 1px;
font-size: 10px;
line-height: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
> : ユーザーフラッグ記法 ::after をネストし、セレクターを最適化したlintとformatをした
style.css.line:not(.cursor-line) .deco-\>:not(.deco-\<) {
position: absolute;
z-index: 101;
width: 50px;
height: 14px;
padding: 0 2px;
margin-top: -2px;
overflow-x: clip;
font-size: 10px;
line-height: 14px;
color: white;
text-overflow: ellipsis;
white-space: nowrap;
background-color: green;
opacity: 0.7;
&::after {
position: absolute;
top: 7px;
left: 0;
width: 2px;
height: 18px;
color: green;
content: "|";
background-color: green;
}
}
🚛
>+ : 動くユーザフラッグ記法animation-nameを変更した
lintとformatをした
style.css@keyframes user-flag-moving {
20% { left: 0; }
20.1% { left: 15px; }
40% { left: 15px; }
40.1% { left: 30px; }
60% { top: 0; }
60.1% { top: 28px; }
80% { left: 30px; }
80.1% { left: 120px; }
100% { left: 120px; }
100.1% { left: 300px; }
}
.line:not(.cursor-line) .deco-\>.deco-\+:not(.deco-\<) {
animation: 5s user-flag-moving linear infinite;
}
🚛
<> : KaTeXの空白を消す記法セレクターを最適化した
formatした
style.css.line:not(.cursor-line) .deco-\<.deco-\> .formula { margin: 0; }
カーソル行に適用しないようにした
lintとformatをした
style.css.line:not(.cursor-line) {
/* 吹き出し本体 */
.deco-\{, .deco-\} {
display: inline-block;
max-width: calc(100% - 100px);
padding: 0.1em 0.2em;
margin: auto 0.3em;
margin-bottom: 1px;
font-size: 1em;
color: #000;
vertical-align: top;
background-color: #d8d8d8;
border-radius: 0.4em;
}
/* 左吹き出しの角 */
.deco-\{::before {
position: absolute;
width: 0;
padding: 0;
margin: 0;
content: "";
border-color: #d8d8d8 transparent;
border-style: solid;
border-width: 0 0 0.6em 0.6em;
transform: translateX(-100%) translateY(calc(1em - 80%));
}
/* 右吹き出しの角 */
.deco-\}::after {
position: absolute;
width: 0;
padding: 0;
margin: 0;
content: "";
border-color: #d8d8d8 transparent;
border-style: solid;
border-width: 0 0.6em 0.6em 0;
transform: translateY(calc(1em - 80%));
}
/* 強調吹き出しの角 */
.deco-\!::before, .deco-\!::after { border-color: #e66 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #000; }
}
🚛
~ : 曇りガラス記法セレクターを最適化した
formatした
style.css.line:not(.cursor-line) .deco-\~:not(:hover) { filter: blur(3px); }
そのまま（固定幅バージョン）
style.css.line a.link.icon:is(
[href$="/icons/-"], /* */
/* [href$="/icons/---"], /* */
[href$="/icons/hr"], /* */
/* [href$="/icons/%E6%B0%B4%E5%B9%B3%E7%B7%9A"], /* [/icons/水平線.icon] */
[href$="/icons/hrd"] /* */
) {
pointer-events: none;
img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
border-top: 1px solid #afafaf;
}
}
.line a.link.icon:is([href$="/icons/hrd"])::before {
border-style: dashed none none;
}
変数を使うようにした
サイズを元画像のサイズの1/2にした
それに合わせて位置を調整した
lintとformatをした
style.css@media only screen and (min-width: 480px) {
a[type="hashTag"][href="/villagepump/%E3%83%A2%E3%83%8B%E3%82%AB"]::after {
--size: 960px;
position: fixed;
right: -480px;
bottom: -360px;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-image: url("https://i.gyazo.com/58cdc21a7d819e0c2b2727e85da571e4.png");
background-size: var(--size) var(--size);
}
}
変数を使うようにした
lintとformatをした
style.css@media only screen and (min-width: 480px) {
a[type="hashTag"][href="/villagepump/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F"]::after {
--size: 10vw;
position: fixed;
bottom: 0;
left: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-image: url("https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/たいへんよくできました/good.svg");
background-size: var(--size) var(--size);
}
}
変数を使うようにした
lintとformatをした
style.css@media only screen and (min-width: 480px) {
a[type="hashTag"][href="/villagepump/%E3%82%AF%E3%82%AA%E3%83%AA%E3%82%A2%E3%81%95%E3%82%93"]::after {
--size: 300px;
position: fixed;
right: 0;
bottom: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-image: url("/api/pages/villagepump/Qualia-san/icon");
background-size: var(--size) var(--size);
}
}
変数を使うようにした
lintとformatをした
style.css@media only screen and (min-width: 480px) {
a[type="hashTag"][href="/villagepump/%E5%A4%A9%E6%B0%97%E5%9B%B3"]::after {
--scale: 0.5;
--width: calc(600px * var(--scale));
--height: calc(581px * var(--scale));
position: fixed;
top: 40px;
right: 0;
display: block;
width: var(--width);
height: var(--height);
content: "";
background-image: url("https://takker-weather.vercel.app/jma/weather-map/archives/today.png");
background-size: var(--width) var(--height);
}
}
.app > .row-flex > .col-page > … > related-page-list系
セレクターを
app.css に合わせたformatした
style.css.related-page-list .grid li.page-list-item[data-page-title*=""] { display: none; }
.app > .row-flex > .col-page-side > page-menu系
formatした
style.css#page-info-menu + ul > li:is(:nth-child(4), :nth-child(6)) > div { display: none; }
バンドル用リンク
バンドル開始(ポップアップブロッカーの解除が必要？)
そのままではbrand iconが表示されない
> brand-iconが表示されない時は、(画面上の)4行目あたりに../../../pages/villagepump/brand-icon/iconがあれば/api/pages/villagepump/brand-icon/iconに置換する
現在bundleしてsettingsで読み込んでるのであればsettingsの置換を図るページ#65d8c14fffff360000ac6c0eは間違いでは？