gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Markenlogos optisch aufeinander abstimmen

Browse source 
Gewuenscht: CABINET 15 Prozent kleiner, Rotpunkt 20 Prozent groesser, Februe
unveraendert. Rotpunkt fuellte die Box bereits ganz aus und konnte nur ueber
eine groessere Box wachsen.

- Alle vier Logo-Boxen 20 Prozent hoeher (Seitenkopf 96 → 115 px, Kacheln
  44 → 53 px, /marken 56 → 67 px). Rotpunkt waechst dadurch um genau 20 %.
- Februe gleicht das ueber 20 Prozent Luft oben und unten in der Datei aus und
  rendert unveraendert.
- CABINET bekommt 18 Prozent Luft rechts – die Box begrenzt den 4:1-Schriftzug
  ueber die Breite, nicht ueber die Hoehe. Die Luft sitzt nur rechts, damit das
  Logo links buendig zum Text darunter bleibt.

Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Februe 100 %.

Die Abstimmung steckt in den Zeichenflaechen der Dateien, nicht im Blade – so
gilt sie an allen vier Stellen gleichzeitig. Der Merksatz fuer neue Logos steht
im Kopf von BrandLogoSeeder.

Tests: 873 gruen (3217 Assertions), Pint sauber, alle Themes gebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-09-03 12:47:41 +00:00
parent 3958a1fe89
commit 1242d4bce8
7 changed files with 42 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/views/livewire/web/components/sections/brand-detail.blade.php
View file

@ -18,7 +18,7 @@
@if (!empty($brand['logo']))
<h1>
<img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
class="h-20 sm:h-24 max-w-[17rem] w-auto object-contain object-left" />
class="h-24 sm:h-[7.2rem] max-w-[17rem] w-auto object-contain object-left" />
</h1>
@else
<h1 class="text-section-title">{{ $brand['name'] }}</h1>
@ -355,7 +355,7 @@
class="card-elevated rounded-2xl p-8 block hover:shadow-lg transition-shadow duration-300">
@if (!empty($other['logo']))
<img src="{{ theme_image_url($other['logo']) }}" alt="{{ $other['name'] }}"
class="h-11 max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
@endif
<h3 class="text-xl font-medium">{{ $other['name'] }}</h3>

7
resources/views/livewire/web/components/sections/brand-overview.blade.php
View file

@ -19,11 +19,12 @@
</div>
<div class="{{ $loop->even ? '' : 'lg:order-1' }}">
{{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr
unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}}
{{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
@if (!empty($brand['logo']))
<img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
class="h-14 max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
class="h-[4.2rem] max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
@endif
<h2 class="text-2xl lg:text-3xl font-medium">{{ $brand['name'] }}</h2>

7
resources/views/livewire/web/components/sections/core-brands.blade.php
View file

@ -22,11 +22,12 @@
@endif
<div class="p-8 flex flex-col grow">
{{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr
unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}}
{{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
@if (!empty($brand['logo']))
<img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
class="h-11 max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" />
@endif
<h3 class="text-xl font-medium">{{ $brand['name'] }}</h3>