I should no longer modify the xlog page style unless I see a more beautiful page 😜
Let's talk about the impression of xlog. As a basic blog, it is definitely enough.
For bloggers who have OCD and want to modify everything according to their own preferences, it is really difficult.
Except for some initial discomfort, there is nothing unsatisfactory, except for being blocked!
The following is a style image:
The following provides the final CSS code
/*--Subtitle color*/
.whitespace-pre-wrap {
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color: transparent;
-webkit-background-clip: text;
-webkit-animation: slide 2s infinite linear;
animation: slide 5s infinite linear;
}
/*--Mouse selection style, article summary dynamically enlarges*/
.xlog-post:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.xlog-post {
padding: 1rem;
}
/*---Mouse selection style, archive article list dynamically enlarges*/
.items-center.-mx-2:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*--Mouse selection style, button enlarges*/
.button:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*--Navigation bar moves to the top*/
.xlog-site-navigation {
position:absolute;
top:0px;
}
/*--Link button position remains unchanged*/
.pl-1 {
margin-left:auto
}
/*--Adjust banner position*/
.py-12 {
padding-bottom: 20px;
padding-top: 45px;
}
/*--Adjust link up and down position*/
.flex.text-gray-500 {
padding-bottom: 10px;
}
/*--Top code rain*/
.border-zinc-100 {
background-image:url('https://xlog.app/_next/image?url=https%3A%2F%2Fipfs.4everland.xyz%2Fipfs%2Fbafkreibiivd46q6qfd6dzri6j6ltw53tzrudcqk7fmxhsj32qbqer7zkra&w=1920&q=75');
background-repeat:repeat;
}