style(lists): replace '— ' dash prefix with vertical gold bar accent
The em-dash prefix on list items felt typographic but unbranded. Now each
list item gets a 3px-wide gold vertical bar on the left, evoking a tactical
breadcrumb. Implementation :
- Builders (av_build_list_section in _av-bricks-shared.php +
av_build_form_two_col promise list in av-generate-forms.php) emit clean
text without the '— ' prefix, and set _cssClasses = 'av-list-item'
- New mu-plugin av-list-bullet-style.php injects CSS via wp_head() :
.av-list-item { position: relative; padding-left: 0.9rem; }
.av-list-item::before { gold bar, 3px × 1.1em, aligned to first line }
Regen all sections (industries, solutions, technology, editorial, forms,
home) to switch existing pages to the new style.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -418,7 +418,8 @@ function av_build_list_section($slug, $i, $section, $bg = 'var(--color-bg-defaul
|
|||||||
$els[] = [
|
$els[] = [
|
||||||
'id' => "i{$slug}l{$i}x{$j}", 'name' => 'text-basic', 'parent' => $list, 'children' => [],
|
'id' => "i{$slug}l{$i}x{$j}", 'name' => 'text-basic', 'parent' => $list, 'children' => [],
|
||||||
'settings' => [
|
'settings' => [
|
||||||
'text' => '— ' . $item,
|
'text' => $item, // no "— " prefix anymore
|
||||||
|
'_cssClasses' => 'av-list-item', // gold-bar accent via wp_head CSS
|
||||||
'_typography' => [
|
'_typography' => [
|
||||||
'color' => av_color('var(--color-text-secondary)'),
|
'color' => av_color('var(--color-text-secondary)'),
|
||||||
'font-size' => '1rem',
|
'font-size' => '1rem',
|
||||||
|
|||||||
@@ -362,7 +362,8 @@ function av_build_form_two_col($slug, $d) {
|
|||||||
$els[] = [
|
$els[] = [
|
||||||
'id' => "fp{$slug}i{$j}", 'name' => 'text-basic', 'parent' => $plst, 'children' => [],
|
'id' => "fp{$slug}i{$j}", 'name' => 'text-basic', 'parent' => $plst, 'children' => [],
|
||||||
'settings' => [
|
'settings' => [
|
||||||
'text' => "\u{2014} " . $item,
|
'text' => $item,
|
||||||
|
'_cssClasses' => 'av-list-item',
|
||||||
'_typography' => [
|
'_typography' => [
|
||||||
'color' => av_color('var(--color-text-secondary)'),
|
'color' => av_color('var(--color-text-secondary)'),
|
||||||
'font-size' => '0.9375rem',
|
'font-size' => '0.9375rem',
|
||||||
|
|||||||
34
tools/av-list-bullet-style.php
Normal file
34
tools/av-list-bullet-style.php
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Plugin Name: Asterion — Vertical gold bullet for list items
|
||||||
|
* Description: Replaces the "— " dash prefix with a strong vertical gold bar
|
||||||
|
* accent (3px wide) on the left of each item. Pure CSS via wp_head().
|
||||||
|
* Items must have the class `av-list-item` (set by av_build_list_section
|
||||||
|
* in _av-bricks-shared.php).
|
||||||
|
*/
|
||||||
|
defined('ABSPATH') || exit;
|
||||||
|
|
||||||
|
add_action('wp_head', function () {
|
||||||
|
?>
|
||||||
|
<style id="av-list-bullet">
|
||||||
|
/* Each list item gets a vertical gold bar on the left, like a tactical
|
||||||
|
breadcrumb on a UI. Pure CSS, no extra DOM. */
|
||||||
|
/* class order in rendered HTML is "brxe-text-basic av-list-item" — selector
|
||||||
|
works either way (CSS class ordering doesn't matter), kept simple. */
|
||||||
|
.av-list-item {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0.9rem;
|
||||||
|
}
|
||||||
|
.av-list-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.35em; /* aligns with first line baseline */
|
||||||
|
width: 3px;
|
||||||
|
height: 1.1em;
|
||||||
|
background: var(--color-brand-gold, #C9A45A);
|
||||||
|
border-radius: 1.5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<?php
|
||||||
|
}, 999);
|
||||||
Reference in New Issue
Block a user