顶栏图标改为与「标题+简介」整体垂直居中
用户:「图标应该在标题和它的简介的正中间…现在图标和上面的标题是对齐的,
把图标往下放一放,让标题和它下面的简介合起来和图标高度一样,
两个对齐上下。」
根因是结构问题,不是调 padding 能解决的:
以前图标和标题被 fb_software_badge() 包在同一个 .sw-badge 里(单行结构),
note 挂在它外面下面一层 ⇒ 图标天然只能对齐第一行文字,永远做不到两行居中。
改结构为「左图标 + 右文字列」两栏:
<a class="brand-mini">
<span class="brand-ic">图标</span> ← flex:none 30×30
<span class="brand-txt"> ← flex column
<span class="brand-title">标题</span>
<span class="brand-mini-note">简介</span>
</span>
</a>
外层 .brand-mini 用 align-items:center ⇒ 图标中线对齐文字列中线。
图标不再走 fb_software_badge(),改用 fb_software_icon() / icon_key 自己拼,
因为 badge 那个函数是把图标和名字绑死在一行的。
实测中线偏差:
桌面 1280:图标 18→48(中线 33.0),文字列 13.8→52.2(中线 33.0)→ 偏差 0.0px
手机 390:图标 17→43(中线 30.0),文字列 12.3→47.7(中线 30.0)→ 偏差 0.0px
首页(无软件时)仍是原来的 logo-mark + brand-text,未受影响;6 个路由全 200。
This commit is contained in:
+1
-1
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
|
||||
define('FB_ROOT', dirname(__DIR__));
|
||||
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
|
||||
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
|
||||
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 35); }
|
||||
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 36); }
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
|
||||
+24
-6
@@ -85,16 +85,34 @@ function fb_layout_head($title, array $opt = []) {
|
||||
* 那个「同步日历反馈系统」下面那个位置,用个灰色的。」
|
||||
* 这样内容区就不用再重复一遍标题和简介了。 */
|
||||
$swNoteTop = !empty($curSw['note']) ? trim((string)$curSw['note']) : '';
|
||||
/* 图标要单独拿出来放在左边,才能与「标题 + 简介」两行**整体**垂直居中。
|
||||
* 🔴 用户 2026-11-03:「图标应该在标题和简介的正中间…现在图标和上面的标题
|
||||
* 是对齐的、在图标的正中间…把图标往下放一放,让标题和它下面的简介合起来
|
||||
* 和图标高度一样,两个对齐上下。」
|
||||
* ⇒ 结构必须是「图标 | 文字列」两栏,所以这里不用 fb_software_badge()
|
||||
* (那个函数把图标和名字包在同一个 .sw-badge 里,天然是单行)。
|
||||
* 改用 fb_software_icon()/icon_key 自己拼图标,名字单独放右侧。 */
|
||||
$bIcon = fb_software_icon($curSw);
|
||||
$bKey = trim((string)(isset($curSw['icon_key']) ? $curSw['icon_key'] : ''));
|
||||
$bImg = $bKey !== '' ? fb_icon_url($bKey, 64) : '';
|
||||
$bTitle = fb_software_site_title($curSw);
|
||||
?>
|
||||
<a class="brand-mini" href="<?php echo e(fb_software_list_url($curSw)); ?>"
|
||||
style="--swc:<?php echo e($curSwColor); ?>"
|
||||
title="<?php echo e(fb_software_site_title($curSw)); ?>">
|
||||
<span class="brand-mini-row">
|
||||
<?php echo fb_software_badge($curSw, 'brand', fb_software_site_title($curSw)); ?>
|
||||
title="<?php echo e($bTitle); ?>">
|
||||
<span class="brand-ic" aria-hidden="true">
|
||||
<?php if ($bImg !== ''): ?>
|
||||
<img src="<?php echo e($bImg); ?>" alt="" width="30" height="30" loading="lazy">
|
||||
<?php else: ?>
|
||||
<span class="brand-ic-ch"><?php echo e($bIcon); ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<span class="brand-txt">
|
||||
<span class="brand-title"><?php echo e($bTitle); ?></span>
|
||||
<?php if ($swNoteTop !== ''): ?>
|
||||
<span class="brand-mini-note"><?php echo e($swNoteTop); ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<?php if ($swNoteTop !== ''): ?>
|
||||
<span class="brand-mini-note"><?php echo e($swNoteTop); ?></span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
<a class="brand-mini" href="./" title="<?php echo e($site); ?>">
|
||||
|
||||
Reference in New Issue
Block a user