First write a part, haven't finished editing yet, afraid of laziness at the end and don't want to write 😅
The following tutorial is the style of this blog.
More beautiful in dark mode
Navigation bar icons can be directly copied and taken away,
Couldn't find a tutorial to beautify xlog, do it yourself#
The black banner style above is used by the blogger with a fully transparent image
No need to look, the image is just a blank space
Download directly and put it in Site Settings-General-Banner#
Just copy the code below to Custom CSS#
/*--Add white top border to navigation bar*/
.items-center.text-gray-500 {
border-top: 1px solid white; // Only need top border, can also use bottom border
}
/*--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;
}
/*--Make the article summary larger*/
.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;
}
/*---Make the archive article list larger*/
.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);
}
/*--Make the button larger*/
.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);
}