Preface: While reading DIYGOD's (hereinafter referred to as Sister D) article, I noticed that Sister D's banner does not move with the browser width adjustment, so I decided to decorate my Xlog with Sister D's style code.
0. Analyzing Sister D's Style Code#
1. Fine Management of Fonts#
@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");
.xlog-page-index,
.xlog-page-post {
font-family: "LXGW WenKai Screen R", sans-serif;
}
@font-face {
font-family: SFCompactRounded;
font-weight: 300;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeidme3gx5cgofwznbtccc7vnfi2acecdzaiy7yfcjyq4e3qgzqwzem);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 400;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeif5baqci7hr4s6ax2a4osvhaayuuipffbww6oydibxx6qgueklc2a);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 500;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihidx5w2sagmed5zwtlmkceht6ni3akqxvvbnob4uz63sfdpwh5wu);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 600;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihe3bpdk7yojbcghhiufqe62smr7y2fcm5gagm2nq2l6cgynpauou);
}
Sister D is very meticulous, defining different fonts based on different font weights. This piece of code was not used in this decoration.
2. Distinguishing Day/Night Mode Theme Colors and Mouse Styles#
:root {
--theme-color: #ff9800;
--font-fans: SFCompactRounded, PingFang SC, Microsoft YaHei, Lato, sans-serif;
--header-height: max(50vh, 400px);
cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreihm4v5gpjkv5lboaqhdfmou4mlpvfjkgbn24ywrfivdk7tolgzkke), default;
--tw-backdrop-blur: n
}
3. Defining Font Variables#
@font-face {
font-family: 'Candyshop';
src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm);
font-display: swap;
}
4. Overall Banner#
1) Banner Image Style
.xlog-banner img {
max-width: 100%;
width: 300px;
}
2) Information Box
.xlog-site-info {
border: 1px solid #fff;
transition: .3s ease;
z-index: 1;
}
3) Username
.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;
}
4) Night Mode Information Box
.dark .xlog-site-info {
border: 1px solid var(--border-color);;
}
5) Avatar Frame
.xlog-site-icon {
width: 110px;
height: 110px;
}
6) Article List
.xlog-post {
transition: .3s ease;
}
5. Footer#
footer {
position: relative;
margin-top: 210px;
}
/* Insert image before footer elements */
footer:before {
content: ' ';
background: url(https://ipfs.4everland.xyz/ipfs/bafkreigq3m2bj76jl7abz6i5rlzegutcrfc2j2nqkcypksbeyu67fsymoy) no-repeat center;
height: 368px;
width: 100%;
display: block;
position: absolute;
top: -295px;
left: 0;
pointer-events: none;
}
6. Several Media Queries#
@media (max-width: 640px) {
.xlog-site-info {
padding: 1rem;
}
}
@media (min-width: 640px) {
.xlog-post:hover {
transform: scale(1.02);
box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
background-color: #fff;
z-index: 9;
}
.dark .xlog-post:hover {
background-color: var(--hover-color);
}
.xlog-site-info:hover {
transform: scale(1.03);
-webkit-font-smoothing: antialiased;
}
}
1. Start Decorating#
1. Learn How to Use 4EVERYLAND#
4EVERYLAND
After connecting the wallet, go to Storage->Bucket->New Bucket->Upload your fonts, images, and other resources->Copy CID
For example, my cute hair CID is
bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai
Combine it with the following link:
https://ipfs.4everland.xyz/ipfs/[CID]
That is:
https://ipfs.4everland.xyz/ipfs/bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai
You can try to access it, and you will be able to see the cute hair.
2. Find Your Favorite Fonts#
I went to the Google Fonts Library
After downloading, upload the ttf/otf files to 4EVERYLAND.
3. Change Sister D's Style#
@font-face {
font-family: 'Candyshop';
src: url(https://ipfs.4everland.xyz/ipfs/[CID]);
font-display: swap;
}
4. The Above is Just a Starting Point#
After understanding Sister D's style code, it essentially involves uploading your own resources to 4EVERYLAND for Xlog's CSS code block to access. For me, the difficult part is finding colorful images my favorite images.
2. Code Display#
/* Set Font */
@font-face {
font-family: 'YawnFont';
src: url(https://ipfs.4everland.xyz/ipfs/bafybeigcxr7fhpf4e3p2a6mrxfbqoxzeckcvtusnszirz57f3rmjtfgbym);
font-display: swap;
}
/* Set Theme Color, Mouse Style, etc. */
:root {
--theme-color: #ff9800;
--font-fans: sans-serif;
--header-height: max(50vh, 400px);
cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreieeqamkk3p65nj4quf4vrpkzqfl2yonns2av7wctbpf4gko4gpkia), default;
}
/* Cancel the style that covers the cute hair */
@media (min-width: 640px) {
.sm\:backdrop-blur-sm {
--tw-backdrop-blur: none !important; /* Override to an unnecessary value */
-webkit-backdrop-filter: none !important; /* Override to an unnecessary value */
backdrop-filter: none !important; /* Override to an unnecessary value */
}
}
/* Cancel the style that covers the cute hair */
.backdrop-blur-sm {
--tw-backdrop-blur: none !important; /* Override to an unnecessary value */
-webkit-backdrop-filter: none !important; /* Override to an unnecessary value */
backdrop-filter: none !important; /* Override to an unnecessary value */
}
/* Header Overall */
/* Personal Information Box */
.xlog-site-info {
border: 1px solid #fff;
transition: .3s ease;
z-index: 1;
}
/* Banner Image Style */
.xlog-banner img {
width: auto !important;
margin: auto !important;
}
/* Username */
.xlog-site-name {
color: var(--theme-color);
font-family: YawnFont;
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;
}
/* Night Mode Information Box */
.dark .xlog-site-info {
border: 1px solid var(--border-color);;
}
.dark .xlog-banner {
background: #1e2024 !important;
}
.xlog-banner {
background: #f6f6f6 !important;
}
/* Avatar Frame */
.xlog-site-icon {
width: 110px;
height: 110px;
}
/* Media Queries */
@media (max-width: 640px) {
.xlog-site-info {
padding: 1rem;
}
}
/* Post List */
/* Article List: Adjust Animation Time */
.xlog-post {
transition: .3s ease;
}
/* Media Queries (when the page width is less than 640px): 1. Cursor enlarges, has shadow, and background color when hovering over the article list; 2. Background changes when hovering in dark mode; 3. Enlarges and smooths font when hovering over the information box */
@media (min-width: 640px) {
.xlog-post:hover {
transform: scale(1.02);
box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
background-color: #fff;
z-index: 9;
}
.dark .xlog-post:hover {
background-color: var(--hover-color);
}
.xlog-site-info:hover {
transform: scale(1.03);
-webkit-font-smoothing: antialiased;
}
}
/* Footer */
/* Footer Style */
footer {
position: relative;
margin-top: 444px;
}
/* Insert image before footer elements */
footer:before {
content: ' ';
background: url(https://ipfs.4everland.xyz/ipfs/bafybeih3rgmdz4cvoj2web2yc7fgf7gplo6ds5qabokvzhocfqnm6m66iq) no-repeat center;
height: 554px;
width: 100%;
display: block;
position: absolute;
/* top: -350px; */
left: 0;
pointer-events: none;
}
3. Summary#
I always believe that the front end can ultimately save the world, keep it up!
ps: I remember that old IE could access js code in css, and the format was also url(...). I don't remember it very clearly, but if it's true, it poses a huge threat to the server. Manually @Sister D