banner
夜光LOEN

夜光LOEN

👨🏻‍💻热爱开源的前端小菜鸟 | 🆓喜欢开源和白嫖 | 🐋喜欢摸鱼
ホームアーカイブ关于

分享一波我的xlog css

#css主题984
AI が生成した要約
这篇文章是关于CSS配置的分享，作者感谢了bridgg大佬和enpitsulin大佬的配置，并提供了他们的配置地址。文章中展示了深色模式和浅色模式的效果图，并分享了相关的代码。作者还提到自己是个菜鸟，混合了两位大佬的配置可能会写得有点乱，希望大家轻喷。文章还更新了一波，添加了标签的样式。

我的 css 配置源于 bridgg 大佬和 enpitsulin 大佬的所分享的配置，感谢两位大佬的配置，这是 bridgg 大佬的配置地址：https://birdgg.me/xlog-cutom-css，这是 enpitsulin 大佬的配置地址：https://gist.github.com/enpitsuLin/d90409c48e1465f1eeb702ec2cc8824e。⚠️因为我自己也是个菜鸟，所以混合了两个大佬的配置以后肯定会写的有点乱，所以大佬轻喷

🗓️2023 年 6 月 3 日更新了一波，添加了标签的样式

🖥️最终效果展示图#

深色模式#

image(2)

image(3)

浅色模式#

image(1)

image

文章标签展示#

image

👨🏻‍💻代码分享#

@import "https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css";
@import "https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css";

html{
  font-family: 'HarmonyOS_Medium';
}

html {
  --theme-color: #7287fd;
}

html.dark {
  --theme-color: #7287fd;
  --grey-0: #c9cbff24;
  --grey-1: #302d411c;
  --grey-2: #1818184f;
  --grey-3: #444;
  --grey-4: #666;
  --grey-5: #aaa;
  --grey-6: #ccc;
  --grey-7: #ddd;
  --grey-8: #eee;
  --grey-9: #f7f7f7;
  --grey-1-a7: rgba(34, 34, 34, .7);
  --grey-1-a5: rgba(34, 34, 34, .5);
  --grey-1-a3: rgba(34, 34, 34, .3);
  --grey-1-a0: rgba(34, 34, 34, 0);
  --grey-9-a1: rgba(51, 51, 51, .1);
  --grey-2-a0: rgba(54, 54, 54, 0);
  --color-pink-light: #322d31;
  --color-cyan-light: #2d3230;
  --color-red: rgba(237, 118, 137, .9);
  --color-pink: rgba(241, 139, 179, .8);
  --color-orange: rgba(240, 163, 135, .8);
  --color-yellow: #ffe175;
  --color-green: #86c59d;
  --color-aqua: #97d3d6;
  --color-blue: #9cd0ed;
  --color-purple: #cfacc5;
  --color-grey: #c3c8ca;
  --body-bg-shadow: #000;
  --box-bg-shadow: #000;
  --text-color: var(--grey-5);
  --header-text-color: var(--grey-9);
}

:root {
  --sidebar-width: 20rem;
   --theme-color: #7287fd !important;
  --font-fans: 'SF Compact Rounded', 'PingFang SC', 'Microsoft YaHei', Lato, sans-serif;
  --header-height: max(50vh, 450px);
  --grey-0: #ccd0da57;
  --grey-1: #fdfdfd;
  --grey-2: #f7f7f7;
  --grey-3: #eff2f3;
  --grey-4: #ccc;
  --grey-5: #999;
  --grey-6: #666;
  --grey-7: #333;
  --grey-8: #222;
  --grey-9: #000;
  --grey-1-a0: rgba(253, 253, 253, 0);
  --grey-1-a7: rgba(253, 253, 253, .7);
  --grey-1-a5: rgba(253, 253, 253, .5);
  --grey-1-a3: rgba(253, 253, 253, .3);
  --grey-9-a1: rgba(0, 0, 0, .1);
  --grey-9-a5: rgba(0, 0, 0, .5);
  --grey-2-a0: rgba(247, 247, 247, 0);
  --color-pink-light: #ffe6fa;
  --color-cyan-light: #e3fdf5;
  --color-red: #e9546b;
  --color-pink: #ed6ea0;
  --color-orange: #ec8c69;
  --color-yellow: #eab700;
  --color-green: #0a7426;
  --color-aqua: #3e999f;
  --color-blue: #38a1db;
  --color-purple: #9d5b8b;
  --color-grey: #869194;
  --color-red-a1: rgba(233, 84, 107, .1);
  --color-red-a3: rgba(233, 84, 107, .3);
  --color-pink-a3: rgba(237, 110, 160, .3);
  --color-pink-light-a3: rgba(255, 230, 250, .3);
  --color-pink-light-a5: rgba(255, 230, 250, .5);
  --color-pink-light-a7: rgba(255, 230, 250, .7);
  --body-bg-shadow: var(--grey-2);
  --box-bg-shadow: var(--grey-9-a1);
  --text-color: var(--grey-7);
  --header-text-color: var(--grey-0);
 
}

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


*, :after, :before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--grey-0);
}

.xlog-header{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem 0.3125rem #0000003b;

}


.xlog-site-name {
  color: #fff;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #7287fd, 0 0 82px #7287fd, 0 0 92px #7287fd, 0 0 102px #7287fd, 0 0 151px #7287fd;
  font-size: 35px;
  
}

.xlog-site-description{
  color: #fff;
}

.text-stone-400{
  color: #b5e8e0;
}

.xlog-site-navigation-item{
  color: #fff;
}

.xlog-site-navigation-item-active{
  color: #7287fd;
}

main {
 
  background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top;
  box-shadow: 0 0.25rem 1rem 0.3125rem #0000003b;
  padding-bottom: 3.5rem;
  border-radius: 20px;
  
}
.xlog-posts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.xlog-post:nth-child(odd) {
  flex-direction: row-reverse;
}

.xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
  margin-right: auto;
  margin-left: 1.5rem;
  -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
  border-radius: 0 0.625rem 0.625rem 0;
}

.xlog-post {
  display: flex;
  width: calc(100% - 2rem);
  min-width: calc(100% - 2rem);
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 1.875rem -0.9375rem var(--box-bg-shadow);
  transition: all .2s ease-in-out 0s;
  height: 14rem;
  margin: 1rem;
  margin-top: 1rem !important;
  padding: 0;
  background-color: transparent;
}

.xlog-post:hover {
  box-shadow: 0 0 2rem var(--box-bg-shadow);
  background-color: transparent;
}

.xlog-post .xlog-post-cover {
  width: 50%;
  height: 100%;
  margin: 0;
  clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
}

.xlog-posts .xlog-post>.xlog-post-cover>span img {
  width: 100%;
  height: 14rem;
  transition: all .5s;
}

.xlog-post .xlog-post-cover img:hover {
  transform: scale(1.1) rotate(2deg)
}

.xlog-post>div:nth-of-type(1) {
  position: relative;
  width: 50%;
  height:100%;
  padding: 2rem;
  perspective: 62.5rem;
  justify-content: space-around;
}

/* post */
.prose :not(pre)>code {
  color: var(--theme-color);
    border-radius: 0.3rem;
    border: 0.0625rem solid rgba(0,0,0,.1);
    background-color: var(--grey-0);
    padding: 0.2rem 0.3rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.prose blockquote {
  border-radius: 0.1875rem;
  padding: .625rem 1.25rem;
  border-left: 0.25rem solid var(--theme-color);
  font-size: 90%;
  background-color: var(--grey-2);
  margin: 1.25rem 0;
}

.prose ol {
  counter-reset: counter;
}

.prose li {
  list-style: none;
  position: relative;
}

.prose ol li:before {
  counter-increment: counter;
  content: counter(counter);
  position: absolute;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  text-align: center;
  font-size: .8em;
  line-height: 1.4;
  top: 0.5em;
  left: -1.8em;
  background: var(--theme-color);
  color: rgba(var(--tw-colors-i-gray-100), 1);
  cursor: pointer;
  outline: 2px solid #797acc;
  outline-offset: 1px;
}
.prose li::before{
  outline: 2px solid #797acc;
  outline-offset: 1px;
}

.prose ul li:before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  background: var(--theme-color);
  border-radius: 50%;
  top: 0.85em;
  left: -1em;
}

.prose .table-wrapper {
  border: none !important;
  border-radius: 0 !important;
}

.prose table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: .875em;
  margin: 0 0 1.25rem;
  width: 100%;
  overflow: auto;
}

.prose table tbody tr:nth-child(2n-1) {
  background: none !important;
}

.prose table th,
td {
  border: 0.0625rem solid var(--border-color);
  border-bottom: 0.1875rem solid var(--border-color);
  padding: 0.5rem;
  padding-bottom: 0.625rem;
  text-align: left;
  vertical-align: middle;
}

.prose table th {
  font-weight: 700;
  text-align: center;
}

.prose table td {
  border-bottom-width: 0.0625rem;
}

.spoiler {
  filter: blur(8px);
  transition: filter .5s;
}

.spoiler:hover {
  filter: blur(0px);
}

.dark .info {
  --note-border: rgba(85, 98, 132, 0.8);
  --note-bg: rgba(48, 49, 50, 0.8);
  --note-text: rgba(109, 164, 219, 0.8);
  --note-hover: rgba(39, 127, 214, 0.8);
}

.info {
  --note-border: #8fa4dc;
  --note-bg: #f1f9ff;
  --note-text: #1d4974;
  --note-hover: #1d5fa0;
}

.note {
  background: var(--note-bg, var(--grey-2));
  color: var(--grey-6);
  border-left: 0.25rem solid var(--note-border, var(--grey-4));
  font-size: .875em;
  --primary-color: var(--note-text);
  border-radius: 0.1875rem;
  margin: 1rem 0;
  padding: 1rem;
  position: relative;
  padding-left: 1rem;
}

.dark .error {
  --note-border: rgba(146, 107, 115, 0.8);
  --note-bg: rgba(50, 48, 48, 0.8);
  --note-text: rgba(239, 38, 79, 0.8);
  --note-hover: rgba(168, 49, 72, 0.8);
}

.error {
  --note-border: #f4b3c1;
  --note-bg: #fff2f5;
  --note-text: #cc0f35;
  --note-hover: #f14668;
}

.dark .success {
  --note-border: rgba(97, 116, 88, 0.8);
  --note-bg: rgba(50, 50, 48, 0.8);
  --note-text: rgba(128, 200, 129, 0.8);
  --note-hover: rgba(41, 95, 42, 0.8);
}

.success {
  --note-border: #a3c293;
  --note-bg: #fcfff5;
  --note-text: #2c662d;
  --note-hover: #3b883c;
}

.xlog-site-description{
  font-size: 0.8rem;
}

/* phone */

@media (max-width: 767px) {
  .xlog-post {
    flex-direction: column-reverse !important;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
  }

  .xlog-post .xlog-post-cover {
    width: 100%;
    height: 14rem;
    margin: auto;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    border-radius: 0.625rem 0.625rem 0 0;
  }

  .xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
    width: 100%;
    margin: auto;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    border-radius: 0.625rem 0.625rem 0 0;
  }

  .xlog-post>div:nth-of-type(1) {
    width: 100%;
    padding: 10px;
  }

  main {
    max-width: 500px;
  }
}


@media screen and (min-width: 1024px) {
  .xlog-post-area:has(.xlog-post-toc) {
    margin-right: 20vw;
  }
}

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

  .xlog-post-area,
  div:has(> * > button[aria-label='toggle chain info']) {
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {

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

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

  .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) .xlog-post-area {
    min-height: calc(100vh - 124px);
  }

  .xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) .xlog-post-area {
    min-height: calc(100vh - 324px);
  }

  .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  }

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

  div:has(> .xlog-site-navigation) {
    order: 1;
  }

  div:has(> .xlog-site-info) {
    order: 2;
    padding: 0;
  }

  .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-site-info {
    flex-direction: column;
  }

  .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;
  }

  div:has(> .xlog-site-patron) {
    flex-direction: column;
  }

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

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

  }

  .xlog-post-tags a{
    border: 1.5px solid var(--grey-0);
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: rgba(37, 39, 57, 0.6);
    color: #fff;
    font-size: 14px;
  }

  .xlog-post-area {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    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 {
    width: 100%;
    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);
  }
}

✉️小小建议推荐#

我的主题的配色主要是从 catppuccin 里面获取的，有兴趣或者想自己美化的可以看看这个网站，https://github.com/catppuccin/catppuccin，最后再次感谢 bridgg 大佬和 enpitsulin 大佬的所分享的配置

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。