settingsの置換を図るページ
2024-05-02
15:39:56 疲れちゃったので一旦ここまで
🍵per_terra.icon
14:09:18
許可が取れたので、per_terra.iconさんがやってくれた最適化を各ページに反映させるtakker.icon
変更理由も反映させる
per_terra.iconさんのアイコンつけるべきだったのですが、最初の方はつけずじまいにしてしまいました
反映したものには🚛をつける
コードが大幅に変わっているので、別ページにしたいところ
念の為、このページにあるコードや説明はそのままにしておく
code:css
@import "../settingsの置換を図るページ/style.css";
importを除く全てのコードを精査し、最適化、lint、formatを行った
human readabんん目leとはbsahd.icon
言葉選び間違えてますねこれper_terra.icon
簡単に読める的なことを言いたかった
パフォーマンスが向上しているはず
バンドル(minify)後のサイズも元より小さくなるはず
21312 chars -> 19657 chars (約7.7%減)
navbar周りの〜は別途bundleして足した
未処理のものがあるので単純に比較はできない
lintしてあるのでgzip圧縮がうまく働けば更に小さくなっているはず
変更点をどこにもメモしてない 記述しました
間違い探しみたいなものだと思ってもらえれば…per_terra.icon
しばらく様子見をします
問題がなければページタイトルを変えて入れ替える、とか？per_terra.icon
:igyo:.iconcFQ2f7LRuLYP.iconwogikaze.icon
そもそもこのページは何なのか
ついでに全てのコードを精査し、最適化、lint、formatした
その際全てのコードが一つのページにまとまっている方が良いのでまとめた
結局いくつか@importで読み込むものが残ってしまった
速度を保証するために都度bundle（及びminify）してsettingsに貼り付けるようにした この方法が良い感じたのでそのまま運用している
方針
一旦import控えめにやってみる
なにが何してるのか結局よくわからないので
重くなったら止める
lintとformatをする
code:.stylelintrc.json
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order"
]
}
formatは人力
インデントはtab
一行にできるときは一行にする
末尾に改行を入れる
最適化出来そうなものは最適化する
なるべくapp.cssと同じセレクタを使う
とにかく統一！
すごくお疲れ様です🍵cFQ2f7LRuLYP.iconmeganii.iconwogikaze.icontakker.iconcak.icon
動作報告
PC未確認
単純に長すぎることが原因かも
仮説: iconが大量に存在するページで重い
固定幅バージョンにすることで改善したかも
/icons/hr.icon
未処理
文字装飾記法
code:style.css.disable
@import "../画像を並べて表示する記法/style.css";
Streamで背景色や画像が途切れないようにする
なんのためのコード？
z-index周りの修正コードだった気がするtakker.icon
garbage collector
使われてるの？
使っていません。消して大丈夫ですtakker.icon
/icons/hr.icon
諦めて一旦importするやつ
これは無理！per_terra.icon
元のCSSの開発に少し携わったtakker.icon
折を見てなんとかいじります……
でもあれ以上の最適化はむずいと思う
code:style.css
@import url("/api/code/villagepump/特定のリンクにアイコンをつけるUserCSSを自動生成したい/style.css");
分からんper_terra.icon
読み解くのには時間が必要そう
code:style.css
@import url("/api/code/villagepump/リンクを出典アイコンにするUserCSS/style.css");
むしろimportすべきもの
これはなぜ？takker.icon
そのページにしか適用されないのであればここに移す理由がないからですねper_terra.icon
1箇所で完結させたい
1箇所で完結させたいの意味が読み取れませんでしたtakker.icon
すでにこのページと元のページとでCSSにズレが生じている
まあこれは元のページに変更を反映するのがはばかられるという理由でしたが
もうすぐ解決予定
てことは同じCSSの違うver.が同時に存在することを回避するのを「1箇所で完結させたい」と言っているわけではなさそう
また「複数ページに渡って適用されるCSSのみをrefactoringしたい」と推測しますが、その理由もわかりませんでした
(労力の問題はともかく)全部refactoringしてもいいと思う
そんなに深く考えてないですper_terra.icon
というか自分でもなんでimportすべきだと思ったのかはっきりと覚えてない
創作の方は改変するのもナンセンスだな〜って思ったような気がする
腑に落ちるtakker.icon
ネタならすぐ外されるかもだし、まあいっかという感じ
結局bundleするならimportの負荷も考えないでいいし
なるほどですtakker.icon
code:style.css
@import url("/api/code/villagepump/ドカベン記法/sample.css");
@import url("/api/code/villagepump/AIのべりすと創作：イドバタニシ/style.css");
html > body系
formatした
code:style.css
body {
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系
code:style.css.disable
.navbar::after {
position: absolute;
top: 40px;
content: "/* UserCSSメンテ中、動作重い人報告願う */";
}
app.cssの作法に合わせた
formatした
code:style.css
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
不要と思われる記述を削除した
formatした
code: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; }
}
統合済み
code:style.css.disabled
.brand-icon {
background-image: var(--logo-url);
background-repeat: no-repeat;
}
.brand-icon svg {
display: none;
}
不要と思われる記述を削除した
lintとformatをした
code: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のセレクターに合わせた
code:style.css
.search-form .form-group .dropdown-menu {
width: 100%;
max-height: calc(100vh - 130px);
}
https://gyazo.com/b8573fcf79940659624c35bb0d788984
min-width:100%を指定しないと崩れてないです？(これが仕様なのがおかしいと言えばそう)wogikaze.icon
元々そうだからそうしてたんですが、のびのびドロップダウンを名乗るなら広げたほうが良さそうですねper_terra.icon
🚛project homeの字体を変える
formatした
2024-04-17 11:41:09 .quick-launch .project-home .title {を.project-home .title {に変更
code: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と合わせる）
code: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-repeat: no-repeat;
background-size: contain;
}
app.cssのセレクターに合わせた
code:style.css
font-size: 12px;
line-height: 22px;
color: gray;
}
セレクターをapp.cssに合わせた
位置を調整した
2024-05-01 19:56:12 デザイン変更に対応
code:style.css
.navbar .navbar-menu > li.stream-btn {
display: block !important;
a { color: var(--navbar-icon-color, #fff); } }
.app > .container > .page-list系
無効になっていた方を採用した
formatした
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
app.cssのセレクターに合わせた
formatした
code:style.css
display: none;
}
app.cssのセレクターに合わせた
formatした
code:style.css
.grid li.page-list-item a .title { -webkit-line-clamp: 2; }
.app > .row-flex > .col-page > … > .page > .editor系
formatした
code: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系
code:style.css
.line .indent-mark .dot { display: none; }
--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;
}
content: "\f292"; /* hashtag:通常 */
/* content: "\f2dc"; /* snowflake:クリスマス用 */
}
.indent-mark:is(
:has(.dot:nth-child(6n + 3))
.indent-mark:is(
:has(.dot:nth-child(6n + 4))
.indent-mark:is(
:has(.dot:nth-child(6n + 5))
.indent-mark:is(
:has(.dot:nth-child(6n + 6))
.indent-mark:is(
:has(.dot:nth-child(6n + 7))
そのまま
これ消えてません？wogikaze.icon
$ hello
.indent-markと.formula-line
code:style.css.disabled
.line.formula-line .dot { display: block; }
記述を簡略化した
code:style.css
),
),
),
),
.indent-mark::after {
content: "\f005"; /* star */
}
}
lintとformatをした
code:style.css
.mermaid-preview svg {
border-radius: 5px;
}
記述をシンプルにした
code:style.css
.video-player video { max-height: 360px; }
strong .video-player video { max-height: 600px; }
code: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をした
code: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;
}
}
animation-nameを変更した
formatした
code: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; }
animation-nameを変更した
formatした
code: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をした
code: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;
content: "\f10d";
}
}
不要と思われる記述を削除した
セレクターをapp.cssに合わせ、最適化した
formatした
code:style.css
.line:not(.cursor-line) .deco-\#:not(:hover, :has(a.page-link)) { filter: grayscale(100%); }
セレクターをapp.cssに合わせた
lintとformatをした
code: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をした
code:style.css
.deco-\% {
padding: 0.1em 0.2em;
}
ネストした
hoverまたはカーソルを置くことで表示されるようにした
スマートフォンでも読めるようになった
formatした
code: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); }
}
そのまま
code:style.css
.line:not(.cursor-line) .deco-\':not(.deco-_) {
display: inline-block;
width: 100%;
text-align: center;
}
formatした
code: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: "";
}
&::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をした
code:style.css
.line:not(.cursor-line) .deco-\(.deco-\):not(:has(.icon)) {
padding: 5px;
font-weight: 600;
line-height: 1;
border: 0.05em solid #f40; border-radius: 50%;
a.page-link { color: #f40; } }
formatした
code:style.css
.deco-\(.deco-\) img.icon { border-radius: 50%; }
::beforeをネストした
lintとformatをした
code:style.css
.line:not(.cursor-line) .deco-\, {
font-size: 0;
&::before {
font-size: 13px;
content: " ";
}
}
最適化した
formatした
code:style.css
@keyframes icon-rotating { to { transform: rotate(360deg); } }
.deco-- img.icon { animation: 1.5s icon-rotating linear infinite; }
.line .imageと完全に同一になるように変更した
lintとformatをした
code: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をした
code: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をした
code: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をした
code: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;
}
セレクターを最適化した
formatした
code:style.css
.line:not(.cursor-line) .deco-\<.deco-\> .formula { margin: 0; }
カーソル行に適用しないようにした
lintとformatをした
code: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;
vertical-align: top;
border-radius: 0.4em;
}
/* 左吹き出しの角 */
.deco-\{::before {
position: absolute;
width: 0;
padding: 0;
margin: 0;
content: "";
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-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した
code:style.css
.line:not(.cursor-line) .deco-\~:not(:hover) { filter: blur(3px); }
そのまま（固定幅バージョン）
code:style.css
.line a.link.icon:is(
) {
pointer-events: none;
img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
}
}
border-style: dashed none none;
}
変数を使うようにした
サイズを元画像のサイズの1/2にした
それに合わせて位置を調整した
lintとformatをした
code:style.css
@media only screen and (min-width: 480px) {
--size: 960px;
position: fixed;
right: -480px;
bottom: -360px;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-size: var(--size) var(--size);
}
}
変数を使うようにした
lintとformatをした
code:style.css
@media only screen and (min-width: 480px) {
--size: 10vw;
position: fixed;
bottom: 0;
left: 0;
display: block;
width: var(--size);
height: var(--size);
content: "";
background-size: var(--size) var(--size);
}
}
変数を使うようにした
lintとformatをした
code:style.css
@media only screen and (min-width: 480px) {
--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をした
code:style.css
@media only screen and (min-width: 480px) {
--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-size: var(--width) var(--height);
}
}
.app > .row-flex > .col-page > … > related-page-list系
セレクターをapp.cssに合わせた
formatした
code:style.css
.app > .row-flex > .col-page-side > page-menu系
formatした
code:style.css
#page-info-menu + ul > li:is(:nth-child(4), :nth-child(6)) > div { display: none; } /icons/hr.icon
バンドル用リンク
そのままではbrand iconが表示されない
brand-iconが表示されない時は、(画面上の)4行目あたりに../../../pages/villagepump/brand-icon/iconがあれば/api/pages/villagepump/brand-icon/iconに置換する
![https://daiiz-apps.appspot.com/today/jp.svg");](https://daiiz-apps.appspot.com/today/jp.svg");){kind=link}
![https://i.gyazo.com/58cdc21a7d819e0c2b2727e85da571e4.png");](https://i.gyazo.com/58cdc21a7d819e0c2b2727e85da571e4.png");){kind=link}
![https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/たいへんよくできました/good.svg");](https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/たいへんよくできました/good.svg");){kind=link}
![https://takker-weather.vercel.app/jma/weather-map/archives/today.png");](https://takker-weather.vercel.app/jma/weather-map/archives/today.png");){kind=link}
