:::div{.note.info} 2023-07-20 Updates: 修复首页布局，使用 xLog 提供的样式 2023-05-30 Updates: 修复 css 对 dashboard 的影响 2023-05-15 Updates: 修复了一些 css 变量失效，主题更加二次元化，文章列表更加适合设置封面图 ::: 效果测试 ## 字体测试使用的是[霞鹜文楷](https://github.com/lxgw/LxgwWenKai) 庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上；属予作文以记之。　　予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千；此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？　　若夫霪雨霏霏，连月不开；阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。　　至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极。登斯楼也，则有心旷神怡，宠辱皆忘，把酒临风，其喜洋洋者矣。　　嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲。居庙堂之高，则忧其民；处江湖之远，则忧其君。是进亦忧，退亦忧；然则何时而乐耶？其必曰：“先天下之忧而忧，后天下之乐而乐”欤！噫！微斯人，吾谁与归？　　时六年九月十五日。 ## 引用 > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use _Markdown syntax_ within a blockquote. ## 表格 | Italics | Bold | Code | | --------- | -------- | ------ | | _italics_ | **bold** | `code` | ## 有序列表 1. First item 2. Second item 3. Third item ## 无序列表 - List item - Another item - And another item ## 特殊效果 ```markdown :span[This is a spoiler]{.spoiler} ``` :span[This is a spoiler]{.spoiler} ```markdown :::div{.note} This is default text block ::: :::div{.note.info} This is info text block ::: :::div{.note.error} This is error text block ::: :::div{.note.success} This is success text block ::: ``` :::div{.note} This is info text block ::: :::div{.note.info} This is info text block ::: :::div{.note.error} This is error text block ::: :::div{.note.success} This is success text block ::: ## 自定义 css ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css"); @font-face { font-family: 'Candyshop'; src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm); font-display: swap; } :root { --theme-color: #f7e78e !important; --font-fans: 'SF Compact Rounded', 'PingFang SC', 'Microsoft YaHei', Lato, sans-serif; --header-height: max(50vh, 450px); --grey-0: #fff; --grey-1: #fdfdfd; --grey-2: #f7f7f7; --grey-3: #eff2f3; --grey-4: #ccc; --grey-5: #999; --grey-6: #666; --grey-7: #333; --grey-8: #222; --grey-9: #000; --grey-1-a0: rgba(253, 253, 253, 0); --grey-1-a7: rgba(253, 253, 253, .7); --grey-1-a5: rgba(253, 253, 253, .5); --grey-1-a3: rgba(253, 253, 253, .3); --grey-9-a1: rgba(0, 0, 0, .1); --grey-9-a5: rgba(0, 0, 0, .5); --grey-2-a0: rgba(247, 247, 247, 0); --color-pink-light: #ffe6fa; --color-cyan-light: #e3fdf5; --color-red: #e9546b; --color-pink: #ed6ea0; --color-orange: #ec8c69; --color-yellow: #eab700; --color-green: #0a7426; --color-aqua: #3e999f; --color-blue: #38a1db; --color-purple: #9d5b8b; --color-grey: #869194; --color-red-a1: rgba(233, 84, 107, .1); --color-red-a3: rgba(233, 84, 107, .3); --color-pink-a3: rgba(237, 110, 160, .3); --color-pink-light-a3: rgba(255, 230, 250, .3); --color-pink-light-a5: rgba(255, 230, 250, .5); --color-pink-light-a7: rgba(255, 230, 250, .7); --body-bg-shadow: var(--grey-2); --box-bg-shadow: var(--grey-9-a1); --text-color: var(--grey-7); --header-text-color: var(--grey-0); cursor: url('https://img2.birdgg.me/iku-cursor.png') 0 0, auto; } html.dark { --grey-0: #222; --grey-1: #21252b; --grey-2: #363636; --grey-3: #444; --grey-4: #666; --grey-5: #aaa; --grey-6: #ccc; --grey-7: #ddd; --grey-8: #eee; --grey-9: #f7f7f7; --grey-1-a7: rgba(34, 34, 34, .7); --grey-1-a5: rgba(34, 34, 34, .5); --grey-1-a3: rgba(34, 34, 34, .3); --grey-1-a0: rgba(34, 34, 34, 0); --grey-9-a1: rgba(51, 51, 51, .1); --grey-2-a0: rgba(54, 54, 54, 0); --color-pink-light: #322d31; --color-cyan-light: #2d3230; --color-red: rgba(237, 118, 137, .9); --color-pink: rgba(241, 139, 179, .8); --color-orange: rgba(240, 163, 135, .8); --color-yellow: #ffe175; --color-green: #86c59d; --color-aqua: #97d3d6; --color-blue: #9cd0ed; --color-purple: #cfacc5; --color-grey: #c3c8ca; --body-bg-shadow: #000; --box-bg-shadow: #000; --text-color: var(--grey-5); --header-text-color: var(--grey-9); } .xlog-page { background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom; } .xlog-page .max-w-screen-md { max-width: 1000px; } .xlog-header { position: sticky; height: 400px; top: -360px; z-index: 1; border: none; background-color: var(--grey-1) } .xlog-header .flex.py-12.w-full { width: 80%; justify-content: center; } .xlog-header .xlog-banner { height: calc(100% - 40px) } .xlog-header .xlog-banner img[alt=banner] { width: 100%; max-width: unset; filter: blur(5px) brightness(75%) } @media (width > 1024px) { .xlog-page-index .xlog-header { height: 100vh; top: calc(40px - 100vh); } } .xlog-site-name { color: var(--theme-color); font-family: Candyshop; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff; font-size: 35px; } .xlog-page-index, .xlog-page-post { font-family: "LXGW WenKai Screen R", sans-serif; } main { max-width: 1000px !important; background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top; box-shadow: 0 1.25rem 1rem 0.3125rem var(--body-bg-shadow); padding-bottom: 2rem; } .xlog-header .text-gray-500 { color: white !important; text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .5); } /* post */ .prose :not(pre)>code { color: var(--theme-color); border-radius: 0.3rem; border: 0.0625rem solid rgba(0,0,0,.1); background-color: var(--grey-0); padding: 0.2rem 0.3rem; overflow-wrap: break-word; word-wrap: break-word; } .prose blockquote { border-radius: 0.1875rem; padding: .625rem 1.25rem; border-left: 0.25rem solid var(--theme-color); font-size: 90%; background-color: var(--grey-2); margin: 1.25rem 0; } .prose ol { counter-reset: counter; } .prose li { list-style: none; position: relative; } .prose ol li:before { counter-increment: counter; content: counter(counter); position: absolute; width: 1.4em; height: 1.4em; border-radius: 50%; text-align: center; font-size: .8em; line-height: 1.4; top: 0.5em; left: -1.8em; background: var(--theme-color); color: rgba(var(--tw-colors-i-gray-100), 1); cursor: pointer; } .prose ul li:before { content: ""; position: absolute; width: 0.4em; height: 0.4em; background: var(--theme-color); border-radius: 50%; top: 0.85em; left: -1em; } .prose .table-wrapper { border: none !important; border-radius: 0 !important; } .prose table { border-collapse: collapse; border-spacing: 0; font-size: .875em; margin: 0 0 1.25rem; width: 100%; overflow: auto; } .prose table tbody tr:nth-child(2n-1) { background: none !important; } .prose table th, td { border: 0.0625rem solid var(--border-color); border-bottom: 0.1875rem solid var(--border-color); padding: 0.5rem; padding-bottom: 0.625rem; text-align: left; vertical-align: middle; } .prose table th { font-weight: 700; text-align: center; } .prose table td { border-bottom-width: 0.0625rem; } .spoiler { filter: blur(8px); transition: filter .5s; } .spoiler:hover { filter: blur(0px); } .dark .info { --note-border: rgba(85, 98, 132, 0.8); --note-bg: rgba(48, 49, 50, 0.8); --note-text: rgba(109, 164, 219, 0.8); --note-hover: rgba(39, 127, 214, 0.8); } .info { --note-border: #8fa4dc; --note-bg: #f1f9ff; --note-text: #1d4974; --note-hover: #1d5fa0; } .note { background: var(--note-bg, var(--grey-2)); color: var(--grey-6); border-left: 0.25rem solid var(--note-border, var(--grey-4)); font-size: .875em; --primary-color: var(--note-text); border-radius: 0.1875rem; margin: 1rem 0; padding: 1rem; position: relative; padding-left: 1rem; } .dark .error { --note-border: rgba(146, 107, 115, 0.8); --note-bg: rgba(50, 48, 48, 0.8); --note-text: rgba(239, 38, 79, 0.8); --note-hover: rgba(168, 49, 72, 0.8); } .error { --note-border: #f4b3c1; --note-bg: #fff2f5; --note-text: #cc0f35; --note-hover: #f14668; } .dark .success { --note-border: rgba(97, 116, 88, 0.8); --note-bg: rgba(50, 50, 48, 0.8); --note-text: rgba(128, 200, 129, 0.8); --note-hover: rgba(41, 95, 42, 0.8); } .success { --note-border: #a3c293; --note-bg: #fcfff5; --note-text: #2c662d; --note-hover: #3b883c; } /* phone */ @media (max-width: 767px) { .xlog-post { flex-direction: column-reverse !important; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; } .xlog-post .xlog-post-cover { width: 100%; height: 14rem; margin: auto; -webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); border-radius: 0.625rem 0.625rem 0 0; } .xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover { width: 100%; margin: auto; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); border-radius: 0.625rem 0.625rem 0 0; } .xlog-post>div:nth-of-type(1) { width: 100%; padding: 10px; } main { max-width: 500px; } } ```