Tada! 本站有新主题啦!Infinity Bridge*!
效果见图一,更改设置见图二的绿色框,推荐勾选 Enable advanced web interface,这样背景图片才会显示全。手机端的浏览效果见图三图四。
:blobcatrainbow1: :blobcatrainbow2: :blobcatrainbow3: :blobcatrainbow4: :blobcatrainbow5: :blobcatrainbow6: :blobcatrainbow7: :blobcatrainbow8: :blobcatrainbow9: :blobcatrainbow10:
写给站长们的参考:添加新主题非常简单,整个 css 是在 github.com/trwnh/mastomods 的基础上做了一些很小的更改的,请按 repo 的教程一步步来。主题颜色在
~/live/app/javascript/styles/your_theme/palette.scss 里更改,里面的 rgb(r, g, b) 可以改成 rgba(r, g, b, a) 实现透明度;背景图片在 ~/live/app/javascript/styles/your_theme/overrides.scss 里更改,url 里面的内容改成 "../images/your_image", 然后把 your_image 放进 ~/live/app/javascript/images 里,这个文件夹里的其他文件比如 logo 和 preview 也是可以直接替换的。这些完成之后需要 RAILS_ENV=production bundle exec rails assets:precompile。其他的媒体文件比如浏览器上的 icon (就是我站的克莱因瓶)请替换 ~/live/public/favicon.ico。文件夹里的其他文件比如 apple... android.. 也可以改。当然最后不要忘了 systemctl rexxx mastodon-xxx.
:blobcatrainbow1: :blobcatrainbow2: :blobcatrainbow3: :blobcatrainbow4: :blobcatrainbow5: :blobcatrainbow6: :blobcatrainbow7: :blobcatrainbow8: :blobcatrainbow9: :blobcatrainbow10:
* 该主题的所有图片来源于 artstation.com/natureintheory
#建站日志

To the moon 的主题也弄好了, 配色暂时不是很确定,不过先这样吧。
电脑上的背景图在手机端显示起来有点奇怪,可以为手机端重新截一个适合手机分辨率的图*,同样放进 ~/live/app/javascript/images 文件夹,然后在 ~/live/app/javascript/styles/your_theme/overrides.scss 里加一段**:
/* mobile */
@media (max-width: 630px) {
.columns-area {
background: url("../images/your_image_mobile");
background-size: cover;
background-position: center center;
}
}
不过网站上写的 background-attachment: fixed; 貌似没什么用,挠头

* browserstack.com/guide/ideal-s
** webfx.com/blog/web-design/resp

@flyover 你要抱的话等等,我想在源文件里加一个作者名和图片来源

@flyover 我 push 了…但是 infinity bridge 请不要用,我还没有 permission 说不定需要撤掉 :gumball_idk: to the moon 应该可以用吧…

Sign in to participate in the conversation
蓝盒子

这里是在宇宙中漂流的蓝盒子,Speak friend and enter!