ui: redesign brand icon and fix clipped wordmark
- new mark: measurement-span glyph on rounded brand-gradient badge (favicon, inline logo, standalone tmflow-logo.svg) - wordmark moved from SVG <text> with hardcoded x offsets (clipped "Flow" past the 260px viewBox, font-dependent overlap) to plain HTML spans — never clips, natural kerning, theme-adaptive - _app_logo.html params: logo_class, wordmark_class, logo_id (unique gradient id when logo appears twice per page) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Adriano Dal Pastro
@@ -1,27 +1,21 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||||
<!-- Stylized Caliper Icon for Favicon -->
|
<!-- TieMeasureFlow brand mark: measurement span glyph on brand-blue badge -->
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="tmfBadge" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#3B82F6"/>
|
||||||
|
<stop offset="1" stop-color="#1D4ED8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
<!-- Caliper outer frame -->
|
<!-- Badge -->
|
||||||
<rect x="2" y="3" width="5" height="26" rx="1.5" fill="#2563EB"/>
|
<rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge)"/>
|
||||||
<rect x="2" y="3" width="19" height="5" rx="1.5" fill="#2563EB"/>
|
|
||||||
<rect x="2" y="24" width="19" height="5" rx="1.5" fill="#2563EB"/>
|
|
||||||
|
|
||||||
<!-- Sliding jaw -->
|
<!-- Measurement end bars -->
|
||||||
<rect x="12" y="8" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
|
<rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
<rect x="12" y="17.5" width="4.5" height="6.5" rx="1" fill="#1E40AF"/>
|
<rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
|
|
||||||
<!-- Depth rod -->
|
<!-- Double-headed arrow (measured span) -->
|
||||||
<rect x="4" y="14" width="12" height="3.5" rx="1" fill="#3B82F6" opacity="0.55"/>
|
<path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<!-- Scale markings -->
|
<path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<rect x="8" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
|
|
||||||
<rect x="11" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
|
|
||||||
<rect x="14" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
|
|
||||||
<rect x="17" y="5" width="1" height="2.5" rx="0.5" fill="#FFFFFF" opacity="0.65"/>
|
|
||||||
|
|
||||||
<!-- Flow arrow -->
|
|
||||||
<path d="M22 16 C25 16, 26.5 11, 29 11"
|
|
||||||
stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round" fill="none"/>
|
|
||||||
<path d="M27 8.5 L29.5 11 L27 13.5"
|
|
||||||
stroke="#3B82F6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 997 B |
@@ -1,41 +1,23 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 44" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 64" fill="none">
|
||||||
<!-- Stylized Caliper Icon -->
|
<!-- TieMeasureFlow full logo: brand badge + wordmark (standalone asset) -->
|
||||||
<g transform="translate(2, 2)">
|
<defs>
|
||||||
<!-- Caliper outer frame -->
|
<linearGradient id="tmfBadgeFull" x1="0" y1="0" x2="1" y2="1">
|
||||||
<rect x="0" y="4" width="6" height="32" rx="1.5" fill="#2563EB"/>
|
<stop offset="0" stop-color="#3B82F6"/>
|
||||||
<rect x="0" y="4" width="24" height="6" rx="1.5" fill="#2563EB"/>
|
<stop offset="1" stop-color="#1D4ED8"/>
|
||||||
<rect x="0" y="30" width="24" height="6" rx="1.5" fill="#2563EB"/>
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
<!-- Caliper sliding jaw -->
|
<!-- Badge -->
|
||||||
<rect x="14" y="10" width="5" height="8" rx="1" fill="#1E40AF"/>
|
<rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadgeFull)"/>
|
||||||
<rect x="14" y="22" width="5" height="8" rx="1" fill="#1E40AF"/>
|
<rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
|
<rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
|
<path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
<!-- Caliper depth rod -->
|
<!-- Wordmark: single text element with flowing tspans (cannot be clipped/overlap) -->
|
||||||
<rect x="2" y="18" width="16" height="4" rx="1" fill="#3B82F6" opacity="0.6"/>
|
<text x="76" y="42" font-family="Inter, system-ui, -apple-system, sans-serif"
|
||||||
|
font-size="30" letter-spacing="-0.5" fill="#0F172A">
|
||||||
<!-- Scale markings -->
|
<tspan font-weight="700">Tie</tspan><tspan font-weight="600" fill="#2563EB">Measure</tspan><tspan font-weight="700">Flow</tspan>
|
||||||
<rect x="7" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
</text>
|
||||||
<rect x="10" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="13" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="16" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="19" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
|
|
||||||
<!-- Flow arrow (smooth curve) -->
|
|
||||||
<path d="M26 20 C30 20, 32 14, 36 14 C40 14, 40 20, 36 20"
|
|
||||||
stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
|
||||||
<path d="M34 17 L37 20 L34 23" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Text: TieMeasureFlow -->
|
|
||||||
<g transform="translate(48, 0)">
|
|
||||||
<!-- "Tie" in bold primary -->
|
|
||||||
<text x="0" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="700" fill="#2563EB"
|
|
||||||
letter-spacing="-0.5">Tie</text>
|
|
||||||
<!-- "Measure" in medium dark -->
|
|
||||||
<text x="32" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="500" fill="#1E40AF"
|
|
||||||
letter-spacing="-0.5">Measure</text>
|
|
||||||
<!-- "Flow" in bold primary -->
|
|
||||||
<text x="120" y="28" font-family="Inter, system-ui, sans-serif" font-size="20" font-weight="700" fill="#2563EB"
|
|
||||||
letter-spacing="-0.5">Flow</text>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -16,7 +16,9 @@
|
|||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<div class="mx-auto mb-4 inline-flex justify-center text-slate-900 dark:text-white">
|
<div class="mx-auto mb-4 inline-flex justify-center text-slate-900 dark:text-white">
|
||||||
{% set logo_class = 'h-16 w-auto' %}
|
{% set logo_class = 'h-14 w-14' %}
|
||||||
|
{% set wordmark_class = 'text-3xl' %}
|
||||||
|
{% set logo_id = 'login' %}
|
||||||
{% include 'components/_app_logo.html' %}
|
{% include 'components/_app_logo.html' %}
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-[var(--text-secondary)]">
|
<p class="text-sm text-[var(--text-secondary)]">
|
||||||
|
|||||||
@@ -1,35 +1,33 @@
|
|||||||
<!--
|
<!--
|
||||||
Inline TieMeasureFlow logo. Text fills use `currentColor`, so wrap with a
|
TieMeasureFlow logo: brand badge (SVG) + HTML wordmark.
|
||||||
parent that sets `color` (e.g. `text-slate-900 dark:text-white`) to make the
|
The wordmark inherits `color` from the parent (set e.g. `text-slate-900
|
||||||
wordmark adapt to the active theme. The caliper/flow icon keeps its brand
|
dark:text-white`); "Measure" keeps the brand blue.
|
||||||
blue regardless of theme.
|
|
||||||
-->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" fill="none"
|
|
||||||
class="{{ logo_class|default('h-10 w-auto') }}"
|
|
||||||
aria-label="TieMeasureFlow">
|
|
||||||
<!-- Caliper + flow icon (always brand color) -->
|
|
||||||
<g transform="translate(2, 6)">
|
|
||||||
<rect x="0" y="4" width="6" height="32" rx="1.5" fill="#2563EB"/>
|
|
||||||
<rect x="0" y="4" width="24" height="6" rx="1.5" fill="#2563EB"/>
|
|
||||||
<rect x="0" y="30" width="24" height="6" rx="1.5" fill="#2563EB"/>
|
|
||||||
<rect x="14" y="10" width="5" height="8" rx="1" fill="#1E40AF"/>
|
|
||||||
<rect x="14" y="22" width="5" height="8" rx="1" fill="#1E40AF"/>
|
|
||||||
<rect x="2" y="18" width="16" height="4" rx="1" fill="#3B82F6" opacity="0.6"/>
|
|
||||||
<rect x="7" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="10" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="13" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="16" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<rect x="19" y="7" width="1" height="3" rx="0.5" fill="#FFFFFF" opacity="0.7"/>
|
|
||||||
<path d="M26 20 C30 20, 32 14, 36 14 C40 14, 40 20, 36 20"
|
|
||||||
stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
|
||||||
<path d="M34 17 L37 20 L34 23"
|
|
||||||
stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Wordmark: themed via currentColor; "Measure" stays brand-tinted -->
|
Parameters (set before include):
|
||||||
<g transform="translate(52, 0)" font-family="Inter, system-ui, sans-serif" letter-spacing="-0.5">
|
logo_class — badge size, default 'h-10 w-10'
|
||||||
<text x="0" y="34" font-size="28" font-weight="700" fill="currentColor">Tie</text>
|
wordmark_class — wordmark text size, default 'text-xl'; '' hides the text
|
||||||
<text x="44" y="34" font-size="28" font-weight="500" fill="#2563EB">Measure</text>
|
logo_id — unique suffix for the SVG gradient id when the logo
|
||||||
<text x="166" y="34" font-size="28" font-weight="700" fill="currentColor">Flow</text>
|
appears more than once per page (default 'tmf')
|
||||||
</g>
|
-->
|
||||||
|
{% set _logo_id = logo_id|default('tmf') %}
|
||||||
|
<span class="inline-flex items-center gap-2.5 select-none whitespace-nowrap">
|
||||||
|
<svg class="{{ logo_class|default('h-10 w-10') }} shrink-0" viewBox="0 0 64 64" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="tmfBadge-{{ _logo_id }}" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#3B82F6"/>
|
||||||
|
<stop offset="1" stop-color="#1D4ED8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tmfBadge-{{ _logo_id }})"/>
|
||||||
|
<rect x="14" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
|
<rect x="45" y="16" width="5" height="32" rx="2.5" fill="#FFFFFF"/>
|
||||||
|
<path d="M24 32 H40" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M28 26.5 L22.5 32 L28 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M36 26.5 L41.5 32 L36 37.5" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
{% if wordmark_class is not defined or wordmark_class %}
|
||||||
|
<span class="{{ wordmark_class|default('text-xl') }} font-bold tracking-tight leading-none"
|
||||||
|
aria-label="TieMeasureFlow">Tie<span class="text-primary-600 dark:text-primary-400">Measure</span>Flow</span>
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -51,7 +51,9 @@
|
|||||||
<img src="{{ url_for('static', filename='img/' ~ company_logo) }}" alt="Logo" class="h-10 w-auto"
|
<img src="{{ url_for('static', filename='img/' ~ company_logo) }}" alt="Logo" class="h-10 w-auto"
|
||||||
onerror="this.style.display='none'">
|
onerror="this.style.display='none'">
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set logo_class = 'h-10 w-auto' %}
|
{% set logo_class = 'h-9 w-9' %}
|
||||||
|
{% set wordmark_class = 'text-xl' %}
|
||||||
|
{% set logo_id = 'nav' %}
|
||||||
{% include 'components/_app_logo.html' %}
|
{% include 'components/_app_logo.html' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user