Skip to content

Instantly share code, notes, and snippets.

@cutls
Last active July 16, 2020 11:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cutls/35faafc3d147d79dab0bda836b7eeb07 to your computer and use it in GitHub Desktop.
Save cutls/35faafc3d147d79dab0bda836b7eeb07 to your computer and use it in GitHub Desktop.
#InstanceTicker は3割以上圧縮できると思うって話。いやまぁそのうち2割はtext-shadowの廃止なんだけど。
@charset 'utf-8';
/* ここはいつも通り */
.getting-started__footer:after {
color: #fff !important;
padding-left: 18px !important;
font-size: 12px !important;
width: 240px !important;
height: 64px !important;
background: url('https://res.cloudinary.com/miy/005.png?071522'), linear-gradient(90deg, #059, transparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: '#InstanceTicker(Type-0) \AVer.202007152124 \Ahttps://miy.pw';
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
text-shadow: #223 1px 1px, #223 -1px -1px, #223 -1px 1px, #223 1px -1px, #223 0 1px, #223 0 -1px, #223 -1px 0, #223 1px 0 !important;
margin: 16px 0 16px 0 !important;
}
.compose-form:after {
color: #fff !important;
padding-left: 18px !important;
font-size: 12px !important;
width: 240px !important;
height: 16px !important;
background: url('https://res.cloudinary.com/miy/001.png?071522'), linear-gradient(90deg, #059, transparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: '#InstanceTicker(Type-0) Ver.202007152124 ';
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
text-shadow: #223 1px 1px, #223 -1px -1px, #223 -1px 1px, #223 1px -1px, #223 0 1px, #223 0 -1px, #223 -1px 0, #223 1px 0 !important;
margin: 16px 0 16px 0 !important;
}
/*
ここまでいつも通り
ここから共通部分だけ先に指定する。同じのを何百、何千と書くのはよくない
*/
.status .display-name::after {
font-size: 12px !important;
height: 16px !important;
display: block !important;
white-space: pre !important;
text-overflow: ellipsis !important;
padding-left: 16px !important;
font-weight: bolder !important;
background-repeat: no-repeat, no-repeat !important;
}
.status__display-name.muted::after,
.notification__display-name::after {
font-size: 12px !important;
height: 16px !important;
display: inline !important;
white-space: pre !important;
text-overflow: ellipsis !important;
padding: 0 16px 0 16px !important;
margin: 0 !important;
background-repeat: no-repeat, no-repeat !important;
font-weight: bolder !important;
opacity: 0.4 !important;
}
/*
先に変数でデータを指定する。これをやると、Mastodonのいつものアイコンで#26aを指定するいつものやつが、
全部ここに書けてしまうので圧縮できる。
命名規則は、これは.は次の字を大文字に、ハイフンはアンダーバーに変更にしてるけどなんでもいい
*/
:root {
--mastodonBaseColor: linear-gradient(90deg, #26a 84%, transparent);
--mastodonBaseColorTransparent: linear-gradient(90deg, #26a 84%, transparent);
--white: #fff;
--cutlsComColor: #000;
--cutlsComBaseColor: linear-gradient(90deg, #e0e0e0, transparent);
--cutlsComBaseColorTransparent: linear-gradient(90deg, #e0e0e0 84%, transparent);
--cutlsComBg: url('https://res.cloudinary.com/miy/t_t/81052?071522');
--mstdnJpBg: url('https://res.cloudinary.com/miy/i1?071522');
}
/*各インスタンスで違うやつだけを指定していく。text-shadowは要るのか?になったので外した。*/
/*cutls.com START*/
.status a[href^='https://cutls.com/'] .display-name::after
{
color: var(--cutlsComColor) !important;
background: var(--cutlsComBg), var(--cutlsComBaseColor) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'cutls.com' !important;
}
.status__display-name[href^='https://cutls.com/'].muted::after, .notification__display-name[href^='https://cutls.com/']::after
{
color: var(--cutlsComColor) !important;
background: var(--cutlsComBg), var(--cutlsComBaseColorTransparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'cutls.com' !important;
}
/*cutls.com END 1インスタンス700B程度で収まる */
.status a[href^='https://mstdn.jp/'] .display-name::after
{
color: var(--white) !important;
background: var(--mstdnJpBg), var(--mastodonBaseColor) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'mstdn.jp' !important;
}
.status__display-name[href^='https://mstdn.jp/'].muted::after, .notification__display-name[href^='https://mstdn.jp/']::after
{
color: var(--white) !important;
background: var(--mstdnJpBg), var(--mastodonBaseColorTransparent) !important;
background-repeat: no-repeat, no-repeat !important;
content: 'mstdn.jp' !important;
}
/*
約1000インスタンスあるが、1200KBくらいあったものが恐らく、
800KBくらいにまで減ると思う(全体の1割(100インスタンス)が独自のカラーを導入していると仮定)
*/
@weepjp
Copy link

weepjp commented Jul 16, 2020

参考にしました。
本日から導入します。
ありがとうございました。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment