smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new logo for dark and white website, fixed scaling for logo

Browse Source
This commit is contained in:
smacks
2026-03-23 11:51:25 +01:00
parent e06a4f87dd
commit 850aae3d0d
6 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/logo-black.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

assets/logo-old.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

assets/logo-white.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

assets/style.css
+7 -4
View File
@@ -429,7 +429,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
.site-header { .site-header {
max-width: 1200px; max-width: 1200px;
margin: 24px auto 12px; margin: 24px auto 12px;
padding: 14px 20px; padding: 10px 20px;
border: 1px solid rgba(28,32,52,0.08); border: 1px solid rgba(28,32,52,0.08);
border-radius: 14px; border-radius: 14px;
background: rgba(255,255,255,0.9); background: rgba(255,255,255,0.9);
@@ -449,7 +449,10 @@ img, picture { display: block; max-width: 100%; height: auto; }
gap: 12px; gap: 12px;
} }
.site-header .logo { display: inline-flex; align-items: center; } .site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { display: block; height: clamp(28px,5vw,48px); width: auto; } .site-header .logo img { display: block; height: clamp(56px,8vw,96px); width: auto; }
.site-header .logo .logo--dark { display: none; }
[data-theme="dark"] .site-header .logo .logo--light { display: none; }
[data-theme="dark"] .site-header .logo .logo--dark { display: block; }
.header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.lang-toggle { .lang-toggle {
padding: 8px 12px; padding: 8px 12px;
@@ -968,8 +971,8 @@ img, picture { display: block; max-width: 100%; height: auto; }
@media (max-width: 900px) { @media (max-width: 900px) {
#recipes { padding: 0 14px 40px; } #recipes { padding: 0 14px 40px; }
.site-header { padding: 12px 14px; gap: 10px; border-radius: 18px; } .site-header { padding: 10px 14px; gap: 10px; border-radius: 18px; }
.site-header .logo img { height: clamp(32px,12vw,56px); } .site-header .logo img { height: clamp(64px,20vw,112px); }
.menu-toggle { display: inline-flex !important; } .menu-toggle { display: inline-flex !important; }
.menu-toggle__label { display: inline; } .menu-toggle__label { display: inline; }
.site-nav { .site-nav {
partials/header.php
+2 -1
View File
@@ -1,7 +1,8 @@
<header class="site-header"> <header class="site-header">
<div class="site-header__top"> <div class="site-header__top">
<a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>"> <a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>">
<img src="/assets/logo.png" alt="FlixCooks"> <img class="logo--light" src="/assets/logo-white.png" alt="FlixCooks">
<img class="logo--dark" src="/assets/logo-black.png" alt="FlixCooks">
</a> </a>
<div class="header-actions"> <div class="header-actions">
<a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a> <a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a>