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> <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> <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
</div> </div>
<dark-mode-toggle /> <nav class="flex flex-wrap items-center justify-center gap-2">
</div>
<nav class="flex flex-wrap items-center justify-center sm:justify-start gap-2 sm:gap-3">
<a <a
href="https://gitea.adhd.sh/root/spritesheet-generator" href="https://gitea.adhd.sh/root/spritesheet-generator"
target="_blank" target="_blank"
@@ -46,7 +44,9 @@
<i class="fas fa-comment-dots"></i> <i class="fas fa-comment-dots"></i>
<span class="font-medium">Feedback</span> <span class="font-medium">Feedback</span>
</a> </a>
<dark-mode-toggle />
</nav> </nav>
</div>
</header> </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"> <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> <template>
<button <button
@click="settingsStore.toggleDarkMode()" @click="settingsStore.toggleDarkMode()"
class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group" 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"
:class="settingsStore.darkMode ? 'bg-indigo-600 text-yellow-300' : 'bg-blue-500 text-white'"
aria-label="Toggle dark mode" aria-label="Toggle dark mode"
data-rybbit-event="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'"></i>
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
</div>
</button> </button>
</template> </template>