banner
夜光LOEN

夜光LOEN

👨🏻‍💻热爱开源的前端小菜鸟 | 🆓喜欢开源和白嫖 | 🐋喜欢摸鱼
HomeArchives关于

Share a wave of my xlog css

#css主题1093
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The CSS configuration used in this code is based on the configurations shared by two individuals named bridgg and enpitsulin. The code includes their configuration addresses and some updates made on June 3, 2023. The code also includes the styles for different color modes and the display of article tags. It imports some font styles and defines various color variables. The code also includes styles for the header, site navigation, and main content section. The main content section includes a list of posts with their respective cover images.

My CSS configuration is derived from the configurations shared by the great Bridgg and Enpitsulin. Thanks to both of them for their configurations. Here is Bridgg's configuration link: https://birdgg.me/xlog-cutom-css, and here is Enpitsulin's configuration link: https://gist.github.com/enpitsuLin/d90409c48e1465f1eeb702ec2cc8824e. ⚠️ Because I am also a novice, the combined configuration from both greats might be a bit messy, so please be gentle with your feedback.

🗓️ Updated on June 3, 2023, adding styles for tags.

🖥️ Final Effect Display#

Dark Mode#

image(2)

image(3)

Light Mode#

image(1)

image

Article Tag Display#

image

👨🏻‍💻 Code Sharing#

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

✉️ Small Suggestions and Recommendations#

The color scheme of my theme is mainly derived from Catppuccin. If you're interested or want to beautify it yourself, you can check out this website: https://github.com/catppuccin/catppuccin. Lastly, thanks again to Bridgg and Enpitsulin for sharing their configurations.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.