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

ui: update branding with new orange logo and accent color

Browse Source
This commit is contained in:
mkelvers
2026-05-06 20:08:07 +02:00
parent 8948eeeea1
commit 6ad0d4da6f
4 changed files with 40 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 52" width="200" height="52">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs>
<linearGradient id="mal-grad-dark" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff9966" />
<stop offset="100%" stop-color="#ff6b4a" />
</linearGradient>
<radialGradient id="bg-dark" cx="35%" cy="35%" r="75%">
<stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" />
</radialGradient>
<clipPath id="clip-dark">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs>
<g fill="url(#mal-grad-dark)">
<!-- M -->
<path d="M8 42V10h9l12 22 12-22h9v32h-8V18l-11 20h-4l-11-20v24z"/>
<!-- Base -->
<circle cx="50" cy="50" r="45" fill="url(#bg-dark)" />
<!-- A -->
<path d="M58 10h10l9 24 9-24h10v32h-8V18l-9-8h-2l-9 8v24h-8V10z"/>
<!-- L -->
<path d="M106 10h8v32h-8V10z"/>
<!-- . (dot) -->
<circle cx="128" cy="36" r="4"/>
<!-- L -->
<path d="M144 10h8v32h-8V10z"/>
<!-- i -->
<path d="M164 10h8v24h-8v-24zm0 28h8v4h-8v-4z"/>
<!-- s -->
<path d="M184 14c0-4 3-6 7-6s7 2 7 6c0 4-3 6-7 6s-7 2-7 6c0 4 3 6 7 6s7-2 7-6v-6h-8v4c0 2-1 3-3 3s-3-1-3-3c0-2 1-3 3-3s3-1 3-3v-4c0-3-2-5-5-5s-5 2-5 5v8c0 5 3 8 8 8s8-3 8-8v-8h-8z"/>
<!-- t -->
<path d="M196 10h10v4h-6v6c0 2 1 3 3 3s3-1 3-3v-6c0-2-1-4-4-4h-2v-4h-4v4h2z"/>
<!-- Crescent moon cutout -->
<g clip-path="url(#clip-dark)">
<path
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
fill="#FFF7ED"
transform="translate(-2 -2)"
/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 656 B

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

@@ -1,34 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 52" width="200" height="52">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs>
<linearGradient id="mal-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f47521" />
<stop offset="100%" stop-color="#e6402a" />
</linearGradient>
<radialGradient id="bg" cx="35%" cy="35%" r="75%">
<stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" />
</radialGradient>
<clipPath id="clip">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs>
<g fill="url(#mal-grad)">
<!-- M -->
<path d="M8 42V10h9l12 22 12-22h9v32h-8V18l-11 20h-4l-11-20v24z"/>
<!-- Base -->
<circle cx="50" cy="50" r="45" fill="url(#bg)" />
<!-- A -->
<path d="M58 10h10l9 24 9-24h10v32h-8V18l-9-8h-2l-9 8v24h-8V10z"/>
<!-- L -->
<path d="M106 10h8v32h-8V10z"/>
<!-- . (dot) -->
<circle cx="128" cy="36" r="4"/>
<!-- L -->
<path d="M144 10h8v32h-8V10z"/>
<!-- i -->
<path d="M164 10h8v24h-8v-24zm0 28h8v4h-8v-4z"/>
<!-- s -->
<path d="M184 14c0-4 3-6 7-6s7 2 7 6c0 4-3 6-7 6s-7 2-7 6c0 4 3 6 7 6s7-2 7-6v-6h-8v4c0 2-1 3-3 3s-3-1-3-3c0-2 1-3 3-3s3-1 3-3v-4c0-3-2-5-5-5s-5 2-5 5v8c0 5 3 8 8 8s8-3 8-8v-8h-8z"/>
<!-- t -->
<path d="M196 10h10v4h-6v6c0 2 1 3 3 3s3-1 3-3v-6c0-2-1-4-4-4h-2v-4h-4v4h2z"/>
<!-- Crescent moon cutout -->
<g clip-path="url(#clip)">
<path
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
fill="#FFF7ED"
transform="translate(-2 -2)"
/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 636 B

2
static/style.css
View File

@@ -16,7 +16,7 @@
--color-foreground-muted: #6a6b70;
--color-foreground: #f8f9fa;
--color-accent: #9f7aea;
--color-accent: #FB923C;
}
:root {

2
templates/components/header.gohtml
View File

@@ -11,7 +11,7 @@
<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-7 w-auto" />
<img src="/static/readme-logo-light.svg" alt="MAL" class="h-8 w-8 transition-transform group-hover:scale-110" />
</picture>
<span class="text-xl font-bold tracking-tight text-white hidden sm:block">MyAnime<span class="text-accent">List</span></span>
</a>