style: merry xmas (eve)

Author: OverflowCat

package.json

@@ -1,7 +1,7 @@
 {
   "name": "neko-astro-blog",
   "type": "module",
-  "version": "2.24.2",
+  "version": "2.25.0",
   "private": true,
   "engines": {
     "node": ">=20"

src/components/Logo.astro

@@ -43,9 +43,9 @@ if (decoration === "harmony") {
     <div class="vert-hide absolute floating opacity-40" style="inset-block-start: -300px; inset-inline-start: -220px;"> 
       <img src="/decorations/planet.svg" class="rotating" width="450" height="450" alt="planet" id="planet"/>
     </div>
-    <i class="roloc i-mdi:satellite-variant absolute inset-bs-0 inset-is-50 w-12! h-12! text-lg opacity-40 hover:opacity-100"></i>
-    <i class="roloc i-mdi:satellite-variant absolute inset-bs-20 inset-is-65 w-10! h-10! rotate-90 text-lg opacity-40 hover:opacity-100"></i>
-    <i class="roloc floating i-mdi:rocket hover:i-mdi:rocket-launch absolute inset-bs-12 inset-is-25 w-10! h-10! rotate-50 text-lg opacity-40 hover:opacity-100"></i>
+    <i class="roloc i-mingcute:christmas-hat-fill x-i-mdi:satellite-variant absolute inset-bs-0 inset-is-50 w-12! h-12! text-lg opacity-40 hover:opacity-100"></i>
+    <i class="roloc i-mdi:christmas-star x-i-mdi:satellite-variant absolute inset-bs-20 inset-is-65 w-10! h-10! rotate-90 text-lg opacity-40 hover:opacity-100"></i>
+    <i class="roloc floating i-icon-park-solid:christmas-tree x-i-mdi:rocket hover:x-i-mdi:rocket-launch absolute inset-bs-12 inset-is-25 w-10! h-10! rotate-50 text-lg opacity-40 hover:opacity-100"></i>
   )}
 </div>
 

src/components/inject/Snowflakes.astro

@@ -2,7 +2,7 @@
 import "@/styles/snowflakes.scss";
 ---
 
-<div class="snowflakes">
+<div class="snowflakes z-1000">
   {
     Array(100)
       .fill(0)

src/components/sidebar/Index.astro

@@ -4,7 +4,8 @@ import OtherPlatfromItem from "./OtherPlatfromItem.astro";
 import "@/styles/manchu.less";
 import "@fontsource/noto-sans-mongolian";
 import { Picture } from "astro:assets";
-import avatar from "@/assets/avatar.png";
+// import avatar from "@/assets/avatar.png";
+const avatar = "https://tong.xinshijiededa.men/avatar/xmas-2025-avatar.svg";
 import Search from "./Search.astro";
 ---
 
@@ -21,14 +22,15 @@ import Search from "./Search.astro";
       itemtype="http://schema.org/Person"
     >
       <div id="site-author-image">
-        <Picture
+        <!-- <Picture
           loading="eager"
           class="site-author-image"
           itemprop="avatar"
           alt="ᡥᠠᡳᡤᡳᠶᠠ ᡥᠠᠯᠠ·ᠨᡝᡴᠣ 猫"
           src={avatar}
           formats={["avif", "webp", "png"]}
-        />
+        /> -->
+        <img src={avatar} alt="ᡥᠠᡳᡤᡳᠶᠠ ᡥᠠᠯᠠ·ᠨᡝᡴᠣ 猫" class="site-author-image" itemprop="avatar" />
       </div>
       <p class="site-author-name write-vertical-left vertical-mid" itemprop="name" lang="mnc">
         ᡥᠠᡳᡤᡳᠶᠠ ᡥᠠᠯᠠ·ᠨᡝᡴᠣ <span lang="zh">猫</span>
@@ -125,7 +127,8 @@ import Search from "./Search.astro";
     border: 1px solid #eee;
     width: 120px;
     height: 120px;
-    border-radius: 50%;
+    /* border-radius: 50%; */
+    transform: scaleX(-1);
     transition: transform 1s ease-out;
   }
   #site-author-image {
@@ -137,6 +140,7 @@ import Search from "./Search.astro";
     margin: 0px;
   }
   .site-author-image:hover {
-    transform: rotateZ(360deg);
+    /* transform: rotateZ(360deg); */
+    transform: scaleX(1);
   }
 </style>

src/styles/snowflakes.scss

@@ -8,12 +8,39 @@
   @return $random_range;
 }
 
+.main {
+  filter: brightness(0.95) saturate(1.1);
+    text-shadow:
+    0 0 1px #fff,
+    0 0 2px #ebebeb,
+    0 0 3px #b9b9b9;
+}
+
+body {
+  background-image: url("https://remnote-user-data.s3.amazonaws.com/2fkaCqjyo5c_vBnTuvfev6zA_CGNNwC8T06mm_dB1v6RtXUT8R8JABHzDjbwTaFgQrL7q_w82XqD9mW9aE8KP1ShiaP91UmkJPTxygfo-_uZzMlPaxl6ntrmzz4GZWym.jpeg")!important;
+  background-blend-mode: luminosity;
+  background-size: cover!important;
+  background-attachment: fixed!important;
+}
+
+@container style(--dark-scheme) {
+  body {
+    background-image: url("https://remnote-user-data.s3.amazonaws.com/r_tz5f_Khz-iLtRyuF-Z2E2VPC7YNGgThKJt2NOBmJ_4y9C3aSF8RBrsQ9zCsY9q8_PbbNfrIrtP1pZtIA_mgAEVDDGt8tfgr5IHCUaS2lasVdXPXFRAyKVuoQaewrpj.jpeg")!important;
+  }
+}
+
 .snow {
   $total: 200;
-  position: absolute;
+  position: fixed;
   width: 10px;
   height: 10px;
+  z-index: 1111;
   background: white;
+  // shadow
+  box-shadow:
+    0 0 5px 2px rgba(255, 255, 255, 0.8),
+    0 0 10px 4px rgba(255, 255, 255, 0.6),
+    0 0 15px 6px rgba(255, 255, 255, 0.4);
   border-radius: 50%;
 
   @for $i from 1 through $total {

src/templates/zh/Page.astro

@@ -41,9 +41,11 @@ const metas = {
 import Base from "./Base.astro";
 import Footer from "../zh/Footer.astro";
 import { genOpenGraphMetas, type OpenGraphData } from "@/scripts/open-graph";
+import Snowflakes from "@/components/inject/Snowflakes.astro";
 ---
 
 <Base title={title} metas={metas} lang={lang}>
+  <Snowflakes />
   <div class="main overflow-inline-clip">
     <slot />
   </div>