mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: add new logo to header

Browse Source
This commit is contained in:
mkelvers
2026-05-06 19:51:35 +02:00
parent 901cf5497f
commit 982d5dc3a8
3 changed files with 85 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
static/readme-logo-dark.svg
View File

@@ -1,4 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="miter">
<rect x="6" y="10" width="12" height="12" />
<rect x="14" y="6" width="12" height="12" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
<defs>
<linearGradient id="bg-grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0d0d0d" />
<stop offset="100%" stop-color="#1a1a1a" />
</linearGradient>
</defs>
<!-- Background circle with gradient -->
<circle cx="70" cy="70" r="60" fill="url(#bg-grad-dark)" />
<!-- Stylized play button with Japanese geometric influence -->
<path
d="M55 45 L55 95 L95 70 Z"
fill="none"
stroke="#ff6b6b"
stroke-width="4"
stroke-linejoin="miter"
/>
<!-- Outer frame - Japanese inspired rectangle -->
<rect
x="30" y="30"
width="80" height="80"
rx="4"
fill="none"
stroke="#2d2d2d"
stroke-width="2"
stroke-dasharray="8 4"
/>
<!-- Corner accents -->
<path d="M35 40 L35 35 L40 35" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
<path d="M100 35 L105 35 L105 40" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
<path d="M105 100 L105 105 L100 105" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
<path d="M40 105 L35 105 L35 100" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
<!-- Subtle inner glow -->
<circle cx="70" cy="70" r="20" fill="none" stroke="#ff6b6b" stroke-width="0.5" opacity="0.3" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 1.4 KiB

44
static/readme-logo-light.svg
View File

@@ -1,4 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="miter">
<rect x="6" y="10" width="12" height="12" />
<rect x="14" y="6" width="12" height="12" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
<defs>
<linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1a1a2e" />
<stop offset="100%" stop-color="#16213e" />
</linearGradient>
</defs>
<!-- Background circle with gradient -->
<circle cx="70" cy="70" r="60" fill="url(#bg-grad)" />
<!-- Stylized play button with Japanese geometric influence -->
<path
d="M55 45 L55 95 L95 70 Z"
fill="none"
stroke="#e94560"
stroke-width="4"
stroke-linejoin="miter"
/>
<!-- Outer frame - Japanese inspired rectangle -->
<rect
x="30" y="30"
width="80" height="80"
rx="4"
fill="none"
stroke="#0f3460"
stroke-width="2"
stroke-dasharray="8 4"
/>
<!-- Corner accents -->
<path d="M35 40 L35 35 L40 35" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
<path d="M100 35 L105 35 L105 40" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
<path d="M105 100 L105 105 L100 105" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
<path d="M40 105 L35 105 L35 100" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
<!-- Subtle inner glow -->
<circle cx="70" cy="70" r="20" fill="none" stroke="#e94560" stroke-width="0.5" opacity="0.3" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 1.4 KiB

10
templates/components/header.gohtml
View File

@@ -8,11 +8,11 @@
<button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-white focus:outline-none lg:block">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
</button>
<a href="/" class="group flex items-center gap-2 focus:outline-none">
<svg class="h-7 w-7 transition-transform group-hover:scale-110" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 80 L25 30 L50 60 L75 30 L85 80" stroke="currentColor" class="text-accent" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="50" cy="25" r="8" fill="white" />
</svg>
<a href="/" class="group flex items-center gap-2.5 focus:outline-none">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="/static/readme-logo-dark.svg" />
<img src="/static/readme-logo-light.svg" alt="MAL" class="h-8 w-8" />
</picture>
<span class="text-xl font-bold tracking-tight text-white hidden sm:block">MyAnime<span class="text-accent">List</span></span>
</a>
</div>