私の xLog カスタム CSS を共有します

2023-07-20 更新：ホームページのレイアウトを修正し、xLog が提供するスタイルを使用
2023-05-30 更新: css がダッシュボードに与える影響を修正
2023-05-15 更新：一部の css 変数の無効を修正し、テーマをより二次元化し、記事リストがカバー画像の設定により適したものに

効果テスト

フォントテスト#

使用しているフォントは霞鹜文楷

慶歴四年春、滕子京は巴陵郡に流されていた。翌年、政が通じ人が和し、百廃が興り、岳陽楼を再建し、旧制を増し、唐の賢人や現代人の詩文をその上に刻んだ；私に作文を依頼して記録させた。

　　私は巴陵の素晴らしさを洞庭の湖に見出す。遠くの山を含み、長江を呑み込み、浩浩たる流れ、横に際限がない；朝の光と夕の陰、様々な気象；これが岳陽楼の大観であり、先人の述べたことはすでに備わっている。しかし北は巫峡に通じ、南は潇湘に極まり、流浪の客や詩人が多く集まり、物を見る情が異なることがないだろうか？

　　もし霧雨が降り続き、月が開かない；陰風が怒号し、濁流が空を排除する；日星が隠れ、山岳が潜む；商旅は行かず、帆が傾き舟が壊れる；薄暮は暗く、虎が吼え猿が啼く。この楼に登ると、故国を離れ故郷を思い、悪口を恐れ、目の前は寂しく、感極まって悲しむ者がいる。

　　春和景明、波は静かで、上下の天光、一面の碧；沙鸥が翔集し、錦鱗が泳ぎ、岸の芷と汀の蘭が青々としている。あるいは長い煙が一面に広がり、白い月が千里に輝き、浮光が金色に跳ね、静影が沈む玉のようで、漁歌が互いに応じる。この楽しみは何と極まる。楼に登ると、心は晴れやかで、栄辱を忘れ、酒を持って風に臨み、その喜びは洋々たる者である。

　　ああ！私は古の仁人の心を求めたことがあるが、二者の行動は異なるのはなぜか？物に喜ばず、己に悲しまず。庙堂の高に居れば、その民を憂い；江湖の遠に居れば、その君を憂う。進む時も憂い、退く時も憂い；では、いつ楽しいのか？必ず言うだろう：「天下の憂いを先に憂い、天下の楽しみを後に楽しむ」と！ああ！この人がいなければ、私は誰と帰るのか？

　　時は六年九月十五日。

引用#

Tiam, ad mint andaepu dandae nostion secatur sequo quae.
注意: ブロック引用内で_Markdown 構文_を使用できます。

表格#

イタリック	太字	コード
イタリック	太字	`コード`

有序列表#

最初の項目
二番目の項目
三番目の項目

无序列表#

リスト項目
別の項目
さらに別の項目

特殊效果#

:span[これはネタバレです]{.spoiler}

これはネタバレです

:::div{.note}
これはデフォルトのテキストブロックです 
:::

:::div{.note.info}
これは情報テキストブロックです 
:::


:::div{.note.error}
これはエラーテキストブロックです
:::


:::div{.note.success}
これは成功テキストブロックです
:::

これは情報テキストブロックです

これはエラーテキストブロックです

これは成功テキストブロックです

自定义 css#

@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");

@font-face {
  font-family: 'Candyshop';
  src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm);
  font-display: swap;
}

:root {
  --theme-color: #f7e78e !important;
  --font-fans: 'SF Compact Rounded', 'PingFang SC', 'Microsoft YaHei', Lato, sans-serif;
  --header-height: max(50vh, 450px);
  --grey-0: #fff;
  --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);
  cursor: url('https://img2.birdgg.me/iku-cursor.png') 0 0, auto;
}

html.dark {
  --grey-0: #222;
  --grey-1: #21252b;
  --grey-2: #363636;
  --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);
}

.xlog-page {
  background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
}

.xlog-page .max-w-screen-md {
  max-width: 1000px;
}

.xlog-header {
  position: sticky;
  height: 400px;
  top: -360px;
  z-index: 1;
  border: none;
  background-color: var(--grey-1)
}

.xlog-header .flex.py-12.w-full {
  width: 80%;
  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(5px) brightness(75%)
}

@media (width > 1024px) {
  .xlog-page-index .xlog-header {
    height: 100vh;
    top: calc(40px - 100vh);
  }
}

.xlog-site-name {
  color: var(--theme-color);
  font-family: Candyshop;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
  font-size: 35px;
}

.xlog-page-index,
.xlog-page-post {
  font-family: "LXGW WenKai Screen R", sans-serif;
}

main {
  max-width: 1000px !important;
  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 !important;
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .5);
}

/* 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;
}

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

/* 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;
  }
}