feat: add logo SVG, favicon, wire logo into header and footer

- public/assets/logo.svg: SVG recreation of the NixPanel N-mark
  (server-rack bars + diagonal stroke + panel indicator blocks)
- head.php: favicon links for SVG, PNG 32px, PNG 192px, Apple touch,
  theme-color meta tag
- header.php: logo image next to wordmark, PNG fallback via onerror
- footer.php: logo image in footer brand
This commit is contained in:
NixReaper
2026-04-25 05:57:56 -05:00
parent 858c7ac56e
commit 7b66c6c7ff
4 changed files with 37 additions and 2 deletions
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 172" fill="none">
<!--
NixPanel logo mark
N letterform built from horizontal server-rack bars + diagonal stroke
Panel indicators (stacked blocks) on the right
-->
<!-- Top-left bar — left vertical of the N -->
<polygon points="0,0 108,0 133,38 0,38" fill="#3b82f6"/>
<!-- N diagonal stroke -->
<polygon points="108,0 133,0 98,134 73,134" fill="#3b82f6"/>
<!-- Bottom bar — right side of the N -->
<polygon points="73,134 220,134 220,172 73,172" fill="#3b82f6"/>
<!-- Small square — bottom-left anchor -->
<rect x="0" y="134" width="62" height="38" rx="5" fill="#3b82f6"/>
<!-- Panel block — top right (largest) -->
<rect x="152" y="0" width="68" height="30" rx="5" fill="#3b82f6"/>
<!-- Panel block — middle right -->
<rect x="140" y="38" width="80" height="22" rx="5" fill="#3b82f6"/>
</svg>

After

Width:  |  Height:  |  Size: 906 B

+4 -1
View File
@@ -3,7 +3,10 @@
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
<div class="col-span-2 md:col-span-1"> <div class="col-span-2 md:col-span-1">
<a href="/" class="text-lg font-bold text-white">Nix<span class="text-brand-500">Panel</span></a> <a href="/" class="flex items-center gap-2">
<img src="/assets/logo.svg" alt="NixPanel" class="h-6 w-auto" onerror="this.style.display='none'">
<span class="text-lg font-bold text-white">Nix<span class="text-brand-500">Panel</span></span>
</a>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">The hosting control panel<br>you actually want to use.</p> <p class="mt-2 text-sm text-gray-500 leading-relaxed">The hosting control panel<br>you actually want to use.</p>
</div> </div>
<div> <div>
+6
View File
@@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($pageTitle ?? 'NixPanel — Modern Web Hosting Control Panel') ?></title> <title><?= e($pageTitle ?? 'NixPanel — Modern Web Hosting Control Panel') ?></title>
<meta name="description" content="<?= e($pageDesc ?? 'NixPanel is a modern, open-source cPanel alternative. Manage your Linux server with NixServer and NixClient.') ?>"> <meta name="description" content="<?= e($pageDesc ?? 'NixPanel is a modern, open-source cPanel alternative. Manage your Linux server with NixServer and NixClient.') ?>">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/logo-192.png">
<link rel="apple-touch-icon" href="/assets/logo-192.png">
<meta name="theme-color" content="#0f172a">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+2 -1
View File
@@ -1,6 +1,7 @@
<header class="border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm sticky top-0 z-40"> <header class="border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm sticky top-0 z-40">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<a href="/" class="flex items-center gap-2"> <a href="/" class="flex items-center gap-2.5">
<img src="/assets/logo.svg" alt="NixPanel" class="h-7 w-auto" onerror="this.style.display='none'">
<span class="text-xl font-bold text-white">Nix<span class="text-brand-500">Panel</span></span> <span class="text-xl font-bold text-white">Nix<span class="text-brand-500">Panel</span></span>
</a> </a>