Merge pull request #30 from ClovertaTheTrilobita/dev

Update npm dependencies & reformatted floating actions

src/components/FloatingActions.astro

@@ -56,7 +56,11 @@
     #back-to-top {
         width: 3rem;
         height: 3rem;
-        border: #a7a7a7 1.5px solid;
+        /* border: #a7a7a7 1.5px solid; */
+        border-top: var(--deep-blue) 1.5px dotted;
+        border-left: var(--deep-blue) 1.5px dotted;
+        border-right: var(--deep-blue) 2.5px solid;
+        border-bottom: var(--deep-blue) 2.5px solid;
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.92);
         color: #222;
@@ -118,7 +122,8 @@
         transition:
             opacity 0.2s ease,
             transform 0.27s ease,
-            visibility 0.2s ease;
+            visibility 0.2s ease,
+            box-shadow 0.2s ease;
     }
 
     #theme-toggle-fab.show,
@@ -130,7 +135,8 @@
 
     #theme-toggle-fab.show:hover,
     #back-to-top.show:hover {
-        transform: translateY(-2px);
+        transform: translateY(-2.5px);
+        box-shadow: 2px 3px 0px var(--deep-blue);
     }
 
     :global(.dark) #theme-toggle-fab,

src/layouts/MarkdownPostLayout.astro

@@ -193,6 +193,10 @@ const t = getTranslations(lang);
     justify-content: center;
     text-decoration: none;
     border: #536493 1.5px solid;
+    border-top: #536493 2.5px dotted;
+    border-left: #536493 2.5px dotted;
+    border-right: #536493 2.5px solid;
+    border-bottom: #536493 2.5px solid;
     background: rgba(255, 255, 255, 0.92);
     color: #222;
     /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
@@ -217,7 +221,8 @@ const t = getTranslations(lang);
   }
 
   .back-button.show:hover {
-    transform: translateY(-2px);
+    transform: translateY(-2.5px);
+    box-shadow: 2px 3px 0px var(--deep-blue);
   }
 
   .back-button:hover {
@@ -369,87 +374,86 @@ const t = getTranslations(lang);
     }
   }
 
+  details {
+    margin: 1.5rem 0;
+    overflow: hidden;
+    border-top: 2px solid #1e3a5f;
+    border-radius: 0 0 0.5rem 0.5rem;
+    background: rgba(128, 128, 128, 0.14);
+  }
 
-details {
+  details summary {
-  margin: 1.5rem 0;
+    display: flex;
-  overflow: hidden;
+    align-items: center;
-  border-top: 2px solid #1e3a5f;
+    gap: 0.5rem;
-  border-radius: 0 0 0.5rem 0.5rem;
+    padding: 0.8rem 0.9rem;
-  background: rgba(128, 128, 128, 0.14);
+    cursor: pointer;
-}
+    font-weight: 600;
+    user-select: none;
+    list-style: none;
+  }
 
-details summary {
+  details summary::-webkit-details-marker {
-  display: flex;
+    display: none;
-  align-items: center;
+  }
-  gap: 0.5rem;
-  padding: 0.8rem 0.9rem;
-  cursor: pointer;
-  font-weight: 600;
-  user-select: none;
-  list-style: none;
-}
 
-details summary::-webkit-details-marker {
+  details summary::before {
-  display: none;
+    content: "›";
-}
+    display: inline-block;
+    font-size: 1.25rem;
+    line-height: 1;
+    transition: transform 0.2s ease;
+  }
 
-details summary::before {
+  details[open] summary::before {
-  content: "›";
+    transform: rotate(90deg);
-  display: inline-block;
+  }
-  font-size: 1.25rem;
-  line-height: 1;
-  transition: transform 0.2s ease;
-}
 
-details[open] summary::before {
+  /* 展开内容 */
-  transform: rotate(90deg);
+  details > :not(summary) {
-}
+    box-sizing: border-box;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-right: 1rem;
+  }
 
-/* 展开内容 */
+  /* 为列表序号预留空间 */
-details > :not(summary) {
+  details > ol,
-  box-sizing: border-box;
+  details > ul {
-  margin-top: 0;
+    padding: 0.6rem 1rem 1rem 3rem;
-  margin-bottom: 0;
+  }
-  padding-right: 1rem;
-}
 
-/* 为列表序号预留空间 */
+  details li {
-details > ol,
+    margin: 0.8rem 0;
-details > ul {
+  }
-  padding: 0.6rem 1rem 1rem 3rem;
-}
 
-details li {
+  blockquote {
-  margin: 0.8rem 0;
+    margin: 1.25rem 0;
-}
+    padding: 0.75rem 1rem;
+    border-left: 4px solid var(--deep-red);
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 0 0.4rem 0.4rem 0;
+  }
 
-blockquote {
+  blockquote p {
-  margin: 1.25rem 0;
+    margin: 0;
-  padding: 0.75rem 1rem;
+  }
-  border-left: 4px solid var(--deep-red);
-  background: rgba(128, 128, 128, 0.1);
-  border-radius: 0 0.4rem 0.4rem 0;
-}
 
-blockquote p {
+  blockquote p + p {
-  margin: 0;
+    margin-top: 0.75rem;
-}
+  }
 
-blockquote p + p {
+  /* 块级公式：超出屏幕时只滚动公式，不撑宽整篇文章 */
-  margin-top: 0.75rem;
+  .katex-display {
-}
-
-/* 块级公式：超出屏幕时只滚动公式，不撑宽整篇文章 */
-.katex-display {
     max-width: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     padding: 0.25rem 0;
     -webkit-overflow-scrolling: touch;
-}
+  }
 
-/* 避免 KaTeX 内部元素强行把父容器撑宽 */
+  /* 避免 KaTeX 内部元素强行把父容器撑宽 */
-.katex-display > .katex {
+  .katex-display > .katex {
     min-width: max-content;
-}
+  }
 </style>