kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
kate522
2026-07-16 13:07:42 +08:00
parent 6c354fb086
commit f043d2c1ab
7 changed files with 132 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/base.css
+6 -5
View File
@@ -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-left: 10px;
padding-right: 15px;
padding-left: 15px;
}
}
@@ -147,8 +148,8 @@ main.container,
main.container {
width: 100%;
max-width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-right: 15px;
padding-left: 15px;
}
}
assets/css/frontend/layout.css
+2 -3
View File
@@ -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
+15 -2
View File
@@ -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
+59 -47
View File
@@ -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,
.post-actions {
/* Legacy card-buttons flex only for non-zibll card variant */
.post-actions-card__buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
}
.action-btn,
.action {
/* Zibll: .article .action { width:80px; padding:10px 0; inline-block; opacity:.7 } */
.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:hover {
.action-btn:hover {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.action-btn.is-active,
.action.is-active {
.action-btn.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 i { font-size: 1.2em; }
.action-btn__count { font-weight: 600; }
.action-btn__label { font-size: 13px; }
.action-btn i { font-size: 1.2em; }
/* ===== 分享下拉面板 ===== */
@@ -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
+15 -2
View File
@@ -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
+26
View File
@@ -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
+9 -9
View File
@@ -57,16 +57,16 @@ if (class_exists('AKSRT_User_Home')) {
?>
<div class="<?php echo esc_attr($classes); ?>">
<div class="user-info flex ac">
<?php if (function_exists('aksrt_get_avatar_html')) : ?>
<a class="avatar-img" href="<?php echo esc_url($author_url); ?>">
<?php echo aksrt_get_avatar_html($author_id, 42, ['class' => 'avatar avatar-id-' . $author_id]); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="user-info flex ac article-avatar">
<a href="<?php echo esc_url($author_url); ?>">
<span class="avatar-img">
<?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">