root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Moved buttons for more space

Browse Source
This commit is contained in:
root
2025-11-25 17:59:09 +01:00
parent 386393e507
commit 9717ab9575
2 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -7,9 +7,7 @@
<h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 tracking-tight mb-2">Spritesheet generator</h1>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
</div>
<dark-mode-toggle />
</div>
<nav class="flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3">
<nav class="flex flex-wrap items-center justify-center gap-2">
<a
href="https://gitea.adhd.sh/root/spritesheet-generator"
target="_blank"
@@ -46,7 +44,9 @@
<i class="fas fa-comment-dots"></i>
<span class="font-medium">Feedback</span>
</a>
<dark-mode-toggle />
</nav>
</div>
</header>
<main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">

7
src/components/utilities/DarkModeToggle.vue
View File

@@ -1,14 +1,11 @@
<template>
<button
@click="settingsStore.toggleDarkMode()"
class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
:class="settingsStore.darkMode ? 'bg-indigo-600 text-yellow-300' : 'bg-blue-500 text-white'"
class="inline-flex items-center gap-2 px-8 py-3 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
aria-label="Toggle dark mode"
data-rybbit-event="toggle-dark-mode"
>
<div class="relative w-6 h-6 flex items-center justify-center">
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
</div>
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
</button>
</template>