{
"title": "分享下我的 xLog 自定义 css",
"tags": [
"post",
"Programming",
"xLog"
],
"sources": [
"xlog"
],
"external_urls": [
"https://birdgg.me/xlog-cutom-css"
],
"date_published": "2023-04-29T13:06:53.826Z",
"content": "效果测试\n\n## 字体测试\n使用的是[霞鹜文楷](https://github.com/lxgw/LxgwWenKai)\n\n庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上；属予作文以记之。\n\n 予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千；此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？\n\n 若夫霪雨霏霏，连月不开；阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。\n\n 至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极。登斯楼也，则有心旷神怡，宠辱皆忘，把酒临风，其喜洋洋者矣。\n\n 嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲。居庙堂之高，则忧其民；处江湖之远，则忧其君。是进亦忧，退亦忧；然则何时而乐耶？其必曰：“先天下之忧而忧，后天下之乐而乐”欤！噫！微斯人，吾谁与归？\n\n 时六年九月十五日。\n\n## 引用\n\n> Tiam, ad mint andaepu dandae nostion secatur sequo quae. \n> **Note** that you can use _Markdown syntax_ within a blockquote.\n\n## 表格\n\n| Italics | Bold | Code |\n| --------- | -------- | ------ |\n| _italics_ | **bold** | `code` |\n\n## 有序列表\n\n1. First item\n2. Second item\n3. Third item\n\n## 无序列表\n\n- List item\n- Another item\n- And another item\n\n\n## 特殊效果\n```markdown\n:span[This is a spoiler]{.spoiler}\n```\n:span[This is a spoiler]{.spoiler}\n\n```markdown\n:::div{.note}\nThis is info text block \n:::\n\n\n:::div{.note.error}\nThis is error text block\n:::\n\n\n:::div{.note.success}\nThis is success text block\n:::\n```\n\n:::div{.note}\nThis is info text block\n:::\n\n\n:::div{.note.error}\nThis is error text block\n:::\n\n\n:::div{.note.success}\nThis is success text block\n:::\n\n## 自定义 css\n\n```css\n@import url(\"https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css\");\n\n:root {\n --theme-color: #f7e78e !important;\n --font-fans: 'SF Compact Rounded','PingFang SC','Microsoft YaHei',Lato,sans-serif;\n --header-height: max(50vh, 450px);\n cursor: url('https://img2.birdgg.me/iku-cursor.png') 0 0, auto;\n}\n\n.xlog-page-index, .xlog-page-post {\n font-family: \"LXGW WenKai Screen R\", sans-serif;\n}\n\n.xlog-header img {\n max-width: 100%;\n}\n\n.xlog-post:hover {\n transform: translateY(-5px);\n}\n\n.xlog-header .text-gray-500 {\n color: white !important;\n text-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);\n}\n\n/* post */\n.prose blockquote {\n border-radius: 0.1875rem;\n background: rgba(var(--tw-colors-i-gray-100),0.8);\n padding: .625rem 1.25rem;\n border-left: 0.25rem solid rgb(var(--tw-colors-i-gray-500));\n}\n\n.prose ol {\n counter-reset: counter;\n}\n\n.prose li {\n list-style: none;\n position: relative;\n}\n\n.prose ol li:before {\n counter-increment: counter;\n content: counter(counter);\n position: absolute;\n width: 1.4em;\n height: 1.4em;\n border-radius: 50%;\n text-align: center;\n font-size: .8em;\n line-height: 1.4;\n top: 0.5em;\n left: -1.8em;\n background: var(--theme-color);\n color: rgba(var(--tw-colors-i-gray-100),1);\n cursor: pointer;\n}\n\n.prose ul li:before {\n content: \"\";\n position: absolute;\n width: 0.4em;\n height: 0.4em;\n background: var(--theme-color);\n border-radius: 50%;\n top: 0.85em;\n left: -1em;\n}\n\n.prose .table-wrapper{\n border: none !important;\n border-radius: 0 !important;\n}\n\n.prose table {\n border-collapse: collapse;\n border-spacing: 0;\n font-size: .875em;\n margin: 0 0 1.25rem;\n width: 100%;\n overflow: auto;\n}\n\n.prose table tbody tr:nth-child(2n-1) {\n background: none !important;\n}\n\n.prose table th, td {\n border: 0.0625rem solid var(--border-color);\n border-bottom: 0.1875rem solid var(--border-color);\n padding: 0.5rem;\n padding-bottom: 0.625rem;\n text-align: left;\n vertical-align: middle;\n}\n\n.prose table th {\n font-weight: 700;\n text-align: center;\n}\n\n.prose table td {\n border-bottom-width: 0.0625rem;\n}\n\n.spoiler {\n filter: blur(8px);\n transition: filter .5s;\n}\n\n.spoiler:hover {\n filter: blur(0px);\n}\n\n.note {\n border-radius: 0.1875rem;\n margin: 1rem 0;\n padding: 1rem;\n position: relative;\n background: rgba(var(--tw-colors-i-gray-100),0.8);\n border-left: 0.25rem solid rgb(var(--tw-colors-i-blue-500));\n padding-left: 1rem;\n}\n\n.error {\n border-left: 0.25rem solid rgb(var(--tw-colors-i-rose-500));\n}\n\n.success {\n border-left: 0.25rem solid rgb(var(--tw-colors-i-teal-500));\n}\n```",
"attributes": [
{
"value": "xlog-cutom-css",
"trait_type": "xlog_slug"
}
]
}
