simplified css classes for cleanliness

This commit is contained in:
2021-01-09 17:15:52 +01:00
parent 59d5ad5bd3
commit 9684c22da3
13 changed files with 63 additions and 45 deletions

View File

@@ -32,10 +32,10 @@
}
</script>
<section class="min-h-screen bg-gray-50">
<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
<nav
class:hidden={!navOpen && mobile}
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform bg-white border-r w-60 md:translate-x-0">
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
<a href="/" class="flex items-center px-4 py-5">
<img
src="/lfk-logo.png"
@@ -45,8 +45,9 @@
</a>
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
<a
class:dark:bg-gray-900={$router.path === '/'}
class:bg-gray-100={$router.path === '/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@@ -59,6 +60,7 @@
<span>{$_('dashboard-title')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path.includes('/orgs/')}
class:bg-gray-100={$router.path.includes('/orgs/')}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/orgs/">
@@ -74,6 +76,7 @@
<span>{$_('orgs')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/users/'}
class:bg-gray-100={$router.path === '/users/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/users/">
@@ -89,8 +92,9 @@
<span>{$_('users')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/runners/'}
class:bg-gray-100={$router.path === '/runners/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/runners/">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -104,8 +108,9 @@
<span>{$_('runners')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/teams/'}
class:bg-gray-100={$router.path === '/teams/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/teams/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@@ -119,8 +124,9 @@
<span>{$_('teams')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/tracks/'}
class:bg-gray-100={$router.path === '/tracks/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/tracks/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@@ -134,6 +140,7 @@
<span>{$_('tracks')}</span>
</a>
<a
class:dark:bg-gray-900={activePage === 'blub'}
class:bg-gray-100={activePage === 'blub'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="#">
@@ -153,6 +160,7 @@
<div>
<div
tabindex="0"
class:dark:bg-gray-900={activePage === 'blub'}
class:bg-gray-100={activePage === 'blub'}
class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
role="button"
@@ -228,6 +236,7 @@
<span>{$_('changelog')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/settings/'}
class:bg-gray-100={$router.path === '/settings/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/settings/">
@@ -244,6 +253,7 @@
<span>{$_('settings')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/about/'}
class:bg-gray-100={$router.path === '/about/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/about/">
@@ -280,7 +290,7 @@
</nav>
<div class="ml-0 transition md:ml-60">
<header
class="flex items-center justify-between w-full px-4 bg-white border-b h-14">
class="flex items-center justify-between w-full px-4 border-b h-14">
<button
on:click={() => {
navOpen = !navOpen;