Just add a simple styling snow for this site, with pure CSS:
html:before {
content: "\002745";
z-index: -10;
position: fixed;
top: 50%;
left: -50%;
height: 10px;
width: 10px;
background: #ccc;
border-radius: 50%;
text-shadow: 0px 0px #ccc, -122vmax 58vmax 2px #ccc, 59vmax -38vmax 0px #ccc,
-125vmax -25vmax 2px #ccc, -2vmax 0vmax 2px #ccc, -80vmax 53vmax 3px #ccc,
19vmax -137vmax 0px #ccc, -24vmax 99vmax 0px #ccc, -112vmax 121vmax 0px #ccc,
112vmax 22vmax 3px #ccc, -26vmax -115vmax 1px #ccc, -146vmax 94vmax 3px #ccc,
113vmax -13vmax 3px #ccc, 78vmax -83vmax 0px #ccc, 144vmax 76vmax 3px #ccc,
109vmax -12vmax 1px #ccc, -16vmax 60vmax 2px #ccc, -47vmax -40vmax 3px #ccc,
-43vmax -113vmax 3px #ccc, -33vmax -107vmax 2px #ccc,
-115vmax -32vmax 1px #ccc, -97vmax 141vmax 0px #ccc, 135vmax 1vmax 2px #ccc,
-59vmax 3vmax 1px #ccc, 125vmax 134vmax 2px #ccc, -14vmax -140vmax 1px #ccc,
49vmax -148vmax 2px #ccc, -62vmax -77vmax 1px #ccc, -60vmax 123vmax 2px #ccc,
-131vmax 78vmax 0px #ccc, -43vmax 95vmax 2px #ccc, -99vmax 80vmax 2px #ccc,
70vmax 31vmax 3px #ccc, 44vmax -58vmax 0px #ccc, -35vmax -130vmax 0px #ccc,
-77vmax 69vmax 3px #ccc, 0vmax 130vmax 1px #ccc, -98vmax 25vmax 2px #ccc,
84vmax -59vmax 2px #ccc, 138vmax -7vmax 1px #ccc, 92vmax -82vmax 1px #ccc,
66vmax -134vmax 3px #ccc, 123vmax -131vmax 3px #ccc,
-55vmax -100vmax 0px #ccc, -141vmax 141vmax 2px #ccc,
-26vmax 150vmax 2px #ccc, -124vmax -72vmax 2px #ccc, -6vmax -71vmax 1px #ccc,
-18vmax 74vmax 1px #ccc, 77vmax -37vmax 0px #ccc, -45vmax -7vmax 3px #ccc,
-16vmax 21vmax 3px #ccc, -38vmax 100vmax 1px #ccc, -20vmax 13vmax 3px #ccc,
-9vmax -39vmax 2px #ccc, 5vmax 32vmax 0px #ccc, 82vmax 88vmax 1px #ccc,
105vmax 106vmax 2px #ccc, -123vmax -73vmax 0px #ccc,
111vmax 103vmax 1px #ccc, 28vmax 44vmax 3px #ccc, -13vmax -87vmax 0px #ccc,
-141vmax -39vmax 2px #ccc, 143vmax -121vmax 3px #ccc,
-133vmax 22vmax 0px #ccc, -140vmax -56vmax 2px #ccc,
92vmax -143vmax 0px #ccc, -100vmax 46vmax 2px #ccc, 131vmax -39vmax 2px #ccc,
120vmax 58vmax 1px #ccc, 139vmax -68vmax 1px #ccc, 128vmax 37vmax 0px #ccc,
-137vmax -103vmax 1px #ccc, 83vmax -56vmax 0px #ccc,
137vmax 116vmax 2px #ccc, -43vmax 125vmax 0px #ccc, -40vmax -15vmax 2px #ccc,
42vmax 101vmax 2px #ccc, 149vmax -137vmax 3px #ccc,
104vmax -148vmax 0px #ccc, -65vmax 19vmax 2px #ccc, 48vmax 78vmax 3px #ccc,
-63vmax 28vmax 1px #ccc, 94vmax -129vmax 1px #ccc, -27vmax 108vmax 0px #ccc,
-11vmax 67vmax 1px #ccc, 114vmax 18vmax 2px #ccc, 59vmax 96vmax 1px #ccc,
-46vmax -6vmax 1px #ccc, 4vmax 28vmax 0px #ccc, -116vmax -63vmax 1px #ccc,
87vmax -62vmax 2px #ccc, -27vmax 111vmax 1px #ccc, 36vmax -51vmax 3px #ccc,
9vmax -51vmax 3px #ccc, 53vmax -111vmax 0px #ccc, 22vmax -146vmax 0px #ccc,
-115vmax -131vmax 2px #ccc, -146vmax 31vmax 0px #ccc, 129vmax 2vmax 0px #ccc,
106vmax 76vmax 2px #ccc, -121vmax 106vmax 2px #ccc, 55vmax -40vmax 1px #ccc,
-3vmax 70vmax 1px #ccc, 55vmax -117vmax 1px #ccc, -109vmax 1vmax 2px #ccc,
5vmax 37vmax 0px #ccc, -103vmax -86vmax 1px #ccc, 78vmax 52vmax 3px #ccc,
-45vmax -142vmax 0px #ccc, 113vmax -102vmax 3px #ccc,
-43vmax 147vmax 3px #ccc, -108vmax 1vmax 1px #ccc, 86vmax -139vmax 2px #ccc,
-137vmax -39vmax 0px #ccc, -132vmax 122vmax 3px #ccc, 98vmax -9vmax 3px #ccc,
-81vmax -77vmax 1px #ccc, 93vmax 74vmax 3px #ccc, 116vmax -118vmax 3px #ccc,
61vmax -12vmax 0px #ccc, -102vmax 149vmax 3px #ccc, 69vmax 46vmax 0px #ccc,
-98vmax -80vmax 2px #ccc, 27vmax 101vmax 2px #ccc, -104vmax 31vmax 0px #ccc,
23vmax 2vmax 1px #ccc, -4vmax 14vmax 0px #ccc, -59vmax 138vmax 1px #ccc,
6vmax -62vmax 2px #ccc, -46vmax 5vmax 2px #ccc, 131vmax 17vmax 3px #ccc,
-76vmax -5vmax 3px #ccc, -120vmax 47vmax 2px #ccc, 118vmax -17vmax 1px #ccc,
-148vmax 137vmax 1px #ccc, -139vmax -79vmax 2px #ccc,
19vmax -99vmax 2px #ccc, 85vmax 103vmax 3px #ccc, -36vmax 108vmax 1px #ccc,
-132vmax -37vmax 0px #ccc, 126vmax 121vmax 3px #ccc,
-49vmax -134vmax 2px #ccc, 73vmax 89vmax 2px #ccc, 79vmax -67vmax 2px #ccc,
100vmax -79vmax 3px #ccc, -23vmax 89vmax 3px #ccc, -124vmax 87vmax 0px #ccc,
-47vmax -100vmax 1px #ccc, 76vmax 80vmax 3px #ccc, 59vmax -125vmax 3px #ccc,
93vmax -146vmax 2px #ccc, 15vmax -77vmax 2px #ccc, 149vmax 98vmax 1px #ccc,
48vmax 105vmax 3px #ccc, 99vmax 72vmax 1px #ccc, -117vmax -39vmax 1px #ccc,
44vmax 109vmax 1px #ccc, -102vmax -16vmax 2px #ccc, 94vmax 133vmax 3px #ccc,
-136vmax 25vmax 0px #ccc, 142vmax 71vmax 3px #ccc, 142vmax -127vmax 1px #ccc,
4vmax -19vmax 3px #ccc, 87vmax 101vmax 1px #ccc, -12vmax 82vmax 0px #ccc,
30vmax -91vmax 0px #ccc, -48vmax 16vmax 3px #ccc, 35vmax -65vmax 0px #ccc,
60vmax -83vmax 2px #ccc, -121vmax 136vmax 1px #ccc, -47vmax 34vmax 3px #ccc,
-149vmax -95vmax 0px #ccc, 63vmax 83vmax 2px #ccc, 41vmax -60vmax 3px #ccc,
-108vmax 142vmax 2px #ccc, 2vmax -140vmax 3px #ccc,
122vmax -104vmax 2px #ccc, -83vmax 40vmax 3px #ccc, 91vmax -41vmax 2px #ccc,
125vmax 90vmax 3px #ccc, -45vmax 68vmax 1px #ccc, -77vmax 0vmax 3px #ccc,
10vmax -34vmax 3px #ccc, 39vmax 82vmax 2px #ccc, 128vmax 77vmax 0px #ccc,
-77vmax 7vmax 2px #ccc, -34vmax -136vmax 0px #ccc, -12vmax -10vmax 0px #ccc,
52vmax -149vmax 3px #ccc, 23vmax 143vmax 0px #ccc, 57vmax 96vmax 1px #ccc,
110vmax 143vmax 3px #ccc, 67vmax 51vmax 2px #ccc, -113vmax -2vmax 1px #ccc,
-130vmax 95vmax 3px #ccc, 65vmax -139vmax 2px #ccc, -18vmax 21vmax 3px #ccc,
-128vmax 142vmax 0px #ccc, -119vmax 96vmax 3px #ccc, -9vmax 129vmax 0px #ccc,
58vmax 28vmax 1px #ccc, -32vmax -65vmax 1px #ccc, -4vmax 13vmax 2px #ccc,
-93vmax 88vmax 2px #ccc, 123vmax -20vmax 2px #ccc, -38vmax -106vmax 2px #ccc,
124vmax 7vmax 2px #ccc, 19vmax 5vmax 3px #ccc, 71vmax 112vmax 3px #ccc,
103vmax -126vmax 1px #ccc, 79vmax -136vmax 0px #ccc, 0vmax -86vmax 1px #ccc,
129vmax -76vmax 0px #ccc, -144vmax -40vmax 0px #ccc, 92vmax 80vmax 0px #ccc,
35vmax 41vmax 0px #ccc, 20vmax 114vmax 1px #ccc, -76vmax -82vmax 0px #ccc,
110vmax 121vmax 3px #ccc, -22vmax -2vmax 0px #ccc, -1vmax 21vmax 1px #ccc,
58vmax 130vmax 3px #ccc, -129vmax 129vmax 1px #ccc, 21vmax -30vmax 1px #ccc,
82vmax 6vmax 2px #ccc, 65vmax 21vmax 1px #ccc, -139vmax 144vmax 0px #ccc,
-97vmax 19vmax 0px #ccc, 118vmax -79vmax 1px #ccc, -127vmax 115vmax 1px #ccc,
-148vmax -141vmax 1px #ccc, -88vmax -38vmax 2px #ccc,
138vmax -11vmax 3px #ccc, 33vmax -15vmax 0px #ccc, 51vmax 61vmax 0px #ccc,
66vmax 112vmax 2px #ccc, 30vmax 65vmax 0px #ccc, -114vmax 31vmax 2px #ccc,
80vmax -60vmax 3px #ccc, 34vmax 13vmax 1px #ccc, 6vmax 128vmax 2px #ccc,
-19vmax 47vmax 3px #ccc, -87vmax -91vmax 2px #ccc, -90vmax -90vmax 1px #ccc,
-109vmax -20vmax 3px #ccc, 115vmax -66vmax 1px #ccc, 14vmax -29vmax 3px #ccc,
106vmax 72vmax 0px #ccc, 54vmax 98vmax 3px #ccc, -147vmax -112vmax 3px #ccc,
99vmax 57vmax 3px #ccc, -27vmax 36vmax 3px #ccc, 104vmax -85vmax 2px #ccc,
24vmax 4vmax 2px #ccc, 30vmax -23vmax 0px #ccc, -23vmax 84vmax 0px #ccc,
-88vmax 15vmax 2px #ccc, -18vmax 12vmax 2px #ccc, 108vmax -117vmax 3px #ccc,
-26vmax 26vmax 1px #ccc, 144vmax -78vmax 2px #ccc, -64vmax -102vmax 1px #ccc,
110vmax -143vmax 3px #ccc, -120vmax 29vmax 2px #ccc,
118vmax 147vmax 1px #ccc, -69vmax -96vmax 1px #ccc,
-146vmax 138vmax 3px #ccc, 32vmax -17vmax 3px #ccc, -48vmax -82vmax 2px #ccc,
123vmax 54vmax 3px #ccc, 21vmax 114vmax 2px #ccc, 28vmax 119vmax 1px #ccc,
104vmax -7vmax 2px #ccc, 97vmax 80vmax 2px #ccc, -55vmax 83vmax 1px #ccc,
80vmax -133vmax 0px #ccc, 6vmax -80vmax 1px #ccc, 5vmax -61vmax 0px #ccc,
26vmax 82vmax 3px #ccc, 118vmax 82vmax 0px #ccc, 40vmax 15vmax 3px #ccc,
-122vmax -66vmax 2px #ccc, 126vmax -92vmax 3px #ccc, -5vmax 66vmax 2px #ccc,
-93vmax -91vmax 0px #ccc, 36vmax 100vmax 3px #ccc, -107vmax -28vmax 1px #ccc,
-9vmax 94vmax 3px #ccc, 146vmax 77vmax 0px #ccc, -128vmax -123vmax 1px #ccc,
59vmax 66vmax 1px #ccc, 34vmax -48vmax 2px #ccc, -60vmax 2vmax 3px #ccc,
37vmax 46vmax 3px #ccc, -75vmax -129vmax 1px #ccc, 89vmax 128vmax 1px #ccc,
114vmax 70vmax 1px #ccc, -80vmax 51vmax 2px #ccc, -6vmax 145vmax 3px #ccc,
-78vmax 64vmax 3px #ccc;
animation: snow 100s linear 0s infinite normal;
}
@keyframes snow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The main colour of #ccc
suited both the bright and dark theme of my site, 🎉. That’s it, wish you a Merry Christmas~

林宏
Frank Lin, PhD
YOU MAY ALSO LIKE
Web Notes
2015.09.26
HTML 相对路径和绝对路径区别分析
HTML 初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个 HTML 网页中引用另外一个 HTML 网页作为超链接(hyperlink),怎样在一个网页中插入一张图片。如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。
Web Notes
2017.03.18
Syntax highlight with Rouge in Jekyll
By default, Jekyll 3 and versions above integrated with Rouge, a pure Ruby syntax highlighter which supports over 100 languages. Since Rouge themes are compatible with Pygments's stylesheets, it’s nice for us to choose a favourable style.