fixed 样式错误

themes/Ying/assets/css/main.css

@@ -679,6 +679,62 @@ ul {
     margin-top: 0;
 }
 
+@media (max-width: 768px) {
+    .header-top {
+        justify-content: flex-start;
+    }
+    .header-avatar {
+        margin-right: 0;
+        justify-content: flex-start;
+    }
+    .header-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start; /* Changed to flex-start to align with text */
+        margin-left: 15px;
+        height: 80px;
+        width: calc(100vw - 140px); /* Ensure container takes available space */
+    }
+    
+    .header-social {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 10px;
+        margin-bottom: 5px;
+        width: 100%; /* Take full width to allow centering */
+        justify-content: center; /* Center icons horizontally */
+    }
+
+    .header-bio {
+        display: block;
+        font-size: 0.85rem;
+        margin: 0;
+        opacity: 0.8;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%; /* Take full width */
+        text-align: center; /* Center the text */
+        
+        /* Typewriter Effect Cursor */
+        border-right: 2px solid transparent; /* Hidden by default, toggled by JS if needed, or use ::after */
+    }
+    
+    /* Cursor Animation Class */
+    .header-bio.typing::after {
+        content: '|';
+        animation: cursor-blink 1s step-end infinite;
+        color: var(--text-content-color);
+        margin-left: 2px;
+    }
+}
+
+@keyframes cursor-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
 .header-social {
     margin: 0;
     padding: 0;
@@ -1123,6 +1179,13 @@ ul {
 
 /* Mobile Adaptation */
 @media (max-width: 767px) {
+     .recent-posts .posts .post:first-of-type {
+    margin-top: -10px;
+     }
+
+     .header {
+    margin-bottom: 0px!important;
+}
     .searchable-header-container {
         flex-wrap: wrap; 
         height: auto;
@@ -1243,6 +1306,7 @@ ul {
     margin-top: 20px;
 }
 
+
 .recent-posts .posts .post .time,
 .post .post-header .time,
 .list .posts .post .time {
@@ -4403,7 +4467,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
 /* Inline Search Styles */
 .searchable-header-container {
     position: relative;
-    /* margin-top: 15px; */
+    margin-top: 0px;
     height: 13px; 
     display: flex;
     align-items: center;

themes/Ying/assets/js/main.js

@@ -28,4 +28,45 @@ document.addEventListener('DOMContentLoaded', function() {
     if (window.initCodeCopy) window.initCodeCopy();
     if (window.initParagraphComments) window.initParagraphComments();
     if (window.initInfiniteScroll && window.enableInfiniteScroll) window.initInfiniteScroll();
+
+    // Initialize Typewriter Effect for Mobile Header
+    initTypewriter();
 });
+
+/**
+ * Typewriter Effect for Mobile Header Bio
+ */
+function initTypewriter() {
+    // Only run on mobile or if the element is visible
+    const bioElement = document.querySelector('.header-bio');
+    if (!bioElement) return;
+
+    // Check if we are on mobile (matching CSS media query)
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+    if (!isMobile) return;
+
+    const originalText = bioElement.innerText.trim();
+    if (!originalText) return;
+
+    // Clear text initially
+    bioElement.innerText = '';
+    bioElement.classList.add('typing');
+
+    let i = 0;
+    const speed = 100; // Typing speed in ms
+
+    function typeWriter() {
+        if (i < originalText.length) {
+            bioElement.innerText += originalText.charAt(i);
+            i++;
+            setTimeout(typeWriter, speed);
+        } else {
+            // Typing finished, remove cursor after a delay?
+            // bioElement.classList.remove('typing'); 
+            // Keep blinking cursor for effect
+        }
+    }
+
+    // Start typing with a small delay
+    setTimeout(typeWriter, 500);
+}

themes/Ying/layouts/page/circles.html

@@ -413,15 +413,15 @@
           const description = post.description ? post.description.replace(/"/g, '"') : '';
           
           // Calculate delay for staggered animation
-          const delay = index * 100;
+          const delay = index * 50;
 
           html += `
-                        <a href="${post.link}" target="_blank" class="fc-item" data-desc="${description}" data-title="${post.title}" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: ${delay}">
+                        <a href="${post.link}" target="_blank" class="fc-item" data-desc="${description}" data-title="${post.title}" uk-scrollspy="cls: uk-animation-slide-bottom-small uk-animation-fast; delay: ${delay}">
                             <div class="fc-title" title="${post.title}">${post.title}</div>
-                            <img src="${bgImageSrc}" class="fc-bg-image" loading="lazy" onerror="this.style.opacity=0">
+                            <img src="${bgImageSrc}" class="fc-bg-image" onerror="this.style.opacity=0">
                             <div class="fc-bottom">
                                 <div class="fc-author-pill">
-                                    <img src="${post.avatar}" class="fc-avatar" loading="lazy" onerror="this.src='https://cravatar.cn/avatar/default?s=50'">
+                                    <img src="${post.avatar}" class="fc-avatar" onerror="this.src='https://cravatar.cn/avatar/default?s=50'">
                                     <span class="fc-author-name">${post.author}</span>
                                 </div>
                                 <div class="fc-date">

themes/Ying/layouts/partials/header.html

@@ -11,7 +11,7 @@
                     </div>
                 </div>
                 <div class="header-info">
-                    <div class="header-social uk-visible@m">
+                    <div class="header-social">
                         {{ with .Site.Params.social }}
                             {{ range . }}
                                 <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>