now favicons and fontawsoem support

This commit is contained in:
Mark Gregory
2026-06-10 13:19:18 +01:00
parent 9518ff889b
commit c9231b5062
35 changed files with 97 additions and 264 deletions
+9
View File
@@ -1,3 +1,4 @@
@import '@fortawesome/fontawesome-free/css/all.min.css';
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@@ -64,3 +65,11 @@ select:focus[data-flux-control] {
/* \[:where(&)\]:size-4 {
@apply size-4;
} */
@layer components {
.wms-brand-mark {
background: linear-gradient(135deg, #08142a 0%, #0d2a4a 56%, #0f766e 100%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 24px rgb(8 20 42 / 22%);
}
}
@@ -1,8 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
<path
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" {{ $attributes }} aria-hidden="true">
<defs>
<linearGradient id="wmsIconBg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#08142a" />
<stop offset="1" stop-color="#0d9488" />
</linearGradient>
</defs>
<rect width="64" height="64" rx="15" fill="url(#wmsIconBg)" />
<path d="M7 17 51 3 63 12 17 27Z" fill="#fff" opacity=".10" />
<path d="M12 27 32 15 52 27 49 31 32 21 15 31Z" fill="#22d3ee" />
<rect x="15" y="30" width="34" height="22" rx="3" fill="#0f4460" stroke="#e2fcff" stroke-width="1.8" />
<path d="M20 36h5v16h-5zM29.5 36h5v16h-5zM39 36h5v16h-5z" fill="#061d33" stroke="#38d5ef" stroke-width="1" />
<path d="M20 33 28.5 39 44 30" fill="none" stroke="#f6b323" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20 33 28.5 39 44 30" fill="none" stroke="#fff7d6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<text x="32" y="13" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="8" font-weight="800" fill="#f8fafc">MPBA</text>
</svg>

Before

Width:  |  Height:  |  Size: 714 B

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -3,15 +3,15 @@
])
@if($sidebar)
<flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
<flux:sidebar.brand name="Warehouse Management System" {{ $attributes }}>
<x-slot name="logo" class="wms-brand-mark flex aspect-square size-9 items-center justify-center rounded-xl text-white">
<x-app-logo-icon class="size-9" />
</x-slot>
</flux:sidebar.brand>
@else
<flux:brand name="Laravel Starter Kit" {{ $attributes }}>
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
<flux:brand name="Warehouse Management System" {{ $attributes }}>
<x-slot name="logo" class="wms-brand-mark flex aspect-square size-9 items-center justify-center rounded-xl text-white">
<x-app-logo-icon class="size-9" />
</x-slot>
</flux:brand>
@endif
+1 -1
View File
@@ -11,7 +11,7 @@
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
</a>
<div class="flex flex-col gap-6">
@@ -10,7 +10,7 @@
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
</a>
<div class="flex flex-col gap-6">
{{ $slot }}
+2 -2
View File
@@ -11,7 +11,7 @@
<span class="flex h-10 w-10 items-center justify-center rounded-md">
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
</span>
{{ config('app.name', 'Laravel') }}
{{ config('app.name', 'Warehouse Management System') }}
</a>
@php
@@ -32,7 +32,7 @@
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
<span class="sr-only">{{ config('app.name', 'Warehouse Management System') }}</span>
</a>
{{ $slot }}
</div>
+16 -5
View File
@@ -1,13 +1,24 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="application-name" content="{{ config('app.name', 'Warehouse Management System') }}" />
<meta name="apple-mobile-web-app-title" content="WMS" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#0d2a4a" />
<meta name="msapplication-TileColor" content="#08142a" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<title>
{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}
{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Warehouse Management System') : config('app.name', 'Warehouse Management System') }}
</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
@fonts
+2 -6
View File
@@ -4,11 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ __('Welcome') }} - {{ config('app.name', 'Laravel') }}</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>{{ __('Welcome') }} - {{ config('app.name', 'Warehouse Management System') }}</title>
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
@@ -62,7 +58,7 @@
<main class="flex max-w-[335px] w-full flex-col-reverse lg:max-w-4xl lg:flex-row">
<div class="text-[13px] leading-[20px] flex-1 p-6 pb-12 lg:p-20 bg-white dark:bg-[#161615] dark:text-[#EDEDEC] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] rounded-es-lg rounded-ee-lg lg:rounded-ss-lg lg:rounded-ee-none">
<h1 class="mb-1 font-medium">Let's get started</h1>
<p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">Laravel has an incredibly rich ecosystem. <br>We suggest starting with the following.</p>
<p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">Warehouse Management System provides a secure, responsive platform for warehouse operations. <br>We suggest starting with the following.</p>
<ul class="flex flex-col mb-4 lg:mb-6">
<li class="flex items-center gap-4 py-2 relative before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A] before:top-1/2 before:bottom-0 before:left-[0.4rem] before:absolute">
<span class="relative py-1 bg-white dark:bg-[#161615]">