戴兜

戴兜的小屋

Coding the world.
github
bilibili
twitter
主页归档关于NFT

xLog 样式分享

#CSS#技术1625
AI 生成的摘要
最近正在写自己的介绍页，旧的数据源是WordPress，短时间内接入xLog也不太实际，所以决定先将阉割版的样式搬到xLog。样式包含了一部分暗黑模式和自适应支持，但可能有些遗漏，可以在评论中提醒作者。主要修改了xLog外围样式，对文章内的元素修改不多。修改过的正文元素包括引用和Callout等。样式代码中包含了一些变量和样式的修改。

最近在写自己的介绍页（https://im.daidr.me）。旧的数据源是 WordPress，短时间内接入 xLog 也不太实际，不如就先将阉割版的样式搬到 xLog🤯。
包含了一部分暗黑模式和自适应支持，不过可能有些遗漏，可以在评论提醒我。
主要是对 xLog 外围样式的修改，对文章内的元素修改不多。所有修改过的正文元素都会在下面列举。

样式预览#

截图#

页头#

image

image

文章列表#

image

页脚#

image

image

目前修改的正文元素#

引用#

仅修改了侧边条状装饰和浅色背景

Markdown:

> 这是一条引用：
> 我能吞下玻璃而不伤身体

效果：

这是一条引用：
我能吞下玻璃而不伤身体

Callout#

修复了原先崩坏的样式，基础样式和引用相统一，增加图标

> SUCCESS:
>
> 这是一条成功信息

> WARN:
>
> 这是一条警告

> TIP:
>
> 这是一个小贴士

> DANGER:
> 
> 这是一条错误提示

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");
}

即使有 Stylebot 调试起来还是有些麻烦的🤧（部分样式有优先级问题）
实时预览 gkd

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。