{
"title": "xLog 样式分享",
"tags": [
"post",
"CSS",
"技术"
],
"summary": "最近在写自己的介绍页（https://im.daidr.me）。旧的数据源是 WordPress，短时间内接入 xLog 也不太实际，不如就先将阉割版的样式搬到 xLog🤯。 包含了一部分暗黑模式和自适应支持，不过可能有些遗漏，可以在评论提醒我。\n 主要是对 xLog…",
"sources": [
"xlog"
],
"external_urls": [
"https://xlog.daidr.me/xlog-style"
],
"date_published": "2023-04-30T16:02:31.854Z",
"content": "> 最近在写自己的介绍页（[https://im.daidr.me](https://im.daidr.me)）。旧的数据源是WordPress，短时间内接入xLog也不太实际，不如就先将阉割版的样式搬到xLog🤯。\n> 包含了一部分暗黑模式和自适应支持，不过可能有些遗漏，可以在评论提醒我。\n> 主要是对xLog外围样式的修改，对文章内的元素修改不多。所有修改过的正文元素都会在下面列举。\n\n## 样式预览\n\n### 截图\n\n#### 页头\n\n\n\n\n\n#### 文章列表\n\n\n\n#### 页脚\n\n\n\n\n\n### 目前修改的正文元素\n\n#### 引用\n\n仅修改了侧边条状装饰和浅色背景\n\nMarkdown: \n\n```markdown\n> 这是一条引用：\n> 我能吞下玻璃而不伤身体\n```\n\n效果：\n\n> 这是一条引用：\n> 我能吞下玻璃而不伤身体\n\n#### Callout\n\n修复了原先崩坏的样式，基础样式和引用相统一，增加图标\n\n```markdown\n> SUCCESS:\n>\n> 这是一条成功信息\n\n> WARN:\n>\n> 这是一条警告\n\n> TIP:\n>\n> 这是一个小贴士\n\n> DANGER:\n> \n> 这是一条错误提示\n```\n\n> SUCCESS:\n>\n> 这是一条成功信息\n\n> WARN:\n>\n> 这是一条警告\n\n> TIP:\n>\n> 这是一个小贴士\n\n> DANGER:\n> \n> 这是一条错误提示\n\n### 样式代码\n\n```css\n/* VARIABLES */\nhtml {\n --color-primary-dark: 36 26 22;\n --color-primary: 121 85 72;\n --color-primary-medium: 161 136 127;\n --color-primary-light: 208 196 191;\n --color-primary-extralight: 235 230 228;\n --theme-color: #785549;\n}\n\nhtml.dark {\n --color-primary-dark: 36 26 22;\n --color-primary: 107 77 67;\n --color-primary-medium: 105 89 83;\n --color-primary-light: 44 34 30;\n --color-primary-extralight: 97 89 86;\n --theme-color: #785549;\n}\n\nhtml {\n --wrapper-margin: 0.2rem;\n}\n\n/* INITIAL */\n/* INITIAL_MAXWIDTH_HEADER */\ndiv.px-5.max-w-screen-md.mx-auto.h-full.relative.flex.items-center.flex-col {\n max-width: 820px !important;\n}\n\n/* INITIAL_MAXWIDTH_MAIN */\n.max-w-screen-md.mx-auto.px-5.pt-12.relative {\n max-width: 820px !important;\n padding: 1rem;\n}\n\n/* INITIAL_MAXWIDTH_CHAIN */\n.max-w-screen-md.mx-auto.pt-12.pb-10 {\n max-width: 820px !important;\n}\n\n/* INITIAL_LAYER-RESET */\n.xlog-comment.comment {\n z-index: 2;\n}\n\n.medium-zoom-overlay {\n z-index: 10;\n}\n\n.medium-zoom-image--opened {\n z-index: 11;\n}\n\n/* GENERAL */\n.xlog-user {\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1.5' clip-rule='evenodd' viewBox='0 0 1292 784'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='14'%3E%3Cpath d='m228 370 26 102-101-28 75-74Zm997-206-94-48 88-57 6 105ZM549 502l-94-48 87-58 7 106Zm666-53 49 49-49 48-48-48 48-49Zm-184 182 6 103-102 6-7-102 103-7Zm-837 1-17 67-66-17 17-66 66 16ZM507 84l64 66-91-4-64-66 91 4Zm202 132 94 19-65 72-94-20 65-71ZM7 230l74-63M39 268l74-63m1050 75 94-26m-80 74 93-26m-96 353 110 70m-140-18 109 69'/%3E%3Ccircle cx='221' cy='53.4' r='33.4'/%3E%3Ccircle cx='1047.3' cy='231.4' r='33.4'/%3E%3Ccircle cx='409.7' cy='690.9' r='50.7'/%3E%3Cpath d='m661 608 121 90-146 59 25-149Z'/%3E%3Ccircle cx='801.3' cy='68.5' r='61.5'/%3E%3Ccircle cx='917' cy='437.1' r='70.9'/%3E%3C/g%3E%3C/svg%3E\") rgb(var(--color-primary-light));\n}\n\n/* GENERAL_HEADER */\n.xlog-header {\n border-bottom: 0px;\n}\ndiv.px-5.max-w-screen-md.mx-auto.h-full.relative.flex.items-center.flex-col {\n padding: 0 var(--wrapper-margin) !important;\n}\n\n/* GENERAL_HEADER_AUTHOR-CARD */\ndiv.flex.py-12.w-full {\n background: rgb(var(--tw-colors-i-white));\n padding: 1rem;\n margin: 1rem 0;\n border-radius: 2rem;\n box-shadow: 0 25px 50px -12px rgb(var(--color-primary) / 0.3);\n}\n\n.xlog-site-name {\n color: rgb(var(--color-primary));\n}\n\n.xlog-site-description {\n color: rgb(var(--color-primary-medium));\n}\n\n/* GENERAL_HEADER_NAVBAR */\n.text-gray-500.flex.items-center.justify-between.w-full.mt-auto {\n background: rgb(var(--tw-colors-i-white));\n border-radius: 2rem;\n padding: 0.25rem 2rem;\n margin: 0;\n box-shadow: 0 25px 50px -12px rgb(var(--color-primary) / 0.3);\n}\n\n/* MAIN */\ndiv[class*=\"xlog-post-id-\"] {\n position: relative;\n padding: 2.25rem;\n margin: 0 auto;\n margin-top: calc(1rem - var(--wrapper-margin));\n}\n\ndiv[class*=\"xlog-post-id-\"] > * {\n position: relative;\n z-index: 1;\n}\n\ndiv[class*=\"xlog-post-id-\"]:before {\n content: \"\";\n position: absolute;\n z-index: 0;\n top: var(--wrapper-margin);\n left: var(--wrapper-margin);\n right: var(--wrapper-margin);\n bottom: var(--wrapper-margin);\n background: rgb(var(--tw-colors-i-white));\n border-radius: 2rem;\n}\n\n.xlog-post-id-undefined {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0rem;\n}\n\n/* MAIN_POST-CARD */\n.xlog-post {\n margin-left: 0;\n margin-right: 0;\n margin-top: 0 !important;\n margin-bottom: 1em !important;\n background-image: linear-gradient(\n 90deg,\n rgb(var(--color-primary-extralight) / 0.5) 0,\n rgb(var(--color-primary-extralight) / 0.5) 45%,\n transparent 65%,\n transparent 100%\n );\n background-position-x: 100%;\n background-size: 300% 100%;\n background-color: transparent !important;\n border-color: rgba(var(--color-primary-extralight) / 1);\n border-radius: 1rem;\n border-width: 1px;\n transition: border 0.5s linear, background-position-x 0.5s ease-out;\n}\n\n.xlog-post:hover {\n background-position-x: 0;\n border-color: rgb(var(--color-primary-medium) / 0.8);\n}\n\n.xlog-post:last-of-type {\n margin-bottom: 0px !important;\n}\n\n/* MAIN_LOADMORE-BUTTON */\nbutton.mt-8.w-full.bg-zinc-50.text-sm.button.is-text.rounded-lg {\n margin: 1.25rem 0;\n box-sizing: border-box;\n width: -webkit-fill-available;\n border-radius: 2rem;\n padding: 1rem;\n height: auto;\n}\n\n/* FOOTER */\n/* FOOTER_WRAPPER */\nfooter.text-zinc-500.border-t {\n border: none;\n}\n\n/* FOOTER_CHAIN */\n/* FOOTER_CHAIN_WRAPPER */\n.max-w-screen-md.mx-auto.pt-12.pb-10 {\n position: relative;\n padding: 0 var(--wrapper-margin);\n margin-top: calc(1rem - var(--wrapper-margin));\n}\n\n.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgb(var(--tw-colors-i-white));\n border-radius: 2rem;\n}\n\n.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm {\n position: relative;\n padding: 1rem 1rem;\n}\n\n.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm > * {\n z-index: 1;\n position: relative;\n}\n\n/* FOOTER_CHAIN_FOLD-BUTTON */\nbutton.flex.w-full.justify-between.items-center.rounded-lg.px-4.py-2.text-left.text-gray-900 {\n border-radius: 2rem;\n}\n\n/* MEDIA QUERY */\n@media (min-width: 768px) {\n /* GENERAL_HEADER(md:) */\n div.flex.py-12.w-full {\n padding: 2rem !important;\n }\n\n .max-w-screen-md.mx-auto.px-5.pt-12.relative {\n padding: 3rem !important;\n }\n\n html {\n --wrapper-margin: 1.25em !important;\n }\n}\n\n/* PROSE */\n\n.prose blockquote:not(.callout) {\n border: none !important;\n padding-left: calc(1.25rem + 4px);\n position: relative;\n background-color: rgb(var(--color-primary-extralight) / 0.3);\n border-radius: 0 .75rem .75rem 0;\n}\n.prose blockquote:not(.callout)::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 5px;\n background:rgb(var(--color-primary) / 0.6);\n border-radius: 5px;\n}\n\n.prose .callout {\n position: relative;\n padding: 0 0 0 calc(1.25rem + 4px) !important;\n margin: 1.75rem 0 !important;\n border: none !important;\n border-radius: 0 .75rem .75rem 0;\n}\n\n.prose .callout::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 5px;\n border-radius: 5px;\n background:currentColor;\n}\n\n.prose .callout::before {\n content: \"\";\n display: inline-block;\n width: 1.2em;\n height: 1.2em;\n margin-bottom: -0.5rem;\n background-color: currentColor;\n -webkit-mask: no-repeat center / 100%;\n mask: no-repeat center / 100%;\n -webkit-mask-image: var(--svg);\n mask-image: var(--svg);\n}\n\n.prose .callout-success::before {\n --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0h24ZM13 23h-1v1h1v-1Zm0 0v1-1Zm-1 0v1-1Z'/%3E%3Cpath fill='currentColor' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm4 4a1 1 0 0 1 1 2l-6 5a1 1 0 0 1-1 0l-3-2a1 1 0 0 1 1-2l3 2 5-5Z'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n.prose .callout-warn::before {\n --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0h24ZM13 23h-1v1h1v-1Zm0 0v1-1Zm-1 0v1-1Z'/%3E%3Cpath fill='currentColor' d='m13 3 9 15a2 2 0 0 1-1 2H3a2 2 0 0 1-1-2l9-15h2Zm-1 2L4 18h16L12 5Zm0 10a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-7a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Z'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n.prose .callout-tip::before {\n --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0h24ZM13 23h-1v1h1v-1Zm0 0v1-1Zm-1 0v1-1Z'/%3E%3Cpath fill='currentColor' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 6 1 1v5a1 1 0 0 1 0 2h-1a1 1 0 0 1-1-1v-5a1 1 0 1 1 0-2h1Zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n.prose .callout-danger::before {\n --svg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0h24ZM13 23h-1v1h1v-1Zm0 0v1-1Zm-1 0v1-1Z'/%3E%3Cpath fill='currentColor' d='M15 2a2 2 0 0 1 2 1l4 4a2 2 0 0 1 1 2v6a2 2 0 0 1-1 2l-4 4a2 2 0 0 1-2 1H9a2 2 0 0 1-2-1l-4-4a2 2 0 0 1-1-2V9a2 2 0 0 1 1-2l4-4a2 2 0 0 1 2-1h6Zm0 2H9L4 9v6l5 5h6l5-5V9l-5-5Zm-3 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1Z'/%3E%3C/g%3E%3C/svg%3E\");\n}\n```\n\n> 即使有Stylebot调试起来还是有些麻烦的🤧（部分样式有优先级问题）\n> ~~实时预览gkd~~",
"attributes": [
{
"value": "xlog-style",
"trait_type": "xlog_slug"
}
]
}
