最近在寫自己的介紹頁（https://im.daidr.me）。舊的數據源是 WordPress，短時間內接入 xLog 也不太實際，不如就先將阉割版的樣式搬到 xLog🤯。
包含了一部分暗黑模式和自適應支持，不過可能有些遺漏，可以在評論提醒我。
主要是對 xLog 外圍樣式的修改，對文章內的元素修改不多。所有修改過的正文元素都會在下面列舉。
僅修改了側邊條狀裝飾和淺色背景
Markdown:
效果：
這是一條引用：
我能吞下玻璃而不傷身體
修復了原先崩壞的樣式，基礎樣式和引用相統一，增加圖標
SUCCESS:
這是一條成功信息
WARN:
這是一條警告
TIP:
這是一個小貼士
DANGER:
這是一條錯誤提示
即使有 Stylebot 調試起來還是有些麻煩的🤧（部分樣式有優先級問題）
即時預覽 gkd
> 這是一條引用：
> 我能吞下玻璃而不傷身體
> SUCCESS:
>
> 這是一條成功信息
> WARN:
>
> 這是一條警告
> TIP:
>
> 這是一個小貼士
> DANGER:
>
> 這是一條錯誤提示
/* VARIABLES */
html {
--color-primary-dark: 36 26 22;
--color-primary: 121 85 72;
--color-primary-medium: 161 136 127;
--color-primary-light: 208 196 191;
--color-primary-extralight: 235 230 228;
--theme-color: #785549;
}
html.dark {
--color-primary-dark: 36 26 22;
--color-primary: 107 77 67;
--color-primary-medium: 105 89 83;
--color-primary-light: 44 34 30;
--color-primary-extralight: 97 89 86;
--theme-color: #785549;
}
html {
--wrapper-margin: 0.2rem;
}
/* INITIAL */
/* INITIAL_MAXWIDTH_HEADER */
div.px-5.max-w-screen-md.mx-auto.h-full.relative.flex.items-center.flex-col {
max-width: 820px !important;
}
/* INITIAL_MAXWIDTH_MAIN */
.max-w-screen-md.mx-auto.px-5.pt-12.relative {
max-width: 820px !important;
padding: 1rem;
}
/* INITIAL_MAXWIDTH_CHAIN */
.max-w-screen-md.mx-auto.pt-12.pb-10 {
max-width: 820px !important;
}
/* INITIAL_LAYER-RESET */
.xlog-comment.comment {
z-index: 2;
}
.medium-zoom-overlay {
z-index: 10;
}
.medium-zoom-image--opened {
z-index: 11;
}
/* GENERAL */
.xlog-user {
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));
}
/* GENERAL_HEADER */
.xlog-header {
border-bottom: 0px;
}
div.px-5.max-w-screen-md.mx-auto.h-full.relative.flex.items-center.flex-col {
padding: 0 var(--wrapper-margin) !important;
}
/* GENERAL_HEADER_AUTHOR-CARD */
div.flex.py-12.w-full {
background: rgb(var(--tw-colors-i-white));
padding: 1rem;
margin: 1rem 0;
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgb(var(--color-primary) / 0.3);
}
.xlog-site-name {
color: rgb(var(--color-primary));
}
.xlog-site-description {
color: rgb(var(--color-primary-medium));
}
/* GENERAL_HEADER_NAVBAR */
.text-gray-500.flex.items-center.justify-between.w-full.mt-auto {
background: rgb(var(--tw-colors-i-white));
border-radius: 2rem;
padding: 0.25rem 2rem;
margin: 0;
box-shadow: 0 25px 50px -12px rgb(var(--color-primary) / 0.3);
}
/* MAIN */
div[class*="xlog-post-id-"] {
position: relative;
padding: 2.25rem;
margin: 0 auto;
margin-top: calc(1rem - var(--wrapper-margin));
}
div[class*="xlog-post-id-"] > * {
position: relative;
z-index: 1;
}
div[class*="xlog-post-id-"]:before {
content: "";
position: absolute;
z-index: 0;
top: var(--wrapper-margin);
left: var(--wrapper-margin);
right: var(--wrapper-margin);
bottom: var(--wrapper-margin);
background: rgb(var(--tw-colors-i-white));
border-radius: 2rem;
}
.xlog-post-id-undefined {
padding-left: 0;
padding-right: 0;
padding-top: 0rem;
}
/* MAIN_POST-CARD */
.xlog-post {
margin-left: 0;
margin-right: 0;
margin-top: 0 !important;
margin-bottom: 1em !important;
background-image: linear-gradient(
90deg,
rgb(var(--color-primary-extralight) / 0.5) 0,
rgb(var(--color-primary-extralight) / 0.5) 45%,
transparent 65%,
transparent 100%
);
background-position-x: 100%;
background-size: 300% 100%;
background-color: transparent !important;
border-color: rgba(var(--color-primary-extralight) / 1);
border-radius: 1rem;
border-width: 1px;
transition: border 0.5s linear, background-position-x 0.5s ease-out;
}
.xlog-post:hover {
background-position-x: 0;
border-color: rgb(var(--color-primary-medium) / 0.8);
}
.xlog-post:last-of-type {
margin-bottom: 0px !important;
}
/* MAIN_LOADMORE-BUTTON */
button.mt-8.w-full.bg-zinc-50.text-sm.button.is-text.rounded-lg {
margin: 1.25rem 0;
box-sizing: border-box;
width: -webkit-fill-available;
border-radius: 2rem;
padding: 1rem;
height: auto;
}
/* FOOTER */
/* FOOTER_WRAPPER */
footer.text-zinc-500.border-t {
border: none;
}
/* FOOTER_CHAIN */
/* FOOTER_CHAIN_WRAPPER */
.max-w-screen-md.mx-auto.pt-12.pb-10 {
position: relative;
padding: 0 var(--wrapper-margin);
margin-top: calc(1rem - var(--wrapper-margin));
}
.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(var(--tw-colors-i-white));
border-radius: 2rem;
}
.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm {
position: relative;
padding: 1rem 1rem;
}
.max-w-screen-md.mx-auto.pt-12.pb-10 > .text-sm > * {
z-index: 1;
position: relative;
}
/* FOOTER_CHAIN_FOLD-BUTTON */
button.flex.w-full.justify-between.items-center.rounded-lg.px-4.py-2.text-left.text-gray-900 {
border-radius: 2rem;
}
/* MEDIA QUERY */
@media (min-width: 768px) {
/* GENERAL_HEADER(md:) */
div.flex.py-12.w-full {
padding: 2rem !important;
}
.max-w-screen-md.mx-auto.px-5.pt-12.relative {
padding: 3rem !important;
}
html {
--wrapper-margin: 1.25em !important;
}
}
/* PROSE */
.prose blockquote:not(.callout) {
border: none !important;
padding-left: calc(1.25rem + 4px);
position: relative;
background-color: rgb(var(--color-primary-extralight) / 0.3);
border-radius: 0 .75rem .75rem 0;
}
.prose blockquote:not(.callout)::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 5px;
background:rgb(var(--color-primary) / 0.6);
border-radius: 5px;
}
.prose .callout {
position: relative;
padding: 0 0 0 calc(1.25rem + 4px) !important;
margin: 1.75rem 0 !important;
border: none !important;
border-radius: 0 .75rem .75rem 0;
}
.prose .callout::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 5px;
border-radius: 5px;
background:currentColor;
}
.prose .callout::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-bottom: -0.5rem;
background-color: currentColor;
-webkit-mask: no-repeat center / 100%;
mask: no-repeat center / 100%;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
}
.prose .callout-success::before {
--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");
}
.prose .callout-warn::before {
--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");
}
.prose .callout-tip::before {
--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");
}
.prose .callout-danger::before {
--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");
}