hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add app favicon and brand mark

Browse Source
This commit is contained in:
Florian Heinz
2026-04-11 20:44:10 +02:00
parent 8d0762eeae
commit f654d459cb
4 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/branding/favicon.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="56" height="56" rx="18" fill="url(#bg)"/>
<rect x="4.5" y="4.5" width="55" height="55" rx="17.5" stroke="rgba(255,255,255,0.28)"/>
<path d="M32 14C23.7157 14 17 20.7157 17 29C17 40.25 32 50 32 50C32 50 47 40.25 47 29C47 20.7157 40.2843 14 32 14Z" fill="url(#drop)"/>
<circle cx="26.5" cy="24.5" r="4.5" fill="rgba(255,255,255,0.55)"/>
<defs>
<linearGradient id="bg" x1="10" y1="8" x2="56" y2="58" gradientUnits="userSpaceOnUse">
<stop stop-color="#86DFF9"/>
<stop offset="0.5" stop-color="#4AA6E6"/>
<stop offset="1" stop-color="#163C63"/>
</linearGradient>
<linearGradient id="drop" x1="22" y1="16" x2="43" y2="47" gradientUnits="userSpaceOnUse">
<stop stop-color="#F3FBFF"/>
<stop offset="0.55" stop-color="#8CF0E5"/>
<stop offset="1" stop-color="#57D6FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 978 B

assets/branding/logo-mark.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="6" width="84" height="84" rx="28" fill="url(#bg)"/>
<rect x="6.75" y="6.75" width="82.5" height="82.5" rx="27.25" stroke="rgba(255,255,255,0.28)" stroke-width="1.5"/>
<path d="M48 21C35.2975 21 25 31.2975 25 44C25 61.25 48 76 48 76C48 76 71 61.25 71 44C71 31.2975 60.7025 21 48 21Z" fill="url(#drop)"/>
<circle cx="39.5" cy="35.5" r="7" fill="rgba(255,255,255,0.5)"/>
<defs>
<linearGradient id="bg" x1="14" y1="10" x2="84" y2="84" gradientUnits="userSpaceOnUse">
<stop stop-color="#95E8FF"/>
<stop offset="0.46" stop-color="#5CB5FF"/>
<stop offset="1" stop-color="#173859"/>
</linearGradient>
<linearGradient id="drop" x1="33" y1="24" x2="64" y2="67" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFFFFF"/>
<stop offset="0.56" stop-color="#8CFFE0"/>
<stop offset="1" stop-color="#49CBFF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1003 B

assets/css/app.css
+8 -5
View File
@@ -194,11 +194,14 @@ button {
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 18px; border-radius: 18px;
background: linear-gradient(180deg, rgba(146, 232, 255, 0.9), rgba(95, 181, 255, 0.55)); overflow: hidden;
color: #032338; box-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
font-size: 1.25rem; }
font-weight: 800;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35); .brand-mark img {
width: 100%;
height: 100%;
display: block;
} }
.brand-block h1, .brand-block h1,
templates/layout.php
+6 -1
View File
@@ -17,7 +17,10 @@ $brandSubtitle = match ($page) {
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0b1e2e">
<title><?= e($pageTitle) ?> · Mood</title> <title><?= e($pageTitle) ?> · Mood</title>
<link rel="icon" type="image/svg+xml" href="/assets/branding/favicon.svg">
<link rel="shortcut icon" href="/assets/branding/favicon.svg">
<link rel="stylesheet" href="/assets/css/app.css"> <link rel="stylesheet" href="/assets/css/app.css">
<script defer src="/assets/js/app.js"></script> <script defer src="/assets/js/app.js"></script>
</head> </head>
@@ -28,7 +31,9 @@ $brandSubtitle = match ($page) {
<?php if ($authUser !== null): ?> <?php if ($authUser !== null): ?>
<aside class="sidebar glass-panel"> <aside class="sidebar glass-panel">
<div class="brand-block"> <div class="brand-block">
<div class="brand-mark">M</div> <div class="brand-mark">
<img src="/assets/branding/logo-mark.svg" alt="Mood Logo">
</div>
<div> <div>
<p class="eyebrow">mood.heinz.media</p> <p class="eyebrow">mood.heinz.media</p>
<h1>Mood</h1> <h1>Mood</h1>