我的 xLog 主题 CSS 配置

主要

@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+Mono+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap');
:root {
  --theme-color: darkorange;
  --banner-bg-color: white;
}
body {
  font-family: "LXGW WenKai Mono TC", "LXGW Wenkai", "Noto Emoji", serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(0 0 0 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
.dark body {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(255 255 255 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
.xlog-post,
footer {
  background-color: rgb(var(--tw-color-white)/var(--tw-text-opacity));
}
.h-\[74px\] { 
  height: auto; 
}
.xlog-site-icon {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-radius: 10%;
}
.xlog-site-follow-count,
.xlog-site-followers,
.xlog-site-followings,
.xlog-site-patron,
.xlog-blockchain-info,
.xlog-site-blockchain-icon,
.xlog-post-blockchain,
.xlog-site-more-menu,
.xlog-site-follow-button,
.mb-2.px-5.pt-3.pb-2.text-2xl.font-extrabold.flex.items-center,
.flex.overflow-x-auto.scrollbar-hide.space-x-3.text-sm.mb-6,
.xlog-shorts-preview > a:first-child,
footer .xlog-social-platforms.align-middle,
.border-border.border.rounded-1g.text-sm.block.cursor-default.p-4.bg-white.shadow-xl.space-y-2,
.inline-flex.text-zinc-500.shrink-0.items-center.justify-center.font-medium.uppercase.overflow-hidden.inline-flex.text-zinc-500.shrink-0.items-center.justify-center.font-medium.uppercase.overflow-hidden.max-w-full.max-h-full.rounded-full.align-middle.max-h-full.rounded-full.align-middle,
a.bg-slate-100.rounded-lg.flex.justify-center.flex-col.py-4.px-6[href="/dashboard/sino/tokens"],
a.bg-slate-100.rounded-lg.flex.justify-center.flex-col.py-4.px-6[href="/dashboard/sino/achievements"] {
  display: none !important;
}
.xlog-shorts-preview.border-b {
  border-bottom-width: 0;
}
.xlog-shorts-preview:after {
  content: ' ';
  background: url(https://v2.jinrishici.com/one.svg?font-size=20&spacing=2&color=black) no-repeat center;
  height: 23px;
  left: 3vw;
  right: 0;
  display: block;
  position: absolute;
  margin: 11px auto;
  box-sizing: border-box;
}
@media (max-width:387px) {
  .xlog-site-icon { 
    display: none; 
  }
}
@media (max-width:640px) {
  .backdrop-blur-sm { 
    --tw-backdrop-blur: none; 
  }
  .xlog-header { 
    height: 300px !important; 
    top: -260px !important; 
  }
  .fixed.bg-black.rounded-3xl.px-5.py-3.text-accent.z-50.transition-opacity.duration-500 { 
    display: none; 
  }
}
.xlog-post-toc { 
  padding-left: 1rem; 
}
.xlog-post-toc > .truncate { 
  overflow: clip; 
  text-overflow: clip; 
}
@media (min-width:640px) {
  .sm\:text-4xl { 
    line-height: 2.2rem; 
  }
  .sm\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: calc(.8rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.8rem * var(--tw-space-y-reverse));
  }
}
.xlog-post {
  padding: 1rem;
  transition: all 0.3s;
}
.xlog-post:hover {
  box-shadow: 0 16px 32px 0 rgba(48,55,66,0.15);
  transform: translate(0,-10px);
}
#to-top {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 1.5px;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
}
.xlog-page {
  background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
}
.xlog-header {
  position: sticky;
  height: 360px;
  top: -320px;
  z-index: 8;
  border: none;
  background-color: rgb(var(--tw-color-zinc-50)/var(--tw-bg-opacity));
  box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
}
.xlog-header .flex.py-12.w-full {
  width: 100%;
  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(2px) brightness(80%);
}
main {
  max-width: 1000px;
  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;
  text-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.2);
}
kbd {
  border: 1px solid;
  border-color: var(--tw-text-opacity);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 3px;
  font-family: inherit;
  font-size: 0.85em;
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
  background-color: black;
  color: black;
  text-shadow: none;
}
.heimu:hover,
.heimu:active,
.heimu:hover .heimu,
.heimu:active .heimu { 
  color: white; 
}
.heimu:hover a,
a:hover .heimu,
.heimu:active a,
a:active .heimu { 
  color: lightblue; 
}
.heimu:hover .new,
.heimu .new:hover,
.new:hover .heimu,
.heimu:active .new,
.heimu .new:active,
.new:active .heimu { 
  color: firebrick; 
}
.xlog-comment-list .font-medium.text-accent[href="https://sino.xlog.app"]::after {
  content: "PO主";
  background: turquoise;
  color: rgb(var(--tw-color-white)/var(--tw-text-opacity));
  padding: 0.2em;
  border-radius: 5px;
  font-size: 80%;
  font-weight: bold;
  margin: 0 calc(.25rem * var(--tw-space-x-reverse)) 0 calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
  word-break: keep-all;
}
.prose a:hover { 
  text-decoration: none; 
}

底欄樣式和升頂按鈕

精簡樣式源碼的時候準備刪掉的(留個備份檔
非原創, 但做了些許修改

側欄的飛天哈基米
建議只在桌面端啓用

  .xlog-back-to-top {
  background: url('ipfs://bafkreidu3jruq7af7k5mtimmodtrsg4322yobr346l3x7jljen3xflflny') center/cover;
  width: 70px;
  height: 900px;
  margin-top: 0;
  opacity: 1;
  border: none;
  right: 50px;
}
.xlog-back-to-top.xlog-fab-inactive {
  transform: translate(0, -900px);
  display: block;
}
.xlog-back-to-top i {
  display: none;
}

Footer 的胖次

footer {
    position: relative;
    margin-top: 260px;
}
footer:before {
    content: ' ';
    background: url(ipfs://bafkreigq3m2bj76jl7abz6i5rlzegutcrfc2j2nqkcypksbeyu67fsymoy) no-repeat center;
    height: 368px;
    width: 100%;
    display: block;
    position: absolute;
    top: -295px;
    left: 0;
}