Recently, I've been working on my introduction page (https://im.daidr.me). The old data source is WordPress, and integrating xLog in a short time isn't very practical, so I might as well just move the stripped-down version of the style to xLog 🤯.
It includes some dark mode and responsive support, but there might be some omissions, so feel free to remind me in the comments.
The main modifications are to the peripheral styles of xLog, with few changes to the elements within the articles. All modified text elements will be listed below.
Style Preview#
Screenshots#
Header#
Article List#
Footer#
Currently Modified Text Elements#
Quote#
Only modified the sidebar decoration and light background.
Markdown:
> This is a quote:
> I can swallow glass without hurting my body.
Effect:
This is a quote:
I can swallow glass without hurting my body.
Callout#
Fixed the previously broken style, unified the basic style with the quote, and added icons.
> SUCCESS:
>
> This is a success message.
> WARN:
>
> This is a warning.
> TIP:
>
> This is a small tip.
> DANGER:
>
> This is an error message.
SUCCESS:
This is a success message.
WARN:
This is a warning.
TIP:
This is a small tip.
DANGER:
This is an error message.
Style Code#
/* 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");
}
Even with Stylebot, debugging is still a bit troublesome 🤧 (some styles have priority issues).
Real-time preview gkd