Improve header style on mobile

This commit is contained in:
Alessio Gravili 2022-02-20 19:57:08 +01:00 committed by MiniDigger | Martin
parent 7da56d4ad5
commit b649a8343d
3 changed files with 15 additions and 7 deletions

View File

@ -24,16 +24,16 @@ const navBarLinks = [
<template v-if="announcements">
<Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement" />
</template>
<header class="bg-white">
<div class="inner-header flex items-center max-w-1200px mx-auto justify-between">
<header class="bg-white dark:bg-headerDark">
<div class="inner-header flex items-center max-w-1200px mx-auto justify-between h-65px w-[calc(100%-40px)]">
<div class="logo-and-nav flex items-center">
<button class="flex mr-4">
<icon-mdi-menu style="font-size: 1.2em;"/>
</button>
<div class="site-logo mr-4 h-60px">
<img alt="Hangar Logo" src="/logo.svg" class="h-60px"/>
<div class="site-logo mr-4 h-60px flex items-center">
<img alt="Hangar Logo" src="/logo.svg" class="h-50px"/>
</div>
<nav class="flex gap-3">
<router-link
@ -47,8 +47,8 @@ const navBarLinks = [
</nav>
</div>
<div class="login-buttons flex gap-2 dark:bg-gray-500">
<button @click="theme.toggleDarkMode()">
<div class="login-buttons flex gap-2 items-center">
<button class="flex" @click="theme.toggleDarkMode()">
<icon-mdi-weather-night v-if="theme.darkMode" style="font-size: 1.2em;"></icon-mdi-weather-night>
<icon-mdi-white-balance-sunny v-else style="font-size: 1.2em;"></icon-mdi-white-balance-sunny>
</button>

View File

@ -19,10 +19,15 @@
body {
background-color: #f8faff;
color: #262626;
}
.dark body {
background-color: #181a1b;
color: #E0E6f0;
}
html {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
font-weight: 400;
color: #262626;
}

View File

@ -34,6 +34,9 @@ export default defineConfig({
},
},
},
colors: {
headerDark: '#111111',
},
},
},
});