Last active
June 14, 2022 07:55
-
-
Save JimmyLv/31ce763e8d4ad3f99ada11978e513e55 to your computer and use it in GitHub Desktop.
Show Image Cover behind Page Title for RoamResearch, just like Notion. https://twitter.com/Jimmy_JingLv/status/1469658825167114240?s=20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.roam-body .roam-app .roam-main .roam-article { | |
padding-top: 0; | |
} | |
.roam-article [style="width: 100%;"], .rm-sidebar-outline [style="width: 100%;"], .roam-log-page .rm-title-display { | |
background-image: url(https://unsplash.it/1600/900?random); | |
background-size: cover; | |
height: 30vh; | |
margin-bottom: 10px; | |
position: relative; | |
} | |
h1.rm-title-display span, h1.rm-title-editing-display textarea { | |
color: white; | |
position: absolute; | |
bottom: 4px; | |
padding-left: 10px; | |
} | |
.roam-log-page h1.rm-title-display { | |
display: flex; | |
align-items: flex-end; | |
justify-content: flex-start; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.roam-body .roam-app .roam-main .roam-article { | |
padding-top: 0; | |
} | |
.roam-article [style="width: 100%;"], .rm-sidebar-outline [style="width: 100%;"] { | |
background-image: url(https://www.notion.so/image/https%3A%2F%2Fwww.notion.so%2Fimages%2Fpage-cover%2Fmet_henri_rousseau_1907.jpg?table=block&id=e60d6ec1-04c7-4f30-b18d-be40c7e6dcd9&spaceId=63e5ea65-32b3-433d-a7a5-59ca1196fc85&width=2000&userId=43ebac43-f26b-4d91-a691-0c9fe509aea3&cache=v2); | |
background-size: cover; | |
height: 30vh; | |
margin-bottom: 10px; | |
position: relative; | |
} | |
h1.rm-title-display span, h1.rm-title-editing-display textarea { | |
color: white; | |
padding-left: 10px; | |
position: absolute; | |
bottom: 4px; | |
} |
我新建了 Local Graph,使用您的代码后,一切使用正常。上面反馈中出现的bug,应该是我和我安装的某个 CSS 发生了冲突。我再排查排查。感谢。使用体验很棒。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
[[roam/css]]页面直接嵌入css 代码。我使用的是网页端RR。奇怪的是,使用slidepad 打开RR 页面,图片加载则是正常的。然而,slidepad 的中文输入一直有问题。无法使用。
所有页面标题都无法显示