fix(single): close remaining live gaps vs Zibll demo

Align runtime --sidebar-width (300→311), --main-radius, and
body.nav-fixed 88px reserve; enqueue single-post CSS parts directly;
match Zibll action buttons and author avatar DOM; tighten dual-column
tokens after comparing blog.rutua.cn with demo.zibll.com.

assets/css/frontend/base.css

@@ -133,12 +133,13 @@ main.container,
   }
 }
 
-/* Soft pad only when the float dual-column is collapsed */
+/* Soft pad only when the float dual-column is collapsed.
+ * Match Zibll bootstrap container pad (15px) rather than 10px. */
 @media (max-width: 991.98px) {
   .container,
   main.container {
-    padding-right: 10px;
+    padding-right: 15px;
-    padding-left: 10px;
+    padding-left: 15px;
   }
 }
 
@@ -147,8 +148,8 @@ main.container,
   main.container {
     width: 100%;
     max-width: 100%;
-    padding-right: 10px;
+    padding-right: 15px;
-    padding-left: 10px;
+    padding-left: 15px;
   }
 }
 

assets/css/frontend/layout.css

@@ -120,7 +120,7 @@ body.site-layout-1 .content-layout--no-sidebar {
   margin-right: 0 !important;
 }
 
-/* Sidebar RIGHT (layout 2) — Zibll main.css 1:1 */
+/* Sidebar RIGHT (layout 2) — hard 311px like Zibll main.css (runtime var must match) */
 body.site-layout-2 .content-layout {
   margin-right: calc(var(--sidebar-width, 311px) + 15px);
   margin-left: 0;
@@ -130,11 +130,10 @@ body.site-layout-2 .sidebar {
   float: left;
   width: var(--sidebar-width, 311px);
   margin-left: calc(0px - var(--sidebar-width, 311px));
-  /* Zibll uses position:unset so sticky children aren't trapped */
   position: unset;
 }
 
-/* Sidebar LEFT (layout 3) — Zibll main.css 1:1 */
+/* Sidebar LEFT (layout 3) */
 body.site-layout-3 .content-layout {
   margin-left: calc(var(--sidebar-width, 311px) + 15px);
   margin-right: unset;

assets/css/frontend/nav/base.css

@@ -1,6 +1,19 @@
-/* Zibll body.nav-fixed: reserve header space then pull hero under nav */
+/* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height.
+ * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap. */
 body.nav-fixed {
-  padding-top: var(--nav-height, 60px);
+  padding-top: 88px;
+}
+
+@media (max-width: 768px) {
+  body.nav-fixed {
+    padding-top: 72px;
+  }
+}
+
+@media (max-width: 640px) {
+  body.nav-fixed {
+    padding-top: 60px;
+  }
 }
 
 /* Fixed nav without hero overlay: take header out of flow.

assets/css/frontend/single-post/author-actions.css

@@ -104,11 +104,14 @@
     margin-bottom: 16px;
 }
 
+/* Zibll .post-actions — text/icon column buttons, not pill chips */
 .post-actions-card,
 .post-actions {
     position: relative;
     text-align: center;
     margin-bottom: 16px;
+    padding-bottom: 15px;
+    display: block;
 }
 
 .post-actions-wrap > .post-actions {
@@ -121,16 +124,65 @@
     margin-bottom: 12px;
 }
 
-.post-actions-card__buttons,
+/* Legacy card-buttons flex only for non-zibll card variant */
-.post-actions {
+.post-actions-card__buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 12px;
 }
 
-.action-btn,
+/* Zibll: .article .action { width:80px; padding:10px 0; inline-block; opacity:.7 } */
-.action {
+.article .action,
+.post-actions .action {
+    width: 80px;
+    padding: 10px 0;
+    display: inline-block;
+    opacity: 0.7;
+    vertical-align: top;
+    min-width: 0;
+    height: auto;
+    border-radius: 0;
+    border: 0;
+    background: transparent;
+    color: var(--muted-color, #777);
+    cursor: pointer;
+    font-size: 14px;
+    transition: opacity 0.15s ease, color 0.15s ease;
+    gap: 0;
+    text-align: center;
+}
+
+.article .action:hover,
+.post-actions .action:hover,
+.article .action.is-active,
+.post-actions .action.is-active {
+    color: inherit;
+    opacity: 1;
+    background: transparent;
+    border-color: transparent;
+}
+
+.article .action i,
+.post-actions .action i {
+    font-size: 20px;
+    display: block;
+    margin: 0 auto 4px;
+    line-height: 1;
+}
+
+.post-actions .action .action-btn__count,
+.post-actions .action .action-btn__label,
+.action-btn__count,
+.action-btn__label {
+    display: block;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 500;
+}
+
+/* Keep pill style for non-article .action-btn if used elsewhere */
+.action-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -144,23 +196,18 @@
     transition: all 0.15s ease;
 }
 
-.action-btn:hover,
+.action-btn:hover {
-.action:hover {
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }
 
-.action-btn.is-active,
+.action-btn.is-active {
-.action.is-active {
     border-color: var(--color-primary);
     color: var(--color-primary);
     background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
 }
 
-.action-btn i,
+.action-btn i { font-size: 1.2em; }
-.action i { font-size: 1.2em; }
-.action-btn__count { font-weight: 600; }
-.action-btn__label { font-size: 13px; }
 
 /* ===== 分享下拉面板 ===== */
 
@@ -525,41 +572,6 @@ html.dark .post-drop-meta__item:hover {
   display: block;
 }
 
-.post-actions {
-  padding-bottom: 15px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.post-actions .action {
-  min-width: 3.2em;
-  height: 3.2em;
-  border-radius: 100px;
-  border: 0;
-  background: var(--muted-bg-color, #f2f2f2);
-  color: var(--muted-color, #777);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 0 14px;
-  cursor: pointer;
-  transition: .15s;
-}
-
-.post-actions .action:hover,
-.post-actions .action.is-active {
-  color: var(--focus-color, #f04494);
-  background: var(--focus-color-opacity1, rgba(240,68,148,.1));
-}
-
-.post-actions .action i {
-  font-size: 16px;
-}
-
-
 .article-tags br { flex-basis: 100%; width: 100%; content: ""; display: block; height: 0; }
 .article-tags .but.c-blue { color: #2196f3; }
 .article-tags .but.c-yellow { color: #f0ad4e; }

inc/classes/frontend/class-aksrt-inline-style-builder.php

@@ -43,12 +43,21 @@ class AKSRT_Inline_Style_Builder {
         $dark_hover  = $this->adjust_hex_color($dark_primary, -0.12);
         $dark_active = $this->adjust_hex_color($dark_primary, -0.22);
 
+        // Zibll hard-codes 311px dual-column math; keep runtime width aligned to that
+        // baseline when settings still hold the old 300 default (or empty).
+        $sidebar_width = (int) ($sidebar_cfg['width'] ?? 311);
+        if ($sidebar_width <= 0 || $sidebar_width === 300) {
+            $sidebar_width = 311;
+        }
+        $sidebar_width = max(200, min(400, $sidebar_width));
+
         $layout_vars = [
             '--content-max'            => $content_width,
             '--content-no-sidebar-max' => $content_no_sidebar_max,
             '--container'              => $content_width,
             '--container-wide'         => $container_wide,
-            '--sidebar-width'          => $sidebar_cfg['width'] . 'px',
+            '--mian-max-width'         => $content_width, // zibll typo token
+            '--sidebar-width'          => $sidebar_width . 'px',
             '--color-primary'          => $primary_color,
             '--color-primary-hover'    => $primary_hover,
             '--color-primary-active'   => $primary_active,
@@ -59,17 +68,21 @@ class AKSRT_Inline_Style_Builder {
             '--radius-sm'              => $radius_sm . 'px',
             '--radius'                 => $border_radius . 'px',
             '--radius-card'            => $card_radius . 'px',
-            '--main-radius'            => $card_radius . 'px',
+            // Zibll --main-radius tracks the base radius (8), not the larger card radius.
+            '--main-radius'            => $border_radius . 'px',
             '--radius-btn'             => $border_radius . 'px',
             '--radius-code'            => $border_radius . 'px',
             '--radius-lg'              => $radius_lg . 'px',
             '--radius-xl'              => $radius_xl . 'px',
             '--shadow-md'              => '0 8px 24px rgba(20, 28, 48, 0.10)',
+            '--main-shadow'            => 'rgba(116, 116, 116, 0.08)',
             '--font-body'              => $font_stacks['body'],
             '--font-display'           => $font_stacks['display'],
             '--font-ui'                => $font_stacks['ui'],
             '--font-heading'           => $font_stacks['ui'],
             '--aksrt-logo-width'       => $logo_width . 'px',
+            '--nav-height'             => '60px',
+            '--single-cover-scale'     => '35%',
             '--posts-list-scale'       => (class_exists('AKSRT_Settings') ? AKSRT_Settings::get_post_list_style_settings()['list_scale'] ?? 70 : 70) . '%',
             '--posts-card-scale'       => (class_exists('AKSRT_Settings') ? AKSRT_Settings::get_post_list_style_settings()['card_scale'] ?? 70 : 70) . '%',
         ];

inc/classes/scripts-traits/trait-aksrt-scripts-part-1b.php

@@ -192,6 +192,32 @@ trait AKSRT_Scripts_Part_1b {
 
         // 单篇文章：所有 single 相关样式
         if ($is_single_post) {
+            // Prefer discrete enqueues over CSS @import (cache-bust + parallel load).
+            $single_parts = [
+                'zibll-utilities',
+                'single-post/shell',
+                'single-post/content',
+                'single-post/code-blocks',
+                'single-post/navigation',
+                'single-post/cover',
+                'single-post/author-actions',
+                'single-post/related-toc',
+                'single-post/hidden-content',
+            ];
+            $single_dep = $deps[0] ?? $core_dep;
+            foreach ($single_parts as $part) {
+                $path = get_template_directory() . '/assets/css/frontend/' . $part . '.css';
+                if (!file_exists($path)) {
+                    continue;
+                }
+                wp_enqueue_style(
+                    'aksrt-' . str_replace('/', '-', $part),
+                    $base_uri . '/assets/css/frontend/' . $part . '.css',
+                    is_string($single_dep) ? [$single_dep] : (array) $deps,
+                    filemtime($path) ?: $version
+                );
+            }
+            // Keep aggregator handle for any third-party deps that target it.
             $enqueue_module('single-post');
             $enqueue_module('post-card');     // 相关推荐使用 post-card 局部样式
             $enqueue_module('comments');

templates/parts/single-author-bar.php

@@ -57,16 +57,16 @@ if (class_exists('AKSRT_User_Home')) {
 ?>
 
 <div class="<?php echo esc_attr($classes); ?>">
-	<div class="user-info flex ac">
+	<div class="user-info flex ac article-avatar">
-		<?php if (function_exists('aksrt_get_avatar_html')) : ?>
+			<a href="<?php echo esc_url($author_url); ?>">
-			<a class="avatar-img" href="<?php echo esc_url($author_url); ?>">
+				<span class="avatar-img">
-				<?php echo aksrt_get_avatar_html($author_id, 42, ['class' => 'avatar avatar-id-' . $author_id]); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+				<?php if (function_exists('aksrt_get_avatar_html')) : ?>
+					<?php echo aksrt_get_avatar_html($author_id, 42, ['class' => 'avatar avatar-id-' . $author_id]); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+				<?php else : ?>
+					<?php echo get_avatar($author_id, 42, '', esc_attr($author_name), ['class' => 'avatar avatar-id-' . $author_id]); ?>
+				<?php endif; ?>
+				</span>
 			</a>
-		<?php else : ?>
-			<a class="avatar-img" href="<?php echo esc_url($author_url); ?>">
-				<?php echo get_avatar($author_id, 42, '', esc_attr($author_name), ['class' => 'avatar avatar-id-' . $author_id]); ?>
-			</a>
-		<?php endif; ?>
 		<div class="user-right flex flex1 ac jsb ml10">
 			<div class="flex1">
 				<span class="name flex ac flex1">