🖼️ Navbar + Icon + Font

This commit is contained in:
Rico van Zelst
2023-10-26 16:57:28 +02:00
parent 23c31f88c5
commit c1194738c5
18 changed files with 986 additions and 1155 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 72 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

@@ -1,74 +1,29 @@
<header class="bg-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<div class="md:flex md:items-center md:gap-12">
<a class=" flex flex-row items-center" href="/">
<span class="sr-only">Home</span>
<x-logo class="h-12 w-auto mr-3" />
<p class="text-white font-semibold">Heimerdinger.lol</p>
</a>
</div>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
<a href="/" class="flex items-center">
<x-logo class="w-auto mr-2 transition-transform h-9 hover:scale-125" alt="Heimerdinger Logo" />
<span class="self-center text-2xl font-medium whitespace-nowrap dark:text-white">Heimerdinger.LoL</span>
<span class="sr-only">Home</span>
</a>
<button data-collapse-toggle="navbar-default" type="button"
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div id="navbar-default" class="hidden w-full md:block md:w-auto">
<ul
class="flex flex-col p-4 mt-4 font-medium border border-gray-100 rounded-lg md:p-0 bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#"
class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
</li>
<div class="hidden md:block">
<nav aria-label="Global">
<ul class="flex items-center gap-6 text-sm">
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
About
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Careers
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
History
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Services
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Projects
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
href="/">
Blog
</a>
</li>
</ul>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="block md:hidden">
<button
class="rounded bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</ul>
</div>
</div>
</header>
</nav>

View File

@@ -5,13 +5,23 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Heimerdinger.lol</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Styles -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/site.webmanifest">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#ff7c47">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<meta name="theme-color" content="#ff7c47">
<title>Heimerdinger.LoL</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
@vite('resources/css/app.css')
@vite('resources/js/app.js')
</head>
<body class="antialiased">
<body class="antialiased bg-gray-800 dark">
<x-navbar />
</body>