My xLog theme

xLog.css

html {
  --theme-color: #4f46e5;
}

html.dark {
  --theme-color: #818cf8;
}

:root {
  --sidebar-width: 20rem;
}

@media screen and (max-width: 1024px) {
  .xlog-post-toc {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .xlog-social-platforms.hidden {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --sidebar-width: 16rem;
  }

  .xlog-post-area {
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {

  .medium-zoom-image--opened {
    z-index: 1001;
  }

  .medium-zoom-overlay {
    z-index: 1000;
  }

  .xlog-post-area>div:is(.mx-auto, .max-w-screen-md) {
    margin: 0;
    max-width: unset;
  }

  .xlog-post-actions {
    left: calc(100% + 4rem);
  }

  .xlog-header {
    position: fixed;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    z-index: 100;
  }

  .xlog-header .xlog-banner+div.flex.flex-col {
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .xlog-header>div:nth-child(2)>div:first-child {
    display: none;
  }

  .xlog-header>div:nth-child(2)>div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
  }

  .xlog-header>div:nth-child(2)>div:last-child>div:last-child {
    margin-top: 1rem;
  }

  .xlog-header .xlog-social-platforms {
    display: none;
  }

  .xlog-header .xlog-site-info {
    flex-direction: column;
    align-items: center
  }

  .xlog-site-info>span {
    margin-bottom: 1rem;
  }

  .xlog-site-info>span+div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
  }

  .xlog-site-info>span+div>div.flex:first-child {
    flex-direction: column;
  }

  .xlog-site-info>span+div>div.flex:first-child>* {
    margin-bottom: 1rem;
  }

  .xlog-site-name+div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
  }

  .xlog-site-name+div.flex>* {
    margin: 0 !important;
  }

  .xlog-site-description+div.flex.flex-col {
    flex-direction: column;
  }

  .xlog-site-description {
    order: 3;
  }

  .xlog-site-patron {
    order: 2;
    margin-top: 0.2rem !important;
    margin-left: 0 !important;
  }

  .xlog-post-area {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 20vw;
    max-width: unset;
  }

  section.xlog-blockchain-info {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    z-index: 1000;
  }

  footer>div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
  }

  footer>div>div {
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
  }

  footer>div>div:nth-child(2) {
    display: flex !important;
    justify-content: center;
  }

  footer>div>div:nth-child(2)>* {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  footer>div>button {
    margin: 0 !important;
  }

  footer div[role='tooltip'] {
    transform: translateY(65px);
  }
}

Usage

you can copy and paste the CSS to your custom CSS setting, and subscribe to this gist to get the update for recommend

Preview

--theme-color are custom for yourself

😄 enjoy

Problem

some sections can't display properly in Firefox because :has

Update

2023-05-02

fix: img preview overlay z-index
fix: margin-right for toc when screen was md breakpoint

2023-05-12

refactor: use .xlog-post-area that offer by official instead of [class^='xlog-post-id-']
fix: user's menu dropdown will trigger the main container height change

2023-05-17

fix: use semantics class for blockchain info section

2023-06-20

feat: take hover style of post back

2023-07-18

fix: remove useless style now
feat(BREAK): post list's card follows the official style

2023-08-13

feat: hide social in the header when screen > 769px

2023-08-24

feat: adjust footer style

2023-09-14

refactor: remove all CSS that Firefox don't support

2023-09-23

feat: hidden social in header
fix: make avatar in header center

厉害👍，这个样式真好看

泰酷啦 🎉

因为 2023-07-18 xlog 个人文章页样式修改了，这里暂时与官方样式保持一致，调整了文章页内的样式与原先保持一致

---

如果觉得原来的列表样式更好的可以反馈，我尽量复现原来的 🤡