v0.10.17: H16 Developer Ecosystem(ab35847+906379a)完成,审计 0 差异

- SocialIconsWidget 忠实重写:wrapper grid + column-gap(icon_spacing 10)、
  a.elementor-social-icon 44×44/圆角 10%/官方品牌底色(#0077B5/#CD201F/#3B5998)、
  字形白色(原站 SVG fill #fff 取证)、hover shrink、elementor-screen-only 结构
- FA Brands 字体子集:public/fonts/fa-brands-400.woff2(自 legacy elementor 插件库)+
  app.css 三码位 content 规则(.fab/.fa-linkedin/.fa-youtube/.fa-facebook)
- elementor-animation-shrink 通用动画类;H16 卡列 populated 扣 margin scoped
- 双端节内几何/样式 0 差异(sec 764.4/卡 528.4 全等),截图目视一致
This commit is contained in:
bigcode
2026-11-01 23:52:26 +08:00
parent 94ef2a9afa
commit f614d10c94
5 changed files with 76 additions and 7 deletions
+48
View File
@@ -21,6 +21,27 @@
src: url("/fonts/roboto-var-latin.woff2") format("woff2");
}
/* # 字体 Font Awesome Brands(H16 社交图标;字形子集内联,完整库见 legacy 镜像
* wp-content/plugins/elementor/assets/lib/font-awesome——此处只装用到的三个品牌码位) */
@font-face {
font-family: "FA Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/fonts/fa-brands-400.woff2") format("woff2");
}
.fab {
font-family: "FA Brands";
font-weight: 400;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.fa-linkedin::before { content: "\f08c"; }
.fa-youtube::before { content: "\f167"; }
.fa-facebook::before { content: "\f09a"; }
/* # 成员变量 Tailwind 主题令牌(与原 website.css 配色一一对应) **/
@theme {
--font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -346,6 +367,11 @@
[data-el="88b6737"] .el-col > div, [data-el="e194e4f"] .el-col > div,
[data-el="f6a7591"] .el-col > div { width: auto !important; }
/* ===== 首页 H16 Developer Ecosystem(906379a 两卡列;1436 实测 2026-11-01)
* 卡列 populated 扣水平 margin(680-12=668,margin 右/左 0.75rem 设置驱动),
* padding 48/48/16 + 白底 + 圆角 6 + 边框 #E0E5F9 均设置驱动 */
[data-el="65282de"] > div, [data-el="cc3e8ca"] > div { width: auto !important; }
/* ===== 首页 H2 产品线入口(post-18.css 对应块;1436px 实测 2026-10-31)
* 外层 section:白→#F4F5F8 线性渐变(180deg)+ 1360 容器(SectionNode 背景已渲染);
* 中列 0.5rem 内边距;内层 e38a898 六列均分 224px,列内容 wrap padding 10px(高 107);
@@ -408,6 +434,9 @@
.content-html a { font-family: "Roboto", sans-serif; font-weight: 400; }
.el-anim-shrink { transition-duration: 0.3s; transition-property: transform; }
.el-anim-shrink:hover, .el-anim-shrink:focus, .el-anim-shrink:active { transform: scale(0.9); }
/* Elementor 通用动画类名(social-icons 等使用,H16) */
.elementor-animation-shrink { transition-duration: 0.3s; transition-property: transform; }
.elementor-animation-shrink:hover, .elementor-animation-shrink:focus, .elementor-animation-shrink:active { transform: scale(0.9); }
/* ===== EAEL infobox 基础(取证:原站实际加载 uploads/essential-addons-elementor/eael-18.css,
* 并未加载 view/info-box.min.css——后者仅在带 content-align--* 修饰类时才给 icon/content 上 flex,
@@ -429,6 +458,25 @@
.eael-infobox .infobox-content ul,
.eael-infobox .infobox-content ol { margin: 0; }
/* ===== Elementor social-icons(widget-social-icons.min.css 语义;H16 实测 2026-11-01)
* wrapper inline-grid + column-gap(=icon_spacing 10px),随父级 text-align 居中;
* a 官方品牌底色(linkedin #0077B6 / youtube #CD201F / facebook #3B5998)、44×44 盒
* (icon_size 22 → font 22 + padding 0.5em)、圆角 10%、字形白色(原站 SVG fill #fff)、
* hover shrink(.elementor-animation-shrink 基础已含缩放) */
.elementor-social-icons-wrapper.elementor-grid {
display: grid; grid-auto-flow: column; justify-content: center; text-align: center;
}
.elementor-social-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; font-size: 22px; border-radius: 10%;
color: #ED6C00; cursor: pointer; transition: all 0.3s;
}
.elementor-social-icon i { color: #fff; }
.elementor-social-icon-linkedin { background-color: #0077b5; }
.elementor-social-icon-youtube { background-color: #cd201f; }
.elementor-social-icon-facebook { background-color: #3b5998; }
.elementor-screen-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* ===== 首页 H4 硬件与服务系列 ×5(post-18.css 对应块;1436px 实测 2026-11-01)
* 卡列:渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + 列间 margin(ColumnNode 由 settings 渲染);
* 标题 widget 容器:底部橙线图背景(bottom center no-repeat)+ 左右 3rem 内边距;