浅念
22b614118b
Task 9 (new design, not a cms port): _professional_components.html gains an icon(name, size, cls) macro — 10 inline line-style glyphs (arrow-right, arrow-left, chevron-down, check, phone, mail, location, download, search, quote), 24x24 viewBox, stroke=currentColor, stroke-width 1.5, round caps/joins, decorative aria-hidden + focusable=false, default size var(--sf-tp-icon-size-md, 20px), unknown names fall back to arrow-right. Every glyph is a single <path> so the d attribute needs no |safe. All bare text arrows (->, <-, ↗, ▾, ⌕) in the macro library, pro.html, site.html and pages/* are replaced with macro calls (site.html keeps a self-contained copy of the arrow glyph because its rendering envs cannot import the macro library); the filters macro search box gains an inline search icon; footer links gain small arrows. theme.css adds .sf-tp-icon alignment, in-button icon spacing, and search-box icon positioning. Co-Authored-By: Claude Code <noreply@anthropic.com>
20 lines
5.0 KiB
HTML
20 lines
5.0 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><title>{{seo_title}}</title><meta name="description" content="{{seo_description}}"><meta name="robots" content="{{'noindex,follow' if mode=='notfound' else (page.robots or 'index,follow')}}">{% if canonical %}<link rel="canonical" href="{{canonical}}">{% endif %}<link rel="stylesheet" href="assets/theme.css"><link rel="stylesheet" href="assets/blocks.css"><link rel="stylesheet" href="assets/custom.css"></head><body>
|
||
{# site.html renders in environments where the trade-pro macro library cannot
|
||
be imported (theme-package previews load only the package dir), so its arrow
|
||
is a self-contained copy of the icon macro's arrow-right glyph. Same style
|
||
contract: 24×24 viewBox, currentColor stroke, decorative aria-hidden. #}
|
||
{% macro tp_arrow() -%}
|
||
<svg class="sf-tp-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
{%- endmacro %}
|
||
<div class="top"><div class="wrap"><span>ENGINEERING · MANUFACTURING · SUPPLY</span><span>GLOBAL INDUSTRIAL SOLUTIONS</span></div></div>
|
||
<header><div class="wrap header-inner"><a class="brand" href="./"><span class="brand-icon">▰</span><span>{{site.name}}<small>INDUSTRIAL SOLUTIONS</small></span></a><nav><a href="./">Home</a>{% for n in nav if n.route!='/' %}<a href="{{link(n.route)}}">{{n.title}}</a>{% endfor %}{% if entries|selectattr('type','equalto','product')|list %}<a href="product/">Products</a>{% endif %}{% if entries|selectattr('type','equalto','post')|list %}<a href="post/">News</a>{% endif %}</nav><a class="request" href="mailto:{{site.email or "info@example.com"}}">REQUEST A QUOTE {{ tp_arrow() }}</a></div></header>
|
||
{% if blueprint_mode %}{% elif mode=='home' %}<section class="hero"><div class="wrap hero-grid"><div class="hero-text"><span class="kicker"><i></i> STRONGER CONNECTIONS. SMARTER SOLUTIONS.</span><h1>{{page.title if page.title!=site.name else 'BUILT TO LAST.'}}</h1><p>{{page.summary or site.tagline or 'Industrial excellence, quality products and dependable worldwide delivery.'}}</p><a class="button" href="product/">EXPLORE PRODUCTS <b>{{ tp_arrow() }}</b></a><div class="hero-tags"><span>01 / MATERIALS</span><span>02 / ENGINEERING</span><span>03 / SERVICE</span></div></div><div class="hero-art">{% if page.cover %}<img src="{{asset(page.cover)}}" alt="{{page.title}}">{% else %}<div class="ring ring-1"></div><div class="ring ring-2"></div><div class="ring ring-3"></div><span>INDUSTRY<br>IN MOTION</span>{% endif %}</div></div></section>
|
||
{% elif mode=='notfound' %}<section class="subhero"><div class="wrap"><span class="kicker">ERROR</span><h1>404 — Page not found</h1></div></section>
|
||
{% else %}<section class="subhero"><div class="wrap"><span class="kicker">{{type_names.get(page.type,'COMPANY')|upper}} / {{'PRODUCT CATALOG' if mode=='listing' else 'OUR EXPERTISE'}}</span><h1>{{page.title}}</h1><p>{{page.summary}}</p></div></section>{% endif %}
|
||
{% if blueprint_mode %}<main class="sf-canvas">{{blocks}}</main>{% else %}<main class="wrap main">{% if mode=='home' %}<div class="metrics"><div><strong>01</strong><span>PRODUCT ENGINEERING</span></div><div><strong>02</strong><span>GLOBAL SOURCING</span></div><div><strong>03</strong><span>QUALITY ASSURANCE</span></div></div>{% endif %}
|
||
{% if mode in ['home','detail'] and (content or blocks) %}<article class="rich-content">{{blocks}}{{content}}</article>{% endif %}
|
||
{% if mode=='detail' and page.cover %}<figure class="detail-image"><img src="{{asset(page.cover)}}" alt="{{page.title}}"></figure>{% endif %}
|
||
{% set cards=listing_items if mode=='listing' else entries|selectattr('type','equalto','product')|list if mode=='home' else [] %}
|
||
{% if cards %}<div class="titlebar"><div><span class="kicker">OUR PORTFOLIO</span><h2>{{'Product Catalogue' if mode=='listing' else 'Explore Our Products'}}</h2></div>{% if mode=='home' %}<a href="product/">ALL PRODUCTS {{ tp_arrow() }}</a>{% endif %}</div><div class="product-grid">{% for item in cards[:12] %}<a href="{{link(item.route)}}" class="product"><div class="product-img">{% if item.cover %}<img src="{{asset(item.cover)}}" alt="{{item.title}}">{% else %}<div class="technical-graphic"><span>+</span><span>+</span><span>+</span><span>+</span></div>{% endif %}</div><div class="product-info"><span>INDUSTRIAL / {{type_names.get(item.type,'PRODUCT')|upper}}</span><h3>{{item.title}}</h3><p>{{item.summary|truncate(100)}}</p><div class="arrow">DISCOVER DETAILS <b>{{ tp_arrow() }}</b></div></div></a>{% endfor %}</div>{% endif %}</main>
|
||
{% endif %}<footer><div class="wrap"><div class="footer-cols"><div><h2>{{site.name}}</h2><p>{{site.tagline}}</p></div><div><span>INDUSTRIAL SOLUTIONS</span><p>Quality materials. Dependable service.<br>Worldwide supply.</p></div></div><div class="bottom"><span>© {{site.name}}</span><span>DESIGNED TO DELIVER. BUILT WITH SITEFORGE.</span></div></div></footer></body></html>
|