During the work lunch break, I beautified my xlog by adding a top bar image and background image, modifying some text colors, button colors, etc. The most important thing is that I added some frosted glass effects, which seems to give it a more advanced feeling.
By the way, I want to complain about a certain image hosting service. At first, when previewing, it showed the full image, but later when I looked at it again, it turned into a thumbnail, so I switched to another one.
Some CSS used is listed below, maybe you can refer to it:
/* CSS variables for daytime mode */
:root {
--description-word-color: gray;
}
/* CSS variables for nighttime mode */
:root.dark {
--theme-color:#66CCFF;
--tw-color-zinc-400: aliceblue;
--tw-color-zinc-700: black;
--tw-color-zinc-900: gray;
--description-word-color: aliceblue;
}
/* Description text color */
.xlog-site-description {
color: var(--description-word-color);
}
/* Main section background */
main {
background-image: url(https://i.postimg.cc/Y9GkKhLD/background.png);
}
/* Button colors */
.border-accent {
border: 0 none
}
.button.is-primary {
background-color: #337CCF;
}
.button.is-primary:hover {
background-color: var(--theme-color);
}
.button.is-primary:focus {
background-color: var(--theme-color);
}
/* Button background and text color */
.button.is-text.rounded-full {
background-color: aliceblue;
color: black;
}
/* Navigation bar text color */
.xlog-site-navigation-item, .xlog-site-navigation-item:hover {
color: black;
}
.xlog-site-navigation-item:after {
background-color: black;
}
.xlog-site-navigation-item-active, .xlog-site-navigation-item-active:hover {
color: #0C356A;
}
.xlog-site-navigation-item-active:after {
background-color: #0C356A;
}
/* Frosted glass effect for homepage article blocks */
a.xlog-post {
backdrop-filter: saturate(180%) blur(60px);
}
/* Frosted glass effect for directory bar */
.leading-loose {
padding: 10px 10px 10px 10px;
border-radius: 10px;
backdrop-filter: saturate(180%) blur(60px);
}
/* Hover color for directory bar text */
.hover\:text-accent:hover {
color: var(--theme-color);
}
/* Frosted glass effect for article content */
.xlog-post-content {
padding: 10px 10px 10px 10px;
border-radius: 10px;
backdrop-filter: saturate(180%) blur(60px);
}
/* Comment section */
.xlog-comment {
padding: 10px 10px 10px 10px;
border-radius: 10px;
backdrop-filter: saturate(180%) blur(60px);
}