arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-02-01 20:57:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix header position

Browse Source
This commit is contained in:
Arthur Danjou
2024-02-26 20:06:26 +01:00
parent 8e3cc29602
commit c69bcc3643
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/header/Header.vue
View File

@@ -1,12 +1,14 @@
<template> <template>
<header class="z-30 sticky top-0 left-0 flex justify-center w-full"> <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10"> <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 grid grid-cols-2 lg:grid-cols-3 md:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
<Logo /> <Logo />
<NavBar /> <div class="grow flex justify-center">
<ClientOnly fallback-tag="div" class="flex gap-2 items-center"> <NavBar />
</div>
<div class="flex justify-end gap-2 items-center">
<ThemePicker /> <ThemePicker />
<MobileNavBar /> <MobileNavBar />
</ClientOnly> </div>
</div> </div>
</header> </header>
</template> </template>

2
src/components/header/Logo.vue
View File

@@ -8,7 +8,7 @@ function getGroupColor() {
</script> </script>
<template> <template>
<NuxtLink to="/" class="flex gap-1 items-center p-2 rounded-xl group text-xl !bg-transparent !dark:bg-transparent"> <NuxtLink to="/" class="flex gap-1 items-center rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
<span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span> <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span>
<span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span> <span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span>
<span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span> <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span>